CSS 简介

CSS简介

CSS 是层叠样式表的简称
有时我们也会称之为 CSS 样式表或级联样式表
CSS 也是一种标记语言
CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

CSS 语法规范

CSS 规则由两个主要的部分构成：选择器和一条或多条声明。
举例：

<head>
    <style>
        p {
            color: red;
            font-size: 12px;
        }
    </style>
</head>

注意：

选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式。
属性和属性值以 “键值对” 的形式出现。
属性和属性值之间用 : 分割。
结尾必须加 ;。

CSS 选择器

CSS 选择器的作用

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

选择器的分类

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

基础选择器

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

标签选择器

标签选择器是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中的某一类标签指定统一的 CSS样式。
基本语法：

标签名{
    属性1: 属性值1;
    属性2: 属性值2;
    属性3: 属性值3;
    ……
}

作用：
标签选择器可以把同一类标签的所有内容选中。

类选择器

如果想要差异化选择不同的标签，单独选一个或者几个标签，可以使用类选择器。
基本语法：

.类名{
    属性1: 属性值1;
    ……
}

结构要用 class 属性来调用 class 类的属性。例如：

(css 部分)
<style>
    .red{
        color: red;
    }
</style>

(html 部分)
<div class = 'red'>变红色</div>

注意：

不能使用标签名，只能自定义。
长名称或词组可以用中横线来为选择器命名。
不要使用纯数字或中文等命名。
多类名

多类名的使用方式：在类名之间打一个空格即可使用多类名。

id 选择器

id 选择器可以为标有特定的 id 的 HTML 元素指定特定的样式。
HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 以 "#" 来定义。
基本语法：

#id 名{
    属性1:属性值1;
    ……
}
……

注意：

id 选择器只允许被调用一次。
类选择器在修改样式中用的最多，id 选择器一般用于页面唯一的元素上，经常和 JavaScript 搭配使用。

通配符选择器

通配符选择器用 * 即可。

CSS 字体属性

字体系列

CSS 使用 font-family 属性定义文本的字体系列。
语法规范：

p{
    font-family: "微软雅黑";
}

字体粗细

CSS 使用 font-weight 属性定义字体粗细。

属性值	描述
normal	正常值（默认值）
bold	加粗
100-900	400（默认值）、700（加粗）

文字样式

CSS 使用 font-style 属性定义文字样式

属性值	描述
normal	正常值（默认值）
italic	倾斜

字体复合属性

格式：
font: font-style font-weight font-size/line-height font-family
注意：

以上格式有顺序，不允许前后调换。（分别是：文字样式（倾斜）、字体粗细、字体大小/行间距、字体）
不需要设置的属性可以省略，但是 font-size 和 font-family 不可省略。

CSS文本属性

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

文本颜色

color 属性用于定义文本颜色
举例：

div{
    color: red;
}

对齐文本

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

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

装饰文本

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

属性值	描述
none	默认。没有装饰线（最常用）
underline	下划线。链接 a 自带下划线（常用）
overline	上划线（几乎不用）
line-througe	删除线。（不常用）

文本缩进

text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。
em 是当前元素的一个文字大小。

行间距

line-height 属性用于定义行间的距离（行间距）。
行间距的上下间距 = 像素值 - 字体大小。

本文由小但创作
全文共：2627个字
采用知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载，均为作者原创，转载前请务必署名
最后编辑时间为: Jul 5, 2020 at 05:53 pm

本文写作于 1年前，文章内容可能已经与事实不符，如有疑问，请咨询作者。

CSS 入门基础（笔记）