简介及导入方式
Cascading Style Sheets：层叠样式表，用于定义网页样式和布局的样式表语言。
通过CSS，你可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景等样式，从而实现更精确的页面设计。
CSS通常由选择器、属性和属性值组成，多个规则可以组合在一起，以便同时应用多个样式
选择器{
属性1:属性值1;
属性2:属性2;
}- 1.选择器的声明中可以写无数条属性
- 2.声明的每一行属性，都需要以英文分号结尾：”;”
- 3.声明中的所有属性和值都是以键值对这种形式出现的
CSS三种导入方式：
- 内联样式（Inline Styles）：直接放在html标签中，style属性可定义样式
- 内部样式表 Internal Stylesheet）：html的head标签内部（外部也行 #？ ）定义
- 外部样式表 (External Stylesheet）：CSS独立文件，通过head标签链接进入html，允许多页面重复使用CSS样式
三种导入方式的优先级：内联样式>内部样式表>外部样式表，高优先级样式会覆盖低优先级样式
<head>
***
<!--内部样式表-->
<style>
p{color: blue;font-size: 30px;}
h2{color: red;font-size: 60px;}
</style>
</head>
<!--内联样式-->
<h3 style="color: green;">三级标题内联样式
</h3>导入CSS外部样式表需要在html文件的head标签内部配置link标签
<link rel="stylesheet" href="./css/style.css">[!tip] herf属性值前加”.”为相对路径 #？
选择器
选择器是CSS中的关键部分，它允许你针对特定元素或一组元素定义样式
- 元素选择器：标签选择器
- 类选择器：根据类属性（class）筛选
- ID选择器：根据ID属性（ID）筛选
- 通用选择器：对所有元素有效
- 子元素选择器：选择元素内部中的某一种元素，用空格隔开
- 后代选择器（包含选择器）
- 并集选择器（兄弟选择器）：必须要用英文逗号（，）隔开
- 伪类选择器
<style>
/* 类与ID选择器*/
.highlight{background-color:red;}
#header {color: rgb(32, 39, 173);}
/* 子元素选择器（style内部) */
.chassname div{color:red}
/* 并集选择器 */
h3,div,p,span{color:red;}
</style>样式（属性）
字体样式
包含：
- 类型font-family：可以指定多种字体。使用多个字体时（优先级从左到右，依次检测是否安装该字体，一旦有则使用），将按从左到右的顺序排列，并且以英文逗号（，）隔开，默认为宋体，部分字体不需要加(” “)
- 大小font-size
- 粗细font-weight：属性值有
- 较细lighter
- 较粗bold
- 很粗bolder
- 数字（100-900）
- 风格font-style：属性值有
- 斜体 italic / oblique，区别：有些字体有斜体italic属性，但有些字体却没有italic属性。oblique是让没有italic属性的字体也能够有斜体效果
- 颜色color：属性值有
- 关键词：如red、blue、green等
- rgb：#FFFFFF
<style>
/* 字体*/
#id {font-family:"微软雅黑";}
</style>[!tip] CSS解析按顺序执行，后执行会覆盖前效果
文本样式
包含：
- 首行缩进text-inden：属性值为
- 水平对齐text-align ^80effc
- left
- center
- right
- 文本修饰text-decoration
- 上划线underline
- 中划线line-through
- 顶划线overline
- 清除修饰none：部分超链接自带下划线，可用此除去
- 大小写text-transform
- 大写uppercase
- 小写lowercase
- 首字母大写capitalize
- 行高line-height
- 字母间距、词间距letter-spacing、word-spacing
[!tip] 中文段落首行一般需要缩进两个字符。如果想要实现这个效果，text-indent值应该是font-size值的两倍
[!tip] 在前端开发中，对于外观控制一般用CSS来实现，而不是使用标签来实现，这更加符合结构与样式分离的原则，提高可读性和可维护性。
边框样式
整体样式
几乎可以对所有的元素定义边框，例如对div、img、table、span，内容一般为边框宽度、边框外观（实线、虚线等）、边框颜色
因此：想要为一个元素定义边框样式，必须要同时设置border-width、border-style、border color这三个属性才会有效果。
- border-width：取值是一个像素值
- border-style ^e8689f
- 无样式none
- 虚线dashed
- 实线solid
- border-color：关键词RGB
<style>
#id {boder-width：10px}
#id {boder-style：solid}
#id {boder-color：red}
/*简写形式如下*/
#id {boder：10px solid red;}
</style>局部样式
对边框的一边单独修改
- 上边框border-top
- 下边框border-bottom
- 左边框border-left
- 右边框border-right
格式同理
列表样式
列表项符号(list-style-type)
对于有序列表和无序列表的列表项符号，都是使用type属性来定义的，但这是在html内部定义的
在CSS中，不管是有序列表还是无序列表，我们都是使用list-style-type属性来定义列表项符号，其属性值有
- 有序列表ol
- 阿拉伯数字decimal
- 小写罗马数字lower-roman
- 大写罗马数字upper-roman
- 小写英文字母lower-alpha
- 大写英文字母upper-alpha
- 无序列表ul
- 实心圆disc
- 空心圆circle
- 实行方形square
- 去除列表项符号none
列表项图片(list-style-image)
把列表项符号改为一张图片
<style>
ul {list-style-image: url(img/leaf.png);}
</style>一般情况下我们都不会用list-style-image属性来实现，而是使用更为高级的字体图标（iconfont）技术来实现
表格样式
- 标题位置（caption-side）
- top：在顶部，默认值
- bottom
- 表格边框合并（border-collapse）
- 分开有间隙separate
- 合并无间隙collapse
- 表格边框间距（border-spacing）：取值是一个像素值
图片样式
图片大小
width & height
[!tip] 不建议使用一张大图片，然后再借助width和height来改变大小。因为一张大图片体积更大，会使页面加载速度变慢。这是性能优化方面的考虑
图片边框
格式与boder[[#^e8689f]]属性相同
图片对齐
- 水平对齐text-align(非img-align)：与文本对齐格式相同[[#^80effc]]
- 垂直对齐vertical-align
- 顶部top
- 中部middle
- 基线baseline
- 底部bottom
- 文字环绕float
- left：图片左环绕
- right：同理
vertical-align属性定义周围的行内元素或文本相对于该元素的垂直方式(对齐需要有参考)
[!tip] 图片水平对齐的选择器不是在img内，而是在其父级内定义，垂直对齐是在img内
<style>
#id {vertical-align:middle;}
</style>背景样式
背景样式包括两个方面：背景颜色和背景图片。在Web1.0时代，都是使用background或者bgcolor这两个HTML属性（不是CSS属性）来为元素定义背景颜色或背景图片
以下使用CSS属性来实现
背景颜色（background-color）
可对div块元素使用
color属性用于定义“文本颜色”，而background-color属性用于定义“背景颜色
背景图片属性
图片地址background-image
<style>
div {
width:50px;
height:60px;
background-image:url(img/test.png);
</style>注意：背景图片跟图片是不一样的，背景图片是使用CSS来实现，而图片是使用HTML来实现。两者的使用场合也不一样，大多数情况下都是使用图片来实现，不过某些场合无法使用图片时我们再考虑背景图片形式。
图片重复background-repeat
- 水平垂直同时平铺repeat：默认值
- repeat-x
- repeat-y
- no-repeat
注意：元素的宽度和高度必须大于背景图片的宽度 - 图片位置background-position
- 像素值：需同时设置水平方向和垂直方向的值，以左上角为原点，以像素为单位，并用空格隔开
- 关键字：需用水平距离和垂直距离俩个关键字，例如：top-left，center-c
<style>
div {
width:50px;
height:60px;
background-image:url(img/test.png);
background-repeat:no-repeat;
background-position: 100px 100px;
</style>图片固定background-attachment
使用background-attachment属性来定义背景图片是随元素一起滚动还是固定不动
其属性值有：
- scroll
- fixed
超链接样式
超链接在鼠标点击不同时期的样式是不一样的
超链接伪类
使用“超链接伪类”来定义超链接在鼠标点击的不同时期的样式
- a:link：定义a元素未访问时的样式（可在a内直接配置，不需要单独配置link）
- a:visited：定义a元素访问后的样式
- a:hover：定义鼠标经过a元素时的样式（最常用）
- a:active：定义鼠标点击激活时的样式
注意：定义这四个伪类，必须按照link、visited、hover、active的顺序进行，不然浏览器可能无法正常显示这四种样式
[!tip] hover伪类可以定义任何一个元素在鼠标经过时的样式！可以做鼠标停留在图片、文本、链接等时的特殊效果
<style>
img:hover {border:2px solid red;}
</style>鼠标样式cursor
浏览器鼠标样式
属性值:
- 箭头default
- 手指pointer
- 光标textX
- 加载光圈waite
- 其他
<style>
#id {cursor:pointer}
</style>自定义鼠标样式
语法：cursor:url(图片地址), 属性值
这个“图片地址”是鼠标图片地址，其中鼠标图片后缀名一般都是.cur，”属性值”一般为default、pointer、text这三种。
盒子模型
针对块元素div与行内元素span #？
介绍
每个元素都看成一个盒子，盒子模型是由这四个主属性类别组成的：
- content（内容），其属性有：
- width
- height
- overflow：当内容过多超出width和height时，可以使用overflow属性来指定溢出处理方法
- padding（内边距）：指定内容区与各方向边框之间的距离。
- padding-top
- padding-bottom
- padding-left
- padding-right
- padding：综合了以上四个方向的简写内边距属性
- margin（外边距）：与padding同理
- border（边框）
- border-width
- border-style
- border-color
- border：综合了三类属性的简写边框属性
此外，在盒子模型中，还有：
- 宽度width
- 高度height
两大辅助性属性。
所有的元素都可以视为一个盒子。
宽和高（width和height）
- 元素的宽度（width）和高度（height）是针对内容区而言的
- 只有块元素才可以设置width和height，行内元素是无法设置width和height
- 要是没有给块元素设置width，那么块元素就会延伸到整行
- 行内元素设置的width和height无法生效，它的宽度和高度只能由内容区撑起
- display属性可将行内元素转换为块元素，也可将块元素转换为行内元素 （高级用法）#？
![[Pasted image 20240911145900.png]]
边框border
见 [[#边框样式]]
内边距
俗称补白
简写形式如下：
- padding:像素值;：四个内边距相同
- padding:像素值1 像素值2：分别为上下，左右边距
- padding:像素值1 像素值2 像素值3 像素值4
外边距
- 指的是边框到“父元素”或“兄弟元素”之间的那一部分
- padding和margin的区别在于：padding体现的是元素的“内部结构”，而margin体现的是元素之间的相互关系
- 简写形式同padding
浏览器审查元素
浏览器自带检查功能
布局
正常文档流指的就是默认情况下页面元素的布局情况。
浮动布局
参见[[#图片样式]]中的浮动float
- 环绕float
- left：图片左环绕
- right：同理
定位布局
布局定位共有四种方式：
- 固定定位（fixed）
- 相对定位（relative）
- 绝对定位（absolute）
- 静态定位（static）
都是通过position属性来实现的