python web开发 CSS基础

74 阅读 0 评论 49 点赞

我是靠谱客的博主虚幻小虾米，这篇文章主要介绍python web开发 CSS基础，现在分享给大家，希望可以做个参考。

文章目录

- 1. 基础知识
- 2. ID，Class 选择器
- 3. CSS盒子模型
- 4. 嵌入CSS样式
- - 4.1 内联样式表
  - 4.2 内部样式表
  - 4.3 外部样式表

learning from 《python web开发从入门到精通》

1. 基础知识

CSS ，Cascading Style Sheet 层叠样式表，标记语言，用于为 HTML 定义布局（字体，颜色，边距，宽高，背景图片，定位）

语法结构：选择器 + 一条/多条声明
如 p {color: red; font-size: 12px;}
css 声明总以; 结束，并用 {} 括起来
注释/* 和 */ 开始和结束

2. ID，Class 选择器

id 选择器为标有特定 id 的 HTML 元素指定特定样式
如 #para1 {text-align: center; color: red;} 将应用于元素属性 id="para1"
class 选择器 用于一组元素的样式，可用于多个元素，在CSS中以.号显示
如 .center {text-align: center;}拥有 center 类的 HTML 元素均为居中
p.center {text-align: center;} 所有 p 元素使用 class="center"让该元素文本居中

3. CSS盒子模型

从外到内：

Margin 外边距（透明）
Border 边框
Padding 内边距（透明）
Content 内容：文本图像

4. 嵌入CSS样式

4.1 内联样式表

使用 HTML 属性 style，仅影响被 style 属性包括着的元素

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Css样式</title>
</head>
<body>
<h1 style="text-align: center; color: red">michael 学习web开发</h1>
<p style="padding: 20px; background: rosybrown">盒子模型</p>
</body>
</html>

在这里插入图片描述

4.2 内部样式表

在 HTML 文件内使用 <style> 标签，在文档头部<head> 标签内定义内部样式表

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部样式表</title>
    
    <style>
        h1 {
            text-align: center;
            color: blue;
        }
        p {
            padding: 20px;
            background: blueviolet;
        }
    </style>
    
</head>
<body>

    <h1>michael 学习python web开发</h1>
    <p>盒子模型</p>
    
</body>
</html>

在这里插入图片描述

4.3 外部样式表

一个扩展名为 css 的文本文件，在 HTML 中指向要使用的 css 文件
如 <link rel="stylesheet" type="text/css" href="style/dafault.css" />

mycss.css

复制代码

1
2
3
4
5
6
7
8
9
h1{
    text-align: center;
    color: olivedrab;
}
p{
    padding: 20px;
    background: cornflowerblue;
}

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部样式表</title>

    <link rel="stylesheet" type="text/css" href="mycss.css"/>

</head>
<body>

    <h1>michael 学习python web开发</h1>
    <p>盒子模型</p>

</body>
</html>