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{}