css入门 css入门书籍
zhezhongyun 2024-12-18 18:09 86 浏览
文章目录
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 可以看一下
相关推荐
- Chinese vice premier calls for multilateralism at Davos
-
DAVOS,Switzerland,Jan.21(Xinhua)--ChineseVicePremierDingXuexiangdeliveredaspeechatthe...
- 用C++ Qt手把手打造炫酷汽车仪表盘
-
一、项目背景与核心价值在车载HMI（人机交互界面）开发领域，虚拟仪表盘是智能座舱的核心组件。本项目基于C++Qt框架实现一个具备专业级效果的时速表模块，涵盖以下技术要点：Qt图形绘制核心机制（QPa...
- 系列专栏(八):JS的第七种基本类型Symbols
-
ES6作为新一代JavaScript标准，已正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解，MozillaWeb开发者博客推出了《ES6InDepth》系列文章。CSDN...
- MFC界面开发工具BCG v31.1 - 增强功能区、工具箱功能
-
点击“了解更多”获取工具亲爱的BCGSoft用户，我们非常高兴地宣布BCGControlBarProfessionalforMFC和BCGSuiteforMFCv31.2正式发布！新版本支...
- 雅居乐上调出售吉隆坡项目保留金，预计亏损扩大至6.64亿元
-
1月2日，雅居乐集团（03383.HK）发布有关出售一家附属公司股权披露交易的补充公告。此前雅居乐集团曾公告，2023年11月8日（交易时段后），集团子公司AgileRealEstateDeve...
- Full text: Address by Vice Premier Ding Xuexiang's at World Economic Forum Annual Meeting 2025
-
DAVOS,Switzerland,Jan.21(Xinhua)--ChineseVicePremierDingXuexiangonTuesdaydeliveredasp...
- 手机性能好不好 GPU玄学曲线告诉你
-
前言各位在看测试者对手机进行评测时或许会见过“安卓玄学曲线”，所谓中的安卓玄学曲线真名为“ProfileGPURendering”。大多数情况下，在系统“开发者选项中被称为“GPU显示配置文件”或...
- 小迈科技 X Hologres:高可用的百亿级广告实时数仓建设
-
通过本文，我们将会介绍小迈科技如何通过Hologres搭建高可用的实时数仓。一、业务介绍小迈科技成立于2015年1月，是一家致力以数字化领先为优势，实现业务高质量自增长的移动互联网科技公司。始...
- vue3新特征和所有的属性，方法汇总及其对应源码分析
-
vue3新特征汇总与源码分析（备注：vue3使用typescript编写）何为应用？constapp=Vue.createApp({})app就是一个应用。应用的配置和应用的API就是app应用...
- China's stability redefines global trade in a volatile era
-
ContainersareunloadedatQingdaoPort,eastChina'sShandongProvince,December10,2024.[Photo/X...
- QML 实现图片帧渐隐渐显轮播
-
前言所谓图片帧渐隐渐显轮播就是，一组图片列表，当前图片逐渐改变透明度隐藏，同时下一张图片逐渐改变透明度显示，依次循环，达到渐隐渐显的效果，该效果常用于图片展示，相比左右自动切换的轮播方式来说，这种方式...
- 前端惊魂夜:我竟在CSS里写出了JavaScript?
-
凌晨两点，写字楼里只剩下我工位上的一盏孤灯。咖啡杯见底，屏幕的光映在疲惫的眼镜片上。为了实现一个极其复杂的动态渐变效果，我翻遍了MDN文档，试遍了所有已知的CSS技巧，却始终差那么一口气。“要是CSS...
- 10 个派上用场的 Flutter 小部件
-
尝试学习一门新语言可能会令人恐惧和厌烦。很多时候，我们希望我们知道早先存在的某些功能。在今天的文章中，我将告诉你我希望早点知道的最方便的颤振小部件。SpacerSpacer创建一个可调整的空白空...
- 让我的 Flutter 代码整洁 10 倍的 5 种
-
如果你曾在Flutter中使用过SingleTickerProviderStateMixin来制作动画，猜猜怎么着？你已经使用过Mixin了——恭喜你，你已经处于一段你甚至不知道的关...
- daisyUI - 主题漂亮、代码纯净!免费开源的 Tailwind CSS 组件库
-
漂亮有特色的CSS组件库，组件代码非常简洁，也支持深度定制主题、定制组件，可以搭配Vue/React等框架使用。关于daisyUIdaisyUI是一款极为流行的CSSUI组件库，...
- 一周热门
- 最近发表
-
- Chinese vice premier calls for multilateralism at Davos
- 用C++ Qt手把手打造炫酷汽车仪表盘
- 系列专栏(八):JS的第七种基本类型Symbols
- MFC界面开发工具BCG v31.1 - 增强功能区、工具箱功能
- 雅居乐上调出售吉隆坡项目保留金，预计亏损扩大至6.64亿元
- Full text: Address by Vice Premier Ding Xuexiang's at World Economic Forum Annual Meeting 2025
- 手机性能好不好 GPU玄学曲线告诉你
- 小迈科技 X Hologres:高可用的百亿级广告实时数仓建设
- vue3新特征和所有的属性，方法汇总及其对应源码分析
- China's stability redefines global trade in a volatile era
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法：GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)
- opacity 属性 (32)
- transition 属性 (33)