简介及导入方式
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属性来实现的