1属性选择器
E[att]{} 对标签值为E,属性是att的所有标签进行设置.注:此处的E,可以是空,可以是标签,也可以是确定标签的选择器如 .class值,#id值.而att是标签中的属性,一般是人为添加的没有什么特殊意义的,主要起识别作用.
E[att=val]{} 对标签值为E,属性是att,且其值是val的所有标签进行设置
2选择器的优先级
Css有继承设置,但是也有覆盖.所以出现了选择器的优先级.
注:有一些属性不能被继承,如:border,margin,padding,background等
Css的优先级基本规则是:1 行内式最高,2 id选择器 3 class 选择器 4 标签选择器
这些规则将数字符串逐位相加,就得到最终的权重,然后执行权重最大的,最后从上到下顺序执行
注:有!important声明的规则高于一切,如
Div{
Color:red!important
}即div标签中,字体是红色
3 css中对文本的操作
通过color对文本中的文字颜色进行设置
通过text-align对文本的水平位置进行设置,left是居左,right居右,center居中,justify实现两端对齐.注:它们的位置是相当于它们所在框的
4 css对背景的设置
通过backgroud设置背景
Background-color 设置背景颜色,background-image:url(‘’)设置背景图片,图片的地址放url中,Background-repeat 图片平铺满,background-repeat:no-repeat 图片不平铺满所在框,background:repeat-x,把所在框的横向铺满,repeat-y纵向铺满
Background-position背景图片相对于框中的位置,background-position:right top 表示图片的位置是在右上角,还可以是background-position:20px 10px,图片的位置在离左边框20px,离上边框10px的位置.
注:它们可以简写:background:#ffffff url(‘1.png’) no-repeat right top 表示背景颜色是红色,背景图片是1.png 图片没有平铺满,只有一个图片,图片在所在框的右上角
5 display属性 它的作用是对标签是否显示和对块级与内联的进行转换,
Display:none 隐藏某个元素,且让隐藏的元素不占任何空间
Display:block 把内联转换成块级,让它独占一行
Display:inline 把块级转换成内联,让它不用独占一行
Display:inline-block ,让标签具有能设置范围,但不独占一行
注:块级标签独占一行,同时能设置范围,即宽和高.内联标签不独占一行,但是不能设置范围
Display属性最重要的是Display:none和Display:inline-block,其中inline-block可做列表布局,其中的类似于图片间的间隙小bug可以通过如下设置解决:
Div{
Border:3px dashed; 边框3px粗,是实线
Word-spacing:-5px; 调整图片之间的距离
}