css知识点整理
text-indent:;首行缩进
letter-spacing 和text-align:justify 是两个冲突的属
性，不能同时使用，text-align:justify 是设置内容根据
宽度自动调整字间距，使各行的长度恰好相等，实现文本两
端对齐效果，而 letter-spacing 是指定一个固定的字间距
，比如字与字之间相隔 8px，
border-spacing 属性用于设置相邻单元格的边框间的距离
background-attachment:fixed;//背景图片固定
background-position:right top;//定位背景图片
background:#5d9ab2 url('img_tree.png') no-repeat top
left;
当使用简写属性时，属性值的顺序为：:
background-color
background-image
background-repeat
background-attachment
background-position
外部样式表
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
text-align 属性是规定元素中的文本的水平对
齐方式
text-align:justify;//两端对齐
test-align：left;//左对齐
letter-spacing收缩字符间距就可以了
text-decoration属性主要是用来删除链接的下划线
h1 {text-decoration:overline;}//显示上下划线
h2 {text-decoration:line-through;}//显示中间下划线
h3 {text-decoration:underline;}//显示下下划线
文本转换
text-transform:uppercase;//变成大写
text-transform:lowercase;//变成小写
text-transform:capitalize;//首字母变大写
direction:rtl;文本方向
text-shadow:2px 2px #FF0000;
<p class="normal">这是一个段落,正常。</p>
<p class="italic">这是一个段落,斜体。</p>
<p class="oblique">这是一个段落,斜体。</p>
a:link {color:#FF0000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
border-collapse//显示一个表的单个边框，表格的两个边
框合并为一条
td
{
padding:15px;
}
//padding填充表格
dashed: 定义一个虚线框
dotted: dotted:定义一个点线框
border-style:dotted solid;等于
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
p {border-style:solid;}//实线边框
p.none {border-bottom-style:none;}//没有下边框
p.dotted {border-bottom-style:dotted;}//点状
p.dashed {border-bottom-style:dashed;}//虚线
p.solid {border-bottom-style:solid;}//实线下边框
p.double {border-bottom-style:double;}//双线
p.groove {border-bottom-style:groove;}凹槽
p.ridge {border-bottom-style:ridge;}垄状
p.inset {border-bottom-style:inset;}嵌入
p.outset {border-bottom-style:outset;外凸
padding四个值时是：上，右，下，左
padding三个值：上，左，下
padding两个值：上，左
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需
占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐
藏了，但仍然会影响布局。
div>p
{
background-color:yellow;
}选取了div后面的所有直接子元素
相邻兄弟选择器（Adjacent sibling selector）可选择紧
接在另一元素后的元素，且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素，而且二者有相同
的父元素，可以使用相邻兄弟选择器
div+p
{
background-color:yellow;
}
div~p
{
background-color:yellow;
}
普通兄弟选择器选取所有指定元素的相邻兄弟元素。
a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html">CSS Syntax</a>
如果在上面的例子的链接已被访问，它会显示为红色。
您可以使用 :first-child 伪类来选择元素的第一个子元素
例：p:first-child{
color:blue;
}
//匹配所有a元素中第一个i元素
p > i:first-child
{
color:blue;
}
//匹配所有作为第一个子元素的<p>元素的所有<>元素
p:first-child i
{
color:blue;
}
:lang 伪类使你有能力为不同的语言定义特殊的规则
text-transform:uppercase;//文字变为大写字母
display:inline;就可以把列变为行
块级元素总是独自占一行,前面和后面就好像有个换行符,内
联元素总是和其它的内联兄弟占一行
行内元素的padding元素,只有padding-left和padding-
right有效果,上下不识别；
margin属性和padding属性一样,对于行内元素只有左右生效
,其他的没有作用的.（对于行内元素padding只对左右有效
。对上下无效，变为块级元素上下左右都有效）
能设置宽和高的就是块级元素
对行内元素，需要注意如下
设置宽度width 无效。
设置高度height 无效，可以通过line-height来设置。
设置margin 只有左右margin有效，上下无效。
<meta name="viewport" content="width=device-width,
initial-scale=1"/>
手机端自适应
img
{
opacity:0.4;
filter:alpha(opacity=40); /* IE8 及其更早版本 */
}
background:url(img_navsprites.gif) 0 0; - 定义背景
图像和它的位置（左0px，顶部0px）
设置padding 只有左右padding有效，上下则无效。注意元
素范围是增大了，但是对元素周围的内容是没影响的。
p
{
white-space:nowrap;
}//禁用文字换行
智能推荐
注意！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。