本文最后更新于263 天前，其中的信息可能已经过时，如有错误请发送邮件到619701626@qq.com

css元素放在style元素中，放在head元素末尾

<html>
    <head>
        xxxxxx
        xxxxxx
        <title></title>
        <style></style>
    </head>
    <body></body>
</html>

CSS有三种插入样式表的方法

分别是内联css、内部css和外部css

内联css

用来为一个单一的元素应用一个独特的样式

<body>
    <h1 style="color: blue; text-align: center;">xxxxx</h1>

    <p style="color: red;">
        xxxxx
    </p>
</body>

内部css

内部样式表一般定义在head元素中，通过style元素来定义，页面的样式均需要添加在style元素内部

这样样式声明到了html元素的外部

css选择器：用来寻找或选择你想要定义的HTML元素的

元素选择器

根据元素名称来选择HTML元素的

例如：

background-color：给页面的整体添加背景颜色

margin-left 用于定义h1标题元素位于父容器左侧的距离

弊端一：内部样式表只能用于一个界面
弊端二：需要不停上下滚动屏幕编辑，非常麻烦

解决方法：使用外部css，也叫外部样式
通过改变一个文件来改变整个网站的外观

外部css

外部样式，将css代码放在一个独立的、以.css为后缀名的文件中

使html页面结构文件和css样式文件完全独立开来

每个html页面都必须在head元素里添加link元素

在<link>元素里定义rel属性，值为stylesheet，表示关联一个样式表

href 用于设置一个对外部样式表文件的引用，值为.css文件的路径

css样式的优先级

选择器类型

css简单选择器

简单选择器：根据名称、ID、类别来选择元素

css选择器是用来“寻找”或“选择”想要定义样式的HTML元素

元素选择器： 根据元素名称来选择HTML元素的

<style>
    p{
        text-align:center;         /段落p的内容均居中
    }
</style>

id选择器：使用一个HTML元素的id属性来选择一个特定的元素

id是唯一的

要选择一个具有特定id的元素，可以写一个#然后是该字符的id，比如#para2

id不能以数字开头

<style>
    #para2 {       id不能以数字开头
        text-align:center;
        font-style(声明字体风格):italic;      倾斜
    }
</style>
<body>
    <p id="para2">     id不能以数字开头
        id选择器
    </p>
</body>

类选择器：可以选择具有特定class属性的HTML元素

<head>
    <style>
        .italic {
            font-style:italic;
            text-decoration（声明文本修饰样式）: underline;          下划线 
        }
    </style>
</head>
<body>
    <h1 class="italic">
        类选择器
    </h1>
    <p class="italic">
        类选择器
    </p>
</body>

如果同时需要两个类选择器，不用再定义一个新的class ，可以直接在上一个后面加空格再说明

例如： class="italic deco xxxxx xxxxx"

另外一种用法：p.italic {text-align; }

这样类选择器选择的元素就更加具体

只有p的样式被修改，h1里的样式不会改变

class的命名不能以数字开头

分组选择器 实现方法为将多个选择器哟个逗号分隔，如：h1,p{}

通用选择器： 选择页面上的所有HTML元素，方法：(*)

CSS组合选择器

通过一些特殊符号将多个简单选择器连接起来，就构成了组合选择器

再CSS种，组合选择器有4种：
1、后代选择器，通过空格连接
2、子选择器，通过大于号（>）连接
3、相邻的兄弟选择器，通过+号连接
4、一般兄弟选择器，通过~连接

后代选择器： 匹配作为指定元素后代的所有元素

div p {
    background-color: yellow     选择了<div>元素内的所有<p>元素
}

子选择器： 只能选择作为某元素的子元素，不能选择到孙辈的元素

div>p {
    background-color: yellow     选择了<div>元素内的所有<p>元素
}

CSS伪类选择器

属于类选择器中的一种，根据特定状态选取元素

基本语法：

selector（其他基础选择器）:鼠标行为{
    color=red;
}

常用的伪类选择器有四个：
1、鼠标点击前使用:link连接代表鼠标没有操作元素时元素的默认样式
2、鼠标点击后使用:visited连接代表鼠标点击并离开元素之后的样式
3、鼠标悬停时使用:hover连接代表鼠标悬停或者是划过元素时元素的样式
4、鼠标点击时使用:active连接代表鼠标点击元素瞬间，元素现实的额样式

伪类选择器也可以应用在其他元素上，但是只能实现active激活瞬间和hover鼠标悬停效果

<style>
            div {
            width: 200px;       /定义div块的宽度
            height: 200px;      /定义div块的高度
            background-color: skyblue;      /定义div块的背景颜色
        }

        div:hover {                 /悬停到div块时的样式
            background-color: red;      /定义div块的背景颜色
        }

        div:active {                /点击div块时的样式
            width: 100px;           /定义点击div块时的宽度
            height: 100px;          /定义点击div块时的高度
        }
</style>

伪元素选择器

通过伪元素选择器，可以设置元素指定部分的样式。主要用来设置元素内文本的首字母，首行的样式、或是在元素内容之前或者之后插入其他内容

基本语法为：

<style>
    selector（目标元素）::pseudo-element（向目标元素内，添加伪元素，并对伪元素的内容进行修饰） {
        color: red;
        font-size: 30px;
    }
</style>

伪元素选择器有五种：
1、::first-letter 用来实现向文本的首个字符，添加特殊样式
2、::first-line 用来实现向文本的首行添加特殊样式
3、::before 用来实现在元素内容之前插入内容
4、::after 用来实现在元素内容之后插入内容
5、::selection 用来更改选中文本的样式

在使用伪元素选择器向前向后插入内容时，必须配合content才能实现效果

selection伪元素选择器只支持一下几个样式声明：color(文本颜色)，background(背景)，cursor(鼠标样式)，outline(描边效果)

CSS属性选择器

根据属性或者属性值来查找元素

基本语法：

Element（元素）[attribute（属性）]       查找带有该属性的元素，然后添加样式声明
Element[attribute="value"]      实现快速精准查找元素

例如：
a[target] {
    background-color: yellow 含义：查找带有target属性的a元素，并且为a元素添加了背景颜色为黄色的样式声明
}

CSS选择器的四种属性：
1、[attribute]:来查找HTML结构中，带有attribute属性的所有元素
2、[attribute=”value”]:来查找HTML结构中，带有attribute属性并且属性值为value的元素
3、[attribute~=”value”]:来查找HTML结构中，带有attribute属性并且在多个属性值中包含value的元素
4、[attribute|=”value”]:来查找HTML结构中带有attribute属性，并且属性值以value或者是value-开头的元素。

该属性的值只能有一个

CSS文本颜色和大小写转化

<h1>xxxx</h1>
<p>
    xxxxxxxxxxxxxxx
</p>

body {
    color: red;     一个页面的默认文本颜色是在body选择器中定义的
}

CSS强制转换文本中，单词和字母的大写和小写
使用 text-transfrom属性

p.transform {
    text-transform:属性
}

有三个属性：这些属性主要用来设置英文的文本，对中文无效
uppercase：文本被转换为大写
lower： 文本被转换为小写
capitalize： 每个单词的首字母被转换为大写

CSS文本对齐和文本间距

文本对齐

水平对齐：

text-align: left（左对齐）、center（居中对齐）、right（右对齐）、justify（两端对齐）

垂直对齐：

vertical-align baseline（基线对齐）、text-top（文本顶部对齐）、text-bottom（文本底部）、sub（下角标对齐）、super（上角标对齐）

baselin 是基于四线三格中间行对齐的，对于英文文本才有意义

文本间距

text-indent 属性实现

使用长度值或者百分比来设置文本缩进，长度值可以使用绝对单位(50px)和相对单位(2em，就是两空格)

字符宽度如果是中文方块字，也可以称之为字体大小，通过font-size属性设置

百分比缩进是根据父元素的宽度计算得到的

litte-spacing 属性用于指定中文文字或者英文字母之间的空隙，也就是字间距

line-height 属性用于指定行与行之间的高度，也就是行高

三个常用属性值：注意是属性值
normal: 也是默认值，浏览器会根据字符大小自动设置一个行高。
一个数字:比如 1.5，此数字与当前的字符大小相乘计算得到。
绝对值: 比如 20px,-5px，设置固定的行间距。

word-spacing 属性用于指定文本中单词的间距，只对英文有效
有一个常用的属性值nowrap 不管包含文本的元素宽度是多少，文本都不会换行.直到遇见br标签为止。

CSS文本装饰

下划线，删除线之类的颜色粗细

用text-decoration-line 属性实现

具体的值有三个：
overline:在文本上方添加（上划线）
Line-through:在文本中间添加线条修饰（删除线）
underline:在文本下方添加线条修饰（下划线）

若要同时设置多个值，用空格隔开

h1 {
    text-decoration-line: overline line-through underline;
}

为文本设置装饰线的颜色通过text-decoration-color属性实现

为装饰线指定风格通过text-decoration-style属性实现
有五个属性值：
solid: 实线
double: 双实线
dotted: 圆点线
dashed: 虚线
wavy: 波浪线

通过text-decoration-thickness属性为线条设置厚度（线条的粗细）
有三个值：
auto:默认值
px: 像素大小，是一个绝对值
%: 是一个相对值

text-decoration是一个简写的属性

h4 {
    text-decoration: underline(text-decoration-line) red(text-decoration-color) double(text-decoration-style) 5px(text-decoration-thickness);
    四个顺序并没有要求，但是"text-decoration-line"必须设置
}

链接属性默认有下划线，如果要去除可以如下：

a {
    text-decoration: none;
}

CSS字体和自号

字体

使用font-family属性指定一个文本的字体,属性值为字体名称

英文字体分为五类：
第一类Serif有衬线字体
第二类Sans-serif无衬线字体
第三类Monospace单空格字体
第四类Cursive草书字体
第五类Fantasy幻想字体

中文通用字体有两个：微软雅黑、苹方简，分别应用于Windows系统和Mac系统

字号

通过font-size属性设定文本的大小，属性值可以为绝对大小(px)和相对大小(em/%)

相对大小em：会根据继承下来的父元素尺寸计算得到，如果元素嵌套的层数太多，计算起来就会太麻烦

所以可以使用rem这个相对单位，相对于根元素(html)

CSS字体风格和样式简写

font-style 指定字体样式
normal:文本正常显示
italic:文本斜体显示

font-weight属性指定了一个字体的粗细
属性值设置有两种方式:名称和数值

名称有四个：

lighter:细体
normal:正常字体
bold:加粗字体
bolder:更粗字体

数值则为：100,200,300…..900 值越大，文本越粗

名称和数值对应关系：

100——lighter
400——normal
700——bold
900——bolder

font-variant属性指定了文本是否应以小型大写字符显示

有两个值：normal和small-caps(小型大写字母)，只对英文有效
注意：如果文本本身写的是大写字母，则不生效

可以用font简写代码

a{
    font: oblique 100 small-caps 30px/30px 华文仿宋

    其中   font-size 和 font-family 这两个值是必须的
}

CSS谷歌字体和Icon图标

在应用font-family属性声明样式字体时，除了使用HTML中的标准字体外，还可以使用谷歌字体

要使用谷歌字体，只要在head元素里添加一个特殊的样式表链接

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia（字体名称）">
</head>

body {
    font-family: "Sofia", serif;
}

若要使用多个谷歌字体，只需用管道字符竖线(|)分隔字体名称

谷歌字体还能随心所欲的添加字体样式，在链接的字体后面添加& 定义effect=fire
然后给p定义class="font-effect-fire"

要引用多个样式，同样可以用管道字符竖线(|)

图标库网站，fontawesome.com

注册好之后，点击”Copy Kit Code”按钮
在 link 下面有键粘贴

在页面里三个段落的开头，添加3个i元素
全部定义class属性，可以分别设置值为
fas fa-cloud,fas fa-heart,fas fa-car
然后每个段落的开头就会出现一个小图标
更多的图标可以访问地址https://fontawesome.com

图标可以用style属性设置样式，比如color:red