CSS
一、CSS简介
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
二、CSS语言引入方式
1、行内样式
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>行内样式</title>
</head>
<body>
<h1 style="color:red;">行内样式的引入！</h1>
<p style="color:red;font-size:30px;">我是p标签</p>
</body>
</html>
2、内部样式表
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>内部样式表</title>
<style type="text/css">
div{
background: green;
}
</style>
</head>
<body>
<div>引入内部样式表！</div>
</body>
</html>
3、外部样式表
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>外部样式表</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<style type="text/css">
@import url("css/style.css");
</style>
</head>
<body>
</body>
</html>
链接式和导入式的区别:
< link >
@import
- 1、属于CSS2.1
- 2、先加载HTML结构在加载CSS文件。
4、CSS中的优先级
1、样式优先级
行内样式>内部样式>外部样式(后两者是就近原则)
Ⅰ、行内样式和内部样式比较优先级：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>行内样式和内部样式表的优先级</title>
<style type="text/css">
p{
color: blue;
}
</style>
</head>
<body>
<p style="color: red;">我是p段落</p>
</body>
</html>
浏览器运行效果：
结论：行内样式优先级高于内部样式表。
Ⅱ、内部样式表和外部样式表比较优先级：
①、内部样式表在外部样式表上面
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>内部样式表和外部样式表的优先级</title>
<style type="text/css">
p{
color: blue;
}
</style>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<p>我是p段落</p>
<div>我是div</div>
<ol>
<li>1111</li>
<li>2222</li>
</ol>
</body>
</html>
浏览器运行效果：
②、外部样式表在内部样式表上面
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>内部样式表和外部样式表的优先级</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<style type="text/css">
p{
color: blue;
}
</style>
</head>
<body>
<p>我是p段落</p>
<div>我是div</div>
<ol>
<li>1111</li>
<li>2222</li>
</ol>
</body>
</html>
浏览器运行效果：
结论：内部样式表和外部样式表使用就近原则，即谁写在下面以谁为准。
注意：导入式和链接式的优先级也是使用就近原则。
2、选择器优先级
优先级：ID选择器>类选择器>标签选择器
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>选择器的优先级</title>
<style type="text/css">
#a{
color: green;
}
.b{
color: yellow;
}
h2{
color: red;
}
</style>
</head>
<body>
<h2>111</h2>
<h2 id="a" class="b">222</h2>
<h2 class="b">333</h2>
</body>
</html>
浏览器运行效果：
三、CSS常用属性
1、动画属性
| 属性 | 描述 | CSS |
|---|
| @keyframes | 定义一个动画,@keyframes定义的动画名称用来被animation-name所使用。 | 3 |
| animation | 复合属性。检索或设置对象所应用的动画特效。 | 3 |
| animation-name | 检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用，因为动画名称由@keyframes定义 | 3 |
| animation-duration | 检索或设置对象动画的持续时间 | 3 |
| animation-timing-function | 检索或设置对象动画的过渡类型 | 3 |
| animation-delay | 检索或设置对象动画的延迟时间 | 3 |
| animation-iteration-count | 检索或设置对象动画的循环次数 | 3 |
| animation-direction | 检索或设置对象动画在循环中是否反向运动 | 3 |
| animation-play-state | 检索或设置对象动画的状态 | 3 |
2、背景属性
| 属性 | 描述 | CSS |
|---|
| background | 复合属性。设置对象的背景特性。 | 1 |
| background-attachment | 设置或检索背景图像是随对象内容滚动还是固定的。必须先指定background-image属性。 | 1 |
| background-color | 设置或检索对象的背景颜色。 | 1 |
| background-image | 设置或检索对象的背景图像。 | 1 |
| background-position | 设置或检索对象的背景图像位置。必须先指定background-image属性。 | 1 |
| background-repeat | 设置或检索对象的背景图像如何铺排填充。必须先指定background-image属性。 | 1 |
| background-clip | 指定对象的背景图像向外裁剪的区域。 | 3 |
| background-origin | 设置或检索对象的背景图像计算background-position时的参考原点(位置)。 | 3 |
| background-size | 检索或设置对象的背景图像的尺寸大小。 | 3 |
3、边框(Border) 和 轮廓(Outline) 属性
| 属性 | 描述 | CSS |
|---|
| border | 复合属性。设置对象边框的特性。 | 1 |
| border-bottom | 复合属性。设置对象底部边框的特性。 | 1 |
| border-bottom-color | 设置或检索对象的底部边框颜色。 | 1 |
| border-bottom-style | 设置或检索对象的底部边框样式。 | 1 |
| border-bottom-width | 设置或检索对象的底部边框宽度。 | 1 |
| border-color | 置或检索对象的边框颜色。 | 1 |
| border-left | 复合属性。设置对象左边边框的特性。 | 1 |
| border-left-color | 设置或检索对象的左边边框颜色。 | 1 |
| border-left-style | 设置或检索对象的左边边框样式。 | 1 |
| border-left-width | 设置或检索对象的左边边框宽度。 | 1 |
| border-right | 复合属性。设置对象右边边框的特性。 | 1 |
| border-right-color | 设置或检索对象的右边边框颜色。 | 1 |
| border-right-style | 设置或检索对象的右边边框样式。 | 1 |
| border-right-width | 设置或检索对象的右边边框宽度。 | 1 |
| border-style | 设置或检索对象的边框样式。 | 1 |
| border-top | 复合属性。设置对象顶部边框的特性。 | 1 |
| border-top-color | 设置或检索对象的顶部边框颜色 | 1 |
| border-top-style | 设置或检索对象的顶部边框样式。 | 1 |
| border-top-width | 设置或检索对象的顶部边框宽度。 | 1 |
| border-width | 设置或检索对象的边框宽度。 | 1 |
| outline | 复合属性。设置或检索对象外的线条轮廓。 | 2 |
| outline-color | 设置或检索对象外的线条轮廓的颜色。 | 2 |
| outline-style | 设置或检索对象外的线条轮廓的样式。 | 2 |
| outline-width | 设置或检索对象外的线条轮廓的宽度。 | 2 |
| border-bottom-left-radius | 设置或检索对象的左下角圆角边框。提供2个参数，2个参数以空格分隔，每个参数允许设置1个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数 | 3 |
| border-bottom-right-radius | 设置或检索对象的右下角圆角边框。 | 3 |
| border-image | 设置或检索对象的边框样式使用图像来填充。 | 3 |
| border-image-outset | 规定边框图像超过边框的量。 | 3 |
| border-image-repeat | 规定图像边框是否应该被重复（repeated）、拉伸（stretched）或铺满（rounded）。 | 3 |
| border-image-slice | 规定图像边框的向内偏移。 | 3 |
| border-image-source | 规定要使用的图像，代替 border-style 属性中设置的边框样式。 | 3 |
| border-image-width | 规定图像边框的宽度。 | 3 |
| border-radius | 设置或检索对象使用圆角边框。 | 3 |
| border-top-left-radius | 定义左上角边框的形状。 | 3 |
| border-top-right-radius | 定义右上角边框的形状。 | 3 |
| box-decoration-break | 规定行内元素被折行 | 3 |
| box-shadow | 向方框添加一个或多个阴影。 | 3 |
4、盒子(Box) 属性
| 属性 | 描述 | CSS |
|---|
| overflow-x | 如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪。 | 3 |
| overflow-y | 如果内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪。 | 3 |
| overflow-style | 规定溢出元素的首选滚动方法。 | 3 |
| rotation | 围绕由 rotation-point 属性定义的点对元素进行旋转。 | 3 |
| rotation-point | 定义距离上左边框边缘的偏移点。 | 3 |
5、颜色(Color) 属性
| 属性 | 描述 | CSS |
|---|
| color-profile | 允许使用源的颜色配置文件的默认以外的规范 | 3 |
| opacity | 设置一个元素的透明度级别 | 3 |
| rendering-intent | 允许超过默认颜色配置文件渲染意向的其他规范 | 3 |
6、内边距(Padding) 属性
| 属性 | 说明 | CSS |
|---|
| padding | 在一个声明中设置所有填充属性 | 1 |
| padding-bottom | 设置元素的底填充 | 1 |
| padding-left | 设置元素的左填充 | 1 |
| padding-right | 设置元素的右填充 | 1 |
| padding-top | 设置元素的顶部填充 | 1 |
7、媒体页面内容属性
| 属性 | 说明 | CSS |
|---|
| bookmark-label | 指定书签的标签 | 3 |
| bookmark-level | 指定了书签级别 | 3 |
| bookmark-target | 指定了书签链接的目标 | 3 |
| float-offset | 在相反的方向推动浮动元素，他们一直具有浮动 | 3 |
| hyphenate-after | 指定一个断字的单词断字字符后的最少字符数 | 3 |
| hyphenate-before | 指定一个断字的单词断字字符前的最少字符数 | 3 |
| hyphenate-character | 指定了当一个断字发生时，要显示的字符串 | 3 |
| hyphenate-lines | 表示连续断字的行在元素的最大数目 | 3 |
| hyphenate-resource | 外部资源指定一个逗号分隔的列表，可以帮助确定浏览器的断字点 | 3 |
| hyphens | 设置如何分割单词以改善该段的布局 | 3 |
| image-resolution | 指定了正确的图像分辨率 | 3 |
| marks | 将crop and/or cross标志添加到文档 | 3 |
| string-set | | 3 |
8、尺寸(Dimension) 属性
| 属性 | 描述 | CSS |
|---|
| height | 设置元素的高度 | 1 |
| max-height | 设置元素的最大高度 | 2 |
| max-width | 设置元素的最大宽度 | 2 |
| min-height | 设置元素的最小高度 | 2 |
| min-width | 设置元素的最小宽度 | 2 |
| width | 设置元素的宽度 | 1 |
9、弹性盒子模型（Flexible Box）属性(新)
| 属性 | 说明 | CSS |
|---|
| flex | 复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。 | 3 |
| flex-grow | 设置或检索弹性盒的扩展比率。 | 3 |
| flex-shrink | 设置或检索弹性盒的收缩比率。 | 3 |
| flex-basis | 设置或检索弹性盒伸缩基准值。 | 3 |
| flex-flow | 复合属性。设置或检索弹性盒模型对象的子元素排列方式。 | 3 |
| flex-direction | 该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置。 | 3 |
| flex-wrap | 该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。 | 3 |
| align-content | 在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。 | 3 |
| align-items | 定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。 | 3 |
| align-self | 定义flex子项单独在侧轴（纵轴）方向上的对齐方式。 | 3 |
| justify-content | 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。 | 3 |
| order | 设置或检索弹性盒模型对象的子元素出现的順序。 | 3 |
10、弹性盒子模型（Flexible Box）属性(旧)
| 属性 | 说明 | CSS |
|---|
| box-align | 指定如何对齐一个框的子元素 | 3 |
| box-direction | 指定在哪个方向，显示一个框的子元素 | 3 |
| box-flex | 指定一个框的子元素是否是灵活的或固定的大小 | 3 |
| box-flex-group | 指派灵活的元素到Flex组 | 3 |
| box-lines | 每当它在父框的空间运行时，是否指定将再上一个新的行列 | 3 |
| box-ordinal-group | 指定一个框的子元素的显示顺序 | 3 |
| box-orient | 指定一个框的子元素是否在水平或垂直方向应铺设 | 3 |
| box-pack | 指定横向盒在垂直框的水平位置和垂直位置 | 3 |
11、字体（Font） 属性
| 属性 | 说明 | CSS |
|---|
| font | 在一个声明中设置所有字体属性 | 1 |
| font-family | 规定文本的字体系列 | 1 |
| font-size | 规定文本的字体尺寸 | 1 |
| font-style | 规定文本的字体样式 | 1 |
| font-variant | 规定文本的字体样式 | 1 |
| font-weight | 规定字体的粗细 | 1 |
| @font-face | 一个规则，允许网站下载并使用其他超过"Web- safe"字体的字体 | 3 |
| font-size-adjust | 为元素规定 aspect 值 | 3 |
| font-stretch | 收缩或拉伸当前的字体系列 | 3 |
12、内容生成属性(Generated Content Properties)
| 属性 | 说明 | CSS |
|---|
| content | 与 :before 以及 :after 伪元素配合使用，来插入生成内容 | 2 |
| counter-increment | 递增或递减一个或多个计数器 | 2 |
| counter-reset | 创建或重置一个或多个计数器 | 2 |
| quotes | 设置嵌套引用的引号类型 | 2 |
| crop | 允许replaced元素只是作为一个对象代替整个对象的矩形区域 | 3 |
| move-to | 从流中删除元素，然后在文档中后面的点上重新插入。 | 3 |
| page-policy | 判定基于页面的给定元素的适用于计数器的字符串值 | 3 |
13、网格（Grid） 属性
| 属性 | 说明 | CSS |
|---|
| grid-columns | 指定在网格中每列的宽度 | 3 |
| grid-rows | 指定在网格中每列的高度 | 3 |
14、超链接(Hyperlink) 属性
| 属性 | 说明 | CSS |
|---|
| target | 简写属性设置target-name, target-new,和target-position属性 | 3 |
| target-name | 指定在何处打开链接（目标位置） | 3 |
| target-new | 指定是否有新的目标链接打开一个新窗口或在现有窗口打开新标签 | 3 |
| target-position | 指定应该放置新的目标链接的位置 | 3 |
15、线框(Linebox) 属性
| 属性 | 说明 | CSS |
|---|
| alignment-adjust | 允许更精确的元素的对齐方式 | 3 |
| alignment-baseline | 其父级指定的内联级别的元素如何对齐 | 3 |
| baseline-shift | 允许重新定位相对于dominant-baseline的dominant-baseline | 3 |
| dominant-baseline | 指定scaled-baseline-table | 3 |
| drop-initial-after-adjust | 设置下拉的主要连接点的初始对齐点 | 3 |
| drop-initial-after-align | 校准行内的初始行的设置就是具有首字母的框使用初级连接点 | 3 |
| drop-initial-before-adjust | 设置下拉的辅助连接点的初始对齐点 | 3 |
| drop-initial-before-align | 校准行内的初始行的设置就是具有首字母的框使用辅助连接点 | 3 |
| drop-initial-size | 控制局部的首字母下沉 | 3 |
| drop-initial-value | 激活一个下拉式的初步效果 | 3 |
| inline-box-align | 设置一个多行的内联块内的行具有前一个和后一个内联元素的对齐 | 3 |
| line-stacking | 一个速记属性设置line-stacking-strategy, line-stacking-ruby,和line-stacking-shift属性 | 3 |
| line-stacking-ruby | 设置包含Ruby注释元素的行对于块元素的堆叠方法 | 3 |
| line-stacking-shift | 设置base-shift行中块元素包含元素的堆叠方法 | 3 |
| line-stacking-strategy | 设置内部包含块元素的堆叠线框的堆叠方法 | 3 |
| text-height | 行内框的文本内容区域设置block-progression维数 | 3 |
总结：
CSS层叠样式表是前端三剑客之一，所有网页当中必不可少的元素，它的难度不亚于HTML和JavaScript，网页当中的所有样式和布局都是由CSS完成的！当然，美的布局就需要手敲大量的CSS中的Style样式代码才能实现！这就需要对大量CSS的属性有所了解！这样才能在写CSS代码当中游刃有余！
CSS属性有很多，今天CSS的属性只写了一半，还有另一半明天继续更新！一次性写的太多了也会显得太冗余！看的太多了也会觉得厌烦！一口吃不了一个大胖子，得慢慢的持续更新！还是之前说的，得静下心来，多看多学习，多敲代码多看书！CSS与后端接触的并不是很多，只需了解即可！毕竟这是前端小伙伴以后的工作，我们做后端的小伙伴只需要做好后端即可！见到CSS代码至少要认识，因为后台管理系统也还是需要CSS代码的渲染，才能更好的上手。
最近在休息的时间也在看一些项目，有的时候不能只看自己写代码，也要多看看高手是如何写代码的，或许你觉得有些地方已经写的很完美了，但其实还可以再优化，不过可能只是遇到了瓶颈而已！当我们攻克了瓶颈则又会发现一条新的出路。写代码不仅仅是写代码，更要考虑复杂度的问题等等，只有这样才能持续的进步！今天的博客先更新到这里！
如果本篇博客对大家有帮助，希望大家能够点赞、关注！在此先谢过各位小伙伴了！
最后，愿我们都能在各行各业中能够取得不同的成就，不负亲人、朋友、老师、长辈和国家的期望！能够用自身的所学知识为国家贡献出自己的一份力量！一起加油！
2021年6月16日夜
316
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
