-webkit-: Safari , Google Chrome
-moz-: Firefox
-o-: Opera
-ms-: Internet Explorer
-webkit-transform: rotate(45deg)
-moz-transform: rotate(45deg)
-o-transform: rotate(45deg)
-ms-transform: rotate(45deg)
transform: rotate(45deg)
全局选择器
*{} 匹配 <p></p>
‚类型（标签）选择器
article{} => <article></article>
ƒID选择器
#logo{} => <h1 id=”logo”></h1>
④Class选择器
.critical{} => <strong class=”critical”></strong>
组合选择器列表
E F 子孙组合器
div p {}
<div><div><p>selected</p></div></div>
p * em {}
em至少应该是p的孙子标签
‚E>F 子节点组合器
div > p {}
<div><p>seledted</p></div>
ƒE+F 相邻兄弟组合器
strong+em{}
<strong></strong>
<em>selected</em>
ƒE~F 通用兄弟组合器 (非必须相邻)
strong~em{}
<strong></strong>
<p></p>
<em>selected</em>
选择器 合并
h1, h2, h3, h4, h5, h6 { color: red; }
Class混合
span.alert{}
span.critical{}
span.alert.critical {} 会选择同时包含两个class的span元素。
例：
header + selection.guest article > footer {border: 1px solid red; }
高级选择器
Attribute selector
Pseudoclass
Pseudoclasselement
[A]
Img[alt] {} => <img src=”” alt=”Dog”/>
[A=”V”]
Img[alt=”Car”] {} => <img src=”” alt=”Car”/>
[A~=”V”] 属性A有空格分隔的值，其中一个是V
p[accessKey~=”q”] {} => <p accesskey=”s q”></p>
[A^=”V”] 以V开头
a[type^=”text”] {} => <a href=”a.html” type=”text/html”>Link</a>
[A$=”V”] 以V结尾
a[type$=”css”] {} => <a href=”link.css” type=”text/css”>Link</a>
[A*=”V”] 属性A的值包含V
img[alt*=”man”]{} => <img src=”” alt=”Germany”/>
E[A|=”V”] 属性A有连字符分隔的值，其中第一个是V
p[lang|=”en”]{} => <p lang=”en-GB-oed”></p>
属性选择器串联
a[href][rel] {color: orange;} 匹配同时有href和rel属性的元素a
伪类选择器
:link 没有访问过的超链接
a:link{} => <a href=””>Link<a>
:visited
a:visited {} => <a href=””>Link</a>
:target 片段标示的目标元素
p:target{} => <a href=”#target”><p id=”target”>selected</p></a>
:hover 有鼠标悬浮的元素
a:hover{} => <a href=””>Link</a>
:active 用户激活的元素，如鼠标按下但还未释放时。
a:active => <a href=””>Link</a>
【表单控件】
:focus
:enabled
:disabled
input:disbled{} => <input disabled />
:required
input:required{} => <input required />
:optional
input:optional{} => <input />
:read-only
input:read-only{} => <input readonly />
:read-write
input:read-write {} => <input />
:valid 输入了合法的元素
input:valid{} => <input />
:invalid
:checked 勾选后的元素
input:checked{} => <input type=”checkbox” checked />
:indeterminate 复选框的interminate要通过js设置为true
:default 默认状态的元素，如初始选中的单选按钮
:in-range
input:in-range{} => <input type=”number” min=”1” max=”10” value=”10” />
:out-of-range
模式匹配选择器
:root 即html元素
html:root {} => <html><title></title></html>
:nth-child(N) 父节点的第N个子节点
li:nth-child(3) {} =>
<ul>
<li></li>
<li></li>
<li>selected</li>
</ul>
:nth-last-child(N)
li:nth-last-child(3) =>
<ul>
<li>selected</li>
<li></li>
<li></li>
</ul>
:nth-of-type(N) 该元素类型的第N个兄弟元素
p:nth-of-type(2) {} =>
<p></p>
<p>selected</p>
<p></p>
p:nth-last-of-type(1) {} =>
<p></p>
<p></p>
<p>selected</p>
:first-child
:last-child
:first-of-type 该元素类型的第一个兄弟元素
p:first-of-type {} =>
<p>selected</p>
<p></p>
<p></p>
:last-of-type
:only-child 父节点唯一的子节点元素
li:only-child {} =>
<ul>
<li>selected</li>
</ul>
:only-of-type 父节点下唯一该类型元素
footer:only-of-type {} =>
<header></header>
<article><article>
<footer>selected</footer>
:empty 没有子节点的元素
p:empty{} => <p></p>
例：
li:nth-child(odd)
li:nth-child(even)
li:nth-child(3n+1) n = 0, 1 , ...
伪元素选择器
::first-line
p::first-line {} =>
<p>selected
<br/>not selected</p>
::first-letter
::before
::after
例：
<a href=”presentation.pdf” type=”application/pdf”>Download</a>
a[type*=”pdf”]::before {
content: url(doc.png);
Margin-right: 5px;
}
A[type*=”pdf”]::after {
content: “ (“ attr(type) “)”;
}
In Chrome: [Icon] Download (application/pdf)
::outside 在元素周围插入内容
::marker 在列表第一个条目前插入内容
::line-marker
::selection 为用户选中的文字设置样式
:lang(L) 语言设置为L的元素
p:lang(fr) {} => <p lang=”fr”></p>
:not(S) 不匹配选择器S的元素
p:not(#important) => <p id=”other”></p>
例：
a[rel^=”no”]:not([href*=”anselmbradford.com”]) {color:red;}
<a href=”http://anselmbrdford.com” rel=”noreferrer”> A<a>
<a href=”http://example.com” rel=”noreferrer”>B</a> 匹配
<a href=”http://example.com/link” rel=”noreferrer”>C</a> 匹配
<a href=”http://example.com” rel=”bookmark”>D</a>
CSS盒模型
display可选值: none, block, inline, inline-block
inline-block: 将元素设置为块级，但将之作为行内盒子来处理。
none: 该元素以及嵌套在其中的任何元素都不显示在页面中。
position: static, relative, absolute, fixed
p {color: #ff00ff}
p {color: #f0f}
p {color: rgb(255, 0, 255); }
p {color: rgb(100%, 0, 100%); }
p {color: hsl(300, 100%, 50%; }
--------------------------------------------------------------
《写给大家看的CSS》
内联样式
<p style=””>inline css style</p>
嵌入样式
<head>
<style type=”text/css”>
p {font-size: 16px}
</style>
</head>
链接样式
<link href=”my_style_sheet.css” media=”screen” rel=”stylesheet” type=”text/css”/>
锚链接的伪类
a:link {color: black;}
a:visited {color: gray;}
a:hover {text-decoration:none;}
a:active {color: navy;}
注：浏览器可能会跳过其中某些不按照下列顺序声明的规则：链接、已访问、悬停、激活
助记符：LoVe-HA! love hate
其他伪类
:first-child
:focus
伪元素
:first-letter
:first-line
:before
:after
em: 一种字体中字符的宽度
ex: 给定字体中小写字母x的高度，不包括如p、d等上下方多出的部分。
Aqua
Black
Blue
Fuchsia
Gray
Green
Lime
Maroon
Navy
Olive
Purple
Red
Silver
Teal
White
Yellow
字体属性的简写方式
规则1：始终要保证声明font-size和font-family的值
规则2：先后顺序如下
- font-weight、font-style、font-variant
- font-size
- font-family
例：
p {font: bold italic small-caps .75em verdana, arial, sans-serif;}
small-caps表示 小型大写字母
8种文本相关的属性
text-indent
text-alignleft、right、center、justify
letter-spacing
line-height
word-spacing
text-transformuppercase、lowercase、capitalize、none
text-decorationunderline、overline、line-through、blink
vertical-align相对于基线将文本向上或向下移动 60%、sub、sup、top、middle、bottom
折叠外边距
当上下外边距相遇时，它们会相互折叠，直至一个元素的外边距接触到另一个元素
盒子到底有多大
添加边框和内边距会增大盒子的宽度。
通过width设定的是盒子内容的宽度，而不是盒子本身的宽度。
例：
<div id=”column”>
<div id=”inner_column”>
<h4>An h4 heading</h4>
<p>The heading and this paragraph...</p>
</div>
</div>
div#column {width: 170px; padding:10px;}
div#inner_column {padding: 10px;}
块级元素的宽度默认为auto, 含义是“尽可能大”。
通过为内部div添加内边距，由外部div定义的栏宽能保持不变
float: 主要是为了实现文本绕排图像的效果，但也是创建多栏布局的一种基本方式。
例：
img {float: left; margin: 0 4px 4px 0;}
<p> ... the paragraph text ...</p>
用浮动构建分栏
p {float: left; width: 200px; margin:0;}
img {float:left; margin: 0 4px 4px 0;}
clearleft, right, both
在空间足够的情况下，任何元素都会向上移动到浮动元素旁边，但有时候不想出现这种情况，也就是说，让它保持在浮动元素下方，可以使用clear.
clear属性原理：清除元素的上外边距能够被自动地重写并设置，从而使该元素只有可见部分会显示在浮动元素下方。因此，即使为清楚元素设置了上外边距，这个上外边距也将被clear声明撤销。
Position
用于确定元素盒子在页面上定位的参照点
可选值：static, absolute, fixed, relative
static: 每个元素都简单地自上而下地相继排列
relative:
相对定位元素可通过top,left,bottom,right相对于原来的默认位置移动元素。
例：
p#specialpara {position:relative; top:30px; left:20px}
absolute:
绝对定位元素默认的定位环境是body元素。
绝对定位可以将一个元素移出文档流，并现对于另一个元素（定位环境）进行定位。
绝对定位元素会随着定位元素的滚动而滚动
fixed:
固定定位元素的定位环境是浏览器窗口。
当页面滚动时，固定定位元素不会随之滚动。
只有将一个元素设为relative, absolute, fixed之一，top/left/bottom/right才会起作用。
Static定位的元素，top/left/bottom/right不起作用。靠边距创建空白区域。
定位环境
绝对定位元素的定位环境是body
但也可将元素的任一祖先元素的position设置为relative或absolute，就可使该祖先成为定位环境。
例：
<body>
<div id=”outer_div”>The outer div>
<div id=”inner_div”>This is some text...</div>
</div>
</body>
div#outer_div {width:250px; margin:50px 40px; border-top:3px solid red;}
div#inner_div {top:10px; left:20px; background:#AAA;} <= static定位 top/left不起作用。
若改为
div#inner_div {position:absolute; top:10px; left:20px; background:#AAA;} <= 定位环境为body元素。
910
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
