CSS底层基础:小白速来

news/2024/12/3 6:32:46/

1. CSS简介

CSS (Cascading Style Sheets) 是一种用来描述HTML或XML文档样式的语言。它使得开发者能够控制网页的布局和外观,包括字体、颜色、间距等。CSS通过选择器来指定要应用样式的元素,并定义这些元素的具体样式属性。

基本结构示例:

/*selector {property: value;
}*/
h1 {color: red;
}

2. CSS与HTML的关系

  • 依赖性:CSS必须依附于HTML DOM来作用。DOM是HTML文档的一个对象模型,它将文档表示成树状结构。
  • 作用机制:CSS通过选择DOM中的特定元素并应用规则来改变页面的视觉效果。

3. CSS引入方法

3.1 内联样式

直接在HTML标签内部使用style属性:

<p style="color: blue;">这是一个段落。</p>

3.2 外部样式表

使用<link>标签链接到一个独立的CSS文件:

<head><link rel="stylesheet" type="text/css" href="styles.css">
</head>

3.3 @import导入

在CSS文件中使用@import指令引用另一个CSS文件:

@import url('anotherStylesheet.css');

3.4 行内样式

在HTML文档的<head>部分使用<style>标签嵌入CSS代码:

<head><style>body { background-color: lightblue; }</style>
</head>

4. 渲染流程

浏览器首先加载CSS文件,然后解析HTML文档形成DOM树。接着,根据CSS规则生成渲染树,最后由浏览器的渲染引擎基于渲染树绘制出最终显示给用户的界面。
在这里插入图片描述

5. 优先级计算

CSS样式的优先级按以下顺序递增:

  • 标签选择器 (权重1)
  • 类选择器 (权重10)
  • ID选择器 (权重100)
  • 行内样式 (权重1000)
  • !important声明 (覆盖所有其他规则)

对于复合选择器,如.container ul li:nth-child(odd),其优先级为各个简单选择器优先级之和:10 (类) + 1 (后代) + 1 (后代) + 10 (伪类) = 22。

6. CSS选择器分类

6.1 基础选择器

  • 标签选择器:直接针对HTML标签名设置样式,如p {}
  • 类选择器:以.开头,可以应用于多个元素,如.myClass {}
  • ID选择器:以#开头,每个页面中唯一,如#myId {}
  • 通配符选择器:用*表示,匹配所有元素,但不推荐频繁使用,因为性能较差。

6.2 组合选择器

  • 后代选择器:空格分隔的选择器,例如div p {}匹配所有作为div子元素的p
  • 子元素选择器:使用>符号,仅匹配直接子元素,如div > p {}
  • 相邻兄弟选择器:使用+连接,选择紧接在前一个元素之后的同级元素,如h1 + p {}
  • 普通兄弟选择器:使用~连接,选择前面有指定元素的所有后续兄弟元素,如h1 ~ p {}

6.3 伪类选择器

  • 链接伪类:用于定义不同状态下的链接样式,如:hover, :active, :visited等。
  • 状态伪类:如:focus, ::before, ::after等,主要用于交互状态或内容插入。
  • 结构伪类:如:nth-child(n), :first-child, :last-child等,依据元素在父元素中的位置进行选择。

6.4 伪元素选择器

允许向某些选择器添加特殊的效果,比如::before::after可以在内容前后插入额外的内容。

6.5 属性选择器

允许基于元素的属性及其值来选择元素,提供了更加灵活的选择方式,如[type="text"]选择所有type属性值为text的元素。

以上内容包含了CSS的基础概念、引入方法、渲染过程以及各种类型的选择器,帮助你更深入地理解如何有效利用CSS来增强你的网页设计。


http://www.ppmy.cn/news/1551926.html

相关文章

《大道平渊》· 卅 —— 凡做事皆應抓其關鍵

《大道平淵》 凡做事皆應抓其關鍵, 切中肯綮, 統籌兼顧, 其輕重緩急心中應自有丘壑。思維混亂且摸不清頭緒的人, 往往只關注事情無關緊要的部分, 卻對其核心熟視無睹。他們把大量時間和耐心全部浪費在了既無關緊要又細枝末節的小事上, 而對那些重要的事情卻抽不出時間來處理。 …

无线网络技术的发展与技术

无线网络技术在过去几十年中取得了巨大的进步&#xff0c;从最初的2G到如今的5G&#xff0c;无线通信已经深刻改变了我们的生活和工作方式。 本文将详细介绍无线网络技术的演进历程和相关的技术细节&#xff0c;包括无线传输原理、频谱利用、多址技术、调制与解调技术等&#…

Go学习笔记之数据类型转换

Go数据类型转换 整型与浮点型转换 package mainimport ("fmt""strconv" )func main() {// 类型转换建议是从低位的类型转换到高位的类型,比如从int转换到float64,从float32转换到float64d : 10f : 3.14fmt.Println(float64(d) f)}其他类转换成字符串 //…

bash命令缓存导致命令执行失败的问题

1、问题背景 为了修复老版本 vsftpd 的安全漏洞&#xff0c;需要把生产环境上 vsftpd 版本升级到 vsftpd-3.0.5&#xff0c;因为直接使用 rpm 包的方式进行升级还涉及到下层依赖包的升级(生产环境上的依赖包版本不能随意变更&#xff0c;可能会影响其他上层应用)&#xff0c;所…

C++零基础入门:基于树莓派Pico的趣味编程体验

"Hello World!" 是每位编程爱好者的起点。通过这个简单的项目&#xff0c;不仅可以了解C的基本语法&#xff0c;还能体验树莓派Pico硬件开发的乐趣。本文将深入解析如何通过“Hello World!”项目&#xff0c;帮助零基础的初学者掌握基础编程技能&#xff0c;并开启信…

网络安全——浅谈HTTP协议

HTTP请求 HTTP请求是客户端往服务端发送请求动作&#xff0c;告知服务器自己的要求。 HTTP请求由状态行、请求头、请求正文三部分组成&#xff1a; 状态行&#xff1a;包括请求方式Method、资源路径URL、协议版本Version&#xff1b;请求头&#xff1a;包括一些访问的域名、…

PyTorch 模型转换为 ONNX 格式

PyTorch 模型转换为 ONNX 格式 在深度学习领域&#xff0c;模型的可移植性和可解释性是非常重要的。本文将介绍如何使用 PyTorch 训练一个简单的卷积神经网络&#xff08;CNN&#xff09;来分类 MNIST 数据集&#xff0c;并将训练好的模型转换为 ONNX 格式。我们还将讨论 PTH …

telnet IP某个端口,但是ping不通IP :网络连接中的不同境遇

在网络探索的旅程中&#xff0c;我们常常会遇到一些看似矛盾的现象&#xff0c;比如能够 Telnet 一个 IP 的端口&#xff0c;却 Ping 不通这个 IP。这究竟是为何呢&#xff1f; 以往&#xff0c;我曾天真地认为&#xff0c;Telnet 通了&#xff0c;Ping 肯定也是通的。毕竟&am…