CSS 笔记（w3school.com.cn）
创建CSS样式表
外部样式表：
<head><link type="text/css" href="mystyle.css" rel="stylesheet" /></head>
内部样式表：
<head><style type="text/css">p{ color:black; }</style></head>
内联样式：
<p style="color: black; font-style: italic;">words.</p>
CSS 选择器
元素选择器
html { font-family: sans-serif; }
选择器分组
h1, h2, p { font-size: 16px; }
通配符选择器
* { margin: 0; }
类选择器
<head><style type="text/css">
.myclass{ font-weight: bold; }
p.myclass { text-align; } /* 选择myclass类中的p元素 */
</style></head>
<body>
<div class="myclass">mydiv.</div>
<p class="myclass">myparagraph</p>
</body>
多类选择器
<head><style type="text/css">
.bigFont { font-size: 2em; }
.redFont { color： red; }
.redFont.bigFont { text-decoration: line-through underline; } /* 多个类选择器连在一起，将选择同时包含这些类的元素（类名的顺序随意） */
</style></head>
<body>
<p class="bigFont">abc</p>
<p class="redFont">abc</p>
<p class="bigFont redFont">abc</p>
</body>
id 选择器
#myID { background-color: yellow; }
属性选择器
简单属性选择
*[title] { color: red; } /* 把含有标题（title）的所有元素变红 */
a[href] { color: red;} /* 只针对拥有href的a元素 */
a[href][title] { color: red; } /* 选择同时拥有href和title属性的元素 */
根据具体属性值选择
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}
p[class="important warning"] {color: red;} /* 匹配<p class="important warning">This paragraph is a very important warning.</p> */
p[class~="important"] {color: red;} /* 选择 class 属性中包含 important 的元素,如果忽略了波浪号，则说明需要完成完全值匹配。 */
img[title~="Figure"] {border: 1px solid gray;} /* 这个规则会选择 title 文本包含 "Figure" 的所有图像 */
p.important 和 p[class="important"] 应用到 HTML 文档时是等价的
子串匹配属性选择器
| 类型 | 描述 |
|---|---|
| [abc^="def"] | 选择 abc 属性值以 "def" 开头的所有元素 |
| [abc$="def"] | 选择 abc 属性值以 "def" 结尾的所有元素 |
| [abc*="def"] | 选择 abc 属性值中包含子串 "def" 的所有元素 |
可以想到，这些选择有很多用途。
举例来说，如果希望对指向 W3School 的所有链接应用样式，不必为所有这些链接指定 class，再根据这个类编写样式，而只需编写以下规则：
a[href*="w3school.com.cn"] {color: red;}
特定属性选择类型
*[lang|="en"] {color: red;}
上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此，以下示例标记中的前三个元素将被选中，而不会选择后两个元素：
<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>
一般来说，[att|="val"] 可以用于任何属性及其值。
img[src|="figure"] {border: 1px solid gray;} /* 假设一个 HTML 文档中有一系列图片，其中每个图片的文件名都形如 figure-1.jpg 和 figure-2.jpg。就可以这样使用选择器匹配所有这些图像： */
后代选择器
h1 em {color:red;} /* 作为 h1 元素后代的任何 em 元素 */
子元素选择器
h1 > strong {color:red;} /* 子结合符两边可以有空白符，这是可选的。*/
相邻兄弟选择器
可选择紧接在另一元素后的元素，且二者有相同父元素
h1 + p {margin-top:50px;} /* 选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素 */
CSS 伪类
锚伪类
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:focus {color: #00FF00} /* 获得焦点的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
提示：伪类名称对大小写不敏感。
a.red : visited {color: #FF0000} /* 伪类可以与 CSS 类配合使用 */
- :first-child 伪类
这个特定伪类很容易遭到误解
p:first-child {font-weight: bold;} /* 将作为某元素第一个子元素的所有 p 元素设置为粗体 */
- :lang 伪类
<head><style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
</style></head>
<body>
<p>文字<q lang="no">段落中的引用的文字</q>文字</p></body> /* :lang 类为属性值为 no 的 q 元素定义引号的类型： */
CSS 伪元素
:first-line 伪元素
p:first-line { color: #ff0000; font-variant: small-caps; } /* "first-line" 伪元素用于向文本的首行设置特殊样式。 */
"first-line" 伪元素只能用于块级元素。
这些属性可应用于 "first-line" 伪元素：font color background word-spacing text-decoration vertical-align text-transform line-height clear
:first-letter 伪元素
p:first-letter { color:#ff0000; font-size:xx-large; } /* "first-letter" 伪元素用于向文本的首字母设置特殊样式. */
这些属性可应用于 "first-letter" 伪元素：font color background margin padding border text-decoration vertical-align (仅当 float 为 none 时) text-transform line-height float clear
:before 伪元素
h1:before { content:url(logo.gif); } /* ":before" 伪元素可以在元素的内容前面插入新内容。 */
:after 伪元素
h1:after { content:url(logo.gif); } /* ":after" 伪元素可以在元素的内容之后插入新内容。 */
浙公网安备 33010602011771号