CSS基础（一）

悠然予夏

已于 2023-01-28 15:16:59 修改

阅读量1.1k

点赞数

分类专栏： HTML 文章标签： css 前端 html

于 2022-12-11 20:39:31 首次发布

本文链接：https://blog.csdn.net/weixin_52851967/article/details/128276316

版权

HTML 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1、基础认知

1.1、css初识

（1）CSS的介绍

CSS：层叠样式表（Cascading style sheets）
CSS作用是什么？
- 给页面中的HTML标签设置样式

（2）CSS 语法规则

写在哪里？
- css写在style标签中，style标签一般写在head标签里面，title标签下面
怎么写？

（3）CSS 初体验

常见属性：

css常见属性	作用
color	文字颜色
font-size	字体大小
backgroud-color	背景颜色
width	宽度
height	高度

注意点：

CSS 标点符号都是英文状态下的
每一个样式键值对写完之后，最后需要写分号

1.2、CSS引入方式

内嵌式：CSS 写在style标签中
- 提示：style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中
外联式：CSS 写在一个单独的.css文件中
- 提示：需要通过link标签在网页中引入
- 可以在style元素或者CSS文件中使用@import导入其他的CSS文件

行内式：CSS 写在标签的style属性中
- 提示：基础学习时不推荐使用，之后会配合js使用

引入方式	书写位置	作业范围	使用场景
内嵌式	css写在style标签中	当前页面	小案例
外联式	CSS 写在一个单独的.css文件中，通过link标签引入	多个页面	项目中
行内式	CSS 写在标签的style属性中	当前标签	配合js使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 关系: 样式表，外联式-->
    <link rel="stylesheet" href="./my.css">

<!-- 内嵌式 -->
    <style>
        /* css注释 */
        /* 这里写的都是css */
        /* 选择器 {css属性} */
        /* 选择器: 查找标签 */
        p {
            /* 文字颜色变红色 */
            color: red;
            /* 字变大 px:像素 */
            font-size: 30px;
            /* 背景颜色 */
            background-color: green;
            /* width  height; */
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <p>这是p标签</p>
     <!-- 行内式 -->
    <div style="color: green; font-size: 30px;">这是div标签</div>
    <div>这个div是什么颜色</div>
</body>
</html>

my.css

/* 选择器 {} */
p {
    color: red;
}

1.3、CSS属性的官方文档

CSS官方文档地址：https://www.w3.org/TR/?tag=css
CSS推荐文档地址：CSS 参考 - CSS（层叠样式表） | MDN
由于浏览器版本、CSS版本等问题，查询某些CSS是否可用：可以到 Can I use... Support tables for HTML5, CSS3, etc 查询 CSS 属性的可用性；

1.4、link元素

link元素是外部资源链接元素，规范了文档与外部资源的关系

link元素通常是在head元素中

最常用的链接是样式表（CSS）；

此外也可以被用来创建站点图标（比如 “favicon” 图标）；

link元素常见的属性：

href：此属性指定被链接资源的URL。 URL 可以是绝对的，也可以是相对的。
rel：指定链接类型，常见的链接类型：链接类型 - HTML（超文本标记语言） | MDN (mozilla.org)
- icon：站点图标；
- stylesheet：CSS样式；

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
  <!-- 引入css -->
  <link rel="stylesheet" href="./css/style.css">
  <!-- 引入icon(站点的图标) -->
  <link rel="icon" href="../images/favicon.ico">
</head>
<body>
  
</body>
</html>

2、基础选择器

2.1、选择器

选择器的作用：选择页面中对应的标签（找她），方便后续设置样式（改她）

标签选择器

结构：标签名 { css属性名：属性值； }
作用：通过标签名，找到页面中所有这类标签，设置样式
注意点：
- 标签选择器选择的是一类标签，而不是单独某一个
- 标签选择器无论嵌套关系有多深，都能找到对应的标签

2.2、类选择器

结构：.类名 { css属性名：属性值； }
作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
注意点：
- 所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
- 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
- 一个标签可以同时有多个类名，类名之间以空格隔开
- 类名可以重复，一个类选择器可以同时选中多个标签

2.3、id选择器

结构：#id属性值 { css属性名：属性值； }
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意点：
- 所有标签上都有id属性
- id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
- 一个标签上只能有一个id属性值
- 一个id选择器只能选中一个标签

补充：类与 id 的区别

class类名与id属性值的区别
- class类名相当于姓名，可以重复，一个标签可以同时有多个class类名
- id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值
类选择器与id选择器的区别
- 类选择器以 . 开头
- id选择器以 # 开头
实际开发的情况
- 类选择器用的最多
- id一般配合js使用，除非特殊情况，否则不要使用id设置样式
- 实际开发中会遇到冗余代码的抽取（可以将一些公共的代码抽取到一个公共的类中去）

2.4、通配符选择器

结构：* { css属性名：属性值； }
作用：找到页面中所有的标签，设置样式
注意点：
- 开发中使用极少，只会在极特殊情况下才会用到
- 可以用于去除标签默认的margin和padding

3、字体和文本样式

3.1、字体样式

（1）字体大小

属性名：font-size
取值：
- 数字 + px
  - 比如100px
  - 也可以使用em单位(不推荐)：1em代表100%，2em代表200%，0.5em代表50%
- 百分比
  - 基于父元素的font-size计算，比如50%表示等于父元素font-size的一半
注意点：
- 谷歌浏览器默认文字大小是16px
- 单位需要设置，否则无效

（2）字体粗细

属性名：font-weight
取值：

关键字：

正常 normal
加粗 bold

纯数字：100~900的整百数：

正常 400
加粗 700

注意点：

不是所有字体都提供了九种粗细，因此部分取值页面中无变化
实际开发中以：正常、加粗两种取值使用最多。
strong、b、h1~h6等标签的font-weight默认就是bold

（3）字体样式（是否倾斜）

属性名：font-style
font-style用于设置文字的常规、斜体显示
取值：

属性名

说明

normal

常规显示

italic(斜体)

用字体的斜体显示(通常会有专门的字体)

oblique(倾斜)

文本倾斜显示(仅仅是让文字倾斜)

注意：em、i、cite、address、var、dfn等元素的font-style默认就是italic

（4）常见字体系列（了解）

无衬线字体（sans-serif）
- 特点：文字笔画粗细均匀，并且首尾无装饰
- 场景：网页中大多采用无衬线字体
- 常见该系列字体：黑体、Arial
衬线字体（serif）
- 特点：文字笔画粗细不均，并且首尾有笔锋装饰
- 场景：报刊书籍中应用广泛
- 常见该系列字体：宋体、Times New Roman
等宽字体（monospace）
- 特点：每个字母或文字的宽度相等
- 场景：一般用于程序代码编写，有利于代码的阅读和编写
- 常见该系列字体：Consolas、fira code

（5）字体系列 font-family

属性名：font-family
可以设置1个或者多个字体名称;
浏览器会选择列表中第一个该计算机上有安装的字体;
或者是通过 @font-face 指定的可以直接下载的字体。
常见取值：具体字体1,具体字体2,具体字体3,具体字体4,...,字体系列
- 具体字体："Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等……
- 字体系列：sans-serif、serif、monospace等……
渲染规则：
- 从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
- 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体
注意点：
- 如果字体名称中存在多个单词，推荐使用引号包裹
- 最后一项字体系列不需要引号包裹
- 网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /* font-family: 宋体; */
            /* 如果用户电脑没有安装微软雅黑, 就按黑体显示文字 */
            /* 如果电脑没有安装黑体, 就按任意一种非衬线字体系列显示 */
            font-family: 微软雅黑, 黑体, sans-serif;
        }
    </style>
</head>
<body>
    <div>
        这是一个div标签
    </div>
</body>
</html>

（6）样式的层叠问题

问题：
- 给同一个标签设置了相同的样式，此时浏览器会如何渲染呢？
结果：
- 如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效
TIP：
- CSS （Cascading style sheets）层叠样式表
- 所谓的层叠即叠加的意思，表示样式可以一层一层的层叠覆盖

（7）字体 font 相关属性的连写

属性名： font
取值：font : style weight size family;
省略要求：只能省略前两个，如果省略了相当于设置了默认值
注意点：如果需要同时设置单独和连写形式
- 要么把单独的样式写在连写的下面
- 要么把单独的样式写在连写的里面

font是一个缩写属性

font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写;
font-style font-variant font-weight font-size/line-height font-family

规则:

font-style、font-variant、font-weight可以随意调换顺序，也可以省略
line-height可以省略，如果不省略，必须跟在font-size后面
font-size、font-family不可以调换顺序，不可以省略

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            /* 关于字体的属性 */
            font-size: 30px;
            font-weight: 700;
            font-variant: small-caps;
            font-style: italic;
            font-family: serif;
            line-height: 30px;

            /* 缩写属性 */
            /* 1.5的行高是相对于font-size的 */
            font: italic small-caps 700 30px/1.5 serif;
        }
    </style>
</head>
<body>

    <div class="box">我是div元素</div>

</body>
</html>

（8） font-variant

属性名：font-variant
说明：可以影响小写字母的显示形式
取值：

属性名

说明

normal

常规显示

small-caps

将小写字母替换为缩小过的大写字母

3.2、文本样式

（1）文本缩进

属性名： text-indent

取值：

数字 +px
数字 +em （推荐 1em = 当前标签的 font-size 的大小）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            /* text-indent: 50px; */
            /* 首行缩进2个字的大小 */
            /* 默认字号: 16px ; 32 */
            /* text-indent: 40px;
            font-size: 20px; */

            /* em: 一个字的大小 */
            text-indent: 2em;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <p>2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。</p>
</body>
</html>

（2）文本水平对齐方式

属性名：text-align
取值：

属性名

说明

left

左对齐

right

右对齐

center

正中间显示

justify

两端对齐
注意点：
- 如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置
text-align : center 能让哪些元素水平居中？
- 文本
- span标签、a标签
- input标签、img标签

注意点：

如果需要让以上元素水平居中， text-align : center 需要给以上元素的 父元素 设置

（3）文本修饰

属性名：text-decoration
取值：

属性名

说明

underline

下划线（常用）

line-through

删除线（不常用）

overline

上划线（几乎不用）

none

无装饰线（常用）
注意点：开发中会使用 text-decoration : none ; 清除a标签默认的下划线

（4）文字的大小写转换

属性名：text-transform
说明：用于设置文字的大小写转换

text-transform有几个常见的值:

属性名	说明
capitalize	(使…首字母大写, 资本化的意思)将每个单词的首字符变为大写
uppercase	(大写字母)将每个单词的所有字符变为大写
lowercase	(小写字母)将每个单词的所有字符变为小写
none	没有任何影响

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .info {
      /* text-transform: capitalize; */
      /* text-transform: uppercase; */
      text-transform: lowercase;
    }
  </style>
</head>
<body>
  
  <div class="info">my name is why, AGE IS 18</div>

</body>
</html>

（5）letter-spacing、word-spacing

letter-spacing、word-spacing分别用于设置字母、单词之间的间距
默认是0，可以设置为负数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            /* letter-spacing: 10px; */
            word-spacing: 30px;
        }
    </style>
</head>
<body>
    <div class="box">my name is coderwhy</div>
</body>
</html>

3.3、行高

行高的严格定义是：两行文字基线（baseline）之间的间距

基线（baseline）：与小写字母x最底部对齐的线

作用：控制一行的上下行间距
属性名：line-height

取值：

数字+px

倍数（当前标签font-size的倍数）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            /* line-height: 50px; */
            /* 自己字号的1.5倍 */
            /* line-height: 1.5; */

            /* 66px 宋体 倾斜 加粗 行高是2倍 */
            font: italic 700 66px/2 宋体;
        }
    </style>
</head>
<body>
    <p>2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析</p>
</body>
</html>

应用：

让单行文本垂直居中可以设置 line-height : 文字父元素高度
网页精准布局时，会设置 line-height : 1 可以取消上下间距

注意区分height和line-height的区别

height：元素的整体高度
line-height：元素中每一行文字所占据的高度

应用实例：假设div中只有一行文字，如何让这行文字在div内部垂直居中

让line-height等同于height

行高与font连写的注意点：

如果同时设置了行高和font连写，注意覆盖问题
font : style weight size/line-height family ;

3.4、vertical-align

vertical-align会影响 行内块级元素 在一个行盒中垂直方向的位置

思考：一个div没有设置高度的时候，会不会有高度？

没有内容，没有高度
有内容，内容撑起来高度

但是内容撑起来高度的本质是什么呢？

内容有行高（line-height），撑起来了div的高度

行高为什么可以撑起div的高度？

这是因为line boxes的存在，并且line-boxes有一个特性，包裹每行的inline level
而其中的文字是有行高的，必须将整个行高包裹进去，才算包裹这个line-level

那么，进一步思考：

如果这个div中有图片，文字，inline-block，甚至他们设置了margin这些属性呢？

情况一：只有文字时，line boxes如何包裹内容？（注意：红色是包裹的div，下面也都一样）

情况二：有图片，有文字时，line-boxes如何包裹内容？

情况三：有图片，有文字，有inline-block（比图片要大）如何包裹内容？

情况四：有图片，有文字，有inline-block（比图片要大）而且设置了margin-bottom，如何包裹内容？

情况五：有图片、文字、inline-block（比图片要大）而且设置了margin-bottom并且有文字，如何包裹内容？

结论：line-boxes一定会想办法包裹住当前行中所有的内容。

但是，但是为什么对齐方式千奇百怪呢？

你认为的千奇百怪，其实有它的内在规律
答案就是baseline对齐

我们来看官方vertical-align的默认值：没错，就是baseline

但是baseline都是谁呢？

文本的baseline是字母x的下方
Inline-block默认的baseline是margin-bottom的底部（没有，就是盒子的底部）
Inline-block有文本时，baseline是最后一行文本的x的下方

vertical-align的其他值

属性值	说明
baseline	基线对齐
top	把行内级盒子的顶部跟line boxes顶部对齐
middle	行内级盒子的中心点与父盒基线加上x-height一半的线对齐
bottom	把行内级盒子的底部跟line box底部对齐
<percentage>	把行内级盒子提升或者下降一段距离（距离相对于line-height计算\元素高度）， 0%意味着同baseline一样
<length>	把行内级盒子提升或者下降一段距离，0cm意味着同baseline一样

解决图片下边缘的间隙方法:

方法一: 设置成top/middle/bottom
方法二: 将图片设置为block元素

4、颜色常见取值（了解）

<color> - CSS（层叠样式表） | MDN

属性名：
- 如：文字颜色：color
- 如：背景颜色：background-color

属性值：

颜色表示方式	表示含义	属性值
关键词	预定义的颜色名	red、green、blue、....
rgb表示法	红绿蓝三原色。没想取值范围：0~255	rgb(0,0,0)、rgb(255,255,255)、...
rgba表示法	红绿蓝三原色+a表示透明度，取值范围是0~1	rgba(255,255,0.5)、...
十六进制表示法	#开头，将数字转换为十六进制	#000000、#ff0000、...

取值类型②： rgb 表示法
每项取值范围： 0~255
常见颜色取值：
- rgb ( 255 , 0 , 0 ) ：红色
- rgb ( 0 , 255 , 0 ) ：绿色
- rgb ( 0 , 0 , 255 ) ：蓝色
- rgb ( 0 , 0 , 0 ) ：黑色
- rgb ( 255 , 255 , 255 ) ：白色
取值类型③：rgba表示法
其实，比rgb表示法多个一个a，a表示透明度
a的取值范围：0~1
- 1：完全不透明
- 0：完全透明
省略写法：rgba ( 0 , 0 , 0 , 0.5 ) 可以省略写成 rgba ( 0 , 0 , 0 , .5 )

取值类型④：十六进制表示法

取值范围：两个数字为一组，每个数字的取值范围：0~9 , a , b , c , d , e , f
省略写法：如果三组中，每组数字都相同，此时可以每组可以省略只写一个数字
正确写法：#ffaabb 改写成 #fab
常见取值：

#fff ：白色
#000 ：黑色

注意点

类似于：#ffaabc 不能改写成 #fabc
实际开发中会直接使用测量工具直接得到颜色，不需要前端自己设计颜色，直接复制粘贴即可。

5、拓展

标签水平居中方法总结 margin : 0 auto

如果需要让div、p、h（大盒子）水平居中？

可以通过margin : 0 auto ; 实现

注意点：

如果需要让 div、p、h（大盒子）水平居中，直接给当前元素本身设置即可
margin：0 auto 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 552px;
            height: 400px;
            background-color: pink;
            /* background-color: green; */
            text-align: center;
            /* 文字是单行的 */
            /* 垂直居中技巧: 设置行高属性值 = 自身高度属性值 */
            line-height: 400px;
            font-size: 61px;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

悠然予夏

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS基础（一）

介绍了css的常用修饰方法
复制链接

扫一扫

专栏目录

属性名	说明
normal	常规显示
italic(斜体)	用字体的斜体显示(通常会有专门的字体)
oblique(倾斜)	文本倾斜显示(仅仅是让文字倾斜)

属性名	说明
left	左对齐
right	右对齐
center	正中间显示
justify	两端对齐

属性名	说明
underline	下划线（常用）
line-through	删除线（不常用）
overline	上划线（几乎不用）
none	无装饰线（常用）

正常	normal
加粗	bold

正常	400
加粗	700

CSS基础（一）

1、基础认知

1.1、css初识

1.2、CSS引入方式

1.3、CSS属性的官方文档

1.4、link元素

2、基础选择器

2.1、选择器

2.2、类选择器

2.3、id选择器

2.4、通配符选择器

3、字体和文本样式

3.1、字体样式

3.2、文本样式

3.3、行高

3.4、vertical-align

4、颜色常见取值（了解）

5、拓展

“相关推荐”对你有帮助么？