css进阶语法

css进阶语法

选择器：在大括号之前写的内容，就是选择器，找到你要选择的内容

标签选择器：用标签的名字来进行页面元素、标签、标记的选择

id选择器：用html标签中的id属性来进行选取的方式
例子

#p1{color: aqua;}
#p2{color: red;}
#p3{color: aquamarine;}
<body>
	<p id="p1">周杰伦</p>
	<p id="p2">周杰伦</p>
	<p id="p3">周杰伦</p>

命名规则

1、不可以数字开头

2、不能使用除中划线、下划线之外的符号

3、不推荐中文

4、尽量做到见名知意(看到名字就知道意思)

唯一性：

1、id命名不可以重复使用；因为在js中会因为id的命名起冲突而导致报错

2、每个标签只能有一组id（就像每个人只有一个身份证号一样）

class类选择器

类选择器：使用html中的class的值来进行选取的方式
语法：

			.类名{xx}
			<p class = "类名">xx</p>

​ 注意:class类选择器可以重复命名，每个标签可以有多个类名，记得用空格隔开
​ 例如：

xx


​ 命名的规则：与id的命名规则完全一样

css书写的位置、引入方式

1、内嵌式：css卸载style标签中，放在title标签的后面，应为html代码和css代码混在同一个文件当中

2、外链式：css代码和html代码，实现代码分离的效果，使用link标签设置href属性，即可单独把css文件外链入到当前的html文件中

css两种不同的方式的应用场景
1、内嵌式：应用在电商网站的首页，因为对网页的打开速度有严格的要求，一次性把html和css都加载进来
2、外链式：除了 电商网站首页，因为这样能实现代码的分离，方便后期代码的修改

了解行内式

行内式：css代码直接写在标签上，这种形式是绝对强烈不推荐使用
原因:修改起来不方便、重复代码太多，导致页面加载速度边慢！浪费性能
例子：

	<p style="color:red;">周杰伦</p>
	<p style="color:red;">周杰伦</p>
	<p style="color:red;">周杰伦</p>
	<p style="color:red;">周杰伦</p>
	<p style="color:red;">周杰伦</p>

鼠标移入：伪类

:hover 伪类：鼠标移入动作执行后的css代码

p:hover{color: aqua;}

注意：鼠标移入和鼠标悬停是不同的动作

并列、并集选择器

并列、并集选择器：需要一句话选择多个元素的时候，可以用逗号进行连接语法

语法规则：

p,div,h3{color:skyblue}

后代选择器

后代选择器：使用空格来进行选取后代元素的一种方式
语法规则：div span{color: yellow;}
意思就是找到div的后代，例如span，也可使想成被div包裹住的就是div的后代（儿子、孙子、重孙子）

posted @ 2024-09-10 13:36  代码是一种旋律  阅读(27)  评论(0)    收藏  举报