CSS三种引入方式与选择器

最新推荐文章于 2025-12-02 22:03:53 发布

原创最新推荐文章于 2025-12-02 22:03:53 发布 · 149 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

本文探讨CSS的三种引入方式：行间样式、内部样式和外部样式，并介绍常用选择器如标签、类、ID等的权重，以及组合、后代和子代选择器的使用技巧。

CSS三种引入方式：行间样式，内部引入方式，外部引入方式

补充：行间样式是1000，内部和外部之间没有权重之分，后面的会覆盖前面的

常用选择器：标签选择器：权重为1

class选择器：权重为10 ；特点：一个标签可以有多个class名，多个标签可以有相同的class名

id选择器：权重为100；特点：id是唯一的，id名不能相同

后代选择器：权重为几个选择器权重相加

子代选择器：权重为几个选择器权重相加

组合选择器：权重每一个选择器单独计算

通配符选择器：权重最小

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Dimples___

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【CSS笔记】CSS三种样式表、CSS样式表优先级、CSS选择器

✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过优快云记录学习心得和笔记内容。

08-19

1119

CSS，全称是：Cascading Style Sheets，层叠样式表，用于修饰HTML页面的。CSS编写的规则分为两部分，分别是：选择器、声明块。声明块，需要使用【{}】大括号包裹，括号里面使用【key: value；】的格式定义属性。选择器，表示需要对哪个HTML标签添加CSS样式，声明块表示要给选择的标签添加什么样式效果。h1 {}

CSS引入方式(内部引入、行内引入、外部引入)

qq_40922845的博客

02-28

1195

内部引入 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>内部引入</title> <style type="text/css"> div{ font-size: 30px; color: red; }...

参与评论您还未登录，请先登录后发表或查看评论

css的三种引入方式

baiccnymyh的博客

09-14

658

css三中引入方式：行间样式>内部样式=外部样式（内部样式和外部样式优先级相同，文档后面的会覆盖前面的）  <!-- 外部引入方式外部引入方式开发中最常用的引入方式语法：在head中，使用link 标签引入

CSS的引入方式

FZUMRWANG的博客

09-18

332

CSS行间引入方式 CSS是 <!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title></title> </head> <body> <!--

html样式表三种引入方式

lanseguhui的博客

06-01

1705

样式表三种引入方式 1.行间样式，写在开始标签内部，优先级最高，维护性最差，尽量避免使用 2.内部样式表，写在style标签内，优点：一般不会造成样式丢失，缺点：可维护性较低 3.外部样式表，写在.css文件中，在Html中靠Link标签引入，优点：代码分离方便维护，目前主流样式引入方式外部样式表和内部样式表，没有优先级关系，选择器优先级相同的情况下，谁写在后谁生效...

css笔记

xz100599的博客

08-25

288

html:结构层css:样式层层叠样式表级联样式表cascading : 层叠级联style: 样式sheet:表格为HTML标记语言提供了一种样式描述字体颜色,宽高....即[设置HTML页面中的元素的位置排版样式外关等]如文本内容 (字体大小对齐方式等) 图片的外形(宽,高,边框等)css语法:由选择器和声明组组成选择器{写样式}选择器:要设置样式的html标签声明组:{}声明组:由声明语句组成声明语句:由属性名和属性值组成属性名和属性值以冒号相连。...

详解CSS文件的三种引入方式

09-22

本篇文章将详细介绍CSS文件的三种引入方式：行内样式、内部样式表和外部样式表，以及它们的优缺点和优先级规则。一、行内样式行内样式是指在HTML元素的style属性中直接定义CSS样式。这种引入方式直观且直接，但不...

HTML引入css样式的三种方式，css选择器的三种样式

Tom197的博客

06-06

3135

css文件的引入： css样式的三种方式第一种：内联定义方式 <body> <div style ="样式名：样式值"></div> </body> 第二种：样式块 <head> <title></title> <style type="text/css"> /*选择器*/ </style> </head> 第三种：引入外部独立css文.

CSS 样式的使用方式、选择器

12-13

在html中使用css的三种方式： 1、行内样式：同过元素的style属性来设置 <p xss=removed>hello 属性之间分号隔开。 2、内部样式：在<head>的<style>元素中定义css样式 <style> p{font-size: 20...

练习前端-CSS引入、基础选择器-day04

08-31

1. **CSS引入方式**： - **内联样式**：通过在HTML元素的`style`属性中直接编写CSS代码，如`;">内容</div>`。 - **内部样式表**：将CSS代码放在HTML文档的`<head>`部分内的`<style>`标签中，如`<style>body{...

CSS层叠样式表

jcf52的博客

04-20

3957

一.css 介绍层叠样式表，是一种样式表语言，用来描述HTML和XML文档的呈现。随着HTML的发展，为了满足面设计者的要求，HTML添加了很多显示功能，但是随着这些功能的增加，使得HTML越来越杂乱，HTML 页面也越来越臃肿，CSS便随之诞生，CSS 用于简化HTML标签，把关于样式部分的内容提取出来，进行单独的控制，使结构与样式分离开发。 CSS 是以HTML为基础，设置网页的外观显示样式，如字体、颜色、背景的控制及整体的布局等，和HTML 类似，CSS也不是真正的编程语言，甚至不是标记语言。..

CSS的三种引入方式：外部样式、内部样式和行内样式

热门推荐

Ahua_Core的博客

03-07

3万+

CSS的三种引入方式：外部样式、内部样式和行内样式外部样式链接式：link标签导入式：@import链接式与导入式的区别内部样式行内样式样式优先级外部样式即CSS代码保存在外部，HTML文件通过链接式link或者导入式@import引用这个外部样式表。 <!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>外部样式表</title> <!--链接式:推荐

HTML5导入式,详解CSS文件中的4种引入方式:行内,内联式,外部式,导入式

weixin_34416354的博客

06-17

896

CSS引入方式-行内式通过 style这个标签属性,将css键值对直接写入标签内css引入方式-内嵌式(嵌入式)使用style标签将css属性名和属性值引入到html页面中,通常style标签放置在head标签中。为什么css样式要放置在head标签中呢,因为代码从上到下执行,如果先加载结构,那么用户看到的就将是干巴巴的内容,而没有通过美化,而先加载样式后加载结构,就相当于孩子出生就是穿着衣服的！...

CSS的引入方式----行内式、嵌入式、链接式

whileqq的博客

03-14

4792

CSS的引入方式按照CSS样式书写的位置（或引入的方式），CSS样式表可以分为三大类 1、行内样式表（行内式） 2、内部样式表（嵌入式） 3、外部样式表（链接式）一、内部样式表（嵌入式）（1）是写到html页面内部，是将所有的CSS代码抽取出来，单独放到一个style标签中（2）style理论上可以放到html的任何一个地方，但通俗的约定放在文档的head标签中通过此种方式，可以方便控制当前整个页面中的元素样式设置优缺点：代码结构清晰，但没有实现结构与样式完全分离二、行内样式表（行内式）是在

三种引入方式

weixin_44802155的博客

11-03

1450

外部引入方式写法与内部样式的写法完全一样，只是外部引入方式是将CSS代码保存在扩展名为.CSS的样式表中，在HTML文件中引用扩展名为.CSS的样表符。引入的方式用链接式和导入式两种方式。链接式是将所有的样式放在一个或多个以.CSS问扩展名的外部样式表中，通过网页的标签中使用标记将外部样式表文件连接到HTML文档中。语法如下 <link herf=”mystyle.css” rel=...

【JavaScript】内部与外部引入方式

weixin_30782331的博客

06-14

270

1.内部引入方式： script的type属性默认为"text/javascript"，可以不写 1 <script type="text/javascript"> 2 function init() { 3 // //案例二：书写轮播图片显示的定时操作(3秒) 4 // ...

前端学习笔记(CSS)——三种引入CSS的方式与优先级比较

Orangeric

03-10

568

index.html文件 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;CSS层叠样式表&lt;/tit

css的三大引入方式

qq_39121245的博客

02-23

5456

css的三大引入方式（内部样式、外部样式和内联样式）及其权重

CSS 网页布局：技术基础与实践技巧