CSS总结(1)
CSS
1.作用:为了弥补HTML标签属性的不足,作为HTML标签属性的补充,可以作用于任何HTML标签属性。
2.选择符:#Id具有唯一性只作用于这一个元素;.class在HTML中定义一些元素为一组,从而通过class定义的CSS属性作用于这一组;还可以通过元素的名称来定义CSS,作用于整个HTML中的这些元素。
*CSS具有就近原则,谁离元素近,谁对元素起作用。
3.语法:选择符{属性:属性值;....;属性:属性值;}
1)平级:根据","来分割选择符,那么选择符后面的CSS作用于前面的所有的选择符。*可以把共同的属性抽象出来,作为公用。
2)层级
(1)要求:html元素必须就有层级关系
(2)作用:把共同的属性抽象出来,作为公用,同时继承
.a {}
.a .b{}//a里面的b
.a .b .c{}//a里面的b里面的c。b将会继承a中的属性,c将会继承b中的属性
#a {}
#a #b{}//首先继承#a,然后应用#b
#a #b #c{}//首先继承#a,然后继承#b,结果#c
3)组合语法: 通过HTML元素的class属性指定多个类别。
.a {}
.b {}
<div class = "a b"></div>//运用了a和b的所有属性
4)属性
(1) font:复合属性,修饰字体
font-style|font-variant: normal|small-caps(小型的大写字母字体)|font-weight|font-size|line-height|font-family
text-decoration(用来装饰文本)|text-transform(英文的转换)|letter-spacing(字体之间的间距)|text-align(文本对齐方式)
(2)背景属性: background-color(背景颜色)|background-image(背景图片)|background-position(背景图片位置)
*可以利用background-position来切割图片,这个技术被称为CSS Sprite
(3)盒子模型:HTML中块级元素都有盒子模型
块级元的素特征是长度和父容器一样,例如div;内敛元素的特征是长度和内容的长度一样, 内敛元素width和height不起作用,例如span。
*块级元素和内敛元素在一定情况下可以相互转换。
外补丁:margin:元素和元素之间的距离,分上下左右;若有四个属性值,按顺时针读取;若有两个,第一个代表上下,第二个代表左右。margin:1px auto //使其居中
内补丁:padding:内容和元素之间的距离,分为上下左右。
定位:position:absolute;是元素脱离文档流,使用坐标来定位。
left:离左边原点的距离。
top:离上边原点的距离。
实际的宽度==2padding+2bordder+内容宽度
边框:可以定义块级元素的边框的样式,颜色,大小,还可以单定义上下左右边框。
(4)float:让块级元素div在父容器中可以左右浮动,从而脱离文档流,而后面的元素会占用移动元素原来的位置。移动的元素碰到父容器的边框停止浮动。
要求:*width和height必有有一个(一般情况下使用width)。能够浮动的元素是块级元素。
*要浮动的元素必有一个父容器,只能在父容器中浮动。
*要浮动的元素宽度的和不能大于等于父容器。
*要浮动的元素都必须有float属性。
*使用clear:both来关闭非流式,使得后续的元素还按照文档流的方式进行布局。
(5)list:list-style:none(不用任何样式修饰ul);list-style-image:url(url)(自定义图片修饰ul);list-style-type(选择类型修饰)
5)网页的布局方式
(1)流式模式(默认的布局方式):谁写在前先显示谁。
(2)非流式模式:可以按照坐标来定位元素的位置。
6技巧
遮罩
-moz-opacity:0.1;/*Firefox*/
opacity:0.1;/*Opera*/
filter:alpha(opacity=10); /*IE*/