网页开发基础–css基础

一、css语法规则

先上个简单的例子：

1
2
3
4
/* css语法规则 */
h1 {
    color: red;
}

第2到4行，定义了一个CSS。

CSS包含选择器、属性、属性值三个部分。

1.选择器

用于指定要为哪个HTML元素定义样式。

比如，上例的选择器h1，就表示为所有h1元素定义样式。

2.属性

是指我们给HTML元素设置的样式名称。比如，上例的color表示设置颜色。

3.属性值

用来控制某个属性的显示效果。比如，上例的red就是控制颜色显示出红色。

4.冒号

英文冒号:用于将属性与属性值分隔开。

5.分号

英文分号;放到属性值后，作为结束标志，是固定格式。

6.声明

属性和属性值的组合，可以看作一个声明。一条声明的格式为属性: 属性值;

7.大括号

大括号 { } 为固定格式，声明需要放在大括号内。

8.空格规范

为了代码清晰，建议：选择器与大括号之间，冒号与属性值之间均添加一个空格。

9.css注释

CSS 的注释格式为： /* */。

二、html引用css

1.内部样式表

是指将CSS放到 <style> 标签中，而<style>标签必须放在HTML的<head>标签内。例如：

1
2
3
4
5
6
7
8
9
<head>
    <meta charset="UTF-8">
    <style>
        /* 使用CSS，设置h3元素的颜色为red */
        h3 {
            color: red;     
        }
    </style>
</head>
1.1<style>标签

<style> 标签，必须放在<head>标签内。

<style> 标签类似于一个容器，里面包含着文档的样式信息，标签内部需要放入具体的CSS代码。

1.2css标签

CSS代码，必须放在 <style> 标签内，用于设置具体的样式。

2.外部样式表

在复杂应用中，外部样式表是最常见的引用CSS的方式。

是指将CSS样式代码复制到一个文本文件后，另存为 .css 文件。然后，我们通过HTML的<link>标签将这个样式文件应用到HTML中。例如：

1
2
3
4
5
6
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 使用<link>标签，引入路径为style.css的CSS文件 -->
    <link rel="stylesheet" href="style.css">
</head>

<link>标签的两个属性：

  • rel：定义当前文档与被连接文档的关系。这里的"stylesheet"，表示被连接文档是一个样式表文件。

  • href：定义所连接外部样式表文件的路径。

3.行内样式

行内样式，也叫内联样式，是在 HTML 元素标签的style属性中直接定义CSS样式。由于行内样式定义在标签内部，所以它只对所在的标签有效。

例如：

1
2
3
<body>
    <h3 style="color: red;">行内样式</h3>
</body>

行内样式，虽然可以很方便的为HTML元素设置CSS样式，但它的缺点也非常明显：

  1. 需要在每个HTML元素的标签中定义style属性，很不方便；
  2. 修改页面样式时需要对页面逐个修改；
  3. 过多的行内样式会导致HTML文档的体积增大。

所以，不推荐过多使用行内样式!

三、css选择器

1.标签选择器

是通过具体的标签名，找到页面所有同名的标签，来设置样式。例如：

1
2
3
4
5
6
7
8
9
10
11
12
<style>
        /* 使用标签选择器，设置p元素的颜色为blue */
        p {
            color: blue;     
        }
    </style>
</head>
<body>
    <h3>编程学习</h3>
    <p>数据分析</p>
    <p>SQL数据处理</p>
    <p>网络爬虫</p>

这里的p就是标签选择器，页面中所有的p元素，都被设置成了blue。

2.类选择器

简单来说，标签选择器是匹配所有同名的标签。如果想筛选特定的几个标签，就需要用到类选择器。例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /* 使用类选择器，将包含class="data"属性的元素颜色设置为blue */
        .data {
            color: blue;     
        }
    </style>
</head>
<body>
    <h3>编程学习</h3>
    <p class="data">数据分析</p>
    <p class="data">SQL数据处理</p>
    <p>网络爬虫</p>
</body>
</html>
2.1 class属性

类选择器，也叫class选择器。使用类选择器的前提是：标签中需要有class属性。例子中的第14和15行，我们给标签内添加了class属性，属性值自定义为data，即class="data"。

类选择器，就是根据标签的class属性，来匹配具体的HTML标签。例子中的第7行定义了一个类选择器。

当标签设置了class属性后，类选择器就能够匹配文档中所有具有class="data"属性的标签。

类选择器，句点. 开头，后面紧跟class的属性值。第7行的.data就是一个类选择器，它将14和15行的p元素颜色设置为了blue。

3.id选择器

类选择器像身份证的姓名，因为一个姓名可以被多个人使用，所以类选择器可以选择一类标签。而标签的id属性的值，就像身份照号码，是唯一的。也就是说，设置这种标签的样式时，就需要用到id选择器。例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<head>
    <meta charset="UTF-8">
    <style>
        /* 使用id选择器，将包含id="apply"属性的元素颜色设置为blue */
        #apply {
            color: blue;     
        }
    </style>
</head>
<body>
    <h3>编程学习</h3>
    <p class="data">数据分析</p>
    <p class="data">SQL数据处理</p>
    <p id="apply">网络爬虫</p>
</body>
</html>

16行的标签设置了id属性，id选择器就只会匹配具有id="apply"属性的标签。

id选择器，井号# 开头，后面紧跟id属性的值。

本节总结：

二、css设置样式

1.css颜色

1.1颜色名称

将color的属性值，设置成颜色的英文名就能显示对应的颜色。例如：

1
2
3
4
5
<style>
    h3 {
        color: red;
    }
<style>

这里的red表示红色，这种设置颜色的方式是最简单的。但是不同的浏览器，对颜色的解析可能存在差异，实际开发中不建议使用颜色名称来指定颜色。

1.2RGB

为了更精确地表示颜色，我们会通过具体的数值来最大限度地控制颜色。

例如：

1
2
3
4
5
<style>
    h3 {
        color: rgb(255,0,0);
    }
</style>

rgb()函数，是通过对red、green、blue三原色的强度进行控制，从而实现不同的颜色。

rgb()的语法规则：rgb(red,green,blue),这三个参数的取值为0到255的整数，最低值为0，最高值为255。

1.3十六进制码

CSS中，除了使用RGB定量地表示颜色，还有一种常见的表达方法–十六进制码。十六进制码，是以#开头的6位十六进制数表示颜色的方式。其语法规则为：#FF0000。

这个6位数可以分为三组，依次对应red、green、blue三种颜色的强度。

每组两位数，最低值为00，最高值为FF。比如#FF0000的FF表示red的强度，00表示green的强度，后一组00表示blue的强度。

1
2
3
4
5
<style>
    h3 {
        color: #FF0000;
    }
</style>

可以参考这个网页查看颜色的十六进制码

1.4背景颜色
1
2
3
4
5
6
7
8
9
10
11
<style>
        h3 {
            /* 给h3元素，设置背景颜色为rgb(255,176,51) */
            background-color: rgb(255,176,51);
        }
        
        p {
            /* 给p元素，设置背景颜色#5E80F4 */
            background-color: #5E80F4;
        }
    </style>

第4行，通过RGB的方式，给h3元素设置背景颜色为：rgb(255,176,51)

第9行，通过十六进制码的方式，给p元素设置背景颜色为：#5E80F4

2.字体样式

1
2
3
4
5
6
7
8
9
<style>
    /* css设置字体样式 */
    p {
        font-family: serif;
        font-style: italic;
        font-weight: bold;
        font-size: 30px;
    }
</style>
2.1字体类型

font-family 属性，用于设置字体类型。第4行，设置字体类型为serif，它是网页设计中最常用的字体族之一。还有一种常用的为sans-serif。

2.2字体风格

font-style属性，用于设置字体风格。第5行，设置字体风格为italic，它表示字体以斜体显示。

2.3字体粗细

font-weight属性，用于设置字体粗细。第6行，设置字体粗细为bold，表示字体为粗体。

注意：font-weight属性的值，也可以数值表示，数值一般在100到900之间，100最细，900最粗。

2.4字体大小

font-size属性，用于设置字体的大小。第7行，设置字体大小为30px，表示字体大小为30像素。

px表示像素，是常用的长度单位，像素值越大，字体就越大。当涉及到和长度有关的属性值时，推荐使用像素px这种长度单位来表示。

2.5字体类型扩展

我们通常设置font-family 属性时，会使用几种字体名称作为一种”备选”机制。字体间以逗号隔开，如果浏览器不支持第一种字体，它将依次尝试下一种。并且，字体名称中包含空格时，则必须用引号包裹起来，例如"Times New Roman"

1
2
3
4
5
6
<style>
    /* css设置字体类型 */
    p {
        font-family:"Times New Roman" ,serif;
    }
</style>

3.文本样式

1
2
3
4
5
6
7
8
9
<style>
    /* css设置文本样式 */
    p {
        text-align: center;
        text-indent: 32px;
        text-decoration: underline;
        line-height: 32px;
    }
</style>
3.1文本对齐

text-align 属性，用于设置文本的水平对齐方式。

第4行，设置水平对齐方式为center，它表示文本居中对齐。常见的还有右对齐right，和默认的对齐方式左对齐left。

3.2文本缩进

text-indent属性，用于指定文本的首行缩进，通常是将段落元素p的首行缩进。

第5行，设置文本缩进的长度为32px，即32像素。

3.3文本修饰

text-decoration属性，用于为文本添加修饰。

第6行，设置属性值为underline，表示给文本添加下划线。

常见的还有上划线overline，和删除线line-through。

最常用的做法就是，设置text-decoration : none ; 来清除<a>标签的默认下划线。

3.4行高

line-height属性，用于设置文本的行高。

第7行，设置行高为32px，表示行高固定为32像素。

3.5单独设置数字行高

类似于32px的这种方式，是采用数字和长度单位的方式来表示行高。其实，行高还可以是单独的数字，数字表示字体大小的倍数。

比如p元素的字体大小为16px，则设置line-height: 3，表示行高为字体大小的3倍，为48px。

本节总结：