CSS 核心知识点全解析:从基础到实战应用

大家好!今天这篇文章将系统总结 CSS 的核心知识点,从最基础的样式引入到复杂的选择器应用,再到盒子模型、文本处理等实战技巧,全程结合代码示例,让你轻松掌握 CSS 的精髓。

一、CSS 是什么?为什么需要它?

CSS(层叠样式表)是用来控制网页外观的语言。我们可以把网页比作 “毛坯房”,HTML 负责搭建 “墙体结构”(标签),而 CSS 则负责 “装修”—— 设置颜色、字体、布局等,让网页更美观、易读。

前端有三大核心技术:

  • HTML(结构层):定义页面元素
  • CSS(表现层):控制元素样式
  • JavaScript(行为层):实现交互效果

今天我们重点聚焦 “表现层” 的 CSS。

二、CSS 样式的引入方式

要让 CSS 生效,首先要知道如何将样式 “连接” 到 HTML。常见的引入方式有三种:

1. 外链式(推荐)

通过<link>标签引入外部.css文件,实现 HTML(结构)和 CSS(样式)的彻底分离,多个页面可共享同一份样式,便于维护。

<!-- 在<head>中引入 -->
<link rel="stylesheet" href="./css/common.css">

优点:一次修改,多处生效;减轻 HTML 文件体积。

2. 内嵌式

在 HTML 的<style>标签内编写 CSS,样式仅作用于当前页面。

<head><style>p { color: red; } /* 所有p标签文字变红 */</style>
</head>

适用场景:样式仅用于当前页面,且代码量不大时。

3. 行内式

直接在 HTML 标签的style属性中写样式,优先级最高,但会导致结构和样式混杂,不推荐大量使用。

<p style="color: blue; font-size: 20px;">行内样式</p>

总结:优先使用外链式,其次内嵌式,尽量避免行内式。

三、CSS 选择器:精准定位元素

CSS 选择器的作用是 “选中” 需要设置样式的 HTML 元素。就像我们在人群中找人,需要通过 “特征” 定位,选择器就是元素的 “特征”。

1. 基本选择器

最常用的基础选择器,覆盖大多数简单场景。

选择器语法作用示例
标签选择器标签名选中所有同名标签p { color: red; }(所有 p 标签)
类选择器. 类名选中所有带该类名的标签.active { font-size: 20px; }
ID 选择器#ID 名选中唯一带该 ID 的标签(ID 唯一)#logo { width: 100px; }
通配符选择器*选中所有标签* { margin: 0; padding: 0; }(清除默认边距)
并集选择器选择器 1, 选择器 2同时选中多个选择器的元素p, .box { color: blue; }(p 标签和.box 类)

2. 高级选择器

处理更复杂的选择场景,比如父子关系、状态变化等。

(1)组合选择器:处理元素关系
  • E>F:选中 E 的直接子元素F(仅儿子,不含孙子)
    .app>p { color: red; } /* 选中class为app的元素的直接子元素p */
    
  • E F:选中 E 的所有子孙元素F(儿子、孙子都算)
    .app p { background: yellow; } /* 选中app内所有p(包括嵌套的) */
    
  • E+F:选中 E 后面的第一个兄弟元素F
    .first+p { color: blue; } /* 选中class为first的元素后面第一个p */
    
  • E~F:选中 E 后面的所有兄弟元素F
    .first~p { color: green; } /* 选中first后面所有p兄弟 */
    
(2)伪类选择器:根据元素状态选择
  • 链接伪类(a 标签专用):

    a:link { color: pink; } /* 未访问的链接 */
    a:visited { color: red; } /* 已访问的链接 */
    a:hover { color: orange; } /* 鼠标悬浮时 */
    a:active { color: purple; } /* 鼠标点击未松开时 */
    

    注意顺序:link -> visited -> hover -> active,否则可能失效。

  • 表单伪类

    input:enabled { background: white; } /* 可用的输入框 */
    input:disabled { background: #eee; } /* 禁用的输入框 */
    input:focus { background: yellow; } /* 光标聚焦的输入框 */
    input:checked { width: 20px; } /* 被选中的复选框/单选框 */
    
  • 否定伪类:排除特定元素

    .first>input:not(#all) { width: 30px; } /* 选中.first下所有input,除了id为all的 */
    
(3)结构伪类:根据位置选择
  • E:nth-of-type(n):选中 E 的第 n 个子元素
    ul>li:nth-of-type(2n) { background: blue; } /* 列表中偶数项 */
    ul>li:nth-of-type(2n-1) { background: gray; } /* 列表中奇数项 */
    
  • E:first-of-type:选中 E 的第一个子元素
  • E:last-of-type:选中 E 的最后一个子元素
(4)属性选择器:根据属性值选择
input[name=username] { background: aqua; } /* name属性为username的input */
input[type=text] { background: red; } /* type属性为text的input */
a[href^=http] { color: green; } /* href以http开头的链接 */
a[href$=pdf] { color: red; } /* href以pdf结尾的链接 */
(5)伪元素选择器:创建 “虚拟元素”

不是选中已有元素,而是在元素内部添加虚拟内容(需配合content属性)

.third::after {content: '添加的文字'; /* 必须有,可空 */display: inline-block; /* 转为行内块,可设置宽高 */
}
p::first-letter { color: red; } /* 段落第一个字 */
p::first-line { background: yellow; } /* 段落第一行 */
p::selection { color: white; background: black; } /* 选中的文本样式 */

四、选择器优先级:样式冲突时谁说了算?

当多个选择器选中同一个元素,且设置了冲突的样式(比如同时设置 color),谁的样式会生效?这取决于优先级

优先级规则:

  1. 权重计算:不同选择器有不同权重,权重高的生效。

    • !important:无穷大(最高级,谨慎使用)
    • 行内样式(style属性):1000
    • ID 选择器:100
    • 类 / 伪类 / 属性选择器:10
    • 标签 / 伪元素选择器:1
    • 通配符:0

    示例:

    .list>.second { color: blue; } /* 类+类:10+10=20 */
    ul>.second { color: green; } /* 标签+类:1+10=11 */
    /* 前者权重更高,文字显示蓝色 */
    
  2. 同名选择器:后写的覆盖先写的。

    p { color: red; }
    p { color: blue; } /* 最终文字为蓝色 */
    
  3. 继承的样式:优先级低于直接设置的样式。

五、字体与文本样式:让文字更美观

1. 字体样式(font-*

控制字体的大小、粗细、类型等。

p {font-size: 16px; /* 字体大小(默认16px) */font-weight: 700; /* 粗细:100-900(400正常,700加粗) */font-style: italic; /* 风格:italic(倾斜)/ normal(正常) */font-family: '微软雅黑', sans-serif; /* 字体类型(多个备选,逗号分隔) */
}/* 复合属性:风格 粗细 大小 类型(顺序固定,大小和类型必填) */
p { font: italic 700 16px '微软雅黑'; }

2. 文本样式(text-*

控制文本的对齐、缩进、装饰等。

p {text-indent: 2em; /* 首行缩进(1em=当前字体大小) */text-align: center; /* 水平对齐:left/center/right */text-decoration: none; /* 装饰:underline(下划线)/ line-through(删除线)/ none(无) */text-shadow: 1px 1px 2px #999; /* 文本阴影:x偏移 y偏移 模糊半径 颜色 */line-height: 30px; /* 行高:行与行之间的距离(行高=容器高度时,文本垂直居中) */
}/* 去掉a标签默认下划线 */
a { text-decoration: none; }

六、HTML 标签分类与特性

HTML 标签按显示特性可分为三类,理解它们的区别是布局的基础。

类型特点示例标签
块级元素独占一行;可设置宽高;默认宽度占满父元素div、p、h1-h6、ul
行内元素不独占一行;宽高由内容决定;不可设置宽高span、a、i、b
行内块元素不独占一行;可设置宽高;宽高由内容决定img、input

如何改变标签类型?

通过display属性可以强制改变标签的显示类型:

七、HTML盒模型

div { display: inline; } /* 块级div转为行内元素 */
a { display: inline-block; } /* 行内a转为行内块(可设宽高) */
span { display: block; } /* 行内span转为块级元素(独占一行) */
  1. 内容区(content):元素的文本 / 图片区域,通过widthheight设置。
  2. 内边距(padding):内容区与边框的距离(子元素与父元素的距离)。
  3. 边框(border):盒子的边框,可设置粗细、样式、颜色。
  4. 外边距(margin):盒子与其他盒子的距离。

常用设置:

.box {width: 200px; /* 内容宽度 */height: 200px; /* 内容高度 *//* 内边距:上 右 下 左(顺时针) */padding: 10px 20px; /* 上下10px,左右20px *//* 边框:粗细 样式 颜色 */border: 5px solid red; /* 5px实线红色边框 */border-radius: 8px; /* 圆角边框 *//* 外边距:上 右 下 左 */margin: 20px; /* 四周20px */
}

两种盒模型:

  • 标准盒模型(默认):盒子总宽度 = width + 左右 padding + 左右 border + 左右 margin
  • 怪异盒模型:盒子总宽度 = width(包含 content + padding + border) + 左右 margin

通过box-sizing切换:

.box {box-sizing: border-box; /* 怪异盒模型(推荐,避免计算麻烦) */
}

八、CSS 三大特性:层叠、继承、优先级

  1. 层叠性:多个样式作用于同一元素时,冲突的样式按优先级覆盖,不冲突的样式同时生效。

    p { color: red; font-size: 16px; }
    p { color: blue; } /* 最终:color: blue; font-size: 16px; */
    
  2. 继承性:子元素会继承父元素的某些样式(主要是文本相关),如text-*font-*colorline-height

    .parent { color: red; font-size: 20px; }
    /* 子元素p会继承red和20px */
    <div class="parent"><p>我会继承父元素的样式</p>
    </div>
    

    例外:a标签不继承color,需单独设置。

  3. 优先级:如前文所述,解决样式冲突的核心规则。

九、文本溢出处理:内容太多装不下怎么办?

当文本内容超过容器宽度 / 高度时,需要优雅处理溢出内容。

1. 单行文本溢出省略

.single-line {width: 300px; /* 固定宽度 */white-space: nowrap; /* 不换行 */overflow: hidden; /* 隐藏溢出内容 */text-overflow: ellipsis; /* 溢出部分显示省略号 */
}

2. 多行文本溢出省略

.multi-line {width: 300px;display: -webkit-box; /* 弹性盒模型 */-webkit-box-orient: vertical; /* 垂直排列 */-webkit-line-clamp: 3; /* 显示3行 */overflow: hidden; /* 隐藏溢出 */text-overflow: ellipsis; /* 省略号 */line-height: 24px; /* 行高 */height: 72px; /* 行高*行数(3*24=72) */
}

3. 显示滚动条

如果希望用户能看到所有内容,可显示滚动条:

.scroll {width: 300px;height: 100px;overflow: auto; /* 内容溢出时显示滚动条 */
}

十、实战技巧:常用 CSS 属性

  1. 鼠标样式cursor: pointer(鼠标悬停时显示手型,常用于可点击元素)

    span { cursor: pointer; }
    
  2. 垂直对齐vertical-align(用于行内 / 行内块元素,如图片与文字对齐)

    img { vertical-align: middle; } /* 图片与文字中线对齐 */
    
  3. 清除默认样式:浏览器会给元素设置默认 margin 和 padding,可通过通配符清除

    * { margin: 0; padding: 0; }
    

总结

CSS 是网页美化的核心,掌握本文的知识点,你就能应对大多数页面样式需求。重点在于:

  • 熟练使用选择器精准定位元素
  • 理解盒子模型的空间计算
  • 掌握文本和字体样式的设置
  • 灵活处理溢出内容和标签特性

注意:行内元素和行内块元素之间会有默认间隙(因 HTML 中的空格 / 换行导致),可通过设置父元素font-size: 0解决。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/diannao/95821.shtml
繁体地址,请注明出处:http://hk.pswp.cn/diannao/95821.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ClickHouse的学习与了解

什么是ClickHouse&#xff1f; ClickHouse是一个用于联机分析(OLAP)的列式数据库管理系统(DBMS)。 在传统的行式数据库系统中&#xff0c;数据按如下顺序存储&#xff1a;RowWatchIDJavaEnableTitleGoodEventEventTime#0893543506621Investor Relations12016/5/18 5:19#1903295…

安卓11 12系统修改定制化_____修改系统 解锁system分区 去除data加密 自由删减系统应用

在定制化系统中。修改系统分区 解锁system。让用户可以自由删减应用。这个在定制化服务中比较常见。对于此项修改服务。需要我们了解基础的分区常识以及常用的几种基础修改步骤。 通过博文了解💝💝💝 1💝💝💝-----修改rom 解锁 system 分区有什么意义 2💝💝…

JetPack系列教程(八):PDF库——让Android应用也能优雅“翻页”

JetPack系列教程&#xff08;八&#xff09;&#xff1a;PDF库——让Android应用也能优雅“翻页” 在Android开发的世界里&#xff0c;加载PDF文件一直是个让人又爱又恨的“小妖精”。爱它&#xff0c;因为PDF是文档界的“万能钥匙”&#xff1b;恨它&#xff0c;因为原生Andr…

Three.js三大组件:场景(Scene)、相机(Camera)、渲染器(Renderer)

上一篇中我们学习了第一个Three.js场景"Hello World"。这一篇就来学习three.js的核心组件。 此图来源&#xff08;Three.js中文网&#xff09; three.js的核心由三大组件构成&#xff1a;场景(Scene)、相机(Camera)和渲染器(Renderer)。下面我将详细介绍这三大件的作…

AI幻觉终结之后:GPT-5开启的“可靠性”新赛道与开发者生存指南

摘要&#xff1a; Sam Altman关于GPT-5将基本终结幻觉的宣告&#xff0c;不仅仅是一次技术升级&#xff0c;它标志着一个“万物皆可AI&#xff0c;但万事皆需验证”的混乱时代的结束。本文将从一个全新的战略视角出发&#xff0c;探讨当“可靠性”取代“创造性”成为AI竞赛的核…

ubuntu远程桌面很卡怎么解决?

服务端方案 完成XRDP的性能优化配置&#xff1a; 1. 首先检查当前的xrdp.ini文件 grep -n "tcp_send_buffer_bytes" /etc/xrdp/xrdp.ini2. 编辑xrdp.ini文件&#xff0c;修改TCP发送缓冲区大小 sudo sed -i s/#tcp_send_buffer_bytes32768/tcp_send_buffer_bytes4194…

[Linux] Linux系统负载监控 Linux服务管理

目录 Linux系统负载监控 系统负载介绍 查看系统负载 负载解读 top 命令 Linux服务管理 systemd 介绍 系统启动管理进程 基本概念 systemd 架构 unit 类型 查看 unit 列表信息 查看单个 unit 信息 控制系统服务 systemctl 命令 unit 配置文件 例&#xff1a;开发…

vector 手动实现 及遇到的各种细节问题

之前对vector的一些功能使用了一下 接下来手动实现一下vector vector的实现和string还是有不小区别的 有很多地方都有细节的问题不同于string的成员变量一个指针一个size一个capacity的成员变量 vector里面存的是三个迭代器iterator 这的迭代器其实就是模版T的指针 这样就…

OpenStack Neutron中的L2 Agent与L3 Agent:新手友好指南

引言&#xff1a;云网络的幕后英雄 在当今的云计算世界中&#xff0c;OpenStack作为开源云平台的佼佼者&#xff0c;为成千上万的企业提供了灵活、可扩展的基础设施服务。而在OpenStack的众多组件中&#xff0c;Neutron&#xff08;网络服务&#xff09;扮演着至关重要的角色—…

【自用】JavaSE--特殊文件Properties与XML、日志技术

特殊文件概述使用特殊文件可以存储多个有关系的数据&#xff0c;作为系统的配置信息属性文件类似于键值对&#xff0c;一一对应存储数据(比如用户名与密码)XML文件存储多个用户的多个属性更适合&#xff0c;适合存储更复杂的数据Properties注&#xff1a;这个属性文件的后缀即使…

中本聪思想与Web3的困境:从理论到现实的跨越

一、中本聪思想的核心精髓中本聪通过比特币白皮书提出的核心思想&#xff0c;可归纳为三大支柱&#xff1a;去中心化货币体系目标&#xff1a;摆脱中央机构控制&#xff0c;避免通货膨胀和政治干预&#xff08;如2008年金融危机暴露的中心化风险&#xff09;。实现路径&#xf…

Centos 用户管理

一.创建用户 在 root账户 或 sudo 权限下 1. 创建用户 useradd xiaoyangzi2.为该用户设置密码或修改密码 passwd xiaoyangzi3. 将用户加入wheel用户组 在 CentOS 中&#xff0c;属于 wheel 组的用户默认可以使用 sudo 权限。 查看所属用户组: groups xiaoyangzi将 xiaoyangzi 加…

C++枚举算法习题

1. 3的倍数枚举&#xff08;基础&#xff09;题目&#xff1a;在之间有10和50多少个数是3的倍数&#xff1f;列举这些数。 解析&#xff1a;枚举10到50之间的数&#xff0c;判断是否能被3整除。优化&#xff1a;计算第一个≥10的3的倍数&#xff08;1234&#xff09;&#xff0…

【SpringBoot系列-01】Spring Boot 启动原理深度解析

【SpringBoot系列-01】Spring Boot 启动原理深度解析 大家好&#xff01;今天咱们来好好聊聊Spring Boot的启动原理。估计不少人跟我一样&#xff0c;刚开始用Spring Boot的时候觉得这玩意儿真神奇&#xff0c;一个main方法跑起来就啥都有了。但时间长了总会好奇&#xff1a;这…

windows环境下使用vscode以及相关插件搭建c/c++的编译,调试环境

windows下使用vscode搭建c/c的编译、运行、调试环境&#xff0c;需要注意的是生成的是xxx.exe可执行文件。另外使用的编译器是mingw&#xff0c;也就是windows环境下的GNU。 我参考的网址是&#xff1a;https://zhuanlan.zhihu.com/p/1936443912806962622 文章分为2种环境搭建…

标准瓦片层级0~20,在EPSG:4326坐标系下,每个像素点代表的度数

在 EPSG:4326&#xff08;WGS84经纬度坐标系&#xff09; 下&#xff0c;瓦片层级&#xff08;Zoom Level&#xff09;的分辨率以 度/像素 为单位&#xff0c;其计算遵循 TMS Global Geodetic 规范&#xff08;单位&#xff1a;度&#xff09;。以下是 标准层级 0 至 20 的分辨…

Unity高级剔除技术全解析

目录 ​编辑层级剔除&#xff08;Layer Culling&#xff09;原理详解 代码示例 业务应用场景 距离剔除&#xff08;Distance Culling&#xff09;技术细节 进阶实现 开放世界优化技巧 视口裁剪&#xff08;Viewport Culling&#xff09;多摄像机协作方案 高级应用场景 …

[Linux] Linux文件系统基本管理

目录 识别文件系统和设备 Linux 中设备 Linux 文件系统 查看设备和文件系统 lsblk命令 df命令 du命令 案例&#xff1a;查看根文件系统中哪个文件占用了最大空间 环境准备 查找过程 挂载和卸载文件系统 环境准备 挂载文件系统 卸载文件系统 卸载失败处理 lsof …

如何在 Ubuntu 24.04 Server 或 Desktop 上安装 XFCE

在 Ubuntu 24.04 上更改当前桌面环境或添加新的桌面环境并不是一项艰巨的任务。大多数流行的 Linux 桌面环境,包括 XFCE,都可以通过默认的 Ubuntu 24.04 LTS 系统仓库安装。在本教程中,我们将学习如何使用 Tasksel 工具在 Ubuntu Linux 上安装和配置 XFCE。 访问终端并运行…

linux下用c++11写一个UDP回显程序

需求&#xff1a;1&#xff09;从2个UDP端口接收数据&#xff0c;并在同样的端口回显。echo2&#xff09;多个处理线程&#xff0c;多个发送线程&#xff1b;3&#xff09;使用条件变量唤醒&#xff1b;#include <stack> #include <mutex> #include <atomic>…