css入门
myzbx 2025-01-15 15:54 12 浏览
文章目录
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 可以看一下
相关推荐
- 为什么钟表的指针是从左向右顺时针转?
-
所有的钟表指针都是从左向右转的，所以我们就用它来表示旋转方向了。那么，为什么钟表都是从左向右转呢？正着转也好，反着转也好，一圈不都是12小时吗？这就要从钟表的前身说起了。在钟表出现之前，人们使用过一种...
- 牛人将电子钟改造高精度时钟，日误差0.26秒!解决走时不准通病
-
家里有好多个电子钟，精度各种参差不齐，然后走时就是各种混乱，是可忍孰不可忍……自打发现8025这个好玩意儿之后，就决定不忍了。第一个上场的聪明钟，为啥叫聪明钟然后还走的不准。三节电池供电，其中3V给主...
- 篮球裁判手势图解之计时钟、得分替换和暂停手势
-
▋篮球裁判手势图解之计时钟手势停止计时钟手势，伸开手掌，垂直举过头部。犯规停止计时钟手势，一拳握紧，垂直举过头部。计时开始手势，用手做劈柴动作，将垂直举过头部的手放下。▋篮球裁判手势图解之得分手势1...
- 罗马数字的起源与用途
-
一、罗马数字的诞生与进化罗马数字起源于古罗马帝国，拥有一个漫长而复杂的历史，始于公元前8世纪至9世纪，与古罗马帝国在帕兰丁山（PalantineHill）周围建立的时间大致相同。不过，罗马数...
- 基于 Arduino Nano R3 的红外遥控数字时钟
-
由于在ArduinoNano上没有足够的引脚来编写代码，该项目只有有限的功能（即使没有设置时间的设施）。通过添加红外线遥控器，我可以灵活地整合所有需要的功能（如果需要，可能会更多），不需要额外的...
- 大班必备33首数字歌，轻松学数学
-
适合大班宝贝的33首数学歌，让孩子们在玩中学，通过好玩、好记的的儿歌来了解数学的知识点，轻松学数学！以上所有有关数学概念的知识点，其中包含了钟表、点数、分解组成、加减、单双数、倒数正数、凑十、方位...
- 11的寓意和象征
-
在数字的王国里，每个数字都有其独特的内涵和象征意义。今天，我们将一起探索数字11的奥秘和象征意义。这个奇特的数字，不仅在我们的日常生活中扮演着重要的角色，而且在神秘主义和宗教中也占有的一席之地。首先，...
- 基于TM1637的数字时钟
-
方案介绍这个项目是一个原型，我将在我正在进行的其他数字时钟项目中使用。这是我计划在我的下一个数字时钟项目中使用的时间和闹钟设置机制的原型。我希望能给你提供到帮助。如果你想到任何改进，请告诉我。我会更乐...
- 【金龟子讲睡前故事】数字不见啦
-
“快做数学题！”妈妈大声吼邦邦。“啊，好烦呀！”邦邦回到屋里，对着数学练习册大声嚷嚷。考拉熊博士在邦邦的屋外听到邦邦的声音，自言自语说：“好像又在发脾气，我得去看看他。”考拉熊博士推门进去，只见邦邦大...
- SE 最终幻想 35 周年，《FF7 重制版》破坏剑数字时钟 9 月发售
-
IT之家3月9日消息，SE今日正式开设了《最终幻想》35周年纪念网站，天野喜孝绘制官方LOGO公布！值得一提的是，索尼PlayStation游戏发布会即将于北京时间3月10...
- 谁说数字钟就是黑白状?他们让你改变看法
-
如果我们没有了钟表，你会用什么衡量时间？是利用太阳的变化还是凭猜测？之前设计癖也介绍一些有趣的钟表，像是Edelkrone设计的无表针的Oqloq钟表，也有淡化了表针概念的轨道钟表，今天再给大...
- 杭州元宵游玩大赏|“人体时钟”亮相文三数字生活街区，还有元宵巡游活动等你嗨
-
钱江晚报·小时新闻记者方力通讯员冯晨晨刘静滴答滴答，在这个时钟里面有一位虚拟的“小姐姐”。她的工作内容就是不断地把分针擦掉，然后再画上新的分针，她每画一次分针擦干净后，再画上一条新的分针，就刚...
- 来用PPT做一只数字时钟动画
-
“什么是可见性？“可见性”即指PPT动画元素中的一种。在我们之前的图文教程《动画基础扫盲课，必修！》中提到过一些常用的PPT动画元素。分别为可见性，X,Y坐标，旋转，高度和宽度。而其中所谓的“可见性”...
- 苹果手机桌面时钟怎么显示 苹果手机桌面时钟显示操作
-
苹果手机系统流畅，系统使用起来很舒适，是很多人的首选。苹果时钟可以在桌面上显示数字时钟，如果在编辑主屏幕时，不小心把时钟删掉了，要怎么恢复呢？或者想要设置时钟显示，操作是什么样的呢？苹果手机桌面时钟怎...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 中级教程 (30)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)