CSS选择器

http://t.csdn.cn/EY5xE（入门学习1）

http://t.csdn.cn/zpRi9 （入门学习2）

http://t.csdn.cn/PNvdB（入门学习3）

前面学习文章的链接我给大家放在这里哦，大家可以巩固学习

今天我们开始一起学习css选择器的知识

一、css简介

我们知道网页分成三个部分

结构  20个左右标签，先用一段时间

表现  外在显示的样子  css

行为  JS

css  层叠样式表

        网页实际上是一个多层的结构，通过css可以分别为网页的每一层来设置样式

        而最终我们能看到的只有最上边的一层

        设置网页中元素的样式

二、css书写位置（引入方式）

一共有三种引入方式，行内样式、内部样式和外部样式，下面为大家一一介绍

2-1 行内样式

行内样式又可称为内联样式

写在开始标签里面，写一个style属性，将一组一组的样式写在style属性值里面

          color: red;  样式名:样式值;

          可以写多组样式，但一定要用 ; 隔开

color 设置字体的颜色

background-color   设置背景色

font-size   设置字体的大小   默认的字体大小是16px

行内样式比较适合初学者学习的时候使用，在网站开发时尽量不要去用，因为使用这种样式会把结构和CSS全部融合在一个页面里面，造成代码冗余，后期调整样式的时候非常不方便。

2-2 内部样式表

写在head标签内部，写一个子元素，style标签，

通过选择器选中对应的要设置的元素/标签，在 {} 里设置一组一组样式

也可以写多组样式，也需要用 ; 隔开

 

内部样式比较适合案例或者比较小的页面中，因为它也会增加HTML文件的代码量，同时也不方便复用

2-3 外部样式表

在html文件的外部新建一个.css文件，在css文件里写样式

然后通过在head标签内部写子标签link标签，将html文件和css文件联系在一起

link标签里有href属性，在href里写引入css文件的路径

  

 

 

注意：这种方式推荐使用

 三、css的语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（background-color）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

 

下面这行代码的作用是将 p元素内的文字颜色定义为红色，同时将字体大小设置为 50 像素。

在这个例子中，p 是选择器，color 和 font-size 是属性，red 和 50px 是值。

下面的示意图为您展示了上面这段代码的结构：

CSS 语法

提示：请使用花括号来包围声明。

值的不同写法和单位

除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000：

1	p { color: #ff0000; }

为了节约字节，我们可以使用 CSS 的缩写形式：

1	p { color: #f00; }

我们还可以通过两种方法使用 RGB 值：

1 2	p { color: rgb（255,0,0）； } p { color: rgb（100%,0%,0%）； }

请注意，当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0 之后不需要使用 px 单位，因为 0 就是 0，无论单位是什么。

补充：CSS注释:CSS的注释，作用和HTML注释类似，只不过它必须编写在style标签中或者是css文件中

四、常用选择器

在学习几个常用选择器前，先补充一点小知识

块元素：

         1、独占一行

         2、宽度是父元素的100%

         3、高度是被内容撑开的

行内元素

          1、不会独占一行

          2、宽高是内容撑开的，不可以设置宽高

4-1 元素选择器(标签选择器)

      语法：标签名 {} 

      作用：选中对应标签包裹的内容

      例子：h1{},h2{},p{},div{},span{}

 

4-2 id选择器

(id属性值不可以重复使用)

语法：#id属性值{}

作用：选中对应的id属性值的内容

例子：#p1{},#pp{},#abc{}

4-3 class选择器

（用法跟id选择器是一样的，只不过它可以复用）

语法：.class属性值{}

作用：选中对应class属性值的内容

例子：.pp{},.p1{}

4-4 通配选择器

语法：*{}

作用：选中页面中所有的标签

（PS：今天先学这么多，大家勤动手练习一下，试试这些选择器效果感受一下，增加印象）