css入门
moboyou 2025-06-15 19:10 25 浏览
文章目录
CSS入门
一、CSS概述
1、概述
2、CSS的作用
3、初体验
4、CSS基础语法
4、HTML引入CSS
二、选择器
1、基本选择器
2、扩展选择器
3、超链接选择器
三、样式权重问题
1、权重计算规则
2、权重示例
3、具体示例
4、 !important
四、CSS常用样式
1、字体和文本属性
2、背景属性
3、显示属性
4、浮动属性
五、盒子模型
CSS入门
一、CSS概述
1、概述
CSS（Cascading Style Sheet）层叠样式表，用于美化页面
层叠样式：对同一个标签，添加多个不同的样式，所有样式会叠加在一起展示出效果。
2、CSS的作用
HTML 标签也有属性，为什么还要 CSS ？
CSS 可以给任意标签添加样式（可以实现 HTML 做不到的效果）
解耦（让 HTML 专注于网页结构搭建，CSS 专注于样式效果）
CSS 实现了样式与内容的分离，提高了显示效果和样式的复用性。
3、初体验
4、CSS基础语法
CSS 基本语法：
样式名 和 样式值 之间 以 冒号 分隔。
一个样式名 可以跟 多个样式值，以 空格 分隔。
多个样式之间，以 分号 分割。
4、HTML引入CSS
CSS有自己单独的语法，但是必须要引入到HTML中才能使用。一般有以下三种方式：
优先级：
行内 > 内部 = 外部 （优先级低的样式会被优先级高的覆盖，一样的优先级看先后）
浏览器加载网页从上至下加载，属性相同会覆盖（后面的覆盖前面的），不相同会叠加。
位置：
style标签和link标签可以放在html中任意位置，一般放head标签内。
二、选择器
选择器 selector：
格式：选择器 {css样式}
作用：通过选择器，选中指定的标签，为选中的标签添加css样式
1、基本选择器
包括 标签选择器、id选择器、class选择器
2、扩展选择器
扩展选择器：基本选择器延伸出来的选择器，在某些场景下，用基本选择器太麻烦。
3、超链接选择器
三、样式权重问题
当多个规则适用于同一个元素时，CSS 会根据权重来确定使用哪个样式。权重较高的样式会覆盖权重较低的样式。
权重由选择器的类型和数量决定。
1、权重计算规则
CSS 的权重可以分为四个部分，通常用四个数字表示（a, b, c, d）：
a：行内样式的数量（例如：style="..."）。行内样式的权重最高。
b：ID 选择器的数量（如 #id）。
c：类选择器、伪类选择器、属性选择器的数量（如 .class、:hover、[type="text"]）。
d：元素选择器、伪元素选择器的数量（如 div、p、::before）。
2、权重示例
3、具体示例
在这个例子中，div 的背景颜色将被黄色覆盖，因为 行内样式 的权重最高。
4、 !important
使用 !important 可以强制某个规则获得更高的优先级，但应谨慎使用，因为这会影响代码的可维护性。
四、CSS常用样式
1、字体和文本属性
2、背景属性
3、显示属性
4、浮动属性
打破常规，让div也能变小（实际大小跟 宽和高）
五、盒子模型
在 html 中，所有的标签都可以看成一个盒子。
在浏览器 F12 可以看一下
相关推荐
- python新手学习常见数据类型——数字
-
Python支持三种不同的数值类型：整型(int)、浮点型(float)、复数(complex)创建数字：a=1b=2.7c=8+4j删除数字：a=1b=2.7c=8+4...
- 只用一个套路公式，给 Excel 中一列人员设置随机出场顺序
-
很多同学会觉得Excel单个案例讲解有些碎片化，初学者未必能完全理解和掌握。不少同学都希望有一套完整的图文教学，从最基础的概念开始，一步步由简入繁、从入门到精通，系统化地讲解Excel的各个知...
- Excel神技 TIME函数:3秒搞定时间拼接!职场人必学的效率秘籍
-
你是否经常需要在Excel中手动输入时间，或者从不同单元格拼接时、分、秒？今天我要揭秘一个超实用的Excel函数——TIME函数，它能让你3秒内生成标准时间格式，彻底告别繁琐操作！一、TIME函数基础...
- 销售算错数被批?97 Excel 数字函数救场，3 步搞定复杂计算
-
销售部小张被老板当着全部门骂。上季度销售额汇总，他把38652.78算成36852.78，差了1800块。财务对账时发现，整个部门的提成表都得重算。"连个数都算不对，还做什么销售？&...
- 如何使用Minitab 1分钟生成所需要的SPC数据
-
打开Minitab，“计算”-“随机数据”-“正太”，因为不好截图，使用的是拍照记录的方式.再要生产的行数中，填写125，可以按照要求，有些客户要求的是100个数据，就可以填写100...
- 验证码，除了 12306，我还没有服过谁
-
为了防止暴力注册或爬虫爬取等机器请求，需要验证操作者是人还是机器，便有了验证码这个设计。本文作者主要介绍了如何使用Axure来设计一个动态的图形验证码，一起来学习一下吧。在软件设计中，为了防止暴力...
- 零基础也能学会的9个Excel函数，小白进阶必备
-
今天给大家分享一些常用的函数公式，可以有效地解决Excel中办公所需，0基础也可以轻松学会。建议收藏，在需要的时候可以直接套用函数。1、计算排名根据总和，计算学生成绩排名。函数公式=RANK(E2,$...
- [office] excel表格数值如何设置_excel表格怎样设置数值
-
excel表格数值如何设置 因为电子表格应用程序是用来处理数值数据的，所以数值格式可能是工作表中最关键的部分，格式化数值数据的方式由用户决定，但在每个工作簿的工作表之间应使用一致的处理数字的方法。...
- Excel最常用的5个函数!会用最后一个才是高手
-
是不是在处理Excel数据时，面对繁琐的操作烦恼不已？手动操作不仅耗时费力，还容易出错。别担心，表姐这就为你揭秘Excel中几个超实用的函数，让数据处理变得轻松高效！表姐整理了552页《Office从...
- 新手必会的53个Excel函数_惊呆小伙伴的全套excel函数技能
-
（新手入门+进阶+新函数）一、新手入门级(24个)1、Sum函数：求和=Sum(区域)2、Average函数：求平均值=Average(区域)3、Count函数：数字个数=Count(区域)4、Cou...
- 打工人私藏的4个Excel函数秘籍，效率提升3.7%
-
小伙伴们好啊，今天咱们分享几个常用函数公式的典型应用。合并内容如下图，希望将B列的姓名，按照不同部门合并到一个单元格里。=TEXTJOIN(",",1,IF(A$2:A$15=D2,B...
- Excel偷偷更新的8个函数!原来高手都在用这些隐藏技能
-
领导突然要销售数据，你手忙脚乱筛选到眼花...同事3分钟搞定的报表，你折腾半小时还在填充公式...明明用了VLOOKUP，却总显示#N/A错误...别慌！今天教你的8个动态数组函数，就像给Excel装...
- Excel表格随机函数怎么用?讲解三种随机函数在不同场景的应用
-
excel随机函数，其特点是能够生成一组随机数字，根据不同需求，还能批量生成小数位和整数，及指定行数和列数，或指定区间范围内的数字。这里根据需求，作者设置了三个问题，第1个是随机生成0至1之间的数字...
- 单纯随机抽样该如何进行?_单纯随机抽样的适用范围及注意事项
-
在数据分析中，抽样是指从全部数据中选择部分数据进行分析，以发掘更大规模数据集中的有用信息。在收集数据过程中，绝大多数情况下，并不采取普查的方式获取总体中所有样本的数据信息，而是以各类抽样方法抽取其中若...
- 随机函数在Excel中的应用_随机函数在excel中的应用实例
-
【分享成果，随喜正能量】职场，如果你没有价值，那么你随时可能被取代;如果你的价值不如别人，那么社会也不会惯你，你将被无情地淘汰掉。不管什么时候，你一定要学会构建自己的价值。每个人都应该思考这个问题：我...
- 一周热门
- 最近发表
- 标签列表
-
- 外键约束 oracle (36)
- oracle的row number (32)
- 唯一索引 oracle (34)
- oracle in 表变量 (28)
- oracle导出dmp导出 (28)
- 多线程的创建方式 (29)
- 多线程 python (30)
- java多线程并发处理 (32)
- 宏程序代码一览表 (35)
- c++需要学多久 (25)
- css class选择器用法 (25)
- css样式引入 (30)
- css教程文字移动 (33)
- php简单源码 (36)
- php个人中心源码 (25)
- php小说爬取源码 (23)
- 云电脑app源码 (22)
- html画折线图 (24)
- docker好玩的应用 (28)
- linux有没有pe工具 (34)
- mysql数据库源码 (21)
- php开源万能表单系统源码 (21)
- 可以上传视频的网站源码 (25)
- match函数的功能是 (21)
- 随机函数如何生成小数点数字 (31)