这篇博客详细介绍了CSS的基础知识，包括CSS的概念、作用、格式、注释以及三种引入方式。此外，还深入讲解了CSS选择器的类型，如标签选择器、ID选择器、类选择器等，并探讨了常用的CSS属性，如高度/宽度、边框、背景和文本属性。通过学习，读者能够掌握CSS的基本用法和布局技巧。
CSS
1 CSS概念
1.1 什么是CSS
-CSS指的是折叠式样表（Cascading Style Sheets）
-CSS描述了如何在屏幕、纸张或其他媒体上显示HTML元素
-CSS节省了大量工作。它可以同时控制多张网页的布局
-外部样式表存储在CSS文件中
1.2 CSS的作用
CSS用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计布局。
1.3 CSS的格式
选择器{
属性：值；
属性：值；
：
：
：
属性：值；
}
1.4 CSS的注释
/*
要注释的内容
*/
1.5 CSS引入方式
1.5.1 使用< style >标签引入
页面内： < style > 出现在任意位置（习惯上：< head> < style>< /style> < /head>)
< style>
样式
< /style>
div{
width: 400px;
height: 300px;
background-color: pink;
}
1.5.2 内嵌式引用
标签内部: < p style=“样式”> < /p>
<div style="width: 300px;height: 200px;background-color: red;">
2
</div>
1.5.3 外部引用
定义一个css文件： xxx.css
css文件中写样式
引用css文件
< link rel=“stylesheet” href=“css文件的位置” />
2 CSS选择器
2.1 选择器概念
CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。
2.2 常用选择器
2.2.1 标签选择器
元素选择器根据元素名称来选择 HTML 元素。
h1{ 属性: 值; }
2.2.2 *选择器
通用选择器（*）选择页面上的所有的 HTML 元素。
*号 表示通配符：所有的
*{
}
2.2.3 id选择器
id 选择器使用 HTML 元素的 id 属性来选择特定元素。
元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！
要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。
#id值{
属性：值；
}
<link rel="stylesheet" href="../css/20211003/selector02.css">
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
#div1{
width: 300px;
height: 200px;
background-color: green;
}
#div2{
width: 300px;
height: 200px;
background-color: pink;
}
2.2.4 类(class)选择器
类选择器选择有特定 class 属性的 HTML 元素。
如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。
.类名{
}
<p class="类名">
<h1 class=“类名">
2.2.5 逗号（分组）选择器
分组选择器选取所有具有相同样式定义的 HTML 元素。
#stuId**,** .abc{
选中id为stuId和类选择器.abc的所有
}
h1, h2，p{
}
2.2.6 后代（包含）选择器
后代选择器可以选择作为某元素后代的元素。
div p{
div标签下面的所有p标签
}
<div id="outId">
<div>
内部div
<p>
内部div的p标签
</p>
</div>
<p>
outerId DIv下的p标签
</p>
</div>
<p>
p标签
</p>
#outId p { /*父子选择器*/
color:red;
font-size: 2em;
}
2.2.7 子元素选择器
**子元素选择器（Child selectors）**只能选择作为某元素子元素的元素
div>p{
div标签下面的第一代p标签
}
<div id="outId">
<div>
内部div
<p>
内部div的p标签
</p>
</div>
<p>
outerId DIv下的p标签
</p>
</div>
<p>
p标签
</p>
#outId>p { /*父子选择器*/
color:red;
font-size: 2em;
}
3 CSS常用属性
3.1 高度/宽度
3.1.1 概念
height 和 width 属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。
3.1.2 相关css属性
| 属性 | 含义 |
|---|---|
| width | 宽度 |
| height | 高度 |
3.1.3 高度/宽度可设置值
| 值 | 含义 |
|---|---|
| auto | 默认。浏览器计算高度和宽度。 |
| length | 以 px、cm 等定义高度/宽度 |
| % | 以包含块的百分比定义高度/宽度 |
| initial | 将高度/宽度设置为默认值。 |
3.2 边框
3.2.1 概念
指定元素边框的样式、宽度和颜色。
3.2.2 相关css属性
| css属性 | 含义 |
|---|---|
| border-style | 设置边框样式（线的形状) |
| border-width | 边框的宽度(px, %) |
| border-color | 边框颜色 |
| border-radius | 向元素添加圆角边框 |
| border-collapse | 设置表格边框是折叠为单一边框还是分开的。 |
| border-left- | 左边框设置(style,width,color,radius,collapse) |
| border-top- | 上边框设置(style,width,color,radius,collapse) |
| border-bottom- | 下边框设置(style,width,color,radius,collapse) |
| border-right- | 右边框设置(style,width,color,radius,collapse) |
| border- | 简写方式: 宽度 颜色 style; 例子： div： 2px red solid |
3.2.2.1 border-style 属性
| 值 | 描述 |
|---|---|
| none | 定义无边框。 |
| hidden | 与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 |
| dotted | 定义点状边框。在大多数浏览器中呈现为实线。 |
| dashed | 定义虚线。在大多数浏览器中呈现为实线。 |
| solid | 定义实线(常用)。 |
| double | 定义双线。双线的宽度等于 border-width 的值。 |
| groove | 定义 3D 凹槽边框。其效果取决于 border-color 的值。 |
| ridge | 定义 3D 垄状边框。其效果取决于 border-color 的值。 |
| inset | 定义 3D inset 边框。其效果取决于 border-color 的值。 |
| outset | 定义 3D outset 边框。其效果取决于 border-color 的值。 |
3.2.2.2 border-collapse 属性
| 值 | 描述 |
|---|---|
| separate | 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性 |
| collapse | 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 |
3.2.2.3 border-radius 属性
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
<style>
div{
width: 400px;
height: 300px;
border: 2px green solid;
background-color: green;
border-top-left-radius: 350px;
border-top-right-radius: 350px;
border-bottom-right-radius: 250px;
border-bottom-left-radius: 250px;
}
</style>
</head>
<body>
<div>
</div>
</body>
3.3 背景
3.3.1 概念
修改元素的背景
3.3.2 相关CSS属性
| 属性 | 含义 |
|---|---|
| background-color | 背景颜色  |
| background-image | 背景图片 |
| background-repeat | 背景图片重复  |
| background-attachment | 设置背景图像是与页面的其余部分一起滚动还是固定的 |
| background-position | 背景图片位置 |
| background-size | 规定背景图像的尺寸。 |
| background-origin | 规定背景图像的初始位置。 |
| background-clip | 定义背景（颜色或图像）应在元素内延伸的距离。 |
3.3.2.1 background-image 背景图像设置
background-image 属性为元素设置背景图像。
元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。
默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。
| 值 | 描述 |
|---|---|
| url(‘URL’) | 指向图像的路径。 |
background-image: url('../images/bk.jpeg');
3.3.2.2 background-position 背景图片位置
| 值 | 描述 |
|---|---|
| x% y% | 第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。 |
| xpos ypos | 第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值。 |
3.3.2.2 background-size 背景图像的尺寸
| 值 | 描述 |
|---|---|
| length | 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。 |
| percentage | 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。 |
| cover | 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 |
| contain | 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 |
3.3.2.3 background-repeat
属性设置是否及如何重复背景图像。
默认地，背景图像在水平和垂直方向上重复。
注意： 图片不够大时才自动使用此属性。
| 值 | 描述 |
|---|---|
| repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
| repeat-x | 背景图像将在水平方向重复。 |
| repeat-y | 背景图像将在垂直方向重复。< |
| no-repeat | 背景图像将仅显示一次。 |
3.3.2.4 background-attachment 设置固定的背景图像：
| 值 | 描述 |
|---|---|
| scroll | 默认值。背景图像会随着页面其余部分的滚动而移动。 |
| fixed | 当页面的其余部分滚动时，背景图像不会移动。  |
|
3.4 字体
3.4.1 概念
在 CSS 中，有五个通用字体族：
- 衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
- 无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
- 等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
- 草书字体（Cursive）- 模仿了人类的笔迹。
- 幻想字体（Fantasy）- 是装饰性/俏皮的字体。
3.4.2 相关属性
| 属性 | 含义 | 常用值 |
|---|---|---|
| font-style | 属性主要用于指定斜体文本。 | normal - 文字正常显示italic - 文本以斜体显示 oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少 |
| font-weight | 属性指定字体的粗细 | normal/italic(斜体)/oblique(倾斜) |
| font-size | 字体大小 | 设置的是字体中字符框的高度,smaller/larger/px/% |
| font-family | 规定元素的字体系列 | ‘宋体’/‘楷体’ |
3.5 文本
3.5.1 概念
设置html中元素的文本颜色、间距、阴影等属性
3.5.2 相关CSS属性
| CSS属性 | 含义 |
|---|---|
| color | 文本颜色 |
| text-align | 文本对齐方式(left,center,right) |
| text-decoration | 文本装饰方式 |
| text-transform | 文本大(uppercase)小(lowercase)写转换,第一字面大写(capitalize) |
| text-indent | 文字间距 |
| letter-spacing | 字符之间的间距 |
| word-spacing | 指定文本中单词之间的间距 |
| line-height | 指定行之间的间距 |
| text-shadow | 为文本添加阴影 |
| direction | 文本方向(rtl) |
| vertical-algin | 设置垂直对齐方式 |
3.5.2.1 text-align 文本对齐
设置文本的水平对齐方式。
文本可以左对齐或右对齐，或居中对齐。
| 属性 | 含义 |
|---|---|
| center | 居中 |
| left | 左 |
| right | 右 |
| justify | 拉伸每一行，以使每一行具有相等的宽度 |
3.5.2.2 vertical-algin 垂直对齐
<p>
李白<img src="https://bkimg.cdn.bcebos.com/pic/78310a55b319ebc4acda9dc68126cffc1f1716ca?x-bce-process=image/resize,m_lfit,
w_536,limit_1/format,f_jpg" alt="">
（701年—762年12月），字太白，号青莲居士，又号“谪仙人”，唐代伟大的浪漫主义诗人，被后人誉为“诗仙”，
与杜甫并称为“李杜”，为了与另两位诗人李商隐与杜牧即“小李杜”区别，杜甫与李白又合称“大李杜”。
北京大学教授李志敏评价：“李白之诗呼吸宇宙，出乎道；杜甫之诗德参天地，源于儒，皆至天人合一境界，故能出神入化。”
[1] 《旧唐书》记载李白为山东人 [2] ；《新唐书》记载，李白为兴圣皇帝李暠九世孙，与李唐诸王同宗。其人爽朗大方，爱饮酒作诗，喜交友 [3] 。
</p>
3.5.2.3 text-decoration 文本装饰
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线 |
| overline | 定义文本上的一条线。  |
| line-through | 定义穿过文本下的一条线。 |
3.6 边距
3.6.1 概念
边距包括外边距、内边距等
3.6.2 相关CSS属性
| css属性 | 含义 |
|---|---|
| margin- | 定义top、right、bottom、left四个方向外边距 |
| padding- | 定义top、right、bottom、left四个方向的内边距 |
3.6.3 margin 外边距
3.6.3.0 初始化
3.6.3.1 magin-left
3.6.3.2 magin-top
3.6.3.3 magin-right、margin-bottom
在有浮动(float)的时候，margin-right/margin-bottom会有效果
<style>
.left {
width: 250px;
height: 150px;
border: 3px grey solid;
float: right;
}
.right {
width: 100px;
height: 80px;
border: 2px green solid;
background-color: red;
float: right;
margin-right: 100px;
}
</style>
<div class="left"></div>
<div class="right"></div>
3.6.3 padding 内边距
4 盒子模型
4.1 盒子模型概念
所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”。
CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。
4.2 盒子模型构成
4.3 页面元素定位
元素定位由：margin，border和pading决定
红色div元素的位置(以离左侧距离为例： )
margin-left + padding-left + 红色div的border宽度
4.4 position属性
属性规定应用于元素的定位方法的类型。
4.4.1 相关CSS属性
| css属性 | 含义 |
|---|---|
| static | 元素默认情况下的定位方式为 static（静态）。静态定位的元素不受 top、bottom、left 和 right 属性的影响。 |
| relative | 的元素相对于其正常位置进行定位。 |
| fixed | 元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。 |
| absolute | 元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动 |
| sticky | 根据用户的滚动位置进行定位。粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。 |
扫一扫
517
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
