2-css-1

是三好

已于 2023-06-25 20:35:36 修改

阅读量1k

点赞数

分类专栏：学习整理-web前端文章标签： css html 前端

于 2023-06-25 20:25:24 首次发布

本文链接：https://blog.csdn.net/qq_40589140/article/details/131385353

版权

学习整理-web前端专栏收录该内容

34 篇文章 0 订阅

订阅专栏

一 CSS 初体验

CSS 定义：层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种样式表语言，用来描述HTML文档的呈现（美化内容）

CSS 书写在什么位置？ title 标签下方
哪个标签里面可以书写 CSS 代码？style 标签

<title>CSS 初体验</title>
<style>
    /* 选择器 { } */
    p {
        /* CSS 属性 */
        color: red;
    }
</style>
<p>体验 CSS</p>

提示：属性名和属性值成对出现 → 键值对

格式：选择器 {属性名: 属性值;}

二 CSS 引入方式

内部样式表：学习使用
- CSS 代码写在 style 标签里面
外部样式表：开发使用
- CSS 代码写在单独的 CSS 文件中（.css）
- 在 HTML 使用 link 标签引入
```
<link rel="stylesheet" href="./my.css">
```
行内样式：配合 JavaScript 使用
- CSS 写在标签的 style 属性值里
```
<div style="color: red; font-size:20px;">这是 div 标签</div>
```

三选择器

作用：查找标签，设置样式。

基础选择器

标签选择器
类选择器
id 选择器
通配符选择器

1 标签选择器

标签选择器：使用标签名作为选择器 → 选中同名标签设置相同的样式。

例如：p, h1, div, a, img…

<style>
    p {
    	color: red;
    }
</style>

注意：标签选择器无法差异化同名标签的显示效果。

2 类选择器

作用：查找标签，差异化设置标签的显示效果。

步骤：

定义类选择器 → .类名
使用类选择器 → 标签添加 class="类名“

<style>
	/* 定义类选择器 */ 
    .red {
		color: red;
	}
</style>

<!-- 使用类选择器 -->
<div class="red">这是 div 标签</div>

注意：

类名自定义，不要用纯数字或中文，尽量用英文命名

一个类选择器可以供多个标签使用

一个标签可以使用多个类名，类名之间用空格隔开

开发习惯：类名见名知意，多个单词可以用 - 连接，例如：news-hd

3 id选择器

作用：查找标签，差异化设置标签的显示效果。

场景：id 选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式

步骤：

定义 id 选择器 → #id名
使用 id 选择器 → 标签添加 id= “id名”

<style>
    /* 定义 id 选择器 */
    #red {
    	color: red;
    }
</style>

<!-- 使用 id 选择器 -->
<div id="red">这是 div 标签</div>

规则：同一个 id 选择器在一个页面只能使用一次

4 通配符选择器

作用：查找页面所有标签，设置相同样式。

通配符选择器： *，不需要调用，浏览器自动查找页面所有标签，设置相同的样式

* {
	color: red;
}

经验：通配符选择器可以用于清除标签的默认样式，例如：标签默认的外边距、内边距

在这里插入图片描述

四文字控制属性

在这里插入图片描述

1 字体大小

属性名：font-size
属性值：文字尺寸，PC 端网页最常用的单位 px
```
p {
	font-size: 30px;
}
```
经验：谷歌浏览器默认字号是16px

2 字体粗细

属性名：font-weight
属性值
- 数字（开发使用）正常400 加粗700
- 关键字正常normal 加粗bold

3 字体样式（是否倾斜）

作用：清除文字默认的倾斜效果
属性名：font-style
属性值
- 正常（不倾斜）：normal
- 倾斜：italic

4 行高

作用：设置多行文本的间距
属性名：line-height

属性值

数字 + px

数字（当前标签font-size属性值的倍数）

line-height: 30px;
/* 当前标签字体大小为16px */
line-height: 2;

在这里插入图片描述

行高的测量方法：从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）。

行高-垂直居中

垂直居中技巧：行高属性值等于盒子高度属性值

注意：该技巧适用于单行文字垂直居中效果

在这里插入图片描述

5 字体族

属性名：font-family
属性值：字体名1, 字体名2…., 字体族名（可以只写一个字体名）
执行顺序：从左向右依次查找
```
font-family: 楷体, 微软雅黑;
```

经验

建议 font-family 属性最后设置一个字体族名

网页开发建议使用无衬线字体

font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;

在这里插入图片描述

6 font 复合属性

div {
    /* 文字倾斜 */
    font-style: italic;
    /* 文字加粗 */
    font-weight: 700;
    /* 字体大小是30px */
    font-size: 30px;
    /* 行高为字号的2倍 */
    line-height: 2;
    /* 字体是楷体 */
    font-family: 楷体;
}

div {
	/* font: 是否倾斜 是否加粗字号/行高字体;*/
    font: italic 700 30px/2 楷体;
}

使用场景：设置网页文字公共样式

在这里插入图片描述

复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。

font: 是否倾斜是否加粗字号/行高字体（必须按顺序书写）

div {
	font: italic 700 30px/2 楷体;
}

注意：字号和字体值必须书写，否则 font 属性不生效

7 文本缩进

在这里插入图片描述

属性名：text-indent
属性值：
- 数字 + px
- 数字 + em（推荐：1em = 当前标签的字号大小）
```
p {
	text-indent: 2em;
}
```

8 文本对齐方式

作用：控制内容水平对齐方式
属性名：text-align
属性值：
- left左对齐（默认）
- center居中对齐
- right右对齐
```
text-align: center;
```

水平对齐方式 – 图片

text-align本质是控制内容的对齐方式，属性要设置给内容的父级。

<style>
    div {
    	text-align: center;
    }
</style>
<div>
	<img src="./images/1.jpg" alt="">
</div>

在这里插入图片描述

9 文本修饰线

属性名： text-decoration
属性值
- none 五
- underline 下划线
- line-through 删除线
- overline 上划线

10 color 文字颜色

属性名：color

属性值

颜色表示方法	属性值	说明	使用场景
颜色关键字	颜色英文单词	red，green，blue…	学习测试
rgb表示法	rgb(r,g,b)	r,g,b表示红绿蓝三原色，取值0-255	了解
rgba表示法	rgba(r,g,b,a)	a表示透明度，取值0-1	开发使用，实现透明色
十六进制表示法	#RRGGBB	#000000，#ffcc00，简写：#000，#fc0	开发使用（从设计稿复制）