CSS技术（二）基础与html

1：html与css的关系

???? css:层叠样式表的简称，用来设计网页样式的一种规范，和html是一个w3c组织制定发布；

???? html: 定义一个网页的内容与结构，而css来定义一个网页的形式，可以是网页的内容与形式可以分离，便于维护。即这2套规范。

????

2：html与xhtml

??? 均是定义一个网页的内容与结构，可以理解为同一种语言的不同发展阶段

??? 区别：

?? 1：在xhtml中标记名称 必须小写

?? 2：在xhtml中属性名称 必须小写

?? 3：在xhtml中标记必须严格嵌套

?? 4：在xhtml中标记必须封闭

?? 5：在xhtml中空元素的标记也必须封闭

?? 6：在xhtml中属性值用双引号括起来

?? 7：在xhtml中属性值必须用完整形式

?? 8：在xhtml中应该区分内容标记与结构标记

3：在html中引入css方法

?? 1：行内方式（只针对当前）

??

<h1 style="color:white;background-color:blue">test</h1>

?

?

?? 2:内嵌式（针对所有定义）

?????

<style type="text/css">

              h1{ color:white }

</style>

?

?

?? 3: 导入方式(网页最后才装载)

      <style type="text/css">

        @import "mystyle.css"

      </style>

?

?? 4: 链接方式（网页开始就加载）

????

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

?

4: 基本css选择器

??? （1）标记选择器（用标记来选择）

h1      { color:red; font-size:25px;  }
选择器   属性  值

????（2）类别选择器（1个类别选择器可以用在多个相同的标记中）

? 自己定义名称，前面定义加上一个圆点，可以应用于不同的元素

??

<style type="text/css">
.red{
color:red;
font-size:18px;
}
.green{
color:green;
font-size:20px;
}
.two{
font-weight:bold;
}
</style>
<h1 class="red">test</h1>
<p class="red">test1个类别选择器可以用于多个标记</p>
<p class="green">test2</p>
<h2 class="red two">多个类别选择器可以用于1个标记</h2>  

?

?

?????（3）ID选择器

?前面用#表示，多个ID选择器不可以用于1个标记，1个ID选择器不可以用于多个相同的标记

?

<style type="text/css">
#red{
color:red;
font-size:18px;
}
#two{
font-weight:bold;
}
</style>

<p class="red">test1</p>
<p class="red">有问题</p> 
<h2 class="red two">有问题</h2> 

?5：复合选择器

??? 交集选择器

??????? 一个标记选择器+一个类别选择器（一个Id选择器）

?????? div.special{}

?????? div#special{}

?

??? 并集选择器

?????? div,h1.first,p.specia{}

??? 后代选择器

?div h1.first span.first{}