【前端学习笔记】(三)（CSS基础、选择器、字体和文本样式）

香蕉卟NaNa

已于 2022-05-02 21:01:37 修改

阅读量473

点赞数 1

分类专栏：前端文章标签：前端

于 2022-04-03 21:42:06 首次发布

本文链接：https://blog.csdn.net/weixin_48650082/article/details/123938247

版权

前端专栏收录该内容

10 篇文章 4 订阅

订阅专栏

一、基础认知

1.1 CSS介绍

CSS：层叠样式表
CSS 的作用：给页面中的 HTML 标签设置样式

1.2 CSS语法规则

• css 写在 style 标签中，style 标签一般写在 head 标签里面，title 标签下面
CSS

1.3 CSS常见属性

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

注意点：
（1） CSS 标点符号都是英文状态下的
（2）每一个样式键值对写完之后，最后需要写分号
例子：

<!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 {
            color: blue;
            font-size: 16px;
            background-color: aquamarine;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <p>Hello</p>
</body>
</html>

效果展示：
CSS基础例子1

1.4 CSS引入方式

➢ 内嵌式：CSS 写在 style 标签中
• 提示：style 标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中
➢ 外联式：CSS 写在一个单独的.css文件中
• 提示：需要通过 link 标签在网页中引入
➢ 行内式：CSS 写在标签的 style 属性中
• 提示：之后会配合 js 使用

1.5 CSS常见三种引入方式的区别

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

二、基础选择器

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

1、标签选择器

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

2、类选择器

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

3、 id选择器

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

4、类与id的区别

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

5、通配符选择器

➢ 结构：* { css属性名：属性值； }
➢ 作用：找到页面中所有的标签，设置样式
➢ 注意点：
（1）开发中使用极少，只会在极特殊情况下才会用到
（2）在基础班小页面中可能会用于去除标签默认的 margin 和 padding
![通配符选择器1

通配符选择器2
效果：
通配符选择器效果

三、字体和文本样式

1、字体样式

1.1 字体大小：font-size

➢ 属性名：font-size
➢ 取值：数字 + px
➢ 注意点：
• 谷歌浏览器默认文字大小是16px
• 单位需要设置，否则无效
例子：

<!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 {
           font-size: 20px;
        }
    </style>
</head>
<body>
    <p>p标签</p>
</body>
</html>

效果展示：
字体大小

1.2 字体粗细：font-weight

➢ 属性名：font-weight
➢ 取值：
• 关键字：

正常	normal
加粗	bold

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

正常	400
加粗	700

➢ 注意点：
• 不是所有字体都提供了九种粗细，因此部分取值页面中无变化
• 实际开发中以：正常、加粗两种取值使用最多。

例子：

<!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>
        .one {
           font-weight: normal;
        }
        .two {
            font-weight: bold;
        }
        .three {
            font-weight: 400;
        }
        .four {
            font-weight: 700;
        }
    </style>
</head>
<body>
    <p class="one">p标签1</p>
    <p class="two">p标签2</p>
    <p class="three">p标签3</p>
    <p class="four">p标签4</p>
</body>
</html>

效果展示：
字体粗细

1.3 字体样式：font-style

➢ 属性名：font-style
➢ 取值：
• 正常（默认值）：normal
• 倾斜：italic

例子：

<!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>
        .one {
           font-style: normal;
        }
        .two {
            font-style: italic;
        }
    </style>
</head>
<body>
    <p class="one">p标签1</p>
    <p class="two">p标签2</p>
</body>
</html>

效果展示：
字体倾斜

1.4 字体类型：font-family

➢ 属性名：font-family
➢ 常见取值：具体字体1,具体字体2,具体字体3,具体字体4,…,字体系列
• 具体字体：“Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等……
• 字体系列：sans-serif、serif、monospace等……
➢ 渲染规则：
（1）从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
（2）如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体
➢ 注意点：
（1）如果字体名称中存在多个单词，推荐使用引号包裹
（2）最后一项字体系列不需要引号包裹
（3）网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

例子：

<!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>
        .one {
           font-family: Microsoft YaHei;
        }
        .two {
            font-family: 楷体;
        }
    </style>
</head>
<body>
    <p class="one">p标签1</p>
    <p class="two">p标签2</p>
</body>
</html>

效果展示：

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

1.5 样式的层叠问题

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

例子：

<!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>
        .one {
           color: red;
           color: blue;
        }
    </style>
</head>
<body>
    <p class="one">p标签1</p>
</body>
</html>

效果展示：
样式覆盖

1.6 字体类型：font属性连写

➢ 属性名：font (复合属性)
➢ 取值：
• font : style weight size 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>
        .one {
           font: italic 700 20px 宋体;
        }
        .two {
            font: 30px 楷体;
        }
    </style>
</head>
<body>
    <p class="one">p标签1</p>
    <p class="two">p标签2</p>
</body>
</html>

效果展示：
字体样式连写

2、文本样式

2.1 文本缩进：text-indent

➢ 属性名：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: 2em;
        }
    </style>
</head>
<body>
    <p>第一代电子管计算机——ENIAC(The Electronic Numerical Integrator And Computer)1946年在费城公诸于世，它通过不同部分之间的重新接线编程，还拥有并行计算能力，但功能受限制，速度也慢。ENIAC的问世标志现代计算机的诞生，是计算机发展史上的里程碑。</p>
    <p>第二代晶体管计算机晶体管的发明大大促进计算机的发展，晶体管代替电子管，电子设备体积减小。1956年，晶体管在计算机中使用，晶体管和磁芯存储器导致了第二代计算机的产生。第二代计算机体积小、速度快、功耗低、性能更稳定。首先使用晶体管技术的是早期的超级计算机，主要用于原子科学的大量数据处理，这些机器价格昂贵，生产数量极少。</p>
</body>
</html>

效果展示：
文本缩进

2.2 文本水平对齐方式：text-align

➢ 属性名：text-align
➢ 取值：

属性值	效果
left	左对齐
center	居中对齐
right	右对齐

➢ 注意点：
• 如果需要让文本水平居中，text-align 属性给文本所在标签（文本的父元素）设置

例子：

<!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>
        .one {
            text-align: left;
        }
        .two {
            text-align: center;
        }
        .three {
            text-align: right;
        }
    </style>
</head>
<body>
    <p class="one">web前端开发</p>
    <p class="two">Web前端开发</p>
    <p class="three">Web前端开发</p>
</body>
</html>

效果展示：
文本对齐
水平居中方法总结 text-align : center
➢ text-align : center 能让以下元素水平居中
① 文本
② span标签、a标签
③ input标签、img标签
➢ 注意点：
如果需要让以上元素水平居中，text-align : center 需要给以上元素的父元素设置

2.3 文本修饰：text-decoration

➢ 属性名：text-decoration
➢ 取值：

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

➢ 注意点：
• 开发中会使用 text-decoration : none ; 清除 a 标签默认的下划线

例子：

<!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>
        .one {
            text-decoration: underline;
        }
        .two {
            text-decoration: line-through;
        }
        .three {
           text-decoration: overline;
        }
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <p class="one">下划线</p>
    <p class="two">删除线</p>
    <p class="three">上划线</p>
    <a href="#">链接（去掉了下划线）</a>
</body>
</html>

效果展示：
文本修饰

3、 line-height 行高

➢ 作用：控制一行的上下行间距
➢ 属性名：line-height
➢ 取值：
• 数字+px
• 倍数（当前标签 font-size 的倍数）
行高描述
➢ 应用：
（1）让单行文本垂直居中可以设置 line-height : 文字父元素高度
（2）网页精准布局时，会设置 line-height : 1 可以取消上下间距
➢ 行高与 font 连写的注意点：
• 如果同时设置了行高和 font 连写，注意覆盖问题
• font : style weight size / line-height family ;

4、颜色常见取值

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

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

例子：

<!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: 100px;
            height: 50px;
        }
        .one {
            
            background-color: blue;
        }
        .two {
            background-color: rgb(255,0,0);
        }
        .three {
           background-color: rgba(255,0,0,0.3);
        }
        .four {
            background-color: #6868dd;
        }
    </style>
</head>
<body>
    <div class="one">关键词</div>
    <div class="two">rgb</div>
    <div class="three">rgba</div>
    <div class="four">十六进制</div>
</body>
</html>

效果展示：
颜色设置
➢ 取值类型①：关键词
➢ 常见颜色取值：
• red：红色
• green：绿色
• blue：蓝色
• yellow：黄色
• orange：橘色
• skyblue：天蓝色
• pink：粉色
• …….

➢ 取值类型②：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 ：黑色
➢ 注意点
（1）类似于：#ffaabc 不能改写成 #fabc
（2）实际开发中会直接使用测量工具直接得到颜色，不需要前端自己设计颜色。

香蕉卟NaNa

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【前端学习笔记】(三)（CSS基础、选择器、字体和文本样式）

一、基础认知1.1 CSS介绍CSS：层叠样式表CSS的作用：给页面中的HTML标签设置样式2.2 CSS语法规则• css写在style标签中，style标签一般写在head标签里面，title标签下面1.3 CSS常见属性CSS常见属性作用color文字颜色font-size字体大小background-color背景颜色width宽度height高度注意点：（1） CSS 标点符号都是英文状态下的（2）每一个样式键值对写完
复制链接

扫一扫