零基础建站培训介绍

当前位置:

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) 

上一课: 下一课:

发表评论

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

相关教程

  • CSS3 text-shadow 属性是CSS3中设置文字阴影的属性,通过这个属性可以设置文字的各个角度的阴影效果。下面介绍一下CSS3 text-shadow 属性的使用方法。
  • 什么是css3-gird布局格式 (141901 次浏览)
    CSS3-Gird布局格式css3-gird布局格式应用很广泛,最简单的例子就是内容的分栏显示。对于布局复杂的三栏网页来说,如果使用CSS3Grid布局的话,我们
  • CSS3新增选择器有哪些 图文教程 (144182 次浏览)
    css1-css3提供特别丰富的选择器,但是由于某些选择器被各个浏览器支持的情况不一样,所以很多选择器在实际css开发中很少用到。(相关教程:CSS3视频教
  • 学习html有什么用 (120079 次浏览)
    在学习建网站过程中,需要对HTML进行学习,网站的网页就是由大量的HTML代码组成。对于我们学做网站的学员来说,如果你要编辑网页,当然是需要学习HTML
  • 课程目录 网站制作流程是什么(1214178 次学习) 什么是域名(1169782 次学习) 什么是网站空间(1159919 次学习) 什么是网站备案(1154595
  • 一、SEO新手该从哪些方面入手去学习如今,越来越多的公司开始重视网络营销,也从另一面催生了SEO这个职业,并且希望从事该职业的人也很多,那么,作
  • css3学习参考手册 图文教程附件下载 (14217 次浏览)
    1、什么是CSS3CSS(层叠样式表)它是用来控制页面的布局、字体、颜色、背景和其它效果,CSS3是最新版本,控制更加精细,更加高效,实现更复杂的效果
  • CSS3常用属性手册 图文教程 (147461 次浏览)
    CSS3新增选择器有哪些:https://www.xuewangzhan.net/baike/css3-232.html  CSS3中的transform 变形功能:transform:ro
  • Bootstrap学习手册 图文教程 (17043 次浏览)
    1、Bootstrap的下载:http://v3.bootcss.com/getting-started/2、Bootstrap的引入:第一种:通过CDN引入[cce]<!-- 最新版本的 Boo