HTML基础知识概览3

**

HTML基础知识概览3

**
一、Css基本概念
使用CSS让单调的HEML网页更富表现力：文档体积小，便于搜索，可读性好 分层思想HTML+CSS 结构和表现分离 ，易于维护和管理
CSS的基本概念：CSS是层叠样式表(Cascading Style Sheet) ,用于控制网页的外观。指颜色 背景 大小元素定位…

二、Css选择器
css选择器，也称为选择符，用于选择需要添加样式的元素
css的基本语法:
选择器{
属性:属性值; （样式规则：键值对）
…}

1、全局选择器 通配符 通用 权重 0
全局选择器：设置所有标签使用同一样式，用表示
全局选择器语法:{}

html代码：

<h1>我是标题红色</h1>
<p>我是段落红色</p>
css代码：
*{ color:red;}             ！结构和样式分离：分工明确，操作简单

2、组合选择器：

H1,h2,h3,h4,h5,p{
}
 h.special,special,#one{
text-decoration:underline;//下划线
}

3、后代选择器

<style id="my">
			/*查找p元素的后代span元素  空格就是后代*/
			p span{
				color: green;
			}
			i span{
				color: red;
			}
			.pcolor #my{
				color: lightskyblue;
				font-size: 50px;
			}
		</style>
<p id="my" class="pcolor">段落1</p>
		<p class="pcolor"><span id="my">后代元素</span></p>
		<p>段落2</p>
		<p>开心<span>y<i>u<span>yang</i></span></span>快乐</p>

4、子元素选择器
语法：
选择器1>选择器2>…{
//样式规则
}

<style type="text/css">
			p>i{
				color: red;
			}
		</style>
<p>lalal</p>
		<p>不<i>爱你</i></p>

5、嵌套选择器
选择器1 选择器2{….}
P b{
Color:bule;
}

<p>嵌套使<b>用<b>CSS</b></b>标记的方法</p>
嵌套之外的<b>标记</b>不生效

6、标签选择器 元素选择器 权重 1
标签选择器：用于声明标记采用的样式。
例如，p选择器用于声明所有p标签的样式，同样也可用h1选择器来声明页面中所有h1标签的样式。
标签选择器的语法：
E Selector{
{ property:value1;
property:value1;
样式规则
}
特点：选择的面比较广，不是最灵活。可以对多个标签同事进行组合声明 }
p{}直接给标签设置样式的就是标签选择器
html代码：

<h1>我是标题红色</h1>
<p>我是段落红色</p>
<p>我是段落红色</p>
<p>我是段落红色</p>
css代码：
 p{ color:red;}
p,h1{color:red;}    

7、类选择器 样式选择器 权重 10
类选择器：class 用来为一系列标签定义相同的样式。
例如：当声明了p标签为红色时，页面中的所有p标签都显示为红色，如果希望其中的几个不是红色，就需要使用类别选择器 。
类选择器的语法: E.类名{样式规则}
在网页中书写css代码:
.red{ color:red;}
给h1标签和第三个