黄阿信的个人博客

前言

在网页设计中，往往会利用到HTML与CSS的结合，HTML是实现大致框架的，而CSS则是为HTML框架设置想要设定的样式属性，两者相结合可以完整的生成出相应的静态网页。简单说， HTML进行布局，CSS进行页面的美化，即HTML指明有什么，CSS指明怎么放。

创建CSS方法

使用元素内嵌样式表

<a href="https://yalexin.gitee.io/">HTML原生超链接</a>
<a href="https://yalexin.gitee.io/" style="font-size: 40px;">CSS修饰超链接</a>
<a href="https://yalexin.gitee.io/" style="font-size: 40px; color: #ff0000;">有颜色的超链接</a>

使用文档内嵌样式表

<!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">
    <style type="text/css">
        a { /* 所有的a标签都是这个样式 */
            color: coral;
        }
    </style>
    <title>css1</title>
</head>

<body>
    <a href="https://yalexin.gitee.io/">文档内嵌CSS超链接</a>
</body>

</html>

注意上面head下面的style标签，它是内嵌到了文档中，它定义了所有a标签的样式

使用外部样式表
- 新建一个a.css文件
```
a {
    color: rgb(37, 0, 139);
    font-size: 50px;
}
```
- 在HTML文件中引入上文的a.css
```
<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">
    <link rel="stylesheet" type="text/css" href="a.css">
    <title>css1</title>
</head>
```
这三种样式是有优先级的，记住他们的优先级：元素内联式 > 文档内嵌式 > 外部式，但是文档内嵌式>外部式有一个前提：文档内嵌式css样式的位置一定在外部式的后面。其实总结来说，就是--就近原则（离被设置元素越近优先级别越高）。但注意上面所总结的优先级是有一个前提：元素内联式、文档内嵌式、外部式是在的相同权值的情况下。

CSS基本选择器

选择所有元素
```
style 元素:*{}
```

根据类型选择元素

style 元素:a{}
body元素:<a>博客链接</a>

根据类选择元素

style 元素:.class_test{}
body元素:<a class = "class_test">博客链接</a>

根据ID选择元素

style 元素:#id_test{}
body元素:<a id = "id_test">博客链接</a>

根据属性选择元素

style 元素:[href]{}
body元素:<a href = "https://yalexin.gitee.io/">博客链接</a>

:选择器动作

style 元素:a:hover{}
body元素:<a>博客链接</a>

**说明:**选择器仅出现在文档内嵌或者外部样式中。

ID选择元素与类选择元素：

共同点：都可以作为选择器，改变属性外面的元素的样式。
不同点：ID选择器又叫做唯一选择器，ID是元素的一个唯一标识，即主键。即在网页中次ID属性值确保只出现一次，不能重复出现。类属性可以多次使用，用户根据需要，将部分具有某种特征的元素集合归为一类，可将该类元素表现出同一效果，比如说id=apple1的苹果、id=apple2的苹果，id=banana1的香蕉、id=banana2的香蕉，它们都同属于水果类，可以根据需要设置它们的class=fruit。

控制背景

.class_test {
    background-attachment:local;/* 固定方式 */
    background-size: auto;
    background-repeat: no-repeat;/* 重复方式 */
    background-color: brown;
    background-image: url(hello.png);
}

CSS 语法一

前言

创建CSS方法

CSS基本选择器

控制背景