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 属性包括着的元素

<!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> 标签内定义内部样式表

<!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

h1{text-align: center;color: olivedrab;
}
p{padding: 20px;background: cornflowerblue;
}

<!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>

python web开发 CSS基础相关推荐

python web开发 HTML基础
文章目录 1. 简介 2. 标签元素属性 3. 表格 4. 列表 ol 有序 ul 无序自定义列表 5. 表单输入域标记 input 选择域标记 select, option 文字域标记 text ...
python web开发 jQuery基础
文章目录 1. 引入 jQuery 2. 基本语法 3. jQuery 选择器 3.1 元素选择器 3.2 #id 选择器 3.3 .class 选择器 4. jQuery事件 5. 获取内容和属性 ...
python web开发 JavaScript基础
文章目录 1. script 标签 2. 字面量.变量 3. 数据类型 4. 运算符 5. if 条件 6. switch分支 7. for循环 8. while循环 9. break, contin ...
pythonweb开发-手把手教你写网站：Python WEB开发技术实战
摘要:本文详细介绍了Python WEB开发的基础入门.以一个博客站点的开发为例讲解了基于Django框架开发WEB站点的全过程.通过本文的学习可以快速掌握基于Django的Python WEB的开发 ...
python web-手把手教你写网站：Python WEB开发技术实战
摘要:本文详细介绍了Python WEB开发的基础入门.以一个博客站点的开发为例讲解了基于Django框架开发WEB站点的全过程.通过本文的学习可以快速掌握基于Django的Python WEB的开发 ...
python开发一个自己的技术网站_手把手教你写网站：Python WEB开发技术实战
摘要:本文详细介绍了Python WEB开发的基础入门.以一个博客站点的开发为例讲解了基于Django框架开发WEB站点的全过程.通过本文的学习可以快速掌握基于Django的Python WEB的开发 ...
手把手教你写网站：Python WEB开发技术实战
摘要:本文详细介绍了Python WEB开发的基础入门.以一个博客站点的开发为例讲解了基于Django框架开发WEB站点的全过程.通过本文的学习可以快速掌握基于Django的Python WEB的开发 ...
篇一、Flask打造 Python Web 开发的灵活框架，实现简易登录。要求有 Python、HTML 和 CSS 基础。
⭐ 简介:大家好,我是zy阿二,我是一名对知识充满渴望的自由职业者. ☘️ 最近我沉溺于Python的学习中.你所看到的是我的学习笔记. ❤️ 如果对你有帮助,请关注.点赞,让我们共同进步.有不足之处 ...
python notebook右侧网页_《Python web开发》笔记一：网页开发基础
网页基础知识网页的构成网页由html.css和Javascript构成,html是框架,CSS是样式和装饰,JS则是各项功能实现.我们把网页的组成类比成一栋房子,Html相当于房子的结构,CSS相 ...

python web开发 CSS基础

文章目录

1. 基础知识

2. ID，Class 选择器

3. CSS盒子模型

4. 嵌入CSS样式

4.1 内联样式表

4.2 内部样式表

4.3 外部样式表

python web开发 CSS基础相关推荐

最新文章

热门文章