为网页添加样式

一、术语解释

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

CSS规则 = 选择器 + 声明块

1.1选择器

ID选择器：选中的是对应id值的元素。

 <style>
     #test{
         color: aquamarine;
     }
 </style>

 <p>Lorem ipsum dolor sit.</p>
 <p id="test">Lorem ipsum dolor sit amet.</p>
 <p>Lorem, ipsum dolor.</p>
 <p>Lorem ipsum dolor sit amet consectetur.</p>

元素选择器
元素标签符号 + {} 在大括号里面填写CSS代码,这样会使所有的元素选中。
```
p{
 color: aquamarine;
}
```
类选择器
选中的是与class的属性有关。
用法： . + class的属性值

1.2声明块

出现在大括号中

声明块中包含很多声明(属性),每一个声明(属性)表达了某一方面的样式。

二、CSS代码书写的位置

内部样式表:直接书写在元素的style元素中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .red{
            color: red;
            font-size: 2em;
        }
    </style>

</head>
<body>
    <p>Lorem ipsum dolor sit.</p>
    <p class="red">Lorem ipsum dolor sit amet.</p>
    <p>Lorem, ipsum dolor.</p>
    <p>Lorem ipsum dolor sit amet consectetur.</p>
</body>
</html>

内联样式表,元素样式表
直接书写在元素的style属性中

<h1 style="color:red;">
    一级标题
</h1>

外部样式表
将样式书写到独立的css文件中。
```
<link rel="stylesheet" href="./css/index.css">
```
style表示的是样式表，href指的是css文件的路径地址。
使用link标签来引用外部css文件

1). 外部样式可以解决多页面样式重复的问题
2). 有利于浏览器得到缓存，从提高页面响应速度。
3). 有利于代码分离(HTML和CSS) ,更容易阅读和维护。

常见的样式声明

color

元素内部的文字颜色

预设值:定义好的单词

三原*值**:光学三原色(红、绿、蓝),每个颜色可以使用0-255之间的数字来表达

rgb表示法：
rgb(0,255,0)其中这三个值分别都代表红绿蓝的颜色深度，值越大，颜色越深。
hex(16进制) 表示法：
# 00(红) 8c(绿) 8c(蓝) 前两位表示的是红色，中间的两位表示的是绿色，最后两位表示的是蓝色. 因为两位的16进制的数字刚好等于十进制255.

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

<head>
    <title>Document</title>
    <style>
        .red{
            color: red;
            font-size: 2em;
        }
    </style>
</head>
<body>
    <h1 class="red">
        现在开始添加样式
    </h1>
    <p>Lorem ipsum dolor sit.</p>
    <p class="red">Lorem ipsum dolor sit amet.</p>
    <p>Lorem, ipsum dolor.</p>
    <p>Lorem ipsum dolor sit amet consectetur.</p>
</body>
</html>

background-color

元素背景颜色

font-size

元素内部文字的尺寸大小

1) px:像素,绝对单位,简单的理解为文字的高度占多少个像素
2) em:相对单位,相对于父元素的字体大小,假如父元素为10px,那么子元素2em就是20px;每一个元素必须有字体大小,如果没有声明,则直接使用父元素的字体大小,如果没有父元素(html),则会使用基准字号.

user agent, UA , 用户***(浏览器)

font-weight

文字粗细程度,可以取值数字,可以取值为预设值
默认值为noraml

strong、em元素,默认加粗

<strong>表示重要的、不能忽略的内容</strong>
<em>表示强调的内容</em>

font-family

文字类型
必须用户计算机中存在的字体才会有效。
使用多个字体,以匹配不同的环境

sans-serif,非衬线字体,在字体后面加入sans-serif是为了前面的字体都不识别不了的情况下，需要系统自动设置本计算机上的字体。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            font-family:consolas,翩翩体-简,微软雅黑,Arial,sans-serif
        }
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor sit amet.
    </div>
    <h1>
        这里是一个一级标题
    </h1>
</body>
</html>

font-style

字体样式,通常用它设置斜体

i元素,em元素,默认样式,是倾斜字体,实际使用中,通常用它表示一个图标(icon)
normal 默认值。浏览器显示一个标准的字体样式。
italic 浏览器会显示一个斜体的字体样式。
oblique 浏览器会显示一个倾斜的字体样式。
inherit 规定应该从父元素继承字体样式。

text-decoration

文本修饰,给文本加线、

none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。
inherit 规定应该从父元素继承 text-decoration 属性的值。

del元素：错误的内容

text-indent

text-indent 属性规定文本块中首行文本的缩进。
注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。

length 定义固定的缩进。默认值：0。
% 定义基于父元素宽度的百分比的缩进。
inherit 规定应该从父元素继承 text-indent 属性的值。

line-height

line-height 属性设置行间的距离（行高）。
注释：不允许使用负值。

设置行高为容器的高度,可以让单行文本垂直居中

<style>
    p{
        line-height:1.5;
    }
</style>

normal 默认。设置合理的行间距。
number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length 设置固定的行间距。
% 基于当前字体尺寸的百分比行间距。
inherit 规定应该从父元素继承 line-height 属性的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        p{
            background:#008c8c;
            color:#fff;
            height:50px;
            line-height:50px;
        }
    </style>
</head>
<body>
    <p>
        Lorem ipsum dolor sit amet.
    </p>
</body>
</html>

width

width 属性设置元素的宽度。

auto 默认值。浏览器可计算出实际的宽度。
length 使用 px、cm 等单位定义宽度。
% 定义基于包含块（父元素）宽度的百分比宽度。
inherit 规定应该从父元素继承 width 属性的值。

height

<style>
p
  {
  height:100px;
  width:100px;
  }
</style>

auto 默认。浏览器会计算出实际的高度。
length 使用 px、cm 等单位定义高度。
% 基于包含它的块级对象的百分比高度。
inherit 规定应该从父元素继承 height 属性的值。

letter-space

letter-spacing 属性增加或减少字符间的空白（字符间距）。
该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔。因此，normal 就相当于值为 0。
注释：允许使用负值，这会让字母之间挤得更紧。