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

原创已于 2022-08-18 10:22:52 修改 · 542 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3

于 2022-08-15 18:06:01 首次发布

前端专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了CSS的基础知识，包括CSS的作用、语法规范、基础选择器的使用，如标签选择器、类选择器、id选择器和通配符选择器。此外，还讲解了字体属性和文本属性，如字体大小、颜色、对齐和装饰，以及CSS的引入方式，如内部样式表、行内样式表和外部样式表。最后提到了Chrome浏览器的调试工具在CSS开发中的重要性。

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引入方式总结

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