css3论坛,css3学习参考手册

1、什么是CSS3

CSS(层叠样式表)它是用来控制页面的布局、字体、颜色、背景和其它效果，CSS3是最新版本，控制更加精细，更加高效，实现更复杂的效果。

2、CSS文件的命名方式  style.css

3、写CSS的常用三种方法

行内样式、内部样式、外链样式

CSS三种位置写法的优先级是：行内样式＞内部样式＞外部

控制越精细，优先级越高

4、CSS语法

h1,h2,h3{color:red;font-size:16px}

选择器种类：

1、类选择器 class  ----- .

2、ID选择器 id---------#

3、标签选择器 p{color:red}

4、派生选择器 li span{color:red}

5、属性选择器 a[target=_blank]{color:red}

CSS 样式(属性)：

1、宽度 width  高度：height  颜色 ： color

2、 背景 background(图片背景   颜色背景)

background:url(bg.jpg) repeat;

3、文字(大小：font-size  粗细：font-weight  字体：font-family )

4、段落(文本缩进 text-indent  文本对齐：text-align  垂直对齐：vertical-align 行高：line-height)

5、伪类：链接的四种状态：

a:link - 普通的、未被访问的链接

a:visited - 用户已访问的链接

a:hover - 鼠标指针位于链接的上方

a:active - 链接被点击的时刻

下划线：text-decoration

6、列表样式：list-style

li {list-style : url(example.gif) square inside}

7、表格 合并边框

table  { border-collapse:collapse;  }

8、盒模型

9、边框：border    内边距：padding   外边距：margin

圆角边框：border-radius

不让边框和内距占用尺寸：box-sizing:border-box;

10、浮动：float  清除浮动：clear  溢出：overflow  文字溢出：text-overflow:ellipsis(省略号)

11、定位：position  相对定位：relative    从不定位：absolute  参照物：拥有position属性的父标签 否则body

12、阴影：文字阴影：text-shadow  盒阴影：box-shadow

13、行内元素，块元素

浮动：float   转换：display

块元素：p\div\H     行内：a  span

区别：块元素独立一行；可以设置margin的上下左右值

行内元素不独立一行；只能设置margin的左右值；不能设置宽高

14、变形：transform的属性包括：rotate() / skew() / scale() / translate(,)

15、动画功能之transtions

transition: all 1s linear

16、animation复杂动画

.box { background-color: red;

animation: mycolor 4s linear infinite;//无限循环

//animation: mycolor 4s linear 1;//1次循环

}

@keyframes mycolor {

0% {   background-color: red;  }

40% {   background-color: darkblue;   }

70% {   background-color: yellow;   }

100% {   background-color: green;   }

}

17、不同浏览器的非兼容写法

谷歌：-webkit-   火狐：-moz-   IE：-ms-  欧朋:-o-

==============特殊选择器===========

18、E:nth-child(n)匹配其父元素的第n个子元素，第一个编号为1

p:nth-child(3) { color:#f00; }

E:nth-last-child(n)匹配其父元素的倒数第n个子元素，第一个编号为1

E:nth-child(odd) { color:#f00; }匹配父元素下奇数个子元素

E:nth-child(even) { color:#f00; }匹配父元素下偶数个子元素

E:nth-child(An+B)应用于倍数的循环

li:nth-child(4n+1) {background:red;}

li:nth-child(4n+2) {background:blue;}

li:nth-child(4n+3) {background:green;}

li:nth-child(4n+4)

19、E ~ F 匹配F元素，限E元素之后的同级F元素(E元素的子F元素不起作用)

p ~ ul { background:#ff0; }

20、E:first-line  匹配E元素的第一行

p:first-line { font-weight:bold; color;#600; }

E:first-letter匹配E元素的第一个字母

E:before在E元素之前插入生成的内容

E:after在E元素之后插入生成的内容

21：E[att^=”val”]属性att的值以”val”开头的元素

div[id^="nav"] { background:#ff0; }

E[att$=”val”]属性att的值以”val”结尾的元素

E[att*=”val”]属性att的值包含”val”字符串的元素

本课做的HTML页面：

 素材.rar (2.39 KB, 下载次数: 2655)