当前位置：首页 > news >正文

03--CSS基础(2)

news 2025/10/14 9:17:06

前面我们主要介绍了CSS的用法和选择器,下面我们具体介绍一下CSS的属性设置

参考文档

CSS 参考手册

里面的属性更多的还是我们在使用中学习

一.字体属性

1.设置字体

body {font-family: '微软雅黑';font-family: 'Microsoft YaHei';
}

字体名称可以用中文, 但是不建议

多个字体之间使用逗号分隔. (从左到右查找字体, 如果都找不到, 会使用默认字体. )

如果字体名有空格, 使用引号包裹.

建议使用常见字体, 否则兼容性不好.

2.设置大小

p {font-size: 20px;
}

不同的浏览器默认字号不一样, 最好给一个明确值. (chrome 默认是 16px)

可以给 body 标签使用 font-size

要注意单位 px 不要忘记.

标题标签需要单独指定大小

注意: 实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮

3.粗细

p {font-weight: bold;font-weight: 700;
}

可以使用数字表示粗细.

700 == bold, 400 是不变粗, == normal

取值范围是 100 -> 900

4.文字样式

/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;

很少把某个文字变倾斜.

但是经常要把 em / i 改成不倾斜

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 文字样式 */body {font-family: 'Microsoft YaHei';}/* 字体大小 */.size1 {font-size: 40px;}.size2 {font-size: 30px;}/* 字体粗细 */.weight1 {font-weight: 400;}.weight2 {font-weight: bold;}.style {font-style: italic;}</style>
</head>
<body><div><p class="size1">字体设置大小</p><p class="size2">字体设置大小</p><p class="weight1">字体设置粗细</p><p class="weight2">字体设置粗细</p><p class="style"> 字体设置倾斜 </p></div>
</body>
</html>

二.文本属性

1.文本颜色

认识RGB

我们的显示器是由很多很多的 "像素" 构成的. 每个像素视为一个点, 这个点就能反映出一个具体的颜色. 我们使用 R (red), G (green), B (blue) 的方式表示颜色(色光三原色). 三种颜色按照不同的比例搭配, 就能混合出各种五彩斑斓的效果.

计算机中针对 R, G, B 三个分量, 分别使用一个字节表示(8个比特位, 表示的范围是 0-255, 十六进制表示为 00-FF). 数值越大, 表示该分量的颜色就越浓. 255, 255, 255 就表示白色; 0, 0, 0 就表示黑色

设置文本颜色

color: red;
color: #ff0000;
color: rgb(255, 0, 0);

第二行红色ff 绿色00和蓝色00都是重复的,可以缩写为#f00(只有三种颜色都可以缩写时才能采用缩写的方法)

也可以通过调色板手动设置颜色

2.文本对齐

控制文字在水平方向的对齐(也能控制图片的对齐)

这里的对齐指的是所在盒模型的左中右,不是整个页面的(盒模型后面会讲)

text-align: [值];
center: 居中对齐
left: 左对齐
right: 右对齐

3.文本装饰

text-decoration: [值];
underline 下划线. [常用]
none 啥都没有. 可以给 a 标签去掉下划线. 
overline 上划线. [不常用]
line-through 删除线 [不常用]

4.文本缩进

text-indent: [值];

单位可以使用 px 或者 em.

使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小.

缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了)

5.行高

行高指的是上下文本行之间的基线距离

HTML 中展示文字涉及到这几个基准线:

顶线

中线

基线 (相当于英语四线格的倒数第二条线)

底线

内容区：底线和顶线包裹的区域，即下图深灰色背景区域

其实基线之间的距离 = 顶线间距离 = 底线间距离 = 中线间距离

line-height: [值];

注意1: 行高 = 上边距 + 下边距 + 字体大小

上下边距是相等的, 此处字体大小是 16px, 行高 40px, 上下边距就分别是 12px

注意2: 行高也可以取 normal 等值.

这个取决于浏览器的实现. chrome 上 normal 为 21 px

注意3: 行高等与元素高度, 就可以实现文字居中对齐

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 500px;height: 500px;}.color1 {color:red;}.color2 {color:rgb(63, 38, 151);}.color3 {color:#00f;}.align1 {text-align: center;}.align2 {text-align: left;}.align3 {text-align: right;}.text-decoration1 {text-decoration: underline;}.text-decoration2 {text-decoration: overline;}.text-decoration3 {text-decoration: line-through;}.p {text-indent: 2em;}.p1 {line-height: 40px;}.p2 {line-height: 60px;}.jpg {text-align: center;}</style>
</head>
<body><div class="box"><!-- 设置文本颜色 --><p class="color1">颜色1</p><p class="color2">颜色2</p><p class="color3">颜色3</p><!-- 设置文本对齐 --><p class="align1">居中</p><p class="align2">居左</p><p class="align3">居右</p><p class="jpg"><img src="../img/初音表情包10.jpg" alt="图片加载失败" width="200px" height="200px"></p><!-- 设置下划线 --><p class="text-decoration1">下划线</p><p class="text-decoration2">上划线</p><p class="text-decoration3">中划线</p><!-- 文本缩进 --><!-- 行高 --><p class="p p1">这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话</p><p class="p p2">这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话</p></div>
</body>
</html>

三.背景属性

1.背景颜色

background-color: [指定颜色]

默认是 transparent (透明) 的. 可以通过设置颜色的方式修改

2.背景图片

background-image: url(...);

比 image 更方便控制位置(图片在盒子中的位置)

注意:

1. url 不要遗漏.

2. url 可以是绝对路径, 也可以是相对路径

3. url 上可以加引号, 也可以不加.

3.背景平铺

background-repeat: [平铺方式]
repeat: 平铺
no-repeat: 不平铺
repeat-x: 水平平铺
repeat-y: 垂直平铺
默认是 repeat

背景颜色和背景图片可以同时存在. 背景图片在背景颜色的上方.

4.背景位置

background-position: x y;

修改图片的位置

参数有三种风格:

1. 方位名词: (top, left, right, bottom)

2. 精确单位: 坐标或者百分比(以左上角为原点)

3. 混合单位: 同时包含方位名词和精确单位

注意

如果参数的两个值都是方位名词, 则前后顺序无关. (top left 和 left top 等效)

如果只指定了一个方位名词, 则第二个默认居中. (left 则意味着水平居中, top 意味着垂直居中. )

如果参数是精确值, 则的的第一个肯定是 x , 第二个肯定是 y. (100 200 意味着 x 为 100, y 为 200)

如果参数是精确值, 且只给了一个数值, 则该数值一定是 x 坐标, 另一个默认垂直居中.

如果参数是混合单位, 则第一个值一定为 x, 第二个值为 y 坐标. (100 center 表示横坐标为 100, 垂

直居中)

关于坐标系:

计算机中的平面坐标系, 一般是左手坐标系(和高中数学上常用的右手系不一样. y轴是往下指的).

5.背景尺寸

background-size: length|percentage|cover|contain;

可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px

也可以填百分比: 按照父元素的尺寸设置.

cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无

法显示在背景定位区域中。

把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.smallbox {width: 900px;height: 300px;}.bkcolor {background-color: green;text-align: center;}.photo1 {background-image: url(../img/R-C.jpg);}.photo2 {background-image: url(../img/R-C.jpg);background-repeat: no-repeat;}</style>
</head>
<body><!-- 设置背景颜色 --><div class="smallbox bkcolor">  背景颜色为绿色</div><!-- 设置背景图片及平铺方式 --><div class="smallbox photo1">背景图片默认为平铺</div><div class="smallbox photo2">背景图片设置为非平铺</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* .smallbox {width: 900px;height: 300px;} *//* .bkcolor {background-color: green;text-align: center;}.photo1 {background-image: url(../img/R-C.jpg);} */.bigbox {width: 900px;height: 900px;}.photo2 {background-image: url(../img/R-C.jpg);background-repeat: no-repeat;}.position {background-position: 200px 200px;}/* .size {background-size: cover;} */</style>
</head>
<body><!-- 设置背景颜色 --><!-- <div class="smallbox bkcolor">  背景颜色为绿色</div> --><!-- 设置背景图片及平铺方式 --><!-- <div class="smallbox photo1">背景图片默认为平铺</div> --><div class="bigbox photo2 position size">背景图片设置为非平铺</div></body>
</html>

四.圆角矩形

通过 border-radius 使边框带圆角效果

border-radius: length;

length 是内切圆的半径. 数值越大, 弧线越强烈

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 100px;border: 2px solid green;border-radius: 10px;
}</style>
</head>
<body><div>圆角矩形</div>
</body>
</html>

1.生成圆形

让 border-radius 的值为正方形宽度的一半即可

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.circle {width: 200px;height: 200px;border: 2px solid green;border-radius: 100px;/* 或者用 50% 表示宽度的一半 */border-radius: 50%;
}</style>
</head>
<body><div class="circle">圆形</div>
</body>
</html>

2.生成圆角矩形

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.circle {width: 200px;height: 200px;border: 2px solid green;border-radius: 100px;/* 或者用 50% 表示宽度的一半 */border-radius: 50%;}.scircle {width: 200px;height: 100px;border: 2px solid green;border-radius: 50px;}</style>
</head>
<body><div class="circle">圆形</div><div class="scircle">圆角矩形</div>
</body>
</html>

3.展开写法

border-radius 是一个复合写法. 实际上可以针对四个角分别设置.

border-radius:2em;
等价于
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;border-radius: 10px 20px 30px 40px;
等价于
border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:30px;
border-bottom-left-radius:40px;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.circle {width: 200px;height: 200px;border: 2px solid green;border-radius: 100px;/* 或者用 50% 表示宽度的一半 */border-radius: 50%;}.scircle {width: 200px;height: 100px;border: 2px solid green;border-radius: 50px;}.sc {width: 200px;height: 200px;border: 2px solid green;border-radius: 10px 20px 30px 40px;}</style>
</head>
<body><div class="circle">圆形</div><div class="scircle">圆角矩形</div><div class="sc">圆角矩形抽象版</div>
</body>
</html>