0
点赞
收藏
分享

微信扫一扫

网页前端第三次培训(CSS的基本使用,选择器)

zhoulujun 2022-02-06 阅读 33

一.CSS的基本使用

1.CSS的定义

选择器名

{属性名:属性值;

属性名:属性值;

. . . . . .

}

注意点:

1.声明需要使用{}括起来,每个声明以分号;结尾。

2.一行建议一个声明。

3.如果样式的属性由多个单词组成,则用引号引起来。

2.CSS的注释

/*注释内容*/

3.CSS的三种使用方式

(1)行内样式:

直接写在标签上的样式,在标签上通过style属性定义的样式。

(2)内部样式:

定义在style标签中的样式,style标签一般设置在head标签中。

 

 

(3)外部样式:

定义在外部的CSS文件中,通过link标签引入。

<link rel="stylesheet" type="text/css" href="css文件的路径" />

注:当有多重样式时,越精准越优先(就近原则)

 

二.CSS基本选择器

1.通用选择器

*{

属性名:属性值;

. . .

}

 

2.元素选择器

元素名/标签名{

属性名:属性值;

. . .

}

 

3.ID选择器 #

#id属性值{

属性名:属性值;

. . .

}

 

4.类选择器 .

.class属性值{

属性名:属性值;

. . . 

}

 

5.分组选择器

选择器1,选择器2,选择器3 . . .

{

属性名:属性值;

. . .

}

 

三.CSS组合选择器

1.后代选择器

选择指定元素的所有指定后代元素,以空格隔开。

选择器 指定元素{

属性名:属性值;

. . .

}

 

2.子代选择器

选择指定元素的第一代子元素,以加号+隔开

选择器 + 指定元素{

属性名:属性值;

. . .

}

 

3.相邻兄弟选择器

选择指定元素的下一个指定元素(只会找一个),两者有相同的父元素,以加号+隔开

选择器+指定元素{

属性名:属性值;

. . .

}

                                 

4.普通兄弟选择器

选择指定元素后面的所有指定元素,两者有相同的父元素,以波浪号~隔开

选择器 ~ 指定元素{

属性名:属性值;

. . . 

}

 


 

举报

相关推荐

0 条评论