CSS小技能:常用样式属性、选择器分类、盒子模型
前言
CSS(cascading style sheets,层叠式样式表)是一种用来表现HTML 或XML 等文件样式的计算机语言,CSS文档以.css作为后缀 。
1994年，CSS由Hakon Wium Lie与 Bert Bos第一次提出。CSS简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量。
一个有具体功能的完整网页，一般由3部分组成：
- html： 数据和结构 ,HyperText Markup Language，超文本标记语言,其实它就是文本，由浏览器负责将它解析成具体的网页内容
- CSS：Cascading Style Sheets层叠样式表
- JavaScript：行为交互，效果。JavaScript 是一种符合ECMAScript规范的脚本编程语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画。
I CSS
CSS的作用：设置HTML页面的布局和样式 CSS的语法： 选择器｛样式属性;样式属性｝
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
在 CSS 中，属性和值都是区分大小写的,每对中的属性和值由冒号 (:) 分隔。CSS 声明块与选择器配对，以生成 CSS 规则集 。
1.1 HTML中引入CSS的方式
- 外部样式，link标签将外部样式表链接到页面。
<link rel="stylesheet" href="styles/style.css">
- 内部样式是指放在 HTML 文件
<head>标签里的<style>标签之中的CSS
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<style>
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
</style>
</head>
</html>
<!--不推荐此方式，因为在一个站点里，在需要更改 CSS 时修需要改每个页面文件。-->
- 内联样式表存在于 HTML 元素的 style 属性之中，每个 CSS 表只影响一个元素。
<h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
<!--此方式难以维护（在需要更新时，你必须在修改同一个文档的多处地方）-->
注：样式优先级别:
内联样式>内部样式>外部样式根据样式的引入先后顺序，后引入会覆盖前面的样式
1.2 常用样式属性
- 字体相关属性
1）字体颜色 color:颜色英文单词、#十六进制形式 RGB 如：color:#0099ff 2） 字体大小 font-size 3）字体样式 font-style 4）字体 font-family 5）单词间距 word-spacing 6）字符间距 letter-spacing
- 文本相关属性
1）文本对齐方式 text-align：left/center/right 2）文本与左边界的距离 text-indent 3）文本线条 text-decoration:underline 下划线 overline 上划线 line-through 删除线 none 去掉线条
- 背景相关属性
1） 背景色 background-color:red 2） 引入背景图片 background-image:url(...) 3） 图片平铺方式 background-repeat:no-repeat 不平铺 repeat-x 在水平方向上平铺 repeat-y 在垂直方向上平铺
- 边框相关的属性
1） border:线形 粗细 颜色
线形：solid实线 、 dotted点线、 double双线 和 dashed虚线2） border-top:顶层边框 3）border-bottom:底层边框 4）border-left:左边框 5）border-right:右边框
- 宽度高度属性
width: height:
- 鼠标相关
cursor:wait 漏斗形pointer(hand) 手指型
- 显示相关的样式
/*隐藏 */
display:none
/**Flexbox 是 CSS 弹性盒子布局模块（Flexible Box Layout Module）的缩写，它被专门设计出来用于创建横向或是纵向的一维页面布局。*/
display: flex
/*Grid 布局则被设计用于同时在两个维度上把元素按行和列排列整齐。*/
display:grid
/**块级盒子, block 将span转换成div */
display:block
/*内联盒子,inline 将div变成span */
display:inline
- 超链接
1）a:link{.....} 超链接点击之前的样式设置 2）a:hover{....} 鼠标浮上的样式设置 3）a:active{....} 鼠标点击的样式设置 4）a:visited{....} 访问过后的样式设置
- 定位相关样式
1） position: absolute 绝对定位:相对父标签的左上角坐标进行定位 relative 相对定位：相对当前标签默认出现的位置进行偏移 2）top:设置上边距 3）left:设置左边距
- 内外边距
margin: 外边距 padding:内边距
1.3 选择器
我们通过选择器来选中 HTML 文档中的元素，来样式化元素。每个 CSS 规则都以一个选择器或一组选择器为开始，去告诉浏览器这些规则应该应用到哪些元素上。
选择器的优先级排序:important > 内联 > id > 类 > 标签 | 伪类 | 属性选择 > 伪元素 > 通配符 > 继承
II CSS选择器分类
2.1 基础选择器
选择器 | 别名 | 说明 | 版本 |
|---|---|---|---|
tag | 标签选择器 | 指定类型的标签 | 1 |
#id | ID选择器 | 指定身份的标签 | 1 |
.class | 类选择器 | 指定类名的标签 | 1 |
* | 通配选择器 | 所有类型的标签 | 2 |
标签名{
属性:属性值;
}
#选择器名字{
属性:属性值;
}
.选择器的名字{
属性:属性值;
}
标签名.选择器名字{//只对相对应标签有效果
属性:属性值;
}
2.2 层次选择器
选择器 | 别名 | 说明 | 版本 |
|---|---|---|---|
elemP elemC | 后代选择器 | 元素的后代元素 | 1 |
elemP>elemC | 子代选择器 | 元素的子代元素 | 2 |
elem1+elem2 | 相邻同胞选择器 | 元素相邻的同胞元素 | 2 |
elem1~elem2 | 通用同胞选择器 | 元素后面的同胞元素 | 3 |
标签名1 标签名2{
属性:属性值；
}
样式的继承:子标签会继承父标签的样式
例子：+～结合filter实现暗黑模式
2.3 集合选择器
选择器 | 别名 | 说明 | 版本 |
|---|---|---|---|
elem1,elem2 | 并集选择器 | 多个指定的元素 | 1 |
elem.class | 交集选择器 | 指定类名的元素 | 1 |
标签名,标签名{
属性:属性值；
}
2.4 条件选择器
选择器 | 说明 | 版本 |
|---|---|---|
:lang | 指定标记语言的元素 | 2 |
:dir() | 指定书写方向的元素 | 4 |
:has | 包含指定元素的元素 | 4 |
:is | 指定条件的元素 | 4 |
:not | 非指定条件的元素 | 4 |
:where | 指定条件的元素 | 4 |
:scope | 指定元素作为参考点 | 4 |
:any-link | 所有包含href的链接元素 | 4 |
:local-link | 所有包含href且属于绝对地址的链接元素 | 4 |
2.5 行为选择器
选择器 | 说明 | 版本 |
|---|---|---|
:active | 鼠标激活的元素 | 1 |
:hover | 鼠标悬浮的元素 | 1 |
::selection | 鼠标选中的元素 | 3 |
/*在鼠标指针悬浮到一个元素上的时候选择这个元素*/
a:hover { }
2.6 状态选择器
选择器 | 说明 | 版本 |
|---|---|---|
:target | 当前锚点的元素 | 3 |
:link | 未访问的链接元素 | 1 |
:visited | 已访问的链接元素 | 1 |
:focus | 输入聚焦的表单元素 | 2 |
:required | 输入必填的表单元素 | 3 |
:valid | 输入合法的表单元素 | 3 |
:invalid | 输入非法的表单元素 | 3 |
:in-range | 输入范围以内的表单元素 | 3 |
:out-of-range | 输入范围以外的表单元素 | 3 |
:checked | 选项选中的表单元素 | 3 |
:optional | 选项可选的表单元素 | 3 |
:enabled | 事件启用的表单元素 | 3 |
:disabled | 事件禁用的表单元素 | 3 |
:read-only | 只读的表单元素 | 3 |
:read-write | 可读可写的表单元素 | 3 |
:target-within | 内部锚点元素处于激活状态的元素 | 4 |
:focus-within | 内部表单元素处于聚焦状态的元素 | 4 |
:focus-visible | 输入聚焦的表单元素 | 4 |
:blank | 输入为空的表单元素 | 4 |
:user-invalid | 输入合法的表单元素 | 4 |
:indeterminate | 选项未定的表单元素 | 4 |
:placeholder-shown | 占位显示的表单元素 | 4 |
:current() | 浏览中的元素 | 4 |
:past() | 已浏览的元素 | 4 |
:future() | 未浏览的元素 | 4 |
:playing | 开始播放的媒体元素 | 4 |
:paused | 暂停播放的媒体元素 | 4 |
//根据一个有特定值的标签属性是否存在来选择
a[href="https://blog.csdn.net/z929118967?type=blog"] { }
2.7 结构选择器
选择器 | 说明 | 版本 |
|---|---|---|
:root | 文档的根元素 | 3 |
:empty | 无子元素的元素 | 3 |
:first-letter | 元素的首字母 | 1 |
:first-line | 元素的首行 | 1 |
:nth-child(n) | 元素中指定顺序索引的元素 | 3 |
:nth-last-child(n) | 元素中指定逆序索引的元素 | 3 |
:first-child | 元素中为首的元素 | 2 |
:last-child | 元素中为尾的元素 | 3 |
:only-child | 父元素仅有该元素的元素 | 3 |
:nth-of-type(n) | 标签中指定顺序索引的标签 | 3 |
:nth-last-of-type(n) | 标签中指定逆序索引的标签 | 3 |
:first-of-type | 标签中为首的标签 | 3 |
:last-of-type | 标签中为尾标签 | 3 |
:only-of-type | 父元素仅有该标签的标签 | 3 |
2.8 属性选择器
选择器 | 说明 | 版本 |
|---|---|---|
[attr] | 指定属性的元素 | 2 |
[attr=val] | 属性等于指定值的元素 | 2 |
[attr*=val] | 属性包含指定值的元素 | 3 |
[attr^=val] | 属性以指定值开头的元素 | 3 |
[attr$=val] | 属性以指定值结尾的元素 | 3 |
[attr~=val] | 属性包含指定值(完整单词)的元素(不推荐使用) | 2 |
[attr|=val] | 属性以指定值(完整单词)开头的元素(不推荐使用) | 2 |
2.9 伪元素
选择器 | 说明 |
|---|---|
::before | 在元素前插入的内容 |
::after | 在元素后插入的内容 |
III 盒子模型
一切皆盒子: 在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。
3.1 块级盒子 (block box) 和 内联盒子 (inline box)
块级盒子 (block box) 和 内联盒子 (inline box)会在页面流（page flow）和元素之间的关系方面表现出不同的行为：
- 块级盒子（block）
- 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
- 每个盒子都会换行
- width 和 height 属性可以发挥作用
- 内边距（padding）, 外边距（margin）和 边框（border）会将其他元素从当前盒子周围“推开”
- 内联盒子 (inline box)
- 盒子不会产生换行。
- width 和 height 属性将不起作用
- 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
- 水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。
- 每个盒子都有四个属性：
- 内容（content）：盒子里装的东西，网页中通常是指文字和图片
- 填充（padding，内边距）：怕盒子里装的（贵重的）东西损坏，而添加的泡沫或者其它抗震的辅料
- 边框（border）：盒子本身
- 边界（margin，外边距）：盒子摆放的时候的不能全部堆在一起，盒子之间要留一定空隙保持通风，同时也为了方便取出
3.2 弹性盒子和Grid 布局
display设置元素的显示模式, 实现页面布局的主要方法是设定display属性的值。正常流中的所有内容都有一个display的值，用作元素的默认行为方式。
/**Flexbox 是 CSS 弹性盒子布局模块（Flexible Box Layout Module）的缩写，它被专门设计出来用于创建横向或是纵向的一维页面布局。*/
display: flex
/*Grid 布局则被设计用于同时在两个维度上把元素按行和列排列整齐。*/
display:grid
/**块级盒子 */
display:block
/*内联盒子*/
display:inline
3.3 定位技术
- 静态定位 (Static positioning) 是每个元素默认的属性
- 相对定位 (Relative positioning) 允许我们相对于元素在正常的文档流中的位置移动它
- 绝对定位 (Absolute positioning) 将元素完全从页面的正常布局流 (normal layout flow) 中移出，类似将它单独放在一个图层中。我们可以将元素相对于页面的
<html>元素边缘固定，或者相对于该元素的最近被定位祖先元素 (nearest positioned ancestor element)。 - 固定定位 (Fixed positioning) 将一个元素相对浏览器视口(viewport,
网页的可视区域)固定，而不是相对另外一个元素。这在创建类似在整个页面滚动过程中总是处于屏幕的某个位置的导航菜单时非常有用。 - 粘性定位 (Sticky positioning) 让元素先保持和
position: static一样的定位，当它的相对视口位置 (offset from the viewport) 达到某一个预设值时，他就会像position: fixed一样定位。
3.4 小知识点
- 行高 常用于设置“垂直居中”
- 块级标签（inline－block，block）才可以设置宽高，行级标签（inline）的宽高取决于内容
- 脱离标准流：浮动（float）、绝对定位（Absolute positioning）
- 如果想相对于父节点进行定位：最好设置父节点的position为relative， 原则“子绝父相”。
腾讯云开发者
