CSS:层叠样式表（级联样式表）
<style> CSS样式 </style>

1. css产生的原因

随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱。于是CSS便诞生了，让HTML从样式中解脱苦海，HTML专注去做结构呈现，样式交给CSS。

2.样式规则

1.选择器用于指定css样式作用的HTML对象，花括号内是对该对象设置的具体样式。
2.属性和属性值以“健值对”的形式出现。
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
4.属性和属性值之间用英文“：”链接。
5.多个“键值对”之间用英文“;”进行分区。

3. 字体样式属性

3.1 font-size 字号大小

相对长度单位：em(相对于当前对象内文本的字体尺寸)，px（像素，最常用）
绝对长度单位：in(英寸)、cm(厘米)、mm(毫米)、pt(点)

相对长度比较常用，推荐使用px

3.2 font-family:字体

{font-family:"微软雅黑";}、{font-family:"microsoft yahei"}

支持中文

注意事项：

现在网页中普遍使用14px+。
尽量使用偶数的数字字号，ie6等老式浏览器支持奇数会有bug。
各种字体之间必须使用英文状态下的逗号隔开。{font-family:"microsofr yahei",tahoma,arial} 系统会首先使用microsoft yahei,没有这个字体的话使用tahoma。
中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如“microsoft yahei”,"Times New Roman"
尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

3.3 unicode字体

在CSS中设置字体名称，可以直接写中文。但在文件编码不匹配时会产生乱码错误。这时候可以用Unicode编码来写字体名称可以避免这些错误。使用Unicdoe字体时要加引号。

3.4 font-weight:字体粗细

取值：
1.normal,正常字体，相当于400
2.bold，粗一点，相当于700
3.bolder定义比继承值更重的值
4.lighter定义比继承值更轻的值
5.用数字表示文本字体的粗细。范围100~900（100的整数倍）

3.5 font-style:字体倾斜

取值:
1.normal:指定文本字体样式为正常的字体
2.italic:指定文本字体样式为斜体，对于没有设计斜体的特殊字体，如果要使用斜体外观将应用oblique
3.oblique:指定文本字体样式为倾斜的字体，人为的使文字倾斜，而不是去选取字体中的斜体字

3.6 字体综合

选择器{font: font-style font-weight font-size/line-height font-family;}

使用font属性时,必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。

注意：其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性，否则font属性将不起作用。

4 选择器

命名规则： 1.长名称或词组可以使用中横线来为选择器命名。 2.不建议使用"_"下划线来命名css选择器 3.不要纯数字、中文等命名,尽量使用英文字母表示。

4.1 标签选择器

4.2 类选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<!-- <title>第一个HTML5</title> -->
	<style>
		
		.star { 
			color:red;
			
		}
	</style>
</head>
<body>
	<div class="star">刘德华</div>
	<div >鸣人</div>
	<div >路飞</div>

</body>
</html>

4.3 多类名选择器

<span class="color-blue font200">G</span>

1.样式显示效果跟HTML元素中的类名先后顺序没有关系，受css样式书写的上下顺序有关。
2.各个类名中间用空格隔开。

4.4 id选择器

<span id="big">大哥</span>
#big{ color:red; }

注意：类选择器可以多次重复使用，id选择器不能重复，只能使用一次。

id选择器和类选择器区别

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

类选择器（class）好比人的名字，是可以多次重复使用的，比如张伟王伟李伟李娜

id选择器好比人的身份证号码，全中国是唯一的，不得重复。只能使用一次。

id选择器和类选择器最大的不同在于使用次数上。

4.5 通配符选择器

*{属性1：属性值1；属性2:属性值2}

4.6 伪类选择器

4.6.1 链接伪类选择器

:link : 未访问的链接
:visited : 已访问的链接
:hover : 鼠标移动到连接上
:active : 选定的链接，当我们点击别松开鼠标显示的装填

注意：他们的顺序不能颠倒。记忆 lvha lv包包很hao

a {   /* a是标签选择器  所有的链接 */
			font-weight: 700;
			font-size: 16px;
			color: gray;
		}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
			color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}

4.6.2 结构(位置)伪类选择器（CSS3）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<!-- <title>第一个HTML5</title> -->
	<style>
		
		li:first-child{
			color: red;
		}
		
		li:last-child{
			color:green;
		}

		li:nth-child(5){
			color:pink;
		}





	</style>

</head>
<body>
	
	<ul>
		<li>第一个孩子</li>
		<li>第二个孩子</li>
		<li>第三个孩子</li>
		<li>第四个孩子</li>
		<li>第五个孩子</li>
		<li>第六个孩子</li>
		<li>第七个孩子</li>
	</ul>


	<div><li>第八个孩子</li></div>

</body>
</html>

上面代码运行结果：第一个孩子和第八个孩子是红色，第七个孩子是蓝色，第五个孩子是粉色,第六个孩子是橙色。

:first-child:选取属于其父元素的首个子元素的指定选择器
:last-child:选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n):匹配属于其父元素的第N个子元素,不论元素的类型。even偶数，old奇数 n从0开始
:nth-last-child(n):选择器匹配属于其父元素的第N个子元素，不论元素的类型，从最后一个子元素开始计数。n可以是数字、关键词或公式

li:nth-child(even){ color: red; } 结果：第二、四、六个孩子变红色

li:nth-child(2n-1){ color: red; } 结果：第一、三、五、七个孩子变红色

注意：冒号和“li”和“first-child"”中间不能有空格。

4.6.3 目标伪类选择器

:target{
			color:red;
		}

:target 目标伪类选择器：可用于选取当前活动的目标元素

<!DOCTYPE html>
<html>
 
<head>
    <title></title>
    <style type="text/css">
        #big-bam-boom:target {
            color: red;
        }
    </style>
</head>
 
<body>
    <h1 id="big-bam-boom">Kaplow!</h1>
    <div style="height: 800px"> </div>
    <a href="#big-bam-boom">Mission Control, we're a little parched up here.</a>
</body>
 
</html>

点击滚动到id为big-bam-boom的位置，并且变红。如果不加 #big-bam-boom:target { color: red; } 只会滚动到big-bam-boom，而不会变红。

5.css外观属性

5.1 color

1.green,red,blue
2.十六进制 #00ff00
3.rgb: rgb(255,0,0)或rgb(100%,0%,0%)

提倡十六进制

5.2 行间距

line-height属性用于设置行间距，就是行与行之间的距离。三种值分别为px,相对值em和百分比%。一般用px。一般情况下，行间距比字号大7.8个像素就可以了。

5.3 text-align:水平对齐方式

left:左对齐(默认值) right:右对齐 center:居中对齐

5.4 text-indent:首行缩进

其属性值可为不同单位的数值,em的倍数,浏览器窗口宽度的百分比%，允许使用负值，建议使用em作为设置单位。

1em就是一个字的宽度，如果是汉字的段落，1em就是一个汉字的宽度。

5.5 letter-spacing:字间距

5.6 word-spacing:单词间距

对中文无效。letter-spacin和word-spacing均可对英文设置，只不过letter-spacing是定义字母间的间距，word-spacing是定义英文单词间的间距

5.7 半透明

color:rgb(r,g,b,a) a是alpha透明的意思，取值0~1.

5.8 文字阴影

text-shadow:水平位置垂直位置模糊距离阴影颜色；

前两项是必须的，后两项可以选写。

6.样式显示模式

6.1 行内样式表（内联样式表）

是通过标签的style属性来设置元素的样式，基本语法： <标签名 style:"属性1：值1；属性2：值2">内容</标签名>

实际上任何HTML标签都有style属性。只对其所在的标签及嵌套在其中的子标签起作用。
修改一些小样式，快速完成。

6.2 内部样式表

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>综合案例</title>
	<style type "text/css"> <!-- teype类型 css文本 -->
		div{
			color:red;
		}
	</style>
</head>
<body>
	<div>内部样式表</div>
</body>
</html>

1.style标签一般位于head标签title之后，也可以放在html文档的任何地方。
2.type "text/css" 在HTML5中可以省略。

6.3 外部样式表（外链表）

	<head>
		
		<link rel="stylesheet" href="CSS文件路径" type="text/css">

	</head>

css文件里只能写css,不能写任何标签。

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

==总结：行内样式表，权重高==

7. 标签的类型（显示模式）

HTML标签一般分为块标签和行内标签。

7.1 块级元素（block-level）

常用的 <h1>~<h6>,<p>,<div>,<ul>,<li>,<ol>

div是最典型的

块级元素特点：
1.总是从新行开始.
2.高度、行高、外边距以及内边距都可以控制。
3.宽度默认是容器的100%。(一整行的100%)
4.可以容纳内联元素和其他块元素。

7.2 行内元素（inline-level）

常用的<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>

span是最典型的。

行内元素特点：
1.和相邻的元素在一行上。
2.宽高是无效的，但水平方向的padding和margin可以设置，垂直方向无效。
3.行内元素只能容纳文本或者其他行内元素。（a特殊）。

注意：
1.文字类的块级元素，不能再放其他块级元素。只有文字才能组成段落，因此p里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt。他们都是文字类块级标签，里面不能放其他块级元素。
2.链接里面不能再放链接。

7.3.行内块元素(inline-block)

行内元素有几个特殊标签，<input /> <img /> <td></td> 可以设置宽高和对齐属性。

特点：
1.和相邻行内元素在一行上，但是之间会有空白缝隙。
2.默认宽度就是它本身内容的宽度。
3.高度，行高，外边距以及内边距都可以控制。

7.4 标签显示模式转换display

块转行：display:inline
行转块：display:block
块、行元素转成行内块：dispaly:inline-block

8 复合选择器

8.1 交集选择器

交集选择器有两个选择器构成，第一个为标签选择器，第二个为类选择器。结构

h3.class{ 属性1：值;属性2：值;}

8.2 并集选择器(选择器分组)

如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为他们定义相同的样式。

.class,h3{color:red;font-size:25px;}

所有选择器都会执行后面的样式。任何形式的选择器都可以构成并集选择器(标签选择器，类选择器，id选择器)

8.3 后代选择器(包含选择)

用来选择元素或元素组的后代，写法是外层标签写在前面，内层标签写在后面，中间用空格分割。当标签发生嵌套时，内层标签就成为外层标签的后代。

.class h3{color:red;font-size:25px;}

子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。

8.4 子元素选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟>进行连接，==注意符号左右两侧各留一个空格==。 .class > h3{color:red;font-size:25px;}

这里的子指的是亲儿子不包含孙子重孙子之类。

==注意下面两个例子：==
例1：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>综合案例</title>
	<style type "text/css">
		

	.item >li{   
		color: #0f0;
	}


	/*效果是，全部菜单都变成绿色，因为子结构如果没有样式，会继承父结构的样式*/
	

		
	</style>
</head>
<body>
	
	<ul class="item">
		<li>一级菜单1
			<ul>
				<li>二级菜单1</li>
				<li>二级菜单2</li>
			</ul>
		</li>
		<li>一级菜单2
			<ul>
				<li>二级菜单1</li>
				<li>二级菜单2</li>
			</ul>
		</li>
		<li>一级菜单3
			<ul>
				<li>二级菜单1</li>
				<li>二级菜单2</li>
			</ul>
		</li>
	</ul>

</body>
</html>

效果是，全部菜单都变成绿色，因为子结构如果没有样式，会继承父结构的样式

例子2：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>综合案例</title>
	<style type "text/css">
		
	.item li {
		color: #f00;
	}


	.item >li{   
		color: #0f0;
	}



		
	</style>
</head>
<body>
	
	<ul class="item">
		<li>一级菜单1
			<ul>
				<li>二级菜单1</li>
				<li>二级菜单2</li>
			</ul>
		</li>
		<li>一级菜单2
			<ul>
				<li>二级菜单1</li>
				<li>二级菜单2</li>
			</ul>
		</li>
		<li>一级菜单3
			<ul>
				<li>二级菜单1</li>
				<li>二级菜单2</li>
			</ul>
		</li>
	</ul>

</body>
</html>

效果是：一级菜单绿色，二级菜单粉红色。

8.5 属性选择器

a[title]{color:red; } a标签中带有title属性的都变红
input[type=text] input标签中属性type值完全等于text的
div[class^=font] div标签中class属性值以font开头的
div[class$=footer] div标签中class属性值以footer结束的
div[class*=jd] div标签中class属性值包含jd的

/* 获取到 拥有 该属性的元素 */
li[type] {
  border: 1px solid gray;
}
/* 获取 属性等于某个值的 元素 属性值 可以使用 引号进行包裹 */
li[type="vegetable"] {
  background-color: green;
}
/* 使用空格分隔的 多个属性 其中有某个属性即可获取 */
li[type~="hot"] {
  font-size: 40px;
}
/* 获取以某个属性开头的语法  */
li[color^='green'] {
  background-color: orange;
}
/* 获取以某个值 结尾的属性 */
li[type$='t']{
  color: hotpink;
  font-weight: 900;
}

/* 获取 属性中 拥有某个值的 元素 */
li[type*=ea] {
  font-size: 100px;
}
/*  如果属性的值 只有very 也能够获取  用来获取 多个属性 并且 使用-连接 */
li[price|='very'] {
  background-color: darkred;
}

<ul>
  <li type='fruit' color='green'>西瓜</li>
  <li type='vegetable' color='greenyellow'>西兰花</li>
  <li type='meat'>牛肉</li>
  <li type='meat hot'>猪肉</li>
  <li type='drink hot'>可乐</li>
  <li type='drink hot'>雪碧</li>
  <li price='very-cheap'>红酒</li>
  <li price='very'>白酒</li>
</ul>

8.6 伪元素选择器

.demo 类选择器
:first-child 伪类选择器
::first-letter 伪元素选择器

E::first-letter E元素文本的第一个单词或字
E::first-line E元素文本第一行；
E::selection E元素可改变选中文本的样式；
E::before和E::after 在E元素内部的开始位置和结束位置创建一个元素，该元素为行内元素，且必须要结合content使用。例如：div::before{content:"呵呵";} 在div盒子内部开始的地方插入"呵呵";

p::first-letter {
  font-size: 20px;
  color: hotpink;
}

/* 首行特殊样式 */
p::first-line {
  color: skyblue;
}

p::selection {
  /* font-size: 50px; */
  color: orange;
}

9. CSS书写规范

1.选择器与{之间必须包含空格
2.属性名与之后的:之间不允许包含空格，：与属性值之间必须包含空格。
3.并集选择器，每个选择器声明必须独占一行。示例：

    .post,
    .page,
    .comment {
        line-height: 1.5;
    }

==「建议」==：选择器的嵌套层级应不大于3级，位置靠后的限定条件应尽可能精确。

4.属性定义必须另起一行。
5.属性必须以分号结尾。

10.CSS背景

backgroud-image: 允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。如果有背景图片平铺，则会覆盖背景颜色。
repeat

repeat : 　背景图像在纵向和横向上平铺（默认的）

no-repeat : 　背景图像不平铺

repeat-x : 　背景图像在横向上平铺

repeat-y : 　背景图像在纵向平铺

设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。
position

background-position : length || length

background-position : position || position

position 后面是x坐标和y坐标。可以使用方位名词或者精确单位。
如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。
必须先指定background-image属性

background-attachment

scroll : 　背景图像是随对象内容滚动
fixed : 　背景图像固定

简写

没有强制标准，建议：

background:背景颜色背景图片地址背景平铺背景滚动背景位置

background: transparent url(image.jpg) repeat-y  scroll 50% 0 ;

backgroud-size 背景图片尺寸

a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）

b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。

c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

background-image: url('images/gyt.jpg');
background-size: 300px 100px;
/* background-size: contain; */
/* background-size: cover; */

多背景(CSS3)

逗号分隔

background-image: url('images/gyt.jpg'),url('images/robot.png');

11.文本的装饰

text-decoration 通常我们用于给链接修改装饰效果

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。下划线也是我们链接自带的
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。

CSS(一). 基础