什么是CSS？
- CSS是Cascading Style Sheet（层叠样式表）的缩写。
- 是一种用于（增强）控制网页样式并允许将样式信息与网页内容分离的标记性语言。
- CSS不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)。
CSS的语法
Selector{property:value}
如何将CSS加入网页？
有三种方式可以将样式表加入网页。最接近目标的样式定义优先权越高，高优先权样式将集成低优先权样式的未重叠定义但覆盖重叠的定义。
例外的情形请参考!important声明部分[该属性可以提升指定样式规则的应用优先权]。
第一种方式：内联方式Inline Styles
内联定义方式就是在对象的标记内使用对象的style属性定义适用它的样式表属性。
例如：<p style="color:green">该样式为内联方式，显示的字体颜色为绿色</p>
第二种方式：内部样式块对象Embedding a Style Block
内部样式块对象方式是在HTML文档的<head>标记中插入一个<style>块对象。
例如：<head>
<style>
body{background:Red;color:Yellow;}
p{front-size:12px;}
</style>
</head>
<body><p>Hello the world!</p></body>
第三种样式：外部样式表Linking to a Style Sheet
外部样式表方式是先建立外部样式表文件*.css, 之后再使用的HTML的Link对象引用到该样式表文件。
<link rel="stylesheet" href="*.css">
CSS Properties（属性）
定位Positioning
布局Layout
弹性盒模型Flexible Box
尺寸Dimension
外补白Margin
内补白Padding
边框Border
背景Background
颜色Color
字体Font
文本Text
列表List
表格Table
内容Content
用户界面User Interface
多栏Multi-column
2D变换（2D Transform）
过渡Transition
动画Animation
打印Printing
媒体查询Media Queries
Only IE
Only Firefox
选择符 Selectors
元素选择符Element Selectors
*
E
E#id
E.class
关系选择符Relationship Selector
E F
E>F
E+F
E~F
属性选择符Attribute Selectors
E[att]
E[att="val"]
E[att^="val"]
E[att$="val"]
E[att*="val"]
E[att|="val"]
伪类选择符Pseudo-Classes Selectors
E:link
E:visited
E:hover
E:active
E:focus
E:lang()
E:not()
E:root
E:first-child
E:last-child
E:only-child
E:nth-child(n)
E:nth-last-child(n)
E:first-of-type
E:last-of-type
E:only-of-type
E:nth-of-type(n)
E:nth-last-of-type(n)
E:empty
E:checked
E:enabled
E:disabled
E:target
@page:first
@page:left
@page:right
伪对象选择符Pseudo-Element Selectors
E:first-letter/E::first-letter
E:first-line/E::first-line
E:before/E::before
E:after/E::after
E::selection
语法与规则Rules
！important
语法：Selector{sRule!important;}
说明：提升指定样式规则的应用优先权
- IE6及以下浏览器有个比较显式的支持问题存在，!important并不覆盖掉在同一条样式的后面的规则。请看下述代码：
示例代码：
div{color:#f00!important;color:#000;}在上述代码中，IE6及以下浏览器div的文本颜色为#000，!important并没有覆盖后面的规则；其它浏览器下div的文本颜色为#f00
- IE6及以下浏览器要使!important生效，可用以下代码：
示例代码：
div{color:#f00!important;} div{color:#000;}在上述代码中，IE6及以下浏览器中div的文本颜色表现与其它浏览器一致，都为#f00
/*comment*/
语法：/*这里的内容为注释*/
说明：用于注释CSS中的功能及用法或其他
@important
语法：
取值：
说明：
@charset
@media
@font-face
@page
@keyframes
取值
单位
CSS Hack
扫一扫
7694
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
