CSS的四种设置方法以及CSS各种选择器的用法

一、CSS基础

1、 内容简介

·什么是CSS

·CSS语法

·CSS的四种设置方式

 

2、 CSS的设置方式

·内联样式表

直接在HTML标签中嫁入加style属性，就是内联式样式表。

·嵌入样式表

  在HTML文件的head标签内（body内也可以）使用<style></style>标签来定义整个HTML文件的样式。这种方式只能控制当前页面的所有样式，但是不能控制所有页面的样式。

·外部样式表

  将样式单独定义在一个后缀名为.css的文档中，并在HTML中通过link元素连接到HTML中使用。多个文档需要相同的样式时，需要使用外部样式表的形式。

·输入样式表

  可以将一个样式文件输入到另外一个样式库文件中，或将一个样式文件输入到<style>元素中。在一个css文件中通过@import（url）导入其他的样式表。

注意：内联的高于其他的样式表的优先级，其他的和加载的顺序有关！

 

 

二、CSS的多种选择器及其使用方法

1、 内容简介

·什么是样式选择器

·HTML选择器

·类选择器

·ID选择器

·关联选择器

·组合选择器

·伪元素选择器

 

2、 样式选择器

■     selector{

           property:value;

           property:value;

            ……

}

  Selector当定义一条样式规则时，必须指定受这条样式规则作用的网页元素，在一条规则中定义的网页元素就是selector（选择器），也就是选择该样式规则作用于的网页元素。

 

3、 HTML选择器

■     任何一个HTML标签都可以是一个CSS选择符

■     选择符就是赋予内部或外部样式表的名字

■     把HTML标签元素的名字当做CSS的选择器名称

4、  类选择器

同一个选择器能有不同的类，因而允许同一个元素有不同的样式。

当一个选择器被应用到不同的地方，但需要不同的样式时，使用类选择器就可以实现。

■     定义方法

■     .[tag]类名

■     类名是自定义的，如果不加tag则代表所有HTML元素都可以使用该类的样式。

■     同一个标签可以使用多个类 <tag class=”类 类1 类2……”>

 

5、  ID选择器

在HTML页面中，ID属性指定了某个单一元素，id属性就是用来对单一元素定义单独样式。

■     一个HTML页面中，ID属性值要唯一。

■     #idname {}

■     <tag id=””>

■     ID属性一般结合JavaScript使用

 

6、  关联选择器

■     是一个用空格隔开的两个或更多的单一选择器给成的字符串

■     因为层叠顺序的规则，它们的优先权比单一的选择符大

■     必须按关联关系使用，不能有反顺序

■     只要能保持关联关系就可以，不管是在多少层

■     Div #id1 .class p {}

■     <div>

      <div id=”id1”>

          <div class=”class”>

      <p>

11111111111111111111

</p>

</div>

</div>

</div>

 

7、  组合选择器

■     为了减少样式表的重复申明，用逗号分隔开每个选择符就可以了。

 

8、  伪元素选择器

■     指对同一个HTML元素在不同的状态下的一种定义方式

■     目前只有a和p两个HTNL元素可以使用。例如，a:hover

■     a:hover  a:link a:active  a:visited

■     p:first-letter p:first-line

■     tag[.类名]:伪元素 分类的伪元素

 

9、  样式继承

■     所有嵌套在某个HTML标签中的HTML标签都会继承外层标签设置的样式规则。

10、             样式规则的优先级

■     关联样式选择器的优先级最高，组合样式选择器其次，接着是ID选择器，然后是类选择器，最后是HTML选择器