CSS学习-----CSS简介

什么是CSS，CSS是如何工作的?

CSS（层叠样式表）简单来说可以为HTML标记语言添加一些样式、布局等。

当浏览器显示文档时，它必须将文档的内容与其样式信息结合。它分两个阶段处理文档：

1. 浏览器将 HTML 和 CSS 转化成 DOM （文档对象模型）。DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。
2. 浏览器显示 DOM 的内容。

CSS的基本语法是怎样的?

一个CSS声明为： 属性：属性值
例如：background-color: red;

CSS选择器是什么概念，简单选择器和属性选择器是什么?

1. 在CSS中，选择器用于定位我们想要样式化的网页HTML元素。
2. 简单选择器：基于元素的类型（或者clsaa或id）直接匹配文档的一个或者多个元素：

• 元素选择器：此选择器只是一个选择器名和指定的HTML元素名的不区分大小写的匹配。例如：HTML：

<p>What color  do you like?</p>
<div>I like blue</div>

CSS:

p {
	color: red;
}

div {
   color: blue;
}

• 类选择器：类选择器由一个点“.”以及后面的类名组成。类名是在HTML class文档元素属性中没有空格的任何值。例如：HTML：

<p class="first">Hello</p>
<p class="second">World</p>

CSS:

.first {
	font-weight: bold;
}

.second {
	color: red;
}

• ID选择器：ID选择器是由一个哈希/磅符号(#)，后面跟着给定元素的ID名称组成的。任何元素都可以使用id属性设置唯一的ID名称。例如：HTML：

<p id="fitst">Hello</p>
<p id="second">World</p>

CSS:

#first {
	color: red;
}

#second {
	font-family: cursive;
}

3. 属性选择器：是一种特殊类型的选择器，它根据元素的属性和属性值来匹配元素。它们的通用语法由方括号([ ])组成，其中包含属性名称，后跟可选条件以匹配属性的值。属性选择器分为两类：

• 存在和值属性选择器
• 子串值属性选择器

文本样式都有哪些相关属性，对应哪些值?

字体样式：

1. 颜色color: red
2. 字体种类: font-family
3. 字体大小: font-size
4. 字体样式:font-style
   …

文字布局：

1. 文本对齐: text-align: left;right;center;justify;
2. 行高: line-hright
3. 字母和单词间距: letter-spacing;word-spacing
   …