大家好，欢迎来到IT知识分享网。
目录
1.CSS层叠样式表
CSS三大特性
- 层叠性：如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式层叠（覆盖）。
- 继承性：元素会自动拥有其父元素，或其祖先元素上所设置的某些样式。优先继承离得近的
- 优先级：！important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * >继承的样式（多个选择器需要计算权重）
1.1基本语法
CSS规则由两个主要的部分构成：选择器，以及一条或多条声明:
- 选择器通常是您需要设置样式的HTML元素
- 每条声明由一个属性和一个值组成
- 属性（property）是您希望设置的样式属性（style attribute）。属性与属性之前用分号，属性和值用冒号
1.2. 如何编写CSS
- 内联样式：将CSS代码直接写在HTML元素的style属性中
<!DOCTYPE html>
<html>
<body>
<h1 style="color:red;">Hello World!</h1>
</body>
</html>- 内部样式表：将CSS代码写在文档的<head>标签中的<style>标签中，直接在HTML文档中定义样式
<head> <style> /* CSS代码 */ </style> </head>- 外部样式表：将CSS代码保存到一个外部样式表文件中，然后通过文档头部的<link>标签来引入样式表
<head> /* 引用外部的style.css， rel属性：定义当前文档与被链接文档之间的关系。用于操作样式表时，rel属性的值为“stylesheet” */ <link rel="stylesheet" href="style.css"> </head>- 样式优先级：当发生样式定义冲突时，浏览器首先会按照不同样式规则的优先级来应用样式；在相同的优先级下，则会按照样式定义的先后层次来应用样式，一般遵守”就近优先”原则
1.3CSS常用选择器
选择器权重算法：
CSS选择器用于定位你要操作的元素：
1. 3.1标签/元素选择器
选择所有的 <p> 元素，并将它们的文本颜色设置为红色
p { color: red; }1.3.2. class类选择器
选择所有 class="red" 的任何元素，并将它们的文本颜色都设置为红色
.red { color: red; }选择所有 class="red" 的div元素，并将它们的文本颜色都设置为黄色
div.red{ color: yellow; }1.3.3. id选择器
选择使用了 id="header" 的元素，并将它们的字体大小设置为 24 像素。id有唯一性
#header { font-size: 24px; }1.3.4. 属性选择器
选择所有 target="_blank" 的 <a> 元素，并将它们的文本颜色设置为蓝色
a[target="_blank"] { color: blue; }1.3.5. 组合选择器
- 选择所有
<h3>元素和class=”c1″的元素，并将它们的字体斜体
h3,.c1{ font-style: italic; }1.3.6. 层次选择器
- 空格：后代选择器，选择被div标签包裹的所有span标签
- ‘>’：子代选择器，选择被div标签直接包裹的儿子，不会影响p标签中的span标签
- ‘+’：兄弟选择器，选择div标签后面紧挨着的span标签，不会影响后续的兄弟标签，此标签只能影响后面的兄弟
div span{ font-weight: bolder; background: red; } div > span{ font-weight: bolder; background: red; } div + span{ font-weight: bolder; background: red; }1.3.7. 伪类选择器
伪类是一种状态，给标签的一种状态设置样式就叫伪类选择器
伪类选择器：
<head> /* 选中的是鼠标悬浮状态的a元素 */ a:hover{ color: orange } </head> <body> <a href="www.baidu.com"></a> </body>动态伪类
:hover：设置元素在其鼠标悬停时的样式 :read-only 选择有"readonly"的表单元素，注意只读包含禁用，所以也会影响具有"disabled"的表单元素 :read-write 选择没有"readonly"的表单元素，设置了disabled的元素也认为设置了readonly :focus 选择拥有键盘输入焦点的元素 - 一般用于输入框中结构伪类
:first-child 选择满足是其父元素的第一个子元素的元素 :last-child 选择满足是其父元素的最后一个子元素的元素 E:nth-child(n) { css样式 } - n可以是数子，2n，2n-1，even奇数，odd偶数，具体请看稳定 会选择父元素的第n个子元素E，如果第n个子元素不是E，则是无效选择符，但n会递增否定伪类
:not(selector) 选择不满足selector的元素UI伪类
:checked+要改变的元素 选择每个被选中的元素 :enable 选择每个已启动的元素 :disabled 选择每个已禁止的元素注意：CSS3出现了伪元素选择器，有兴趣百度研究
::first-letter 选择指定元素的第一个单词 ::first-line 选择指定元素的第一行 ::after 在指定元素的内容前面插入内容 ::before 在指定元素的内容后面插入内容1.4CSS常用样式
1.4.1文本样式
示例：
<style> p{ font-family: Arial; /* 字体类型：Arial */ font-size: 40px; /* 字体大小：40个像素点 */ color: orangered; /* 字体颜色：橙红色 */ font-weight: bolder; /* 文本重量：文本加粗 */ font-style: italic; /* 字体样式：斜体 */ text-align: center; /* 文本水平位置：居中 */ text-decoration: underline; /* 文本修饰：下划线 */ text-transform: uppercase; /* 文本转换：转大写 */ line-height: 1; /* 行高 - 可以用来调整上下高度 */ text-shadow: 15px 15px 2px #000000; /* 文本阴影：x轴 y轴 模糊度 颜色 */ } </style> <p>HelloWorld</p>1.4.2背景样式
CSS中的background属性用于设置元素的背景样式，包括背景颜色、图片、定位等属性。常用样式如下：
示例：
<div class="box"></div> <div class="box"></div> <style> .box{ width: 700px; /* 宽度：700个像素 */ height: 500px; /* 高度：500个像素 */ border: 1px solid gold; /* 边框：1个像素宽度 边框样式实线 边框颜色金色 */ background-color: aqua; /* 背景颜色：aqua */ /* background-color: rgba(255,255,125,0.5); *//* 还可以指定透明度 */ margin: 0 auto; /* 外边距：上下0 左右自动*/ } body{ /*background-image: url("images/zbc.webp");*/ /* 背景图片：url地址 */ /*background-repeat: no-repeat;*/ /* 背景重复：不重复 */ /*background-position: top right;*/ /* 背景定位：顶部 右边 */ /*background-attachment: fixed;*/ /* 背景附属：固定 - 不随滚动条移动 */ /*还有一种简洁方法，将背景统一设置，加上背景颜色称之为背景五合一*/ /* 背景复合属性：位置可以换，也可以省略，因为样式值是唯一的不会冲突。一般建议背景颜色放在最前面 */ background:pink url("images/01.jpg") no-repeat top right fixed; } </style>1.4.3光标样式
默认情况下，光标会根据用户的操作发生改变。比如当鼠标悬停在一个链接上时，光标将从指针形状变为手状形状。当鼠标悬停在文本区域时会显示 I 形状。而当鼠标悬停在一个按钮上时光标会显示为箭头
可以使用 cursor 属性指定显示给用户的鼠标光标类型（形状），该属性常用的取值有：
1、url：需要使用的自定义光标的URL 2、default：默认光标，通常是一个箭头 3、auto：默认，浏览器设置的光标 4、crosshair：光标呈现为十字线 5、pointer：光标呈现为一只手 6、move：指示某对象可以移动 7、e-resize：指示矩形框的边缘可被向右移动 8、ne-resize：指示矩形框的边缘可被向上以及向右移动 9、nw-resize：指示矩形框的边缘可被向上以及向左移动 10、n-resize：指示矩形框的边缘可被向上移动 11、s-resize：指示矩形框发热边缘可被向下移动 12、se-resize：指示矩形框的边缘可被向下以及向右移动 13、sw-resize：指示矩形框的边缘可被向下以及向左移动 14、w-resize：指示矩形框的边缘可被向左移动 15、text：光标指示文本 16、wait：指示程序正忙 17、help：指示可用的帮助 18、not-allowed：禁止 19、no-drop：无法释放示例：
<style> a:hover{ /* cursor: pointer; */ /* 图片没问题时显示图片，图片有问题时显示第二个值 */ cursor: url("images/pointer02.png"),no-drop; } </style> <a href="#">点我升天！</a>1.4.4列表样式
列表样式主要是列表项样式：list-style-type，list-style-image
list-style-type属性用于控制列表中列表项标志的样式。该属性的取值需要依据列表的类型
list-style-image属性可以用来替换列表项的标记
示例：
<style> ol{ list-style-type:circle; } ul{ list-style-type: upper-alpha; } </style> <ol> <li>霸王别姬</li> <li>大话西游</li> <li>功夫</li> </ol> <ul> <li>西游记</li> <li>红楼梦</li> <li>水浒传</li> <li>三国演义</li> </ul>列表项图像
通过为list-style-image属性赋值一个图像的URL来显示图像标志。但是在设置图像标志时，建议始终规定一个 list-style-type属性以定义常规标志。这样做的好处在于，如果图像不存在或者因为某种原因导致图像不可用时，可以替换显示常规标志
ol{ list-style-image: url("images/list01.png"); }注意：列表项图像设置的图像需要小尺寸的才便于显示
1.4.5表格特有属性
控制表格的列宽：table-layout：auto(自动，默认值) | fixed(固定列宽，平均分)
控制单元格间距：border-spacing：1px
合并相邻的单元格的边框：broder-collapse：separate(默认值，不合并) | collapse（合并）
注意：使用broder-collapse合并单元格后，broder-spacing控制单元格间距无效
隐藏没有内容的单元格：empty-cells：show | hide
注意：使用合并相邻单元格边框后无效（生效了，只是没有效果被其他表格顶下去）
1.5overflow属性
overflow属性规定当内容溢出元素框时如何处理，可能的取值为：
visible：内容不会被修剪，会呈现在元素框之外，为默认值 hidden：内容会被修剪，并且其余内容是不可见的 scroll：内容会被修剪，但是始终会显示滚动条以便查看其余的内容 auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 其他属性： overflow-x：hidden | scroll | auto overflow-y：hidden | scroll | auto示例：
<div> 别指望减肥了，八戒走了十万八千里，也没见瘦下来，而且，他还吃素 </div> <style> div{ width: 200px; height: 100px; background: #ff4433; white-space: nowrap; /* 不换行 */ /* word-wrap: break-word; 允许超出元素内容部分自动换行 */ overflow: hidden; /* auto | scroll | 默认visible |*/ overflow-x: hidden; /* auto | scroll | 默认visible |*/ overflow-y: hidden; /* auto | scroll | 默认visible |*/ } </style>1.6display属性
CSS中的display属性用于定义元素的布局方式和外观，让块级元素和行内元素相互转换。常见的取值有block、inline、inline-block、none等
none：让生成的元素根本没有框，该框及其内容不再显示，不占用文档中的空间 block块级：让行内元素（比如<a>元素）表现得像块级元素一样，设置width、height有效，独占一行 inline行内：让块级元素（比如<p>元素）表现得像内联或行内元素一样，设置width、height无效，一行可显示多个 inline-block行内块：设置width、height有效，一行可显示多个1.7盒子模型
1.7.1什么是盒子模型
盒子模型是指CSS中的一个重要概念，用来描述一个元素在页面中占据的空间和位置
在CSS中认为所有的HTML标签都是一个盒子，这些盒子有以下内容：边框border、内容content、内边距padding（内容与边框的距离）、外边距margin（盒子与盒子之间的距离）
1.7.2盒子模型详解
每个盒子都有：边界、边框、填充、内容四个属性。并且每个盒子都有尺寸。每个属性都包括四个部分：上、右、下、左这四部分，可同时设置，也可分别设置
盒子有尺寸，用CSS写法为宽度（width）和高度（height） 盒子有边框，用CSS写法为上下左右边框（border） 盒子有内边距，CSS写法为上下左右内边距（padding） 盒子有外边距，CSS写法为上下左右外边距（margin）在HTML中，所有的容器标签都可以认为是一个盒子，但是行内标签与块标签有着明显的差别。 行内标签无法设置尺寸（宽度和高度）等等，块级标签才是一个完整的盒子，具有四大属性以上四大属性
1.7.3高度和宽度
行内标签无法设置宽度（width）和高度（height），块级元素可以，一般高度不需要设置，由内容撑高
1.7.4.边框border
边框、内边距和外边距是CSS中盒子模型的三个基本部分，它们都可以通过CSS样式来设置
边框：元素周围的边框线，可以设置边框线的样式、颜色和宽度等属性。通常用border属性来设置边框
.box { border: 1px solid #000; }上面的代码中，表示.box元素设置了一条1像素宽的黑色实线边框
注意：也可以设置某一边的边框样式
border-bottom-left-radius/border-top-right-radius - 设置某一边圆角 border-top/bottom/left/right-width - 设置或检索对象顶/底/左/右边样式1.7.5 内边距padding
内边距：元素内容区域和边框之间的距离，可以设置内边距的大小。通常用padding属性来设置内边距
.box { padding: 20px; }上面的代码中，表示.box元素的内容区域和边框之间的距离为20像素
内边距属性的特殊说明：
1. 设置内联块级元素和块级元素的内边距 2. 行内元素可以设置左、右两边的内边距。若要设置上、下两边的内边距，必须先使该元素变为块级或内联块级元素 3. 改变padding的值，会改变了整个盒子的大小，因为内容宽高是固定了，添加padding会撑大盒子的尺寸 4. 但改变margin的值，则不改变整个盒子的大小，因为margin是盒子与盒子之间的距离，与盒子本身大小无关1.7.6. 外边距margin
外边距：元素和其他元素之间的距离。可以设置外边距的大小和负值。通常用margin属性来设置外边距
.box { margin: 10px; }上面的代码中，表示.box元素和其他元素之间的距离为10像素
外边距属性的特殊说明：
1. 内联块级元素和块级元素的可以设置外边距 2. 内联元素可以设置左、右两边的外边距。若要设置上、下两边的外边距，必须先使该元素变为块级元素或内联块级元素 3. 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。 4. 如果提供两个，第一个用于上、下，第二个用于左、右。 5. 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下1.7.7盒子阴影
box-shadow属性用于设置盒子的阴影用于设置盒子阴影
<div style="width: 200px;height: 200px;border: 1px solid black;box-shadow: 1px 1px 10px red;"> </div> <div style="width: 200px;height: 200px;border: 1px solid black;box-shadow: 1px 1px 10px 10px red;"> </div>none： 无阴影 第1个长度值：用来设置对象的阴影水平偏移值。可以为负值 第2个长度值：用来设置对象的阴影垂直偏移值。可以为负值 第3个值：用来设置对象的阴影模糊值。不允许负值 第4个值：设置对象的阴影的大小，不设置阴影大小，第四个值就是颜色 第5个值：设置对象的阴影的颜色 过度动画效果：transition: all 2s;1.8.Flex弹性布局
Flex是Flexible Box的缩写，意为”弹性布局”，用来替代float浮动布局
任何一个容器都可以指定为Flex布局。
/* 启用弹性布局 */ .box{ display: flex; }行内元素也可以使用Flex布局。以下写法代表将display：inline和display:flex结合起来
/* 启用弹性布局，并变为行内元素 */ .box{ display: inline-flex; }注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
1.8.1基本概念
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
1.8.2容器的属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
1.8.2.1flex-direction属性
flex-direction属性决定主轴的方向（即项目的排列方向）。
.box { flex-direction: row | row-reverse | column | column-reverse; }它可能有4个值:
- row（默认值）：主轴为水平方向，起点在左端。
- row-reverse：主轴为水平方向，起点在右端。
- column：主轴为垂直方向，起点在上沿。
- column-reverse：主轴为垂直方向，起点在下沿。
1.8.2.2flex-wrap属性
默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
.box{ flex-wrap: nowrap | wrap | wrap-reverse; }它可能取三个值。
（1）nowrap（默认）：不换行。
（2）wrap：换行，第一行在上方。
（3）wrap-reverse：换行，第一行在下方。
1.8.2.3flex-flow（了解）
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
.box { flex-flow: <flex-direction> <flex-wrap>; }1.8.2.4justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。也就是水平对齐
.box { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; }
它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
- flex-start（默认值）：左对齐
- flex-end：右对齐
- center： 居中
- space-between：两端对齐，项目之间的间隔都相等。
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
- space-evenly：平均对齐，在CSS3后续才加入的，是平均对齐
1.8.2.5align-items属性
align-items属性定义项目在交叉轴上如何对齐。也就是当前行的垂直对齐，分行对齐。
.box { align-items: flex-start | flex-end | center | baseline | stretch; }
它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。重点
- baseline: 项目的第一行文字的基线对齐。
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
1.8.2.6align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。也就是垂直对齐，不分行对齐。
.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }
该属性可能取6个值。
- flex-start：与交叉轴的起点对齐。
- flex-end：与交叉轴的终点对齐。
- center：与交叉轴的中点对齐。
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch（默认值）：轴线占满整个交叉轴。
1.8.2.7flex-grow属性（重点）
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
.item { flex-grow: <number>; /* default 0 */ }
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/113792.html
