css入门 css入门书籍
zhezhongyun 2024-12-18 18:09 63 浏览
文章目录
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 可以看一下
相关推荐
- Angular UI组件库入门指南 - 如何安装和开始使用(一)
-
本文主要介绍如何安装和开始使用KendoUIforAngular。首先完成安装步骤。然后创建一个简单的应用程序，其中包含一些KendoUIforAngular组件，应用程序源代码可供您参考...
- SPSS22: 3.1.3 数据管理—复制数据属性
-
内容摘自《SPSS常用统计分析教程(SPSS22.0中英文版)(第4版)》3.1.3复制数据属性复制数据属性（CopyDataProperties）可用于建立相同调查问卷的空白数据集，或者复制其...
- 妙用Excel制作漂亮工整的工资条（excel表格中如何制作工资条）
-
工资条的制作方法并不难，但如何用Excel把工资条做得更美观、更有效率，可就要花费一点小心思了。许多人或许已经习惯了用工资明细表做员工工资统计并向上级汇报，将表中的条目慢慢复制粘贴然后打印给员工，这样...
- 如何运用EXCEL制作员工工资条，你造吗?
-
每个月工资发放之后，正规的公司应发给每个员工一个工资条。上面有员工当月工资的详细构成。但不能将工资明细表剪条发放，因为每个数字缺少对应项目，这就需要重新制作一张专门用来打印的工资条。作为劳动者，应该妥...
- 鸿蒙仓颉语言开发实战教程:实现商品分类页
-
今天继续为大家带来仓颉语言开发商城应用的实战教程，今天的内容是实现商品分类页。分类页面要在基本布局的基础上增加一些动态效果，比如点击状态的切换和两个列表容器的联动。下面为大家详细介绍。分类列表先来看左...
- 鸿蒙开发实战:一多开发之缩放布局
-
在HarmonyOS中，使用ArkTS语法进行自适应布局时，缩放布局是一种重要的布局方式。它允许组件根据外部容器的尺寸变化，按照预设的比例或权重调整自身的大小，从而确保在不同设备上都能呈现出良好的视觉...
- 基于WPF的电能质量检测系统上位机软件设计
-
郑恒持，蒋丁宇，卢兴泉，刘泊江（大连海事大学轮机工程学院，辽宁大连116026）摘要：电能质量直接影响着电力系统能否安全运行，为了能及时可靠地检测电能质量，采用全新的WindowsPresen...
- HarmonyOS实战:Tab顶部滑动悬停功能实现
-
前言日常开发过程中，遇到这种Scroll嵌套List列表滑动顶部悬停的场景十分常见，在鸿蒙开发时也正好实现了这个功能，本篇文章将带你一步步实现Tab顶部悬停的效果，建议点赞收藏！实现效果先...
- Axure教程:高级搜索（axure搜索功能怎么做）
-
在原型中，搜索是一个常见的交互设计。但不少同学因为技能不熟悉就没有做对应的交互效果。这篇文章，作者分享了设计搜索功能的整个流程，相信看完你也能做一个很牛逼的交互。高级搜索可以通过使用精确的关键词或短语...
- Excel小技巧: 如何设置自动列宽适应内容
-
我们在整理Excel表格的时候，通常会碰到单元格列宽混乱的情况（如下图所示），这会导致数据显示不完整或浪费空间导致打印不全，每次手动调整列宽都会费时费力，下面教你三个方法，让你一键设置自动列宽，适应单...
- 用好6个公式 Excel随意查询（excel中查询功能怎么用公式）
-
Excel表格一般会储存大量数据，我们可能不是每次都需要使用其中的所有数据，大部分时候只用到其中的一部分，所以数据查询功能就变得非常重要。为此，Excel本身也提供了多少查询方法，供我们使用。首先我们...
- 夏日PC消暑指南:机箱风道与风扇选择
-
进入六月以后北京的天气真是热得让人感觉喘不过气，大家天天打交道的笔记本和台式机更是连人都不如了，所谓热成狗真是一点也不夸张。年年大家在防暑抗高温这个问题上都是八仙过海各显神通，但是很多人光顾着自己凉快...
- Excel VBA必学技巧:用厘米设置单元格大小，办公效率翻倍
-
痛点：Excel默认单位太反人类！你是否经常遇到这些问题：-想设置精确的单元格尺寸，却只能用模糊的"字符宽度"和"磅值"？-设计打印报表时，毫米级的误差导致格式错乱...
- CSS小知识，分享14个你可能还未用上但又实用的CSS属性(下)
-
大家好，在上一篇文章里CSS小知识，分享14个你可能还未用上但又实用的CSS属性（上）我们一起学习了上半部分，这篇文章我们我们继续学习下半部分。八、CSSShakeEffect晃动效果CSS...
- 总结雅虎前端性能优化技巧(16条)（雅虎引擎还能用吗）
-
前言在日常开发中，有很多场景需要我们去做好前端优化，为了防止遗忘，加深记忆，今天参阅了一些资料以及自己的一些总结，梳理出来15条优化技巧。1.合并文件css、js合并，减少http请求数，每次http...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML常用标签 (29)
- 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)
- CSS 水平对齐 (Horizontal Align) (30)