css3样式总结
1、简介：css用于控制网页的样式和布局，CSS3 完全向后兼容，因此您不必改变现有的设计。
2、CSS3 模块
CSS3 被划分为模块。
其中最重要的 CSS3 模块包括：
•选择器
•框模型
•背景和边框
•文本效果
•2D/3D 转换
•动画
•多列布局
•用户界面
3、css3元素选择器在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。
"CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。）
选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素。 1 #id #firstname 选择 id="firstname" 的所有元素。 1 * * 选择所有元素。 2 element p 选择所有 <p> 元素。 1 element,element div,p 选择所有 <div> 元素和所有 <p> 元素。 1 element element div p 选择 <div> 元素内部的所有 <p> 元素。 1 element>element div>p 选择父元素为 <div> 元素的所有 <p> 元素。 2 element+element div+p 选择紧接在 <div> 元素之后的所有 <p> 元素。 2 [attribute] [target] 选择带有 target 属性所有元素。 2 [attribute=value] [target=_blank] 选择 target="_blank" 的所有元素。 2 [attribute~=value] [title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。 2 [attribute|=value] [lang|=en] 选择 lang 属性值以 "en" 开头的所有元素。 2 :link a:link 选择所有未被访问的链接。 1 :visited a:visited 选择所有已被访问的链接。 1 :active a:active 选择活动链接。 1 :hover a:hover 选择鼠标指针位于其上的链接。 1 :focus input:focus 选择获得焦点的 input 元素。 2 :first-letter p:first-letter 选择每个 <p> 元素的首字母。 1 :first-line p:first-line 选择每个 <p> 元素的首行。 1 :first-child p:first-child 选择属于父元素的第一个子元素的每个 <p> 元素。 2 :before p:before 在每个 <p> 元素的内容之前插入内容。 2 :after p:after 在每个 <p> 元素的内容之后插入内容。 2 :lang(language) p:lang(it) 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。 2 element1~element2 p~ul 选择前面有 <p> 元素的每个 <ul> 元素。 3 [attribute^=value] a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素。 3 [attribute$=value] a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。 3 [attribute*=value] a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。 3 :first-of-type p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 3 :last-of-type p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 3 :only-of-type p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 3 :only-child p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。 3 :nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。 3 :nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始计数。 3 :nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 3 :nth-last-of-type(n) p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。 3 :last-child p:last-child 选择属于其父元素最后一个子元素每个 <p> 元素。 3 :root :root 选择文档的根元素。 3 :empty p:empty 选择没有子元素的每个 <p> 元素（包括文本节点）。 3 :target #news:target 选择当前活动的 #news 元素。 3 :enabled input:enabled 选择每个启用的 <input> 元素。 3 :disabled input:disabled 选择每个禁用的 <input> 元素 3 :checked input:checked 选择每个被选中的 <input> 元素。 3 :not(selector) :not(p) 选择非 <p> 元素的每个元素。 3 ::selection ::selection 选择被用户选取的元素部分。 3
4、HTML 和 CSS 颜色规范中定义了 147 中颜色名（17 种标准颜色加 130 种其他颜色）。 3.1提示：17 种标准色是 aqua, black, blue, fuchsia, gray,green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow。 浅绿色，黑色，蓝色，紫红色，灰色，绿色，石灰，栗色，海军蓝，橄榄色，橙色，紫色，红色，银色，蓝绿色，白色，黄色。 3.2CSS 合法颜色值 •十六进制色#1129af；常用 •RGB 颜色rgb(0-255, 0-255, 0-255)常用 •RGBA 颜色rgba(red, green, blue, alpha)。alpha设置通道透明度，RGBA 颜色值得到以下浏览器的支持：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。 •HSL 颜色 •HSLA 颜色 •预定义/跨浏览器颜色名 5、div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。 与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。 6、标准浏览器下 不透明度opacity： 0-1; 其中IE私有(IE浏览器设置透明度使用此方式) filter：alpha（opacity=0-100）； 7、定位position 7.1绝对定位 position: absolute; 设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位， 包含块可能是文档中的另一个元素或者是初始包含块。 元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。 元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 7.2相对定位 position: relative; CSS 相对定位相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位， 它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置， 让这个元素“相对于”它的起点进行移动。 7.3浮动float:top/right/bottom/left; clear:both清除浮动 7.4固定定位position：fixed;如左右侧广告栏。固定，不随滚动条滚动而滚动 8、html文档的普通流 HTML元素可分为两大类;内联元素和块级元素.二者在显示方式上是不同的. 9、多次多次多次请求图片会给后台服务器带来很大的压力， 为了减少网页http的请求（使用css sprites，简称css 精灵） css sprites原理：把网页一些背景图片整合到一张图片文件中，在利用background的属性精确定位 优点：使用css sprites能很好地减少网页http的请求，从而提高页面性能。 缺点：合成之路艰辛 9.1background-position： 上下px，左右px； 10、元素进入/离开可以直接使用css实现如.container:hover {...}，也可以使用js（jq）实现 11、属性选择器：元素[属性=值] {...}如a[src="images"] {} E[attr = "value"]指定属性名，并指定了该属性的属性值 E[attr ~= "value"]指定属性名，并具有属性值，此属性是一个词列表，并且以空格隔开 E[attr ^= "value"]指定属性名，并且有属性值，属性值以value开头12、border-radius:25px;设置圆角；box-shadow: 10px 10px 5px #888888;设置阴影
13、background-origin 属性
background-origin 属性规定背景图片的定位区域。
背景图片可以放置于 content-box、padding-box 或 border-box 区域。
14、CSS3 文本效果
hanging-punctuation 规定标点字符是否位于线框之外。 3 punctuation-trim 规定是否对标点字符进行修剪。 3 text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。 3 text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。 3 text-justify 规定当 text-align 设置为 "justify" 时所使用的对齐方法。 3 text-outline 规定文本的轮廓。 3 text-overflow 规定当文本溢出包含元素时发生的事情。 3 text-shadow 向文本添加阴影。 3 text-wrap 规定文本的换行规则。 3 word-break 规定非中日韩文本的换行规则。 3 word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。 3
实例1
允许对长单词进行拆分，并换行到下一行：
p {word-wrap:break-word;}实例2 向标题添加阴影 h1 {text-shadow: 5px 5px 5px #FF0000;}15、css字体
通过css3，web设计师再也不必被迫使用“web-safe”字体了
CSS3 @font-face 规则
在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。
通过 CSS3，web 设计师可以使用他们喜欢的任意字体。
当您您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。
您“自己的”的字体是在 CSS3 @font-face 规则中定义的。
例子： 样式css自定义字体
<style> @font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */ } div { font-family:myFirstFont; } </style>CSS3 字体描述符
下面的表格列出了能够在 @font-face 规则中定义的所有字体描述符：
描述符 值 描述 font-family name 必需。规定字体的名称。 src URL 必需。定义字体文件的 URL。 font-stretch
- normal
- condensed
- ultra-condensed
- extra-condensed
- semi-condensed
- expanded
- semi-expanded
- extra-expanded
- ultra-expanded
可选。定义如何拉伸字体。默认是 "normal"。 font-style
- ormal
- italic
- oblique
可选。定义字体的样式。默认是 "normal"。 font-weight
- normal
- bold
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
可选。定义字体的粗细。默认是 "normal"。 unicode-range unicode-range 可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。