CSS：层叠样式表。主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS语法：CSS实例由选择器，以及一条或多条声明（属性）两部分组成。每个声明（属性）可以有一个或多个值。属性和值被冒号分开。CSS声明以分号;结束，声明以大括号{}括起来。
p {
color: red;
}CSS注释：CSS中仅支持使用/* */进行注释
/* 我是注释内容 */
CSS引入：引入CSS样式表的方法有三种。外部样式表、内部样式表、内联样式。
<head> <!-- 引入外部样式文件（推荐）:<link>标签在写在<head>标签内。外部样式表文件不能包含任何的HTML标签。样式表应该以.css扩展名进行保存。 href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。 type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。 rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。 --> <link type="text/css" rel="styleSheet" href="./study.css" /> </head> <body> <!-- 行内样式：语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。 --> <div style="font-style:italic; color:blue;"> Hello there</div> <div class="a"> Hello A</div> <!-- 内部样式：语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。 --> <style> .a { color: red; } </style> </body>
CSS选择器
CSS选择器（一）：用于选取页面上的某个标签，在CSS中称为选择器。
通配符选择器：通配符选择器是以*选取所有标签。
标签选择器：直接使用标签名选取该标签名的所有标签。
id选择器：id选择器可以选取到标有该id属性的HTML标签。id选择器以"#"来定义。一个元素只能有一个ID
类选择器：类选择器可以选取到标有该class属性的HTML标签。类选择器以"."来定义。class选择器有别于id选择器，class属性可以在多个标签中使用。也支持一个标签中有多个class属性值（用空格隔开）。
<!-- 类可以在同个标签上有多个值 --> <div class="a b c"> Hello A</div> <!-- 类可以在多个标签上使用 --> <div class="a b"> Hello B</div>
/* 通配符选择器 */
* {
color: gray;
}
/* id选择器 */
#china {
color: red;
}
/* 类选择器 */
.america {
color: green;
}
/* 标签选择器 */
li {
color: yellow;
}CSS选择器（二）：
后台选择器：两个元素用空格隔开，并且选中的是元素1所有层级的后代
子代选择器：只能选择子元素
并集选择器：并集选择器中间用逗号隔开，支持任意其他选择器，多个元素要求竖着写
伪类选择器：伪类选择器表示的是同一个标签，根据其不同的种状态，有不同的样式。例如<a>标签有点击前和点击后两种状态。
<body> <ol class="haha"> <li>1</li> <li> <p>我是儿子</p> </li> <li>3</li> <p>我是孙子</p> </ol> <div>熊大</div> <p>熊二</p> <span>光头强</span> <a href="http://www.baidu.com">百度一下</a> <input> </body> <style> /* 后台选择器：两个元素用空格隔开，并且选中的是元素1所有层级的后代 */ .haha p { color: green; } /* 子代选择器：只能选择子元素 */ .haha>p { color: red; } /* 并集选择器：并集选择器中间用逗号隔开，支持任意其他选择器，尽量竖着写 */ div, p, .haha>a { color: pink; } /* 伪类选择器：伪类选择器表示的是同一个标签，根据其不同的种状态，有不同的样式。例如<a>标签有点击前和点击后两种状态。注意：一定先写静态伪类，后写动态伪类。 1.静态伪类：只能用于超链接的样式。 :link。超链接点击之前（主要是能区分是不是带有href的<a>标签） :visited。链接被访问过之后 2.动态伪类：针对所有标签都适用的样式。 :hover。悬停，鼠标放到标签上的时候 :active。激活，鼠标点击标签，但是不松手时。 :focus。是某个标签获得焦点时的样式（一般用于输入框获得焦点） */ /* 让超链接点击之前 */ a:link { color: red; } /* 让超链接点击之后 */ a:visited { color: orange; } /* 鼠标悬停，放到标签上的时候 */ a:hover { color: green; } /* 鼠标点击链接，但是不松手的时候（激活） */ a:active { color: black; } /* 输入框获取焦点时 */ input:focus { background-color: palegoldenrod; }
CSS常用属性
CSS度量单位：
| 单位名称 | 说明 | 例子 |
|---|---|---|
| Piexels(像素) | 一个像素的大小根据用户显示器尺寸和像素密度不同而设定 | .classname { margin:5px; } |
| Points(磅) | 一英镑等于一英寸的1/72，来源于印刷背景设计。 | .classname { margin:5pt; } |
| Inches(英寸) | 1英寸相当于72英镑 | .classname { margin:5in; } |
| Centimeters(厘米) | 1厘米比28英镑稍大一些 | .classname { margin:5cm; } |
| Millimeters(毫米) | 1毫米等于1/10厘米(约为3磅) | .classname { margin:5mm; } |
| Picas | Picas是另一种印刷度量单位，等于12磅 | .classname { margin:5pc; } |
| Ems | 一个em等于当前字体的大小，用于描述相对尺寸 | .classname { margin:5em; } |
| Exs | 也与当前字体大小有关，等于小写字母x的高度，不常用 | .classname { margin:5ex; } |
| Percent(百分比) | 这个单位与em相关，它是相对单位 | .classname { margin:125%; } |
字体相关属性：可以用CSS设置的四种主要的字体属性：family(字体族)、style(样式)、size(大小)和weight(粗细)。字体一般直接设置在body上用于控制整个页面。
font-family：设置文本的字体
font-size：设置文本的字体大小
font-style：设置文本的字体样式（正常normal、斜体italic、倾斜oblique）
font-weight：设置文本的字体粗细
<style>
div {
height: 50px;
width: 50px;
}
#cqz {
/* 设置文本的字体系列：楷体、宋体等（不推荐汉字，推荐使用英文）。可以设置多个，当前一个浏览器不支持的时候，用第二个，以此类推 */
font-family: "楷体";
/* 设置文本的字体大小：可以使用px、em、百分比。不同浏览器字体默认大小不同，所以必须设定文字默认值。h1等标题标签需要单独指定字体大小。 */
font-size: 16px;
/* 设置文本为斜体：默认normal是正常字体 */
font-style: italic;
/* 设置文本粗细：主要是normal和bold这两个值。blod为加粗。或者可以使用数字（注意不要有单位） */
font-weight: 700;
/* 复合写法：前两个可以省略，后两个不能省略。 */
font: font-style font-weight font-size font-family;
}
</style>
<body>
<div id="cqz">曹</div>
</body>文本相关属性：
color：文本颜色。
text-align：设置文本的水平对齐方式。左对齐(left)、右对齐(right）、居中(center)和两端对齐(justify)。
line-height：设置文本垂直的对齐方式（行高）【实现原理：行高由文字高度 + 上下空隙组成，当父类有高度，则会自动填满上下空隙，保证文字居中。】
word-spacing：设置文本字间距
letter-spacing：设置单词和字符间距
text-transform：设置文本转换。无、首写字母大写、大写和小写。
text-decoration：设置文本装饰。下划线、删除线、上划线、闪烁等。
text-indent：设置首行文本缩进距离。
#cqz {
/* 设置文本颜色（具体设置方式见下文CSS中颜色定义） */
color: #00f0ff;
/* 设置文本水平对齐方式：左对齐(left)、右对齐(right）、居中(center)和两端对齐(justify)。 */
text-align: center;
/* 设置文本垂直对齐方式（设置行高，当行高与父容器的高度相同时且文字仅有一行，则文本垂直居中） */
line-height: 100px;
/* 设置文本装饰：下划线（underline）、删除线（line-through）、上划线（overline）、闪烁（blink）等。注意：<a>标签默认值为underline，想要去除<a>标签的下划线，就将text-decoration设置为none */
text-decoration: line-through;
/* 设置文本缩进：一般设置为em，代表当前文字大小的距离，是一个相对单位 */
text-indent: 2em;
}
a {
/* 去除<a>标签的默认下划线 */
text-decoration: none;
}CSS中颜色定义：W3C标准化组织定义的标准的16中颜色的名称分别是：aqua(水蓝)、black(黑)、blue(蓝)、fuchsia(紫红)、gray(灰)、green(绿)、lime(绿黄)、maroon(酱紫)、navy(深蓝)、olive(橄榄绿)、ourple(紫)、red(红)、silver(银)、teal(青)、white(白)、和yellow(黄)。还可以使用十六进制RGB：#ff0000、#00ff00、#0000ff等。还可以使用rgb函数【rgb(0,255,255)】
#cqz {
/* RGB函数 */
color: rgb(0, 255, 255);
/* 十六进制RGB */
color: #fff000;
/* W3C标准色 */
color: red;
}背景属性：
background-color：设置背景颜色
<360>background-image：设置背景图片
background-repeat：设置背景图片重复/平铺方式
background-position：设置背景图片定位
background-attachment：设置背景图片是否固定或者随着页面的其余部分滚动
background-size：设置背景图片大小【CSS3以前，背景图像大小由图像的实际大小决定】
background：复合写法。任意属性都可以省略。
<body>
<div class="cqz"></div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
.cqz {
margin-top: 50px;
margin-left: 50px;
height: 1000px;
width: 1000px;
border: 1px solid red;
/* 设置背景颜色 */
background-color: rgb(0, 0, 0);
/* 设置背景图片：默认重复铺满盒子 */
background-image: url("../images/123.webp");
/* 设置背景图片重复平铺方式：
1.repeat 垂直方向和水平方向重复。【默认】
2.repeat-x 水平方向重复。
3.repeat-y 垂直方向重复。
4.no-repeat 背景图像将仅显示一次（不重复）。
*/
background-repeat: no-repeat;
/* 设置背景图片定位：一般建议小图标和超大图片使用背景进行设置而不是<img>
1.需要有两个值。
2.如果仅规定了一个关键词，那么第二个值将是center。
3.方位名词： top left center right（方位名词不区分设置顺序）
4.像素/百分比： 设置像素值时，第一个值是x轴，第二个值是y轴。
*/
/* background-position: center top; */
background-position: 50% 100%;
/* 设置背景图片大小：如果设置了图片大小，图片会被自动拉伸或压缩到设置的大小。 */
background-size: 1000px 1000px;
/* 设置背景图片是否固定或者随着页面的其余部分滚动
1.scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
2.fixed 当页面的其余部分滚动时，背景图像不会移动。
*/
background-attachment: fixed;
/* 复合写法：支持省略任意属性 */
/* background: #00FF00 url(bgimage.gif) no-repeat fixed top; */
}
</style>元素显示模式
元素显示模式：在CSS中，根据元素显示模式的不同元素标签被分为了两类。行内元素（inline-level）、块级元素（block-level）。
行内元素：行内元素就是不会独占一行的元素，行内元素不能设置宽度和高度。它的宽度和高度会随着文本的改变而该改变。内部不能填写块级元素。例如：<span> <buis> <strong> <em> <ins> <del>等；
块级元素：块级元素就是会独占一行的元素，块级元素可以设置宽度和高度，如果没有设置宽度和高度，默认父元素一样宽，高度则为0。例如：<p> <div> <h> <ul> <ol> <dl> <li> <dt> <dd>等。
行内块级元素：由于我们有的时候不仅要设置元素的宽度和高度，同时也希望元素不会独占一行，这时就出现了行内块级元素（inline-block）。同一行的行内块级元素会有空白间隔。例如<img><input><td>等。
转换CSS元素的显示模式：设置元素的display属性。inline（行内）、block（块级）、inline-block（行内块级）
<body>
<span>我是行内元素，被转换成了块级元素</span>
<div>我是块级元素，被转换成了行内元素</div>
<img src="../images/1.webp"><img src="../images/1.webp">
</body>
<style>
* {
margin: 0;
padding: 0;
}
/* 将span转换为块级元素 */
span {
display: block;
background-color: red;
width: 400px;
height: 200px;
}
/* 将div转换为行内块级元素 */
div {
display: inline-block;
background-color: green;
width: 300px;
height: 300px;
}
/* 将img转换为块级元素 */
img {
display: block;
width: 200px;
}
</style>CSS三大特性
CSS三大特性：CSS的三个特性是指层叠性、继承性以及优先级。
层叠性：层叠性是在HTML中对于同一个元素可以有多个CSS样式存在，当有相同权重的样式存在时，会根据这些样式书写的先后顺序来决定，处于最后面的CSS样式将会覆盖前面的CSS样式。
继承性：子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。合理使用继承可以简化代码，降低CSS样式的复杂性。对于字体、字号、颜色、行距等文本类属性具有继承性，都可以在body中统一设置，然后影响文档中所有文本。但是，并不是所有的CSS属性都可以继承，如边框、外边距、内边距、背景、定位、元素高度等与块级元素相关的属性都不具有继承性。
优先级：在复杂CSS样式表，经常出现两个或多个不同样式规则应用在同一元素上，这时到底采用哪个样式呢？这就是典型的CSS优先级问题。计算优先级有如下规则：继承 < 元素选择器 < 类选择器/伪类选择器 < ID选择器 < 行内样式 < !important
继承样式的权重为0：在嵌套结构中，无论父元素样式权重多大，子元素继承时，应用在子元素上的权重都为0，即子元素定义的样式会覆盖所有继承来的样式。
行内样式优先：应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
就近原则：权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
!important命令：CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。
权重会叠加，但是永远不会进位。（下面讲解权重叠加问题）
<style>
div {
height: 100px;
/* 层叠性：该属性会被同权重CSS覆盖 */
width: 50px;
margin-left: 50px;
border: black 1px solid;
/* 继承性：该属性会被子标签继承 */
font-size: 20px;
/* 继承性：该属性会被子标签覆盖 */
font-family: "楷体";
}
div {
/* 层叠性：该属性会覆盖上方的同权重CSS */
width: 60px;
}
p {
font-family: "微软雅黑";
}
</style>
<body>
<div>
<p>曹老三</p>
</div>
</body>权重叠加问题：每种选择器的权重见下方表格。样式继承的权重为0，复合选择器使权重叠加，权重之间不能越界，11个类也没有id的权重大
| 选择器 | 权重 |
| 0000 | 0000 |
| 标签选择器 | 0001 |
| 类选择器与伪类选择器 | 0010 |
| ID选择器 | 0100 |
| 行内样式 | 1000 |
| !important | +∞ |
<body>
<div class="father" id="fatherid">
<div class="child1" id="child1Id">孩子1</div>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
/* 权重为0 */
background-color: pink;
}
.child1 {
/* 权重为0010 */
background-color: red;
}
.father .child1 {
/* 权重为0020 */
background-color: black;
}
#fatherid .child1 {
/* 权重为0110 */
background-color: green;
}
#child1Id {
/* 权重为0100 */
background-color: wheat;
}
#fatherid #child1Id {
/* 权重为0200 */
background-color: greenyellow;
}
.child1 {
/* 权重为+∞ */
background-color: hotpink !important;
}
</style>
发表评论 取消回复