CSS的基本语法

一.CSS的基本语法

1.1CSS的基本语法结构

html 复制代码

h1 {
	font-size:12px;
	color:#F00;
}

h1 选择器

font-size:12px 声明

font-size 属性

CSS的最后一条声明后的";" 可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束";" 都要写上

1.2style标签

html 复制代码

<style type="text/css">
h1 {
	font-size:12px;
	color:#F00;
}
</style>

二.HTML中引入CSS样式

2.1行内样式

使用style属性引入CSS样式

html 复制代码

<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>

2.2内部样式表

CSS代码写在<head>的<style>标签中

html 复制代码

<style>
        h1{color: green; }
</style>

2.3外部样式表

CSS代码保存在扩展名为.css的样式表中

HTML文件引用扩展名为.css的样式表，有两种方式

2.3.1链接式

html 复制代码

<head>
  ......
<link href="style.css" rel="stylesheet" type="text/css" />
......
</head>

href 文件路径

rel 使用外部样式表、

type 文件类型

2.3.2导入式

html 复制代码

<head>
......
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>

三.CSS3基本选择器

3.1标签选择器

HTML标签作为标签选择器的名称<h1>...<h6>、<p>、<img/>

html 复制代码

p { font-size:16px;}

p 标签名称

font-size 属性

16px 值

3.2类选择器

html 复制代码

.class { font-size:16px;

class 类名称

font-size 属性

16px 值

3.3ID选择器

html 复制代码

#id { font-size:16px;

id id名称

font-size 属性

16px 值

注意：

标签选择器直接应用于HTML标签

类选择器可在页面中多次使用

ID选择器在同一个页面中只能使用一次

四.CSS的高级选择器

4.1层次选择器

css 复制代码

后代选择器
body p{  background: red;  }

注意:

后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入

css 复制代码

 子选择器
 body>p{  background: pink;  }

css 复制代码

相邻兄弟选择器
.active+p {  background: green;  }

css 复制代码

通用兄弟选择器
.active~p{  background: yellow;  }

4.2结构伪类选择器

前三个是一类，在父级里从一个元素开始查找，不分类型，不具有指定元素类型的能力

后三个是一类，在父级里先看类型，再看位置，具有指定元素类型的能力

示例

css 复制代码

ul li:first-child{ background: red;}
ul li:last-child{ background: green;}
p:nth-child(1){ background: yellow;}
p:nth-of-type(2){ background: blue;}

分别是：

选择ul下的第一个子元素，并且是li，变为红色背景

选择ul下的最后一个子元素，并且是li，变为绿色背景

选择到父元素的第一个p元素，变成黄色背景

选择到父元素的第二个p元素，变成蓝色背景

4.3属性选择器

4.3.1 E[attr]选择器：

css 复制代码

 a[id] { background: yellow; }

含有id属性的a元素，设置背景元素使黄色

4.3.2 E[attr=val]属性选择器：

css 复制代码

 a[id=first] { background: red; }

含有id属性，并且id属性值为first的a元素，背景颜色变成红色

E[attr=val]属性选择器中，属性和属性值必须完全匹配才能被选中

4.3.3 E[attr*=val]属性选择器

所有的a元素都有class属性，并且属性中都有links字符串，把其背景颜色设成红色

4.3.4 E[attr$=val]属性选择器

 a[href$=png] { background: red; }

含有href属性，并且属性值是png字符结尾的，背景颜色变成红色

4.3.5 E[attr^=val]属性选择器

css 复制代码

 a[href^=http] { background: red; }

含有href属性，并且属性值是http字符开头的，背景颜色变成红色