CSS样式表精讲-优快云博客

CSS 概述

层叠样式表 (Cascading Style Sheets)，样式定义如何显示 HTML 元素，样式通常存储在样式表中。

语法： CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。每个属性有一个值。属性和值被冒号分开。
selector {declaration1; declaration2; … declarationN }

h1 {color:red; font-size:14px;}

提示：如果值为若干单词，则要给值加引号

CSS继承

被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

继承只会发生在后代元素身上，子元素从父元素继承属性。创建一个针对子元素的特殊规则，这样它就会摆脱父元素的规则。利用继承可以将一些通用的样式设置到共同的祖先元素上，这样只需设置一次就可以让所有的元素具有相同的样式。

注意：并不是所有的样式都会被继承：比如背景相关的，布局相关的这些样式都不会被继承。

text-、font-、line-、list-、这些开头的可以继承以及color属性。

派生选择器

派生选择器允许你根据文档的上下文关系来确定某个标签的样式。

li strong {
    font-style: italic;
    font-weight: normal;
  }
#列表中的strong元素变为斜体字，不再是通常的粗体字

<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>

<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>

id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 “#” 来定义。

#red {color:red;}
#green {color:green;}

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

注意：id 属性只能在每个 HTML 文档中出现一次（不懂）
在现代布局中，id 选择器常常用于建立派生选择器。

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}
#上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。

即使被标注为 sidebar 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次？？？？

CSS类选择器

类选择器以一个点号显示

.center {text-align: center}
<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>
#h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。

注意： 类名的第一个字符不能使用数字！而且可以同时为一个元素指定多个class属性，用空格隔开。

.fancy td {
	color: #f60;
	background: #666;
	}
# 和 id 一样，class 也可被用作派生选择器

td.fancy {
	color: #f60;
	background: #666;
	}
# 元素也可以基于它们的类而被选择
<td class="fancy">

CSS属性选择器

语法：
[属性名] 选择含有指定属性的元素
[属性名 = 属性值] 选择含有指定属性和属性值的元素
[属性名 ^= 属性值] 选择属性值以指定值开头的元素
[属性名 $= 属性值] 选择属性值以指定值结尾的元素
[属性名 *= 属性值] 选择属性值中含有指定值的元素

1、带有 title 属性的所有元素设置样式

<style type="text/css">
[title]
{
color:red;
}
</style>
<a title="W3School" href="http://w3school.com.cn">W3School</a>

2、为 title=“W3School” 的所有元素设置样式：

<style type="text/css">
[title=W3School]
{
border:5px solid blue;
}
</style>
</head>

<img title="W3School" src="/i/w3school_logo_white.gif" />

3、带有 title 属性的指定元素设置样式

p[title]{}

复合选择器

复合选择器中如果有元素选择器，必须使用元素选择器开头。

关系选择器

1、子元素选择器
语法：父元素 > 子元素{}
2、后代元素选择器
作用：选中指定元素内的所有后代元素
语法：祖先后代{}
3、兄弟元素选择器
选择下一个兄弟
语法：前一个+下一个
选择下面所有兄弟
语法：兄 ~ 弟
注意：选择的都是后面的元素。

如何插入样式表

1、外部样式表
当样式表需要应用在很多网页时，每个页面通过标签链接到样式表。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
# 浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

可以加快页面访问的速度，缓存机制原理。

2、内部样式表
当单个文档需要特殊的样式时，使用 < style> 标签在文档头部定义内部样式表。

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

3、内联样式
在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

注意：多重样式继承方法

选择器优先级

当样式发生冲突时，即当通过不同的选择器，选中同一个元素时，并且为相同的样式设定不同的值时，此时就发生了样式的冲突。应用哪个样式会由选择器的优先级决定。

选择器的权重如下：
内联样式 1000
id选择器 100
类和伪类选择器 10 属性选择器
元素选择器 1
通配选择器 0
继承的样式
没有优先级

比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示。（分组选择器单独计算）且选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器。

如果优先级计算后相同，此时则优先使用靠下的样式，即后面的样式覆盖掉了前面的样式。

可以在某一个样式的后面添加 !important，则此时该样式会获取到最高的优先级，甚至超过内联样式。在开发中尽量慎用。