CSS学习笔记——最基础的定义与使用 4年前

1�€ æœ€è¿‘看看一些CSS的东西，发现每次看过就忘记，做起东西来就会非常的慢，所以有时间的话可以抽空多看看别人的网站，然后想想自己能不能做出这种效果。 2、有哪几种设置样式的方式：

浏览器缺省设置

外部样式表

内部样式表（位于

标签内部）

内联样式（在 HTML 元素内部）

This is a paragraph

多重样式 根据优先级得到最后的结果

3、不受继承影响

//元素选择器 body { font-family: Verdana, sans-serif; }

//分组选择器 td, ul, ol, ul, li, dl, dt, dd { font-family: Verdana, sans-serif; }

p { font-family: Times, "Times New Roman", serif; }

p再设置一次值就不会受到body属性的影响

//通配符选择器

• {color:red;} 类选择器一样与ID 选择器中可以忽略通配选择器。

//多类选择器

.important.urgent {background:silver;}

这个选择器将只匹配 class 属性中包含词 important 和 urgent 的 p 元素。因此，如果一个 p 元素的 class 属性中只有词 important 和 warning，将不能匹配。不过，它能匹配以下元素：

This paragraph is a very important and urgent warning.

4、ID选择器

同一个文档中不能有相同的ID

#red {color:red;}

5、类选择器

.center {text-align: center}

6、派生选择器

li strong { font-style: italic; font-weight: normal; } //会选择后代只有有strong标记的元素

h1 > strong {color:red;} //只会选择h1的子节点是strong的元素

table.company td > p //这种是结合后代选择器和子选择器

h1 + p {margin-top:50px;} //这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

#sidebar p { font-style: italic; text-align: right; margin-top: 0.5em; }

.fancy td { color: #f60; background: #666; }

td.fancy { color: #f60; background: #666; }

7、属性选择器

[title] { color:red; }

[title=W3School] { border:5px solid blue; }

[attribute] 用于选取带有指定属性的元素。

[attribute=value] 用于选取带有指定属性和值的元素。

[attribute~=value] 用于选取属性值中包含指定词汇的元素。

[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。

[attribute^=value] 匹配属性值以指定值开头的每个元素。

[attribute$=value] 匹配属性值以指定值结尾的每个元素。

[attribute*=value] 匹配属性值中包含指定值的每个元素。

属性与属性值必须完全匹配：

This paragraph is a very important warning.

如果写成 p[class="important"]，那么这个规则不能匹配示例标记。 要根据具体属性值来选择该元素，必须这样写：

p[class="important warning"] {color: red;}

可以把多个属性链接在一起选择文档：

a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

8、需要记住的最常见的使用

margin 属性值的规律：

margin: top right bottom left

如果缺少左外边距的值，则使用右外边距的值。

如果缺少下外边距的值，则使用上外边距的值。

如果缺少右外边距的值，则使用上外边距的值。

只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

9、定位

position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。

bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。

left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。

overflow 设置当元素的内容溢出其区域时发生的事情。

clip 设置元素的形状。元素被剪入这个形状之中，然后显示出来。

vertical-align 设置元素的垂直对齐方式。

z-index 设置元素的堆叠顺序。

其中position 属性值的含义：

static

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。