当前位置： 首页 > news >正文

CSS简介

news 2026/2/7 11:39:44

目录

CSS

CSS概念

核心概念

为什么需要CSS

语法

 CSS的引入方式

内联样式（行内样式）

内部样式

外部样式（推荐）

CSS

CSS概念

CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表

CSS文件后缀名为.css

CSS用于HTML文档中元素样式的定义

核心概念

  1. 选择器（Selectors）： 选择器是用来选择要应用样式的HTML元素的模式。它可以基于元素名称、类、ID、属性等来匹配元素。选择器指定了哪些元素将被样式化。

  2. 属性（Properties）： 属性是用来定义元素样式的关键字，如颜色、字体大小、边框等。每个属性对应一个或多个值，用于设置样式的具体细节。

  3. 值（Values）： 值是属性的具体设置，例如 color 属性的值可以是 "red"、"#00ff00"（颜色代码）等。不同的属性接受不同类型的值。

  4. 样式规则（Rules）： 样式规则由选择器和一组属性-值对组成，用于指定哪些元素应用什么样式。例如：

    p {color: blue;font-size: 16px;
}

  5. 样式表（Stylesheets）： 样式表是包含一系列样式规则的文件。它可以内联写在HTML文档中，也可以作为外部文件链接到HTML中。

  6. 层叠性（Cascading）： 当多个样式规则应用在同一个元素上时，层叠性决定了哪些规则会被优先采用。层叠性遵循特定的优先级和继承规则，从而确保样式的有效应用。

    • 盒模型（Box Model）： 盒模型是一种描述元素尺寸和布局的概念。每个元素被视为一个矩形盒子，由内容、内边距、边框和外边距组成。

    • 响应式设计（Responsive Design）： CSS可以用于创建响应式的网页，使页面能够在不同设备和屏幕尺寸下呈现出最佳的外观和布局。

    • 伪类和伪元素（Pseudo-classes & Pseudo-elements）： 伪类和伪元素允许你选择特定状态下的元素或向特定元素的某些部分应用样式，例如 :hover 表示鼠标悬停状态。

    • 优先级（Specificity）： 当多个选择器应用在同一元素上时，优先级规则决定了哪个选择器的样式会被应用。

为什么需要CSS

使用css的唯一目的就是让网页具有美观一致的页面

  1. 样式控制： CSS允许你对网页的外观和样式进行精确的控制。你可以设置文字颜色、字体、背景、边框等，以创造独特的视觉效果。

  2. 分离内容和样式： 使用CSS可以将网页的内容和样式分离，使代码更加结构化和可维护。这种分离使得你可以单独修改样式，而无需改变HTML结构。

  3. 跨浏览器兼容性： 不同的浏览器可能在默认样式上有所不同。使用CSS可以确保你的网页在不同浏览器上都能保持一致的外观。

  4. 可重用性： 通过将样式定义在CSS文件中，你可以在网站的不同页面上重复使用相同的样式，从而减少重复劳动并提高效率。

  5. 响应式设计： CSS可以用于创建响应式的网页，使得网页能够在不同的设备和屏幕尺寸下自适应，提供更好的用户体验。

  6. 页面布局： 使用CSS可以控制元素的位置和布局。你可以实现多列布局、居中对齐等，使网页看起来更加整洁和专业。

  7. 动画和过渡： CSS支持动画和过渡效果，可以为元素添加平滑的过渡和动画效果，从而增加交互性和吸引力。

  8. 易于维护： 将样式集中在CSS中可以使代码更易于维护。如果需要修改样式，你只需修改CSS文件，而不必逐个修改每个HTML元素。

  9. 性能优化： 使用CSS可以减少HTML代码中的样式信息，从而减小文件大小，提升加载速度，改善性能。

  10. 统一风格： 通过为网站应用统一的样式，你可以创造出专业、一致的品牌形象，让用户更容易识别和记住你的网站。

语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明（样式）

image-20211129154503132

选择器通常是您需要改变样式的 HTML 元素

每条声明由一个属性和一个值组成

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

<style>h1{color: blue;font-size: 12px;}
</style>

 CSS的引入方式

内联样式（行内样式）

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性

温馨提示

缺乏整体性和规划性，不利于维护，维护成本高

<p style="background: orange; font-size: 24px;">CSS<p>

内部样式

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表

温馨提示

单个页面内的CSS代码具有统一性和规划性，便于维护，但是在多个页面之间容易混乱

<head><style> h1 { background: red; } </style>
</head>

外部样式（推荐）

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部

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

相关文章：

CSS简介

目录 CSS CSS概念 核心概念 为什么需要CSS 语法 CSS的引入方式 内联样式&#xff08;行内样式&#xff09; 内部样式 外部样式&#xff08;推荐&#xff09; CSS CSS概念 CSS&#xff08;Cascading Style Sheets&#xff09;层叠样式表&#xff0c;又叫级联样式表&am…...

编程日记 2023/8/21 2:18:19

卡方分箱(chi-square)

统计学&#xff0c;风控建模经常遇到卡方分箱算法ChiMerge。卡方分箱在金融信贷风控领域是逻辑回归评分卡的核心&#xff0c;让分箱具有统计学意义&#xff08;单调性&#xff09;。卡方分箱在生物医药领域可以比较两种药物或两组病人是否具有显著区别。但很多建模人员搞不清楚…...

编程日记 2023/8/21 2:17:18

深入理解 Flutter 图片加载原理

作者&#xff1a;京东零售 徐宏伟 来源&#xff1a;京东云开发者社区 前言 随着Flutter稳定版本逐步迭代更新&#xff0c;京东APP内部的Flutter业务也日益增多&#xff0c;Flutter开发为我们提供了高效的开发环境、优秀的跨平台适配、丰富的功能组件及动画、接近原生的交互体验…...

编程日记 2023/8/21 2:16:14

【电子通识】什么是异常分析中的A-B-A方法

工作有了一定的经验之后&#xff0c;在做问题分析的时候&#xff0c;经常会听到别人说把这个部品&#xff08;芯片/模块&#xff09;拿去ABA一下&#xff0c;看看跟谁走。那么对于新人来说是否就会问一个问题&#xff1a;什么是ABA呢&#xff1f; A-B-A 交换是一种简单直接的交…...

编程日记 2023/8/21 2:15:13

[Linux] C获取键盘输入值

检测指令&#xff1a;cat /dev/input/event1 | hexdump 当键盘有输入时&#xff0c;会有对应的一堆16进制输出。它其实对应着input_event结构体【24字节】。 struct input_event ​​​​​​​{struct timeval time;__u16 type;__u16 code;__s32 value; }; #include <st…...

编程日记 2023/8/21 2:14:12

探索Python编程世界：开启你的代码之旅

亲爱的小伙伴们&#xff0c;大家好&#xff01;很高兴向大家推荐我的新专栏《Python编程指南&#xff1a;从入门到高级》。在这个专栏里&#xff0c;我将带领大家深入探索Python编程的奇妙世界&#xff0c;为您提供有趣、实用、易懂的内容&#xff0c;帮助您在编程的道路上越走…...

编程日记 2023/8/21 2:13:10

金融术语总结

洗钱 将犯罪或其他非法违法行为所获得的违法收入&#xff0c;通过各种手段掩饰、隐瞒、转化&#xff0c;使其在形式上合法化的行为。 存量客户 某个时间段里原先已有的客户,与新增客户相对应。 月活跃用户数量&#xff0c;MAU&#xff08;Monthly Active User&#xff0c;M…...

编程日记 2023/8/21 2:12:08

Linux驱动开发（Day5）

思维导图&#xff1a; 不同设备号文件绑定&#xff1a;...

编程日记 2023/8/21 2:11:05

[机器学习]特征工程：主成分分析

目录 主成分分析 1、简介 2、帮助理解 3、API调用 4、案例 本文介绍主成分分析的概述以及python如何实现算法&#xff0c;关于主成分分析算法数学原理讲解的文章&#xff0c;请看这一篇&#xff1a; 探究主成分分析方法数学原理_逐梦苍穹的博客-CSDN博客https://blog.csdn.…...

编程日记 2023/8/21 2:10:03

Python爬虫实战案例——第一例

X卢小说登录(包括验证码处理) 地址&#xff1a;aHR0cHM6Ly91LmZhbG9vLmNvbS9yZWdpc3QvbG9naW4uYXNweA 打开页面直接进行分析 任意输入用户名密码及验证码之后可以看到抓到的包中传输的数据明显需要的是txtPwd进行加密分析。按ctrlshiftf进行搜索。 定位来到源代码中断点进行调…...

编程日记 2023/8/21 2:09:01

一、openlayer开发介绍

首先需要引入openlayer api开发包。两种方式&#xff1a; 1、import方式&#xff0c;也就是npm安装&#xff0c;npm install ol 2、外部js引入。 下载地址&#xff1a;https://github.com/openlayers/openlayers 历史版本地址&#xff1a;Releases openlayers/openlayers …...

编程日记 2023/8/21 2:08:00

利用Jackson封装常用的JsonUtil工具类

在实际开发中&#xff0c;我们对于 JSON 数据的处理&#xff0c;通常有这么几个第三方工具包可以使用&#xff1a; gson&#xff1a;谷歌的fastjson&#xff1a;阿里巴巴的jackson&#xff1a;美国FasterXML公司的&#xff0c;Spring框架默认用的 由于以前一直用习惯了阿里的…...

编程日记 2023/8/21 2:06:58

阿里云2核4G服务器配置汇总表_轻量和ECS

阿里云2核4G服务器配置价格表&#xff0c;297元一年&#xff0c;配置为轻量应用服务器2核4G、4M带宽、60GB高效云盘&#xff0c;折合24元一个月。 目录 2核4G服务器轻量&#xff1a; 2核4G服务器ECS 关于轻量和ECS的区别&#xff1a; 2核4G服务器轻量&#xff1a; 云服务器…...

编程日记 2023/8/21 2:05:57

攻防世界-ics-06

原题解题思路 看着页面多&#xff0c;其实只有报表中心能够跳转&#xff0c;但是选了确定后没反应&#xff0c;应该不是注入&#xff0c;只有id会变化。 在burp中设置好负载进行爆破 有一个长度与众不同的包 打开发现flag。...

编程日记 2023/8/21 2:04:55

人工智能轨道交通行业周刊-第56期（2023.8.14-8.20）

本期关键词&#xff1a;数字化建设、巡检机器人、智慧城轨、福州地铁4号线、避雷器、LangChain 1 整理涉及公众号名单 1.1 行业类 RT轨道交通人民铁道世界轨道交通资讯网铁路信号技术交流北京铁路轨道交通网上榜铁路视点ITS World轨道交通联盟VSTR铁路与城市轨道交通RailMet…...

编程日记 2023/8/21 2:03:54

ruoyi-vue-pro yudao 项目报表设计器 积木报表模块启用及相关SQL脚本

目前ruoyi-vue-pro 项目虽然开源&#xff0c;但是report模块被屏蔽了&#xff0c;查看文档却要收费 199元&#xff08;知识星球&#xff09;&#xff0c;价格有点太高了吧。 分享下如何启用 report 模块&#xff0c;顺便贴上sql相关脚本。 一、启用模块 修改根目录 pom.xml …...

编程日记 2023/8/21 2:02:52

【第三阶段】kotlin中使用带let的安全调用

let常常和&#xff1f;.配合使用&#xff0c;如果前面的对象为null,let不执行&#xff0c;能够执行到let里面 对象一定不为null 1.不为null fun main() {var name:String?"kotlin" //name是一个可空类型&#xff0c;发出广播&#xff0c;调用的地方必须补救措施var…...

编程日记 2023/8/21 2:01:50

JavaScript 快速入门手册

本篇文章学习&#xff1a; 菜鸟教程、尚硅谷。 JavaScript 快速入门手册 &#x1f4af; 前言&#xff1a; 本人目前算是一个Java程序员&#xff0c;但是目前环境… ε(ο&#xff40;*))) 一言难尽啊&#xff0c;blog也好久好久没有更新了&#xff0c;一部分工作原因吧(外包真…...

编程日记 2023/8/21 2:00:49

FreeMarker系列--list的用法（长度,遍历,下标,嵌套,排序）

原文网址&#xff1a;FreeMarker系列--list的用法&#xff08;长度,遍历,下标,嵌套,排序&#xff09;_IT利刃出鞘的博客-CSDN博客 简介 本文介绍FreeMarker的list的用法。 大小 Java ArrayList<String> list new ArrayList<String>(); Freemaker ${list?s…...

编程日记 2023/8/21 1:59:47

【观察】戴尔科技：构建企业创新“韧性”，开辟数实融合新格局

过去几年&#xff0c;国家高度重视发展数字经济&#xff0c;将其上升为国家战略。其中&#xff0c;“十四五”规划中&#xff0c;就明确提出要推动数字经济和实体经济的深度融合&#xff0c;以数字经济赋能传统产业转型升级&#xff1b;而2023年年初正式发布的《数字中国建设整…...

编程日记 2023/8/21 1:58:46

多模态2025：技术路线“神仙打架”，视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

编程新知 2026/2/1 10:59:33

【杂谈】-递归进化：人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

编程新知 2025/12/9 0:22:01

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

编程新知 2025/11/28 2:51:33

从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

编程新知 2026/1/25 14:13:16

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

编程新知 2026/2/5 3:09:56

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

编程新知 2025/10/6 18:46:56

C++：多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

编程新知 2026/1/25 13:32:52

Linux入门课的思维导图

耗时两周&#xff0c;终于把慕课网上的Linux的基础入门课实操、总结完了&#xff01; 第一次以Blog的形式做学习记录&#xff0c;过程很有意思&#xff0c;但也很耗时。 课程时长5h&#xff0c;涉及到很多专有名词&#xff0c;要去逐个查找&#xff0c;以前接触过的概念因为时…...

编程新知 2026/2/4 16:18:53

比较数据迁移后MySQL数据库和ClickHouse数据仓库中的表

设计一个MySQL数据库和Clickhouse数据仓库的表数据比较的详细程序流程，两张表是相同的结构，都有整型主键id字段，需要每次从数据库分批取得2000条数据，用于比较，比较操作的同时可以再取2000条数据，等上一次比较完成之后，开始比较，直到比较完所有的数据。比较操作需要比较…...

编程新知 2025/11/15 17:06:02

代理服务器-LVS的3种模式与调度算法

作者介绍&#xff1a;简历上没有一个精通的运维工程师。请点击上方的蓝色《运维小路》关注我&#xff0c;下面的思维导图也是预计更新的内容和当前进度(不定时更新)。 我们上一章介绍了Web服务器&#xff0c;其中以Nginx为主&#xff0c;本章我们来讲解几个代理软件&#xff1a…...

编程新知 2026/1/24 17:58:05