零基础建站培训介绍

当前位置:

css3学习参考手册

1、什么是CSS3

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

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

3、写CSS的常用三种方法
行内样式、内部样式、外链样式
<link rel="stylesheet" href="style.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) 

相关阅读:

Bootstrap学习手册

CSS3常用属性手册

上一课: 下一课:

发表评论

电子邮件地址不会被公开。 必填项已用*标注