CSS复习（—）

来源：互联网发布：局域网行为控制软件编辑：程序博客网时间：2024/05/29 15:35

以下内容参考自《css设计指南》

1.使用css样式：

行内样式 <标签 style="">
嵌入<style></style>
链接 <link href="style.css" rel="stylesheet" type="text/css">
导入@import url(css/style.css);

2.css命名规则：

3.选择符：

标签，上下文选择符

<body>     <article>         <h1>Contextual selectors are <em>very</em> selective</h1>         <p>This example shows how to target a <em>specific</em> tag.</p>      </article>     <aside>         <p>Contextual selectors are <em>very</em> useful!</p>     </aside>   </body>

eg:p{color:red;}article h1{color:blue;}

子选择符：

标签 1 > 标签 2

标签 2必须是标签 1的子元素，或者反过来说，标签 1必须是标签 2的父元素。与常规的上下文选择符不同，这个选择符中的标签 1 不能是标签 2 的父元素之外的其他祖先元素

3.紧邻同胞选择符+

标签 1 + 标签 2

标签 2必须紧跟在其同胞标签 1的后面。

4.一般同胞选择符~

5 .通用选择符*

6.ID 选择符

7.类选择符

ID的用途实在页面中唯一的标识一个元素每一个ID属性都独一无二

而class的目的是为了标识一组具有相同特征的元素

4.伪类：

UI伪类：:link :visited :hover :active 等注：由于四个伪类特指度相同，如果不按顺序使用它们，可能不会出现逾期的效果
结构化伪类：:first-child :last-child等

5.特指度：ICE 公式

I-C-E

三个字母间的短横线是分隔符，并非减号。针对这个公式的计分办法如下：
1. 选择符中有一个 ID，就在 I的位置上加 1；

2. 选择符中有一个类，就在 C的位置上加 1；

3. 选择符中有一个元素（标签）名，就在 E的位置上加 1；

4. 得到一个三位数。
P 0-0-1 特指度=1

p.largetext 0-1-1 特指度=11

body p#largetext ul.mylist 1-1-3 特指度=113

0 0