为网页添加样式

术语解释

CSS规则 = 选择器 + 声明块

h1{
    color:red;
    background-color:lightblue;
    text-align: center;
}

选择器

选择器：选中元素

ID选择器：选中的是对应id值的元素
元素选择器
类选择器——用 . 开头，书写对应的class名字 ```css

红色一级标题

比如这个段落是红色

<p class="big">
    比如这个段落是大的字体
    并且文字居中
</p>


<a name="3c73ca48"></a>
### 声明块
出现在大括号中<br />声明块中包含很多声明（属性），每一个声明（属性）表达了某一方面的样式。
<a name="c49e38c2"></a>
## CSS代码书写位置
1. 内部样式表：书写在style元素中
1. 内联样式表，元素样式表：直接书写在元素的style属性中
1. 外部样式表[推荐]：将样式书写到独立的css文件中。
1). 外部样式可以解决多页面样式重复的问题<br />2). 有利于浏览器缓存，从而提高页面响应速度<br />3). 有利于代码分离（HTML和CSS），更容易阅读和维护<br />4). 在<head></head>文档头内添加<link>标签来关联样式
```html
<link rel="stylesheet" href="test.css">

2021-4-4[CSS基础-1] - 图1

整个结构称为 规则集（通常简称“规则”），各部分释义如下：

选择器（Selector）
HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 p 元素）。要给不同元素添加样式只需要更改选择器就行了。

声明（Declaration）
一个单独的规则，如 color: red; 用来指定添加样式元素的属性。

属性（Properties）
改变 HTML 元素样式的途径。（本例中 color 就是 <p> 元素的属性。）CSS 中，由编写人员决定修改哪个属性以改变规则。

属性的值（Property value）
在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）。

注意其他重要的语法：

每个规则集（除了选择器的部分）都应该包含在成对的大括号里（{}）。
在每个声明里要用冒号（:）将属性与属性值分隔开。
在每个规则集里要用分号（;）将各个声明分隔开。

如果要同时修改多个属性，只需要将它们用分号隔开，就像这样：

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

多元素选择

也可以选择多种类型的元素并为它们添加一组相同的样式。将不同的选择器用逗号分开。例如：

p, li, h1 {
  color: red;
}

选择器有许多不同的类型。上面只介绍了元素选择器，用来选择 HTML 文档中给定的元素。但是选择操作可以更加具体。下面是一些常用的选择器类型：

选择器名称	选择的内容	示例
元素选择器（也称作标签或类型选择器）	所有指定(该)类型的 HTML 元素	`p` 选择 `<p>`
ID 选择器	具有特定 ID 的元素（单一 HTML 页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID）	`#my-id` 选择 `<p id="my-id">` 或 `<a id="my-id">`
类选择器	具有特定类的元素（单一页面中，一个类可以有多个实例）	`.my-class` 选择 `<p class="my-class">` 和 `<a class="my-class">`
属性选择器	拥有特定属性的元素	`img[src]` 选择 `<img src="myimage.png">` 而不是 `<img>`
伪（Pseudo）类选择器	特定状态下的特定元素（比如鼠标指针悬停）	`a:hover` 仅在鼠标指针悬停在链接上时选择 `<a>`。

常见样式声明

1. color 元素内部的文字颜色

预设值：定义好的单词
三原色，色值：光学三原色（红、绿、蓝），每个颜色可以使用0-255之间的数字来表达，色值。

rgb表示法：rgb(0, 255, 0)
    例如：马尔斯绿：0,140,140
hex（16进制）表示法：#红绿蓝
    例如：马尔斯绿：#008c8c

淘宝红：	#ff4400, #f40
黑色：	#000000，#000
白色：	#ffffff, #fff
红：	#ff0000, #f00
绿：	#00ff00, #0f0
蓝：	#0000ff, #00f
紫：	#f0f
青：	#0ff
黄：	#ff0
灰色：	#ccc

2. background-color 元素背景颜色

3. font-size 元素内部文字的尺寸大小

1）px：像素，绝对单位，简单的理解为文字的高度占多少个像素
2）em：相对单位，相对于父元素的字体大小
每个元素必须有字体大小，
如果没有声明，则直接使用父元素的字体大小，
如果没有父元素（html），则使用基准字号。

user agent，UA，用户代理（浏览器）

4. font-weight 文字粗细程度，可以取值数字，可以取值为预设值

strong，默认加粗。

5. font-family 文字类型

必须用户计算机中存在的字体才会有效。
使用多个字体，以匹配不同环境
sans-serif，非衬线字体

6. font-style 字体样式，通常用它设置斜体

i元素，em元素，默认样式，是倾斜字体; 实际使用中，通常用它表示一个图标（icon）

7. text-decoration 文本修饰，给文本加线。

a元素 del元素：错误的内容 s元素：过期的内容

8. text-indent 首行文本缩进

9. line-height

每行文本的高度，该值越大，每行文本的距离越大。
设置行高为容器的高度，可以让单行文本垂直居中
行高可以设置为纯数字，表示相对于当前元素的字体大小

Java 学习笔记

2021-4-4[CSS基础-1]