html两个类选择器嵌套,CSS层叠样式表--选择器

CSS的作用：用来设置网页结构样式。通过css给html标签设置属性来达到改变标签样式。

选择器、盒子模型、浮动、定位

1.CSS书写位置

内嵌式写法:直接在head标签中创建style标签，在style标签中定义

外链式写法:

首先新建css文件，然后使用link标签引入使用，可引用多个

1.css代码如下

.div{

color:red;

font-size: 30px;

}

.one{

color: blue;

}

在html head标签中引用

行内式写法：在标签中通过style来设置

一段测试文字

2.CSS内嵌式写法

将CSS放到html文件中书写

内嵌式写法

css代码

3.CSS语法

选择器 {属性: 值; 属性: 值;}

选择器：选择标签的过程

选择器有：

-标签选择器

-类选择器

-ID选择器

-通配符选择器

-交集选择器(标签指定式)

-后代选择器

-子代选择器

-并集选择器

-伪类选择器

-属性选择器

-伪元素选择器

4.标签选择器

语法如下

Html标签名 {属性:值;}

常用属性：

color 文字颜色

background-color 背景色

font-size 字体大小

width 设置宽

height 设置高

text-align 设置内容对齐方式，默认left 还有right center等，只能给块级元素设置

text-indent 首先缩进，例如 text-indent: 2em; 首先缩进两个汉字

内嵌式写法

p{

color: red; /*改变文字颜色*/

font-size: 50px; /*改变文字大小*/

background-color: pink; /*改变背景颜色*/

width:300px;

height: 300px;

}

div{

color:blue;

font-size: 30px;

}

段落文字

div文字内容

• 列表1
• 列表2
• 列表3
• 列表4
• 列表5
• 列表6
• 列表7

//上面例子中，网页中所有p和div标签都会按CSS样式显示

// px 表示像素

// em 1em = 一个文字大小 2em=两个文字大小

5.类选择器

语法如下：

. 自定义类名 {属性:值;}

/*类选择器*/

.p2_red{

color:rgb(255,0,0);

}

段落文字

段落2的文字

文字内容

• 列表1
• 列表2
• 列表3
• 列表4
• 列表5
• 列表6
• 列表7

使用方法：通过 .自定义类名{属性:值;}定义一个样式，

标签通过

xxxx

调用类样式

注意：

类样式可以被多个标签同时调用

一个标签可以使用多个类样式，例如

/*类选择器*/

.p_red{

color:rgb(255,0,0);

}

.p_blue{

color:rgb(0,0,255);

}

.public {

font-size: 30px;

}

段落文字

段落2的文字

// class =""引用样式，使用空格进行分隔，加几个空格都可以

//

段落文字

6.id选择器

语法如下：

自定义选择器名 {属性:值;}

#colorone{

color: red;

}

段落文字

段落2的文字

//首先通过 #自定义名称{属性:值;} 定义一个id选择器

//在标签中通过 id="自定义名称"引用

7.类选择器和id选择器的区别

页面中标签的id值必须唯一

一个标签只能调用一个id样式

建议使用类样式，少用，几乎不用id样式

8.通配符选择器

语法如下：

*{属性:值;}

通配符选择器会将所有的标签选中

*{color:red;}

段落文字

段落2的文字

这是div标签

所有文字都是红色的

9.font属性

font-size //设置文字大小

font-weight: bold或写700; //设置文字加粗，默认为normal，设置为400也是normal的效果

font-style: normal; //默认normal，设置为italic 是斜体显示

font-family: 微软雅黑; //设置文字字体，可以设置字体名或英文对应的名称或字体对应的unicode编码，一次可以设置多个字体，字体与字体之间用逗号隔开

line-height: 10 //设置文字行高

10.font属性联写

语法如下：

font: font-weight font-style font-size/line-height font-family

例子：font:700 italic 30px/20px 宋体;

注意：

1.使用联写必须要设置font-size和font-family属性

2.在联写中必须将font-size写在font-family前面

3.如果联写中的所有属性都要设置，按照font: font-weight font-style font-size/line-height font-family顺序书写

11.复合选择器之标签指定式选择器

语法如下：

标签名.类样式选择器{属性:值;}

或

标签名#id选择器{属性:值;}

.one{

color: red;

}

.two{

color:pink;

}

/*想让div中颜色变成蓝色，怎么办，使用标签指定式选择器*/

div.one{

color: blue;

}

div#two{

color:green;

}

段落文字

div中的内容

div2中的内容

例子中的

div.one{

color: blue;

}

就是标签指定式选择器

12.后代选择器

1.后代选择器之间是嵌套关系

2.选择器与选择器之间有空格隔开

3.后代选择器只作用于后代元素

4.会作用于直接后代和间接后代元素

语法如下：

选择器 (空格) 选择器{属性:值;}

div p{

color:red;

}

div中的文字

当前p元素被div嵌套

独立的p元素

13.并集选择器

语法如下：

选择器，选择器{属性:值;}

1.选择器之间必须为逗号隔开

2.标签可以是任意结构

/*div,p,span{

color: red;

}

*/

.one,span{

color:red;

}

div

p标签

文字

14.子代选择器

语法如下：

选择器>选择器{属性:值;属性:值;}

1.子代选择器之间必须是嵌套关系

2.只作用于直接子代元素

div>span{

color:red;

}

p中的span文字

span文字

15.属性选择器

语法如下：

[属性名]{属性:值;}

/*

一种写法

[id][class]{

color:red;

}*/

/*属性选择器的另一种写法，只要class属性为two的起作用如下*/

/*[class="two"]{

color:red;

}*/

/*又是另一种写法，表示作用于class名字以t开头的*/

[class^="t"]{

color:blue;

}

/*作用于以字母p结尾的*/

[class$="p"]{

color:blue;

}

/*选中有字母o的*/

[class*="o"]{

color:blue;

}

div文字

span文字

第二个div文字

16.伪类选择器

结构伪类

语法如下：

选择器:first-child{属性:值;}

选择器:last-child{属性:值;}

选择器:nth-last-child(n){属性:值;}

选择器:nth-last-child(n){属性:值;}

选择器:nth-child(odd){属性:值;} //设置作用于奇数

选择器:nth-child(even){属性:值;} //设置作用于偶数

li:first-child{

color:red;

}

li:last-child{

color:blue;

}

/*选中第二个元素*/

li:nth-child(2){

color:yellow;

}

/*选倒娄第三个元素*/

li:nth-last-child(3){

color:green;

}

li:nth-child(odd){

color:yellow;

}

li:nth-child(even){

color:yellow;

}

• 1
• 2
• 3
• 4
• 4
• 4
• 4
• 4