CSS总结(一)：选择器、层叠、文本样式与背景

一：CSS简介

CSS：Cascading Style Sheets 层叠样式表

CSS负责描述HTML页面的样式；从审美的角度描述页面的样式

1，CSS语法：

selector {
	property: value;
	property: value;
	}

2，CSS创建：

<!-- 1，外部(外联)样式表；最常用的方式 -->
<link rel="stylesheet" type="text/css" href="mystyle.css" />

<!--2，内部(内嵌)样式表 -->
<style type="text/css">
	p {color:red;}
</style>

<!-- 3，行内(内联)样式；不推荐使用，尽量别用 -->
<p style="color:red,font-size:20px">我用了行内样式，呵呵</p>

<!-- 4,使用@import加载外部样式表 -->
<!-- 注：@import指令出现在样式表中的其他规则之前 -->
<style type="text/css">
	@import url("mystyle.css");
	p {color:red;}
</style>

<!-- 在外部样式表中导入其他样式表，这些代码写在CSS文件内 -->
@import url("mystyle1.css")
@import url("mystyle2.css")
body {
	color:red;
}

3，CSS特性：

3.1，层叠性

样式可以层叠，即多重样式将按某种规则层叠为一个；样式的覆盖与样式的调用顺序无关，与样式的定义顺序有关

3.2，继承性

前提：标签之间属于一种嵌套关系

与文字有关的属性大都可以实现继承，除了<a>、<h1>-<h6>，这几个标签是例外

3.3，优先级

层叠规则，优先级高的样式可以覆盖优先级低的样式。

行内(内联)样式 > 内部样式 > 外部样式 > 默认样式(浏览器缺省设置)

默认样式 < 标签选择器< 类选择器 < id选择器< 行内(内联)样式 < !important
0 1 10 100 1000 1000以上
上面用数字来表示优先级（权重），只是一个类比，10个标签选择器的优先级还是不如1个id选择器的，其他类推

继承来的样式的权重为0；权重可以叠加，即10个标签选择器的权重为10

二：CSS选择器

1，标签选择器(元素选择器)

语法：标签名 {属性: 值;}

body {margin:0;}
p {color:red;}

2，通配选择器

/* 通配选择器使用通配符*来匹配所有标签 */
* {
	padding: 0;
	margin: 0;
}

3，类选择器

在css文件或<style>标签内定义：.类名 {属性:值;} ；在开始标签内以属性的方式调用：class="类名"

类的命名规范：不能以数字开头定义类名；不能以特殊符号开头，下划线_除外；不推荐使用汉字、标签名和属性名定义类名。

<style type="text/css">
	.c1 {
		color: red;
	}
	.c2 {
		text-decoration: underline;
	}
</style>

<body>
	<p class="c1">我是一条咸鱼</p>
	<p class="c1 c2">我也是一条咸鱼</p>
</body>

4，ID选择器

在css文件或<style>标签内定义：#id名 {属性:值;} ；在开始标签内以属性的方式调用：id="id名"

注意：id名唯一性，即一个id名在整个文档内只使用一次；一个标签只能调用一个id选择器；id主要用来和JS配合使用

#d1 {
	color: red;
}
#d2 {
	text-decoration: underline;
}

<p id="d1">我是一条咸鱼</p>
<!-- 一个标签只能调用一个id选择器,所以下面的用法是错误的 -->
<p id="d1 d2">我也是一条咸鱼</p>

5，复合选择器

<style type="text/css">
	/* 1，标签指定式选择器 */
	p.c1 {
		color: red;
	}
	p#d1 {
		color: blue;
		text-decoration: underline;
	}

	/* 2，选择器分组/声明分组，以逗号分隔，同时为多个选择器定义样式 */
	h3,p.c2,p#d2 {
		color: deeppink;
	}

	/* 3，后代选择器：选择上所有的某种后代，如选择所有是h3的后代 */
	.div1 h3 {
		font-style: italic;
		font-size: 50px;
	}

	/* 4，子元素选择器：只选择到下一级相应的元素，无法选择上下下一级及更下面的相应元素 */
	div>h3 {
		color: red;
	}

	/* 5，相邻兄弟选择器：只选择上同一级紧跟在后面的一个相应元素，之间不能有其他的元素 */
	div+h3 {
		color: red;
	}
	
	/* 6，兄弟选择器：选择上同一级后面的所有相应元素 */
	div~h3 {
		color: red;
	}
</style>

<body>
	<p>我是一条咸鱼</p>
	<p>我也是一条咸鱼</p>
	<h3>hehehhe</h3>
	<div class="div1">
		<h3>自我介绍</h3>
		<p class="c1">我是一条咸鱼</p>
		<p id="d1">我是一条咸鱼</p>
		<ul>
			<li>
				<h3>我躲在这里</h3>
			</li>
		</ul>
		<h3>自我介绍结束</h3>
	</div>
	<p>我来隔开你们</p>
	<h3>hehehhe</h3>
	<h3>hehehhe</h3>
	<div class="div2">
		<h3>自我介绍</h3>
		<p class="c2">我是一条咸鱼</p>
		<p id="d2">我是一条咸鱼</p>
		<h3>自我介绍结束</h3>
	</div>
	<h3>hehehhe</h3>
	<h3>hehehhe</h3>
</body>

6，属性选择器

1，简单属性选择器
img[alt] {}
*[title] {}
a[href][title] {}

2，具体属性值选择(完全匹配)
a[title="baidu"] {}
p[class="car"][id="ben"] {}
p[class="urgent warning"] {}

3，部分属性值选择；属性值含有该部分就能匹配上
p[class~="figure"] {}

4，子串匹配属性选择器
[foo^="bar"]    --选择foo属性值以"bar"开头的所有元素
[foo$="bar"]    --选择foo属性值以"bar"结尾的所有元素
[foo*="bar"]    --选择foo属性值包含"bar"的所有元素
[foo|="bar"]    --选择foo属性值等于"bar"的或以"bar"开头的所有元素

7，伪类选择器

<style type="text/css">

	a:link {
		color: gray;
		text-decoration: none;
	}
	a:visited {
		color: blue;
	}
	/* a:focus {
		text-decoration: overline;
	} */
	/* :focus,:hover,:active IE6只允许超链接使用，IE7允许应用于所有元素 */
	a:hover {
		text-decoration: underline;
		color: red;
	}
	a:active {
		color: yellowgreen;
	}
	
	input:focus {
		background-color: green;
		
	}
	/* 取得第一个p元素，IE7开始支持 */
	p:first-child {
		color: deeppink;
	}
</style>

8，伪元素选择器

p:first-letter {
	color: red;

}
p:first-line {
	text-decoration: underline;
}
P:before {
	color: green;
}
p:after {
	color: blue;
}

三：层叠

特殊性：使用0,0,0,0表示法表示特殊性，左边为高位，可以叠加，但不能进位，数字越大则特殊性越高。

* 通配选择器	0,0,0,0
标签/伪元素选择器	0,0,0,1
类/伪类/属性选择器	0,0,1,0
ID选择器	0,1,0,0
内联(行内)样式	1,0,0,0
继承的样式	无特殊性

继承值无特殊性，即0特殊性的通配选择器都比继承值强

重要声明：p {color: #333 !improtant;} 其特殊性最高！

样式层叠规则分析：

四：文本样式

1，字体

写在前面：文档显示的字体取决于用户机器上安装了的字体系列；如果用户机器上安装的字体与你设计使用的字体不同，那么文档看上去会大不同！

5种通用字体系列：

Serif 字体：字体成比例且有上下短线；包括 Times、Georgia、New Century Schoolbook
Sans-serif 字体：成比例但没有上下短线；包括 Helvetica、Geneva、Verdana、Arical
Monospace 字体：不成比例，每个字符的宽度都完全相同；包括 Courier、Courier New、Andale Mono
Cursive 字体：模仿人的手写体；包括 Zapf chancery、Author、Comic Saus

Fantasy 字体：Western、Woodblock、Klingon

推荐写法：

/* 按字体的优先级排序；字体名中有空格或#/$之类符号需加引号 */
/* 通过结合特定字体名和通用字体系列，可以创建与你预想的基本相同的文档 */
p {
	font-family: Times,TimesNR,'New York',serif;
}
/* 设置字体的粗细使用font-weight */
/* font-weight:normal(400)|bold(700)|bolder|lighter|100-900 */

font 联写： font:style weight size/line-height family;
联写时，size和family必须有且顺序不能变，即size要在family前面

注：在使用简写属性font时，所有被忽略的值都会重置为其默认值！

2，字体颜色：

方式一：使用命名颜色，如 red，green，blue
方式二：rgb(0,0,0) rgb(255,255,255) rgba(0,0,0,0.7) a为alpha 透明度
方式三：rgb(100%,100%,100%)
方式四：使用十六进制数 #RRGGBB，如#FFFFFF，可简写为#FFF

web安全颜色：RGB值20% 和 51 的倍数，0% 和 0也是安全值；十六进制中，使用值00、33、66、99、CC、FF的三元组

3，文本属性

基线：是英文字母"x"的下端沿
内容区：底线和顶线之间的区域

行高 line-height：是文本行基线之间的距离（能继承）
line-height - font-size = 行间距

text-indent 文本缩进应用于块级元素
text-align: left | center | right | justify

vertical-align: sub | super | top | middle | bottom
应用于行内元素和表单元格、替换元素（不能继承）

text-transform: uppercase | lowercase | capitalize | none

text-decoration: none | underline | overline | line-through | blink （无继承性）

五：背景

前景色：color ①影响边框 ②影响表单元素

背景：内容框和内边距是元素背景的一部分，且边框画在背景之上。

background-color: 背景颜色
background-image: url(); 背景图像

background-repeat: repeat (平铺，默认) | repeat-x | repeat-y | no-repeat

background-position:top; 只写一个关键字，则认为等同于 background-position:top center;

background-attachment: scroll (滚动，默认) | fixed (固定)

背景图像关联，相对于视窗

       background 联写：
       background: white url() top left repeat-x fixed; 无顺序要求
       注：在使用简写background属性时，所有被忽略的值都会重置为其默认值，从而覆盖先前给定的值！