首页技术css样式表的三种选择器,CSS三大选择器的使用方法

css样式表的三种选择器,CSS三大选择器的使用方法

编程之家2026-05-301061次浏览

大家好,关于css样式表的三种选择器很多朋友都还不太明白,不过没关系,因为今天小编就来为大家分享关于CSS三大选择器的使用方法的知识点,相信应该可以解决大家的一些困惑和问题,如果碰巧可以解决您的问题,还望关注下本站哦,希望对各位有所帮助!

css样式表的三种选择器,CSS三大选择器的使用方法

css样式有哪几种选择器

CSS选择器、优先级与匹配原理\x0d\x0a1.id选择器(#myid)2.类选择器(.myclassname)3.标签选择器(div,h1,p)4.相邻选择器(h1+p)5.子选择器(ul< li)6.后代选择器(li a)7.通配符选择器(*)8.属性选择器(a[rel="external"])9.伪类选择器(a:hover,li:nth-child)\x0d\x0a其中ID选择器的效率是最高,而伪类选择器的效率则是最低\x0d\x0a\x0d\x0aCSS的权重\x0d\x0a\x0d\x0a1.通配选择符的权值 0,0,0,0\x0d\x0a2.标签的权值为 0,0,0,1\x0d\x0a3.类的权值为 0,0,1,0\x0d\x0a4.属性选择的权值为 0,0,1,0\x0d\x0a5.伪类选择的权值为 0,0,1,0\x0d\x0a6.伪对象选择的权值为 0,0,0,1\x0d\x0a7.ID的权值为 0,1,0,0\x0d\x0a8.important的权值为最高 1,0,0,0\x0d\x0a使用规则:选择器的权值加到一起,大的优先;如果权值相同,后定义的优先。\x0d\x0a从上面我们可以得出两个关键的因素:\x0d\x0a1.权值的大小跟选择器的类型和数量有关\x0d\x0a2.样式的优先级跟样式的定义顺序有关

创建CSS样式表的三种方式

主要探讨HTML5中CSS(层叠样式表),它是用来对HTML文档外观的表现形式进行排版和格式化。

使用CSS

CSS样式由一条或多条以分号隔开的样式声明组成。每条声明的样式包含着一个CSS属性和属性值。

<p style="color:red;font-size:50px;">这是一段文本</p>

解释:style是行内样式属性。color是颜色属性,red是颜色属性值;font-size是字体大小属性,50px是字体大小属性值。

css样式表的三种选择器,CSS三大选择器的使用方法

三种方式

创建CSS样式表有三种方式:1.元素内嵌样式;2.文档内嵌样式;3.外部引入样式。

1.元素内嵌样式

<p style="color:red;font-size:50px;">这是一段文本</p>

解释:即在当前元素使用style属性的声明方式。

2.文档内嵌样式

<styletype="text/css">

p{

color:blue;

font-size:40px;

}

</style>

<p>这是一段文本</p>

解释:在<head>元素之间创建<style>元素,通过选择器的方式调用指定的元素并设置相关CSS。

3.外部引用样式

<linkrel="stylesheet"type="text/css"rel="external nofollow" href="style.css">

//style.css

@charset"utf-8";

p{

color:green;

font-size:30px;

}

解释:很多时候,大量的HTML页面使用了同一个组CSS。那么就可以将这些CSS样式保存在一个单独的.css文件中,然后通过<link>元素去引入它即可。@charset"utf-8"表明设置CSS的字符编码,如果不写默认就是utf-8。北京电脑培训认为如果有多个.css文件,可以使用@import导入方式引入.css文件。只不过,性能不如多个<link>链接。

css有哪三大基本选择器

1、标签选择器

p{color:red;}

什么是标签选择器?

根据指定标签名称,在当前界面中找到所有该名称的标签,并设置属性

注意点:

标签选择器选中的是当前界面所有同名标签,不能单独选中

只要是HTML中的标签都可以作为标签选择器

2、id选择器#id{color:red;}

什么是id选择器?

根据指定标签的id,在当前界面中找到该id的标签,并设置属性

注意点:

每个HTML标签都有id属性

同一个界面中id是唯一的,不能重复

编写id选择器必须要在id前面加上一个#号

id的名称有一定的规范,只能由字母数字和下划线组成

id的名称不能够以数字开头

id的名称不能与HTML标签同名

如果仅仅是为了设置样式,我们不会使用id,因为前段开发中id是留给js使用的

3、类选择器.class{color:red;}

什么是类选择器?

根据指定标签的类,在当前界面中找到该类的标签,并设置属性

注意点

每个HTML标签都有class属性

同一个界面中class属性是可以重复

编写class选择器必须要在class名称前面加上一个.号

class的名称有一定的规范,只能由字母数字和下划线组成

class的名称不能够以数字开头

class的名称不能与HTML标签同名

class就是专门给某一类标签设置样式的

一个标签可以同时绑定多个class属性

<p class="p1 p2 p3">Test paragraph</p>,这样就绑定了三个类属性

类选择器实践,通过对不同类的组合来实现不同的效果

好了,本文到此结束,如果可以帮助到大家,还望关注本站哦!

dnf新版本(dnf千海天版本)网站滚动文字代码 网页设计中滚动文字怎么弄