CSS3 的新功能、优先级、通用属性和用例

CSS 是一种级联样式表。创建网页时使用级联样式表技术可以让您更精确地控制布局、字体、颜色、背景和其他页面效果。下面传智播客将为大家讲解CSS3的新特性、常用属性以及应用案例。

1。 CSS3新功能和常用属性

1. CSS3解读—css3与css2的区别

css3=css2的扩展和优化

2。 CSS3解读——CSS3新语法

l 伪类选择器

l 选择器：first-child 第一项

l 选择器：last-child ♷l 最后一项 (n) 项目 li: anak -children(2) { }

l 选择器:children(2n+1) 奇数项

l 选择器:children(2n) 偶数项

l 选择器:nth-child(奇数) 偶数项

3。 CSS3解读—css3新属性

注：必须是html5

网站地址css3

l文字-shadow：距离模糊垂直；

水平正值到负值从右到左

垂直 正值向下 负值向上

如果设置多个阴影，请用逗号分隔

l square-shadow：水平模糊与内部的垂直距离阴影颜色模糊/外

长焦距模糊，值越大阴影范围越大，反之越小

l必须是ie9+

属性值为：

l border- radius: 左上、右上、右下、左下

设置容器是否有圆形效果

l background-size: number-width;高度值比例变化

背景尺寸：高度值宽度值；

注：基于背景图片

Css3定位解读

页面布局可以使用浮动，不同位置

static：静态位置，如不设置默认 fixed

position：固定；固定在浏览器窗口中的某个位置

设置后，高电平

不占据原来的位置

lrelative：相对位置，设置

为绝对位置♶完成后 特点：占用空间，比普通元素高的层次，本身作为参考点

l 绝对：绝对位置

不占空间，高层次

与位置坐标结合，就是看对于（元素的父元素，或祖先元素），如果有位置，

父元素或祖先元素通常设置为相对位置

父元素设置为相对位置 position:relative

绝对定位绝对定位；

效果如下

组合位置的坐标一般在容器中

l top top right top l Bottom Bottom

左

II。 应用案例

1. Css3 解读—首页和论坛入口页的实现

扩展

CSS3 解读—优先级

id> class > 标签 0 后代复合选择器 越精确写作，更推荐

.one .two ul li 22

#one ul li 1 02

#one #one ul li 3 a ====113

继承