文章目录

1.CSS简介
- 1.1HTML的局限性
- 1.2CSS-网页美容师
- 1.3CSS语法规范
2.CSS基础选择器
- 2.1选择器的作用
- 2.2选择器的分类
- 2.3标签选择器
- 2.4类选择器
- 2.5id选择器
- 2.6通配符选择器
- 2.7基础选择器总结
3.CSS字体属性
- 3.1字体系列
- 3.2字体大小
- 3.3字体粗细
- 3.4文字样式
- 3.5字体复合属性
- 3.6字体属性总结
4.CSS文本属性
- 4.1文本颜色
- 4.2对齐文本
- 4.3装饰文本
- 4.4文本缩进
- 4.5行间距
- 4.6文本属性总结
5.CSS引入方式
- 5.1CSS的三种样式表
- 5.2内部样式表
- 5.3行内样式表
- 5.4外部样式表
- 5.5CSS引入方式总结
6.Chrome调试工具

1.CSS简介

CSS的主要使用场景就是美化网页，布局页面的

1.1HTML的局限性

HTML只关注内容的语义，丑

虽然HTML可以做简单的样式，但是非常繁琐

1.2CSS-网页美容师

CSS也是一种标记语言，主要用于设置HTML页面中的文本内容、图形外观以及版面的布局和外观显示样式

CSS最大价值：有HTML专注去做结构呈现，样式交给CSS，即结构（HTML）与样式（CSS）相分离

1.3CSS语法规范

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>01-体验CSS语法规范</title><style>/* 选择器{样式} *//* 给谁改样式{改什么样式} */p {color:red;font-size: 12px;}</style>
</head>
<body><p>有点意思</p>
</body>
</html>

2.CSS基础选择器

2.1选择器的作用

选择器就是根据不同需求把不同的标签选出来，简单来说，就是选择标签用的

2.2选择器的分类

基础选择器和复合选择器

基础选择器是由单个选择器组成的
基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器

2.3标签选择器

标签选择器是指用HTML标签名作为选择器，按标签名分类，为页面中某一类标签指定统一的CSS样式

标签名 {属性1：属性值1；属性2：属性值2；...
}

标签选择器可以把某一类标签全部选择出来，比如所有的div标签和所有的span标签

优点：能快速为页面中的同类型标签统一设置样式

缺点：不能设计差异化样式，只能选择全部的当前标签

2.4类选择器

如果想差异化选择不同的标签，单独选择一个或几个标签，可以使用类选择器

.类名 {属性1：属性值1;...
}

多类名

可以给一个标签指定多个类名

多类名使用方式

<div class="red font20">亚瑟</div>

使用场景

可以把一些标签元素相同的样式放到一个类里面

这些标签都可以调用这个公共的类，然后再调用自己独有的类

从而节省CSS代码，统一修改也非常方便

在后期布局比较复杂的情况下，还是较多使用的

2.5id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式

HTML元素以id属性来设置id选择器，CSS中id选择器以"#"来定义

#id名 {属性1: 属性值1；...
}

id选择器和类选择器的区别

类选择器好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用
id选择器好比人的身份证号码，唯一的
两者最大的区别在于使用次数上
类选择器在修改格式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用

2.6通配符选择器

在CSS中，通配符选择器使用"*"定义，他表示选取页面所有元素

* {属性1: 属性值1；...
}

通配符选择器不需要调用，自动就给所有的元素使用样式
在特殊情况下才使用

2.7基础选择器总结

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有的标签	不能差异化选择	较多	`p {color:red;}`
类选择器	可以选1个或多个标签	可以根据需求选择	非常多	`.nav{color:red;}`
id选择器	一次只能选择一个标签	ID属性只能出现一次	一般的js搭配使用	`#nav{color:red;}`
通配符选择器	选择所有标签	选择的太多，有的部分不需要	选择的太多，有部分不需要	`*{color:red;}`

3.CSS字体属性

3.1字体系列

CSS使用font-family属性定义文本的字体系列

p {font-family:"微软雅黑";}
div{font-family:Arial,"Microsoft Yahei","微软雅黑";}

各个字体之间必须使用英文状态下的逗号隔开
一般情况下，如果有空格隔开的多个单词组成的字体，加引号
尽量使用系统默认自带字体，保证在任何用户的当浏览器中都能正确显示
最常见的几个字体：body{font-family:'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';}

3.2字体大小

font-size

p {font-size: 20px;
}

可以给body指定整个页面的字体大小，不会改变标题大小
默认是16px

3.3字体粗细

fint-weight

p {font-weight: bold;
}

属性值	描述
normal	默认（400）
bold	加粗（700）
100-900	数字后不跟单位

3.4文字样式

font-style

p {font-style: normal;
}

属性值	作用
normal	默认值
italic	斜体

3.5字体复合属性

字体属性可以把文字样式综合来写，这样可以节约代码

body {font: font-style font-weight font-size/line-height font-family;
}

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
不需要设置的属性可以省略，但必须保留font-size font-family属性，否则不起作用

3.6字体属性总结

属性	表示	注意点
fomt-size	字号	单位px一定要带
font-family	字体	实际工作中按团队约定来写字体
font-weight	粗细	bold 700 normal 400
font-style	样式	倾斜italic
font	连写	1.有顺序 2.字号和字体必须出现

4.CSS文本属性

定义文本的外观，比如文本颜色、对齐文本、装饰文本、文本缩进、行间距等

4.1文本颜色

div {color: red;
}

表示	属性值
预定义颜色值	red,green,blue
十六进制	#FF0000,#FF6600
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

4.2对齐文本

text-align属性用于设置元素内文本内容的水平对齐方式

div {text-align: center;
}

4.3装饰文本

text-decoration属性规定添加到文本装饰。可以给文本添加下划线、删除线、上划线等

div {text-decoration: underline;
}

属性值	描述
none	默认
underline	下划线
overline	上划线
line-through	删除线

4.4文本缩进

text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进

div {text-indent: 10px;
}

em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小

p {text-indent: 2em;
}

4.5行间距

line-height属性用于设置行间的距离

p {line-height: 26px;
}

4.6文本属性总结

属性	表示	注意点
color	颜色	通常用16进制
text-align	对齐	设置文字水平对齐方式
text-decoration	装饰	记住添加下划线和取消下划线
text-indent	缩进	通常用于首行缩进2个字的距离
line-height	行高	控制行与行之间的距离

5.CSS引入方式

5.1CSS的三种样式表

按照CSS样式书写的位置，CSS样式表可以分为三大类：

行内样式表（行内式）
内部样式表（嵌入式）
外部样式表（链接式）

5.2内部样式表

内部样式表是写到HTML页面内部，时将所有的CSS代码抽取出来，单独放到<style>标签中

<style>标签理论上可以放到HTML文档的任何地方，但一般会放到文档的<head>标签中
通过此种方式，可以方便控制整个页面中的元素样式设置
代码结构清晰，但是没有实现结构与样式完全分离
使用内部样式表设定CSS，通常也被称为嵌入式引入，这种方式是我们练习时常用的方式

5.3行内样式表

行内样式表是在元素标签内部的<style>属性中设定CSS样式，适合于修改简单的样式

<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>

并没有体现结构与样式相分离的思想，不推荐大量使用

5.4外部样式表

实际开发都是外部样式表，适用于样式比较多的情况，核心是：样式单独写到CSS文件中，之后把CSS文件引入大HTML页面中使用

引入外部样式表分两步：

新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件中
在HTML页面中，使用<link>标签引入这个文件

<link rel="stylesheet" href="CSS文件路径">

5.5CSS引入方式总结

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	结构样式混写	较少	控制一个标签
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面
外部样式表	完全实现结构和样式相分离	需要引入	最多	控制多个页面

6.Chrome调试工具

Chrome浏览器提供了一个非常好用的调试工具，可以用来调试我们的HTML和CSS样式

F12

CSS（简介、基础选择器、字体属性、文本属性、引入方式）相关推荐

普歌-赤道团队:前端基础CSS-Fonts(字体)与文本属性要点及解析
css-Fonts字体属性与文本属性系列要点 css-fonts字体属性及文本属性一.字体属性 1.1 字体系列 1.2 字体大小 1.3 字体粗细 1.4 文字样式 1.5 字体复合属性 1.6 ...
CSS的基础选择器、字体属性、文本属性和引入方式
目录一.css的语法规范二.css的基础选择器 (一)基础选择器总结 (二)标签选择器 (三)类选择器 (四)id选择器 (五)通配符选择器三.CSS字体属性 (一)字体属性总结 (二)font ...
Web学习第四天——CSS简介、选择器，常用（文本、字体、列表、背景、超链接）样式
Web学习第四天--CSS简介.选择器,常用(文本.字体.列表.背景.超链接)样式一.CSS简介 (一).什么是CSS? (二).CSS能够干什么? (三).CSS语法结构 (四).CSS的使用方式 ...
CSS基础之字体、文本的基础设置
CSS基础之字体.文本的基础设置一.font字体常用属性: 1.文字大小:font-size,单位px一定要加,默认16号. 2.文字粗细:font-weight,取值范围为100-900,属性取值 ...
[css] 举例说明跟字体相关的属性有哪些
[css] 举例说明跟字体相关的属性有哪些 font-size:字体大小 font-weight:字体粗细 font-family:字体类型 color:字体颜色等等个人简介我是歌谣,欢迎和大家 ...
CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表
前言:本篇文章为 CSS 基础系列笔记第一篇,参考黑马程序员pink老师前端入门教程如有侵权联系删除,如有问题欢迎指出. 其他CSS基础相关文章: CSS基础「二」复合选择器 / 元素显示模式 / ...
CSS3基础(基础认知,选择器,字体属性,文本属性,CSS 的三种引入方式)
CSS3基础 1. 基础认知 1.1 CSS 简介 CSS 的使用场景是什么? 美化网页,布局页面 CSS 的中文名称是什么? 层叠/级联样式表(Cascading Style Sheets) CSS ...
前端笔记（3）css，选择器，文字文本属性，外观属性
CSS样式表(1) (1)css概念引入css的三种方法行内式(内联样式) 内部样式表(内嵌样式表) 外部样式表(外链式) (2)css选择器 css基础选择器标签选择器类选择器 id选择器 ...
【CSS基础】基础选择器+字体文本相关样式
目录 1.CSS基础选择器 1.1 标签选择器 1.2 类选择器 1.3 id选择器 1.4 通配符选择器 1.5 基础选择器总结 2.CSS字体样式 2.1 字体大小 2.2 字体粗细 2.3 字体 ...
CSS基础(基础选择器+字体文本相关样式)
文章目录目录前言一.css的语法规则二.css引入方式三.基础选择器四.字体和文本样式字体样式文本样式 line-height行高前言层叠样式表(Cascading Style S ...

CSS（简介、基础选择器、字体属性、文本属性、引入方式）