（一）CSS 简介与基础选择器

咩野冬溪

已于 2022-06-05 17:09:33 修改

阅读量95

点赞数

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

于 2022-06-02 11:32:35 首次发布

本文链接：https://blog.csdn.net/weixin_57162892/article/details/125096937

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1. CSS 简介

1.1 HTML 的局限性

HTML 是网页的骨架，只关注内容的语义。例如<h1>表示大标题，<p>表示段落。

早期的时候，HTML 只能做一些简单的样式，网页非常丑，而且使 HTML 代码臃肿。

1.2 CSS-网页的美容师

CSS 是层叠样式表（Cascading Style Sheets）的简称。

CSS 也是一种标记语言。

CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。·

HTML 呈现结构，CSS 决定样式，结构与样式分离。

1.2 CSS 语法规范

CSS 规则由两个部分组成：选择器和一条或多条声明。

写在<head>里面，<title>后

1.3 CSS 代码风格

展开式
选择器，属性名，属性关键字全部小写
空格规范
声明最后带上；

2. CSS 基础选择器

2.1 选择器的作用

选择器就是根据不同需求把不同标签选择出来。

2.2 选择器分类

选择器分为基础选择器和复合选择器两大类。

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

2.3 标签选择器

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

语法

标签名 {

    属性1：属性值1;

    属性2：属性值2;

    属性3：属性值3;

}

优点标签选择器可以把某一标签全部选择出来，快速为同类型标签设置统一样式。

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

2.4 类选择器

差异化选择不同标签，单独选一个或者某个标签。

语法

使用 class 属性来调用 class 类，样式点定义，结构类调用，一个或多个，开发最常用。

类选择器用 . 号显示。

注意

类选择器用 . 标识，紧跟类名。
小写，使用 - 连接单词。
不要用纯数字、中文。
命名有意义。
命名规范：见附件（Web前端开发规范手册.doc）

2.4.1 类选择器-多类名

类名间用空格分开

<p class="class-name1 class-name2"></p>

2.5 id 选择器

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

HTML 元素以 id 属性来设置 id 选择器，用 # 来定义。

#id名 {

属性1: 属性值1;

...

}

样式 # 定义，结构 id 调用，别人切勿使用。

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

类选择器可以被多个元素调用。
id 选择器只能允许一个标签调用。
类选择器使用的较多，id 选择器用于唯一特性的标签。

2.6 通配符选择器

语法

* {

属性1: 属性值1;

...

}

用 * 定义通配符选择器，选取页面中所有标签。
不需要调用，自动给所有标签。
特殊情况使用

* {

margin: 0;

padding: 0;

}

2.7 基础选择器总结

基础选择器	作用	特点	使用情况	用法
标签选择器	选中所有相同标签	不能差异化选择	较多	p{color:red;}
类选择器	选出一个或多个标签	可以根据需求选择	较多	.nav {color: red;}
id 选择器	一次只能选出一个标签	一个 id 属性在页面中只能出现一次	一般配合 js 使用	#nav {color: red;}
通配符选择器	选择所有标签元素	选择的太多，有部分不需要	特殊情况使用	* {color: red; }

每个选择器都有自己的使用场景，都要掌握。
如果是修改样式，类选择器是使用最多的。

3. CSS 字体属性

3.1 字体系列

CSS 使用 font-family 属性定义文本字体系列。尽量使用默认字体，保证不同浏览器的兼容性。

选择 {

font-family: ‘微软雅黑’, Arial, Helvetica, sans-serif;}

设置多个字体的意思是,如果用户电脑未安装第一种字体，就执行第二个字体，以此类推。

3.2 字体大小

CSS 使用 font-size 属性定义字体大小。

body {

font-size: 16px;}

px 大小是我们网页常用单位
谷歌浏览器默认是 16px
可以给 body 指定整个页面文字大小

3.3 字体粗细

CSS 使用 font-weight 属性设置字体粗细

p {

font-weight: 700;}

实际开发中，更常用数字来表示加粗或变细。400为normal，700 为 bold。 |属性值|描述| |-|-| |normal|默认值| |bold|定义粗体| |100-900|400 等价于 normal，700 等价于 bold，无单位|

3.4 文字样式

CSS 使用 font-style 属性设置文本风格。

p { font-style: italic; }

属性值	描述
normal	正常显示
italic	斜体

注意：平常很少给字体加斜体，而是给斜体标签（em,i）给位不倾斜字体。

3.5 字体复合属性写法

将各种字体属性写在同一选择器下，节约代码。

规则

严格遵守顺序，且 font-sieze 和 font-family 必须有。

目标 {

font: font-style font-weight font-size/line-hight font-family;}

字形（样式），粗细，字号/行高，字体

(不能更换顺序，属性间以空格隔开，红字属性必写，其他可省略)

“ font: 20px '黑体'; ” ←这样写也可以

3.6 字体属性总结

字体属性	表示	注意
font-size	字号	单位是 px
font-family	字体	按照团队约定来写
font-weight	字体粗细	400=normal，700=bold
font-style	字体样式	italic，normal，常用 normal
font	属性连写	顺序不能变，字体和字号属性必须有

4. CSS 文本属性

CSS Text（文本）属性定义文本外观，比如颜色、对齐、装饰、缩进、行间距等。

4.1 文本颜色

color 属性定义文本颜色。

div {

color: red;

}

属性值

表示	属性值
预定义的颜色值	颜色英文（如red,green,pink）
十六进制	#FF1234，#29D794，#FFFAFA
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

实际开发中，最常用的是十六进制。

4.2 对齐文本

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

div {

text-align: center;}

属性值	解释
left	左对齐（默认）
right	右对齐
center	居中对齐

4.3 装饰文本

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

text-decoration: underline;

属性值	描述
none	默认，无装饰（最常用）
underline	下划线，a 标签自带（常用）
overline	上划线。（几乎不用）
line-through	删除线。（不常用）

4.4 文本缩进

text-indent定义段落首行缩进。

p {

text-indet: 5px;}

em 是一个相对单位，1em 就是一个字符所占大小。当 text-indent=2em，则恰好缩进两个文字。

4.5 行间距

line-height 设置行间的距离，行间距=文本高度+上间距+下间距

4.6 文本属性总结

属性	表示	注意
color	文本颜色	通常十六进制缩写
text-align	文本对齐
text-indent	文本缩进	记住 text-indent: 2em;
text-decoration	文本装饰	记住下划线和去除下划线
line-height	行高