前端三件套——CSS基础网页开发必备知识
Posted 前端小刘不怕牛牛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端三件套——CSS基础网页开发必备知识相关的知识，希望对你有一定的参考价值。
文章目录
🍓前言
上文笔者对html做了较为全面的总结，前端三件套三下五除二，我们就干掉三分之一了（狗头）
那么接下来就是我们的层叠样式表——CSS，它的作用就是给页面中的HTML标签设置样式的，那些下面就开启我们今天的旅程吧
导读
CSS语法：
选择器 属性名：属性值；
选择器简单理解就是选择的标签名，如p，大括号里面的就是CSS的属性了，也就是将选择的标签设置某个样式
如：
p
color：red;/* 给p段落的字体叠加红色*/
PS:/* … */ 就是CSS的注释格式，也可以直接ctrl+/
编辑器会自己判断该用哪种格式注释
常见属性：
1. CSS引入方式
1.1内嵌式
首先我们得说一下style标签，一般它都是写在<head>标签里，<title>标签之下的
内嵌式就是将CSS写在style标签中
如下所示：
<!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>
p
color: red;
</style>
</head>
<body>
<p>红色</p>
</body>
</html>
1.2 外联式
是之前提到的CSS写在一个单独的.css文件里面，这也是开发项目中最常见的
引入方式： 需要通过link标签在网页中引入
<link>标签也写在title标签下
语法：
<link rel="stylesheet" href="">
rel的值告诉编译器这是这个链接是样式表
href里面就填CSS文件的相对路径（简单一点），和HTML里的超链接<a>标签是一样的
1.3 行内式
将CSS写在标签的style属性中
开发中基本是与JS配合使用的
语法：
<p color:red; font-size:5px;>5号红色</p>
注意
日常小案例可以用内嵌式，比较方便
项目开发外联式为主
行内式和js 配合使用
2. 基础选择器
在HTML中选择元素
2.1 标签选择器
结构： 标签名 css属性名：属性值；
作用： 通过标签名，找到页面中所有这类标签，设置样式
注意点：
- 标签选择器选择的是一类标签，而不是一个
- 标签选择器无论嵌套关系多深，都能找到对应的标签
2.2 类选择器
结构： .类名 css属性名：属性值；
.one
color:red;
作用： 通过类名找到页面中所有带有这个类名的标签，设置样式
注意点：
- 所有的标签都有class属性，class属性的属性值称为
类名（类似于名字） - 类名可由数字、字母、下划线、中划线等组成，但需注意
不能由数字或中划线开头 - 一个标签可同时有多个类名，
类名之间以空格隔开
<h1 class="one" "red" "30px">大标题 </h1>
-
一个类选择器可以同时选中所有同类名的标签
实际开发中，类选择器用得最多
2.3 id选择器
结构： #id属性值css属性名：属性值
#blue
color:blue;
<div id="blue" >id选择器</div>
作用： 通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意点：
-
所有标签上都有id属性
-
id属性值是唯一的，即两个标签不能共用一个id，一个标签不能有两个id
id选择器只能选中一个标签id一般配合js使用，除非特殊情况，否则不要使用id设置样式
2.4 通配符选择器
结构： *css属性名：属性值；
*
margin:0;
padding:0;
作用： 找到页面所有的标签，设置样式
注意点：
开发中使用极少，只会在特殊情况使用，用处在CSS进阶再进行讲解
3.字体与文本样式
3.1 font字体样式
- 字号：
属性名：font-size
取值格式：数字 + px
font-size : 32px;
注意点：
- 谷歌浏览器的默认字号为16
- px必须加
- 字体粗细
属性名：font-weight
取值格式：
分俩种——
一种为关键字，normal表示正常粗细，bold表示粗体
另一种是纯数字，100~900取整百数，其中normal 对应400，bold对应700
font-weight : bold;
注意点：
不是所有的字体都提供了九种粗细
- 字体样式
属性名：font-style
取值格式：
正常—— normal
倾斜—— italic
font-style : italic;
- 字体
属性名：font-family
取值格式：
字体分为三大类:
无衬线字体（sans-serif）——笔画粗细均匀，常见字体有黑体、Arial、微软雅黑
sans-serif也是网页中最常用的字体类型
衬线字体（serif）——笔画粗细不均，有笔锋修饰，常见字体有宋体、Times New Roman
serif主要应用在报刊
等宽字体（monospace）——字符间隔宽度相等，常见该字体Consolas
monospace一般见于代码编写
font-family : 微软雅黑；
渲染规则
- 从左到右按顺序查找，若电脑中未安装该字体，则显示下一字体
- 直到都不支持则根据操作系统，显示最后字体系列的默认字体
font-family : 微软雅黑，黑体，sans-serif;
最后一个是字体系列“统称”
注意点：
- 若某个字体名称中存在多个单词，建议用引号包裹，如：“Microsoft YaHei”
- 最后一项字体系列是不需要引号的
- 网页开发中，尽量使用系统自带字体，保证不同用户浏览时均可正常显示
格外增加：CSS是层叠样式表，而层叠就是叠加的意思，样式可以一层一层的层叠覆盖。就像你个<p>标签的字体用CSS设置了红色样式，后面在这同个标签又设置了蓝色是，此时网页显示的就是蓝色。（写在最下面的会生效！！！）
- 字体font相关属性的连写
格式如下：
font : style weight size family；’
例子：
font : italic 700 16px 宋体；
前面两个可以省略，省略则代表设置为默认值，但后面两个是不可以省略的
3.2 text字体样式
- 文本缩进：
属性名：text-indent
取值：
1. 数字+px
2. 数字+em（推荐，1em = 当前标签的font-size的大小）
text-indent : 2em;
- 文本水平对齐方式
属性名：text-align
取值：
| 属性值 | 效果 |
|---|---|
| left | 左对齐 |
| center | 居中对齐 |
| right | 右对齐 |
注意点：
text-align属性在文本所在标签（文本的父元素）设置
3.3 文本修饰
属性名：text-decoration
取值：
| 属性名 | 效果 |
|---|---|
| underline | 下划线 |
| line-through | 删除线 |
| overline | 上划线 |
| none | 无装饰线 |
注意点：
开发中，会使用text-decoration : none;清楚<a>标签默认的下划线
3.3 line-height行高
控制一行的上下行间距
属性名：line-height
取值：
- 数字+px（上间距到下间距的距离）
- 倍数（当前标签font-size的倍数）
注意点：
设置line-height : 1 ;可以取消上下间距
与font连用：
font : style weight size/line-herght family ;
使用如下：
font : italic 700 16px/1.5 微软雅黑 ；
下节预告，【前端三件套——CSS进阶】
各位看官觉得还不错可以点赞关注一下吗，我是前端小刘不怕牛牛，期待与您共同进步🤗🤗🤗
以上是关于前端三件套——CSS基础网页开发必备知识的主要内容，如果未能解决你的问题，请参考以下文章