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

CSS简介

news 2026/3/28 7:36:07

目录

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

C++轻量级HTTP库cpp-httplib：从嵌入式设备到企业服务的全场景解决方案

C轻量级HTTP库cpp-httplib&#xff1a;从嵌入式设备到企业服务的全场景解决方案 【免费下载链接】cpp-httplib A C header-only HTTP/HTTPS server and client library 项目地址: https://gitcode.com/GitHub_Trending/cp/cpp-httplib 在现代C开发中&#xff0c;构建网络…...

编程新知 2026/3/28 7:33:18

影墨·今颜效果实测：100张生成图中98.3%通过小红书内容审核标准

影墨今颜效果实测&#xff1a;100张生成图中98.3%通过小红书内容审核标准 1. 真实效果惊艳展示 「影墨今颜」作为基于FLUX.1-dev引擎的高端AI影像系统&#xff0c;在实际测试中展现出了令人印象深刻的效果表现。我们进行了严格的批量测试&#xff0c;生成100张不同风格的人像…...

编程新知 2026/3/28 5:07:22

Webflux fromXXX对比

Mono.fromFuture和Mono.fromSupplier 刚开始尝试使用 Spring WebFlux 的时候&#xff0c;很多人都会使用 Mono.fromFuture() 将异步请求转成 Mono 对象&#xff0c;或者 Mono.fromSupplier() 将请求转成 MOno 对象&#xff0c;这两种方式在响应式编程 中都是不建议的&#xff0…...

编程新知 2026/3/28 4:52:06

别再瞎找了！盘点2026年顶流之选的AI论文写作软件

一天写完毕业论文在2026年已不再是天方夜谭。2026年最炸裂的AI论文写作软件来了&#xff0c;实测提速效果惊人&#xff0c;覆盖选题、撰写、查重、排版全流程&#xff0c;让你高效搞定论文不再难。 一、全流程王者&#xff1a;一站式搞定论文全链路&#xff08;一天定稿首选&am…...

编程新知 2026/3/28 4:40:02

串口转HID实战：CH9329芯片在无外网环境下的应用指南

CH9329芯片串口转HID实战&#xff1a;隔离环境下的设备控制方案 在工业控制、医疗设备和某些特殊应用场景中&#xff0c;经常需要在物理隔离的网络环境下实现设备控制。CH9329芯片作为一款串口转HID&#xff08;人机接口设备&#xff09;的专业芯片&#xff0c;为解决这类问题提…...

编程新知 2026/3/28 3:47:44

一本计算机专业，准大一，有什么忠告？

你现在大概处于一种很特别的状态。高考刚结束不久&#xff0c;录取通知书拿到了&#xff0c;专业是计算机。可能是你自己选的&#xff0c;也可能是家里建议的&#xff0c;也可能是分数刚好够就填了。不管哪种&#xff0c;你现在对”计算机专业到底学什么”的理解大概率是模糊的…...

编程新知 2026/3/28 1:17:39

大数据运维 | 项目一：大数据分布式集群搭建全攻略

版权声明&#xff1a;本文为博主原创文章&#xff0c;遵循 CC 4.0 BY-SA 版权协议&#xff0c;转载请附上原文出处链接和本声明。 前言 作为一名大数据运维工程师&#xff0c;你是否遇到过这样的问题&#xff1a; 问题场景描述1机器A可正常上网&#xff0c;但机器B无法连接网…...

编程新知 2026/3/27 23:48:54

Phi-4-Reasoning-Vision行业落地：教育领域图像题解与隐藏线索识别案例

Phi-4-Reasoning-Vision行业落地&#xff1a;教育领域图像题解与隐藏线索识别案例 1. 项目背景与价值 在教育领域&#xff0c;图像题解和隐藏线索识别一直是教学和考试中的难点。传统方法依赖人工标注和分析&#xff0c;效率低下且容易遗漏关键信息。Phi-4-Reasoning-Vision多…...

编程新知 2026/3/27 23:32:40

3步玩转Balena Etcher：开源镜像烧录工具完全指南

3步玩转Balena Etcher&#xff1a;开源镜像烧录工具完全指南 【免费下载链接】etcher Flash OS images to SD cards & USB drives, safely and easily. 项目地址: https://gitcode.com/GitHub_Trending/et/etcher Balena Etcher是一款开源跨平台镜像烧录工具&#x…...

编程新知 2026/3/27 21:17:47

python-flask-djangol框架的食品仓库管理系统

目录需求分析与功能规划技术栈选择系统架构设计开发与测试流程安全与性能优化部署方案项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作需求分析与功能规划 明确食品仓库管理系统的核心需求&#xff0c;包括库存管理、食品分类、…...

编程新知 2026/3/27 20:27:32