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

CSS简介

news 2025/12/15 18:35:16

目录

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

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

编程新知 2025/12/13 3:53:51

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

编程新知 2025/10/16 13:22:06

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

编程新知 2025/11/14 9:31:35

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...

编程新知 2025/12/14 22:06:49

Unity | AmplifyShaderEditor插件基础（第七集：平面波动shader）

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

编程新知 2025/12/9 15:19:40

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

编程新知 2025/12/9 7:17:28

Linux离线（zip方式）安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

编程新知 2025/11/23 23:50:53

在 Spring Boot 中使用 JSP

jsp&#xff1f; 好多年没用了。重新整一下 还费了点时间&#xff0c;记录一下。 项目结构&#xff1a; pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...

编程新知 2025/12/7 14:31:27

提升移动端网页调试效率：WebDebugX 与常见工具组合实践

在日常移动端开发中&#xff0c;网页调试始终是一个高频但又极具挑战的环节。尤其在面对 iOS 与 Android 的混合技术栈、各种设备差异化行为时&#xff0c;开发者迫切需要一套高效、可靠且跨平台的调试方案。过去&#xff0c;我们或多或少使用过 Chrome DevTools、Remote Debug…...

编程新知 2025/6/10 21:08:23

Python 训练营打卡 Day 47

注意力热力图可视化 在day 46代码的基础上&#xff0c;对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...

编程新知 2025/11/24 9:42:16