css的学习

css 是 Cascading Style Sheets，层叠样式表。 层叠含义是多种样式可以作用于同一个html元素上，且都会有独立的表现效果。

内联样式

在标签内使用 style 属性指定 css 代码。

hello css

内联样式不推荐使用，因为表现和内容耦合在一起，不好维护。

内部样式

在 head 标签内定义 style 标签，style 的标签体内容就是 css 代码。

div{color:blue;}

外部样式

在 head 标签内定义 link 标签，引入外部的 css 资源文件。

或者

@import “css/1.css”；

CSS语法格式

选择器 {
	属性名1: 属性值1
	属性名2: 属性值2
	属性名3: 属性值3
	...			
}

选择器：筛选具有相同特征的元素。 属性对：属性名和属性值使用冒号分隔，而属性对之间使用分号分隔。

选择器 基本选择器

基本选择器也叫简单选择器，点击查看更多详情。

ID 选择器

语法：

#id属性值{}

例如：

	#male {
    	color: blue;
    }

元素选择器

直接写标签名，语法：

标签名称 {
	属性名1: 属性值1
	属性名2: 属性值2
	属性名3: 属性值3
	...	
}

类选择器 不带标签名

语法：

.class属性值 {
	属性名1: 属性值1
	属性名2: 属性值2
	属性名3: 属性值3
	...	
}

说明：将样式作用于 class 属性值匹配的元素上

带标签名

语法：

标签名称.class属性值 {
	属性名1: 属性值1
	属性名2: 属性值2
	属性名3: 属性值3
	...	
}

说明：上面的选择器，是将样式作用于标签名称和 class 属性值都匹配的元素上。

通用选择器

通用选择器（*）选择页面上的所有的 HTML 元素。

语法：

* {
	属性名1: 属性值1
	属性名2: 属性值2
	属性名3: 属性值3
	...	
}

并集选择器

并集选择器也叫分组选择器。

选取 h1，h2，h3 元素，将它们的文本颜色设为 green：

h1, h2, h3 {
color: green; 
}

选取 id 值分别为 name，password，age 的元素，将它们的文本颜色设为 green：

#name, #password, #age {
color: green; 
}

选择器的优先级

id 选择器 > 类选择器 > 元素选择器

扩展选择器 组合选择器

后代选择器匹配属于指定元素后代的所有元素。

#d2 p {
	font-size: 120px;
}

说明：表示将 id 属性值为 d2 的元素内部的所有 p 元素的字号设为 120px。

点击查看更多组合选择器。

属性选择器

属性选择器用于选取带有指定属性的元素。

下例选择所有带有 target 属性的 元素：

a[target] {
  background-color: yellow;
}

点击查看更多属性选择器。

伪类选择器

语法：

选择器:状态 {}

锚伪类：

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接，即按鼠标左键点击未松开的状态 */
a:active {
  color: #0000FF;
}

点击查看详情。

伪元素选择器

点击查看详情。