CSS学习笔记
文章目录
- CSS学习笔记
- CSS简介
- CSS语法
- CSS常用属性
- CSS常用选择器
整理自b站课程《前端实战训练：2个网站+1个APP》
CSS简介
CSS（Cascading Style Sheets）层叠样式表，⼜叫级联样式表，简称样式表 使⽤css的⽬的就是让⽹⻚具有
- 美观⼀致的⻚⾯ CSS和HTML之间的关系
- HTML⽤于构建⽹⻚的结构
- CSS⽤于构建HTML元素的样式
- HTML是⻚⾯的内容组成，CSS是⻚⾯的表现
CSS语法
1.主要组成部分：选择器+一条或者多条声明（样式）
2.css引入方式：
内联样式
<p style="font-size: 20px; color: red;">这是⼀条⾏内样式</p>
内部样式
<style>
h1{
color: red;
}
</style>
外部样式（推荐）
<link rel="stylesheet" href="style.css">
CSS常用属性
1.背景属性
| 属性 | 描述 |
|---|---|
| background-color | 设置背景颜色 |
| background-image | 设置背景图片 |
| background-repeat | 设置背景图片如何填充，必须先指定background-image |
| background-size | 设置背景图片大小，必须先指定background-image |
| background-position | 该属性设置背景图像的起始位置 |
| background | 复合属性 |
background-color属性
<!-- HTML部分 -->
<div class="box"></div>
/* CSS部分 */
.box{
width: 300px;
height: 300px;
background-color: palevioletred;
}
【注】颜色值
- 单词:red、green
- 十六进制: #000000、#ffffff
- 颜⾊通道:rgb(255,255,255)、rgba(255,255,255,0.5)
background-image属性
<!-- HTML部分 -->
<div class="box"></div>
/* CSS部分 */
.box{
width: 600px;
height: 600px;
background-image: url("images/img1.jpg");
}
background-repeat属性
| 值 | 描述 |
|---|---|
| repeat-x | 水平方向平铺 |
| repeat-y | 垂直方向平铺 |
| no-repeat | 不平铺 |
.box{
width: 600px;
height: 600px;
background-image: url("images/img1.jpg");
background-repeat: no-repeat;
}
background-size属性
| 值 | 描述 |
|---|---|
| percentage | 百分比 |
| cover | 此时会保持图像的纵横⽐并将图像缩放成将完全覆盖背景定位区域的最小大小。 |
| contain | 此时会保持图像的纵横⽐并将图像缩放成将适合背景定位区域的最大大小。 |
.box{
width: 600px;
height: 600px;
background-image: url("images/img1.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
background-position属性
| 值 | 描述 |
|---|---|
| left top | 左上角为基准 |
| left center | 左 中 |
| left bottom | 左 下 |
| right top | 右 上 |
| right center | 右 中 |
| right bottom | 右 下 |
| centertop | 中 上 |
| center center | 中 中 |
| center bottom | 中 下 |
| x% x% | 百分比 |
.box{
width: 600px;
height: 600px;
background-image: url("images/img1.jpg");
background-repeat: no-repeat;
background-position: center;
}
background复合属性
background-image、background-repeat、background-position 其中background-size单独书写
2.字体属性
| 属性 | 描述 |
|---|---|
| color | 规定文本的颜色 |
| font-size | 设置文本的大小 |
| font-weight | 设置文本的粗细。可以数值定义100~900 或者bold定义粗体 |
| font-family | 指定一个元素的字体 |
3.文本属性
| 属性 | 描述 |
|---|---|
| text-align | 指定元素文本的水平对齐方式 left 左对齐； right 右对齐； center 居中 |
| text-decoration | 规定添加到文本的修饰，如上/下划线、删除线等 underline 下划线；overline 上划线； line-through删除线 |
4.列表属性
| 属性 | 描述 |
|---|---|
| list-style-type | 设置列表项标记的类型 none 无标记；disc默认，实心圆；circle空心圆；square实心方块 |
CSS常用选择器
1.全局选择器
*{
margin: 0;
padding: 0;
}
2.元素选择器
- 所有的标签，都可以是选择器。⽐如ul、li、label、dt、dl、input、div等。
- ⽆论这个标签藏的多深，⼀定能够被选择上。
p{
font-size:222px;
}
3.类选择器
用【圆点+class】的方式定义
<!-- HTML部分 -->
<h2 class="oneclass">你好</h2>
/* CSS部分 */
.oneclass{
width:800px;
}
注：
- 类选择器可以被多种标签使
- 类名不能以数字开头
- 同⼀个标签可以使⽤多个类选择器,用空格隔开。
<p class="classone classtwo">test</p>
4.ID选择器
针对某⼀个特定的标签来使⽤，只能使⽤⼀次。css中的ID选择器以#来定义。
<!-- HTML部分 -->
<h2 id="mytitle">你好</h2>
/* CSS部分 */
#mytitle{
color:red;
}
5.关系选择器
- 后代选择器
E F{ }选择所有被E元素包含的F元素，中间⽤空格隔开.
<!-- HTML部分 -->
<ul>
<li>宝⻢</li>
<li>奔驰</li>
</ul>
<ol>
<li>奥迪</li>
</ol>
/* CSS部分 */
ul li{
color:green;
}
- ⼦代选择器
E>F{}选择所有作为E元素的直接⼦元素F，对更深⼀层的元素不起作⽤，⽤>表示
<!-- HTML部分 -->
<div>
<a href="#">⼦元素1</a>
<p> <a href="#">孙元素</a> </p>
<a href="#">⼦元素2</a>
</div>
/* CSS部分 */
div>a{
color:red
}
6.合并选择器
语法：选择器1,选择器2,…{ }。可以减少重复代码。
.header,.footer{
height:300px;
}
【注】选择器优先级
- css中⽤四位数字表示权重,
- 元素选择器的权重为0001
- class选择器的权重为0010
- d选择器的权重为0100
内联样式的权重为1000
优先级从高到低：行内样式>ID选择器>类选择器>元素选择器
[----待续------]
