CSS基础知识
概述
定义
CSS
指的是层叠样式表(Cascading Style Sheets
),是一种用来描述HTML文档样式的语言(给页面中的html标签设置样式)。
语法
CSS
的语法规则是由选择器和声明块进行组成的。选择器 { 属性名: 属性值; } 如p { color: green;}
选择器指向需要设置样式的HTML元素,声明块表示包含一条或多条声明(声明块用花括号包裹)。每条声明都包含一个CSS
属性和一个值,以冒号分隔。多条CSS
声明之间用分号分隔。
p {
color: red;
text-align: center;
}
上面代码中,表示所有的p
元素都将居中对齐,且文本内容为红色。
引入方式
共有三种使用CSS
的方法,分别如下:
- 行内样式:作用于单个标签;直接给
html
标签添加style
属性 - 内嵌样式:作用于单个页面;写在
style
标签内,style
标签在head
标签中 - 外联样式:单独的
.css
文件,通过link
标签进行引入
<!-- 外联样式 -->
<!-- h1 {color: red} -->
<link rel="stylesheet" href="default.css">
<!-- 内嵌样式 -->
<style>
h1 {
color: blue;
}
</style>
<!-- 行内样式 -->
<h1 style="color: skyblue">测试CSS三种使用方法</h1>
选择器
作用
选中页面中对应的标签,方便后续更改样式(先找后改)
分类
标签选择器
标签名 { 属性名: 属性值; }
通过标签名找到页面中所有这一类的标签,设置样式。
p {
color: red;
}
不论标签嵌套层级多深,都会将一类标签添加样式
类选择器
类名 { 属性名: 属性值; }
找到页面中所有带有该类名标签,设置样式
/* 给所有class类名为center的标签添加居中样式 */
.center {
text-align: center;
}
一个标签可以有多个类名,类名之间使用空格隔开;css结构可以同时选择多个类使用,隔开(多对多)
id选择器
#id名 { 属性名: 属性值; }
找到页面中带有id名标签,设置样式
#main {
color: blue;
}
一个页面中只能有一个(一对一)
通配符选择器
* { 属性名: 属性值; }
找到页面中所有的标签,设置样式
* {
margin: 0;
padding: 0;
}
大型项目中,一般不使用,可能会比较消耗浏览器的性能
https://www.w3school.com.cn/css/css_selectors.asp
字体
设置字体的样式,用font
表示
字体类型
名称 | 作用 |
---|---|
font-size | 字体大小 |
font-weight | 字体粗细 |
关键字:normal正常;bold加粗 | |
纯数字:400正常;700加粗 | |
font-style | 字体样式(normal 正常 italic 倾斜) |
font-family | 字体类型 |
<head>
<title>字体和文本样式</title>
<style>
.one {
font-size: 20px;
font-weight: bold;
font-style: italic;
font-family: 'Courier New', Courier, monospace;
/* 样式生效 */
font-weight: normal;
}
.two {
font: italic bold 20px 'Courier New', Courier, monospace;
}
</style>
</head>
<body>
<div class="one">这是第1个句子</div>
<div class="two">这是第2个句子</div>
</body>
存在的问题
- 层叠问题:当一个选择器内设置了多个同名属性的样式,最底下的样式生效
- 连写问题
- 连写的顺序:
font: style weight size family
(swsf 稍微舒服) - 可省略的选项:前两个可以省略
[style weight] size family
- 连写的顺序:
背景属性
设置背景样式,用background
表示
名称 | 作用 |
---|---|
background-color | 背景颜色(颜色常见的几种表示) |
background-image | 背景图片:url(图片路径) |
background-repeat | 背景平铺 |
repeat 平铺 | |
no-repeat 不平铺 | |
repeat-x 沿着水平方向平铺 | |
repeat-y 沿着垂直方向平铺 | |
backgroup-position | 背景位置 |
方位名词(最多只能表示9个位置 九宫格) 水平方向: left center right 垂直方向: left center right | |
数字+px(坐标) 在一个块级元素中,元素的左上角为原点(0,0),水平向右是x轴,垂直向下是y轴。由此组成的一个二维坐标系进行设置。 |
<head>
<style>
.one {
width: 500px;
height: 500px;
background-color: red;
background-image: url(../../static/img/small.jpg);
background-repeat: no-repeat;
/* background-repeat: repeat-y; */
/* background-position: left center; */
background-position: 20px 0;
}
</style>
</head>
<body>
<div class="one"></div>
</body>
连写顺序:color image repeat position
元素显示模式
三种显示模式
元素模式 | 特点 | 代表标签 |
---|---|---|
块状元素 | 独占一行;宽度默认占满一行,高度默认由内容撑开;可以设置宽高 | div,p,h系列标签 |
行内元素 | 一行可以显示多个;宽度和高度默认都是由内容撑开;不可以设置宽高 | a,span |
行内块元素 | 一行可以显示多个;可以设置宽高 | input |
三种模式转换
使用 display
进行转换
- 转换块状元素
display: block;
- 转换行内元素
display: inline;
- 转换行内块元素
display: inline-block;
嵌套规范
a
标签不能嵌套a
标签p
标签不能嵌套div
等块级元素
三大特性
继承性
子承父业:子元素默认会继承父元素样式的效果
层叠性
给同一个标签设置相同属性时,样式会覆盖,只有最底下的属性会生效;给同一个标签设置不同属性时,样式会叠加,属性会共同作用于标签。
只有当优先级相同时,才会出现层叠性
优先级
权重大小排序:!important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器 > 继承
!important
不能提升继承的优先级,只要是继承,优先级则最低
权重计算(0,0,0,0)
0,0,0,0
从左往右表示:
- 第1位代表行内样式的个数;
- 第2位代表id选择器的个数;
- 第3位代表类选择器的个数;
- 第4位代表标签选择器的个数。
当权重相同时,则比较层叠性。
盒子模型
一个盒子模型的组成结构如下:
- 内容
content
:width和height默认设置的是内容部分的宽高 - 边框
border
:围绕内边距和内容的边框。 - 内边距
padding
:清楚内容周围的区域,内边距是透明的。 - 外边距
margin
:清楚边界外的区域,外边距是透明的。
边框
指定元素的样式、宽度和颜色,用border
表示
名称 | 作用 |
---|---|
border-width | 边框粗细 |
border-style | 边框样式 |
solid 实线 | |
dashed 虚线 | |
dotted 点线 | |
border-color | 边框颜色 |
特殊现象
margin
的合并现象:垂直布局的盒子,此时上下的margin
会合并。取两者间最大的margin
值。
margin
的塌陷现象:互相嵌套的块级元素,父子元素的margin-top
会被合并共同作用在父元素上面。解决方法如下:
- 添加
padding-top
值; - 设置
overflow: hidden
; - 设置行内块样式
display: inline-block
; - 设置浮动
float: left
。
margin
和padding
布局(注意是布局,不是生效)对行内元素水平方向生效,垂直方向则无效!
定位属性
设置元素位置,用position
表示
属性名 | 特点 |
---|---|
静态定位 static | 标准流中的元素默认就是静态定位;不能配合方位实现移动 |
相对定位 relative | 需要配合方位实现移动;相对于自己原来的位置进行移动;占位置、没有脱标 |
绝对定位 absolute | 需要配合方位实现移动;位置分情况;不占位置、已经脱标(脱标之后的元素,宽度默认由内容撑开) |
固定定位 fixed | 需要配合方位实现移动;永远相对于浏览器进行移动; 不占位置、已经脱标(脱标之后的元素,宽度默认由内容撑开) |
应用场景
- 让子元素相对于父元素移动:子绝父相
- 水平垂直居中
- 子绝父相
- 同时给子元素设置
left: 50%;top: 50%; transform: translate(-50%, -50%)
装饰属性
垂直对齐方式
设置元素垂直对齐方式,使用vertical-align
表示
属性值 | 特点 |
---|---|
baseline | 基线对齐 |
top | 顶部对齐 |
middle | 中部对齐 |
bottom | 底部对齐 |
光标类型
设置鼠标光标类型,使用cursor
表示
属性值 | 特点 |
---|---|
default | 默认箭头 |
pointer | 小手;提示用户可以点击 |
text | 工字型;提示用于选择文本 |
move | 十字光标;提示用户可以拖拽 |
边框圆角
设置边框圆角,使用border-radius
从左上开始,顺时针进行设置值。
overflow
设置内容超出部分的显示效果
属性值 | 特点 |
---|---|
visible | 超出部分可见 |
hiddle | 超出部分隐藏 |
scroll | 显示滚动条 |
auto | 根据内容的多少自动显示或隐藏滚动条 |
隐藏元素的属性:
overflow: hiddle
隐藏元素,元素占据位置display: none
隐藏元素,元素不占位置
颜色
指定颜色是通过使用预定义的颜色名称,或RGB、RGBA、HEX、HSL、HSLA的值。颜色可作用于背景、文本、边框等。
-
RGB颜色
RGB
颜色值指的是rgb(red, green, blue)
,每个参数定义了0到255之间的颜色强度。RGBA
颜色值指的是rgba(red, green, blue, alpha)
,alpha
表示透明度,是一个介于0.0(完全透明)和1.0(完全不透明)之间的数字。 -
HEX颜色
HEX
颜色指的是使用十六进制指定颜色。rrggbb
其中rr
(红色)、gg
(绿色)和bb
(蓝色)是介于00和ff之间的十六进制值。 -
HSL颜色
HSL
涉及到颜色的色相、饱和度和明度……
共有 0 条评论