CSS即层叠样式表(Cascading StyleSheet)
CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的
模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等
CSS 用于控制网页的样式和布局。
CSS3 是最新的 CSS 标准。
CSS3 完全向后兼容,因此不必改变现有的设计。浏览器通常支持 CSS2。
CSS3把很多以前需要使用图片和脚本来实现的效果,只需要短短几行代码就能搞定。比如圆角,图片边框,文字阴影和盒阴影、渐变等。CSS3不仅能简化前端开发工作人员的设计过程,还能加快页面载入速度。
Css3选择器
a. 属性选择器 e[type=“text”] {} e[type*=“”] e[type^=“”] e[type$=“”]
b. 伪类选择器
(1)结构性伪类选择器 div:first-child div:last-child div:nth-child(even)
(2)目标伪类选择器 p:target{}
(3)UI 元素状态伪类选择器 :enabled :disabled :checked ::selection
(4)语言伪类选择器 :lang(mingzi){}
(5)否定伪类选择器 div :not(标签)
(6)动态伪类选择器 input:focus{}
属性选择器
在css3中,增加了如下所示的四个属性选择器,使得属性选择器有了通配符的概念。
浏览器支持:
只有IE6不支持CSS的属性选择器。IE7和IE8、Opera、Webkit核心和Gecko核心的浏览器都支持。所以在你样式中使用属性选择器是比较安全的
伪元素(伪对象)选择器
1):first-line伪元素选择器
first-line伪元素选择器用于向某个元素中的第一行文字使用样式。
2):first-letter伪元素选择器
first-letter伪元素选择器用于向某个元素中的文字的首字母(欧美文字)或第一个字(中文或者是日文等汉字)使用样式。
3):before伪元素选择器
before伪元素选择器用于在某个元素之前插入一些内容。
4):after伪元素选择器
after伪元素选择器用于在某个元素之后插入内容。
结构性伪类选择器
目标伪类选择器
标签:target:匹配URl中锚点指定的元素,用此选择器可以给锚点指定的元素加样式
语法: Div:target{属性:属性值;}
UI元素状态伪类选择器
这些选择器的共同特征是:指定的样式只有当元素处于某种状态下时才起作用,在默认状态下不起作用
语言伪类选择器
语言伪类选择器允许为不同的语言定义特殊的规则,这在多语言版本的网站用起来是特别的方便。
E:lang(language)表示选择匹配E的所有元素,且匹配元素指定了lang属性,而且其值为language。
否定伪类选择器
动态伪类选择器
a:link{ color: #ff6600 } /* 未被访问的链接 /
a:visited{ color: #87b291 } / 已被访问的链接 /
a:hover{ color: #6535b2 } / 鼠标指针移动到链接上 /
a:active{ color: #55b28e } / 正在被点击的链接 */
a:active用于用户点击元素那一下的效果(正发生在点的那一下,松开鼠标左键此动作也就完成了) input:focus用于元素成为焦点,这个经常用在表单元素上。
**提示:**在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
**提示:**在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
层级选择器
Css3优雅降级和渐进增强问题
渐进增强(Progressive Enhancement):一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
优雅降级(Graceful Degradation):一开始就构建站点的完整功能,然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用,然后逐步针对各大浏览器进行 hack 的修改使其可以在低版本浏览器上正常浏览。
Css3新增的部分属性
Css3新增的关于文本的属性
文本阴影:text-shadow: h-shadow v-shadow blur color
h-shadow 必需。水平阴影的位置。允许负值;
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。
扩展:字体图标的使用
阿里文字图标的加载步骤
1.先从阿里图标库下载图标;
2.把文件放到站点中,可以建一个font文件夹
3.把iconfont.css文件导入到html文件中;
4.在html文档中写一个内联元素如span标签,加class=“iconfont 图标对应class名”
Css3新增的关于背景的属性
背景裁切:Background-clip; 用来规定背景的绘制区域(对于背景颜色)
背景原点:Background-origin;用来规定 background-position 属性相对于什么位置来定位(对于背景图片)
背景尺寸:Background-size; 用来规定背景图像的尺寸
Css3新增的关于边框的属性
Border-color 边框颜色 border:2px solid #f00;
table {border-color: red} - 所有的边框都是红色。
table {border-color: red green} - 上边框和下边框是红色,而左边框和右边框是绿色。
table {border-color: red green blue}- 上边框是红色,左边框和右边框是绿色,下是蓝色
table {border-color: red green blue yellow} - 上边框是红色,右边框是绿色,下边框是蓝色,左边框是黄色。
Border-width: 边框粗细;
Border-style: 边框线性
Border-radius:圆角边框
Border-radius:5px;
Border-radius:50%;
Border-radius:20px 20px;
Border-radius:40px 0px 30px ;
border-radius:5px 15px 20px 25px ;
border-radius:20px / 10px ; (扩展)
透明色:transparent
Box-shadow 盒子阴影
图片边框:border-image;