css3样式总结

CSS3基础

CSS3概念和优势

概念：CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的，这些模块有盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等

优点：完全向后兼容

渐进增强和优雅降级

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

CSS3选择器

层级选择器

子代选择器：选择符1>选择符2，1为2的父级元素，2为1的亲儿子，如果有多个亲儿子，可以一同选中

兄弟选择器：①选择符1+选择符2：选择符1后面的第一个兄弟选择符2；②选择符1~选择符2：选择符1后面的所有兄弟选择符2；

属性选择器

1、E[atter]:只使用属性名，但未确定任何属性值

2、E[atter="value"]:指定属性名，并指定了该属性的属性值

3、E[atter~="value"]:指定属性名，并具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表包含了一个value词，而且前面的"~"不能不写

扩展知识：

1、E[atter^="value"]:指定了属性名，并有属性值，属性值是以value开头的

2、E[atter$="value"]:指定了属性名，并有属性值，属性值是以value结束的

3、E[atter*="value"]:指定了属性名，并有属性值，属性值包含了value

举例：

• [class]：表示选中所有具有class属性的元素，而不管class的属性值是否相同；
• [class="box"]：表示选中class的属性值是box的元素；
• div[class]：表示div标签中具有class属性的所有元素；
• [class^="b"]：表示选中class的属性值以b字母开头的元素；
• [class$="b"]：表示选中class的属性值以b字母结束的元素；
• [class*="b"]：表示选中class的属性值包含b字母的元素。

结构伪类选择器

X:first-child 匹配子集的第一个X元素

X:first-last 匹配子集的最后一个X元素

X:nth-child(n) 用于匹配索引值为n的X子元素，索引值从一开始，即第n个X元素

• X:nth-child(2n/even) 用于匹配索引值为偶数的X子元素
• X:nth-child(2n+1/odd) 用于匹配索引值为奇数的X子元素

X:only-child 只有一个X子元素的父元素，比如此代码匹配的是div下只有一个p的，有多个p或不包含p的div是匹配不到的

X:root 匹配文档的根元素，在HTML中，根元素永远是html

X:empty 匹配没有任何子元素(包含空格换行等也匹配不到)的元素X

目标伪类选择器

E:target  选择匹配E的所有元素，且匹配元素被相关URL指向，通常搭配锚点使用

锚点的作用：实现页面不同区域的跳转，使用a链接<a href="#锚点名字"></a> <div id="锚点名字"></div>

UI状态伪类选择器

E:enabled 匹配所有用户界面(form表单)中处于可用状态的E元素

E:disenabled 匹配所有用户界面(form表单)中处于不可用状态的E元素

E:checked 匹配所有用户界面(form表单)中处于选中状态的E元素

E:selection 匹配E元素中被用户选中或处于高亮状态的部分

E:focus 匹配E元素中被对焦

小知识：浏览器默认生成的表单样式去除办法是appearance:none;

否定伪类选择器

E:not(s) 匹配所有，但不匹配选择符s的E元素(IE6-8浏览器不支持)

动态伪类选择器

 

E:link  链接伪类选择器，选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过，常用于链接锚点上

E:visited  链接伪类选择器，选择匹配的E元素，而且匹配元素被定义了超链接并已经被访问过，常用于链接锚点上

E:active   用户行为选择器，选择匹配的E元素，而且匹配元素被激活，常用于链接锚点和按钮上

E:hover   用户行为选择器，选择匹配的E元素，而且用户鼠标停留在元素E上，IE6及以下浏览器仅支持a:hover

CSS3文本属性

文本阴影

text-shadow:-10px -10px 1px red;

-10px: 水平方向位移，阴影向左移动10px，若为正值则是向右移动

-10px: 垂直方向位移，阴影向上移动10px，若为正值则是向下移动

1px: 阴影模糊程度，一般超过3就看不清了

red: 阴影颜色

说明：可设置多个阴影，两个阴影写在同一个文本阴影属性下，否则会被覆盖，如text-shadow:-10px -10px 1px red , 10px 10px 1px yellow;

盒子阴影

box-shadow: 10px 10px 5px 4px #888888 inset

10px h-shadow 水平阴影的位置，允许负值，必须加

10px v-shadow 垂直阴影的位置，允许负值，必须加

5px blur 模糊距离，可选

4px spread 阴影大小，位于颜色属性之前，可选

#888888 color 阴影颜色，可选

inset 设置内层阴影，可选

圆角边框

border-radius：属性值

可以为px值或百分比(百分比在长方形盒子中不太适用)

属性值只有一个V1，四个角一样

属性值有两个V1 V2，左上右下，左下右上  一致

属性值有三个V1 V2 V3，左上，左下右上，右下  一致

属性值有四个V1 V2 V3 V4，顺时针

单独设置时(先top/bottom后left/right)

• 左上  border-top-left-radius:10px
• 左下  border-bottom-left-radius:10px
• 右上  border-top-right-radius:10px
• 右下  border-bottom-right-radius:10px

当属性值为 V1/V2 时，表示  水平V1/垂直V2 四个角一样

当属性值为 V1 V2 V3 V4/V5 V6 V7 V8 时，设置四个角的水平/垂直圆角

当表示水平圆角和垂直圆角不一样时，仅支持写在一起，不能分别设置左上，坐下等单独属性

字体引入

语法：

<style>
    @font-face{
       font-family: 你起的字体名称;
       src:url(字体路径，可以为绝对路径