Python HTML和CSS 3:CSS基本语法以及样式引入的三种方式

简介: Python HTML和CSS 3:CSS基本语法以及样式引入的三种方式

一、简单的介绍



为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,CSSCascading Style Sheets 的首字母缩写,意思是 层叠样式表。有了CSS,html中大部分表现样式的标签就废弃不用了,html只负责文档的结构和内容,表现形式完全交给CSS,html 文档变得更加简洁。


二、css基本语法



  • css的定义方法是:选择器 { 属性:值; 属性:值; 属性:值;},选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多个值。代码示例:


div{ 
     width:50px; 
     height:50px; 
     color:blue 
}


三、css页面样式引入方式



  • 3.1、外联式:通过link标签,链接到外部样式表到页面中,首先我们需要建一个 .css 结尾的样式文件,暂且命名为 main.css,写一个简单的 div 选择器,内容如下


div{
   font-size: 22px;
   color: red;
   background-color: blue;
}
  • main.css 的使用方式如下


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


提示:  href 后面在导入main.css 路径是以当前html 文件为基准寻找的


  • 代码图如下,link要写在当前 html 文件的 <head></head> 标签里面


image.png

外联式:推荐使用


  • 3.2、嵌入式:通过style标签,在网页上创建嵌入的样式表,如下,在<head></head> 标签里面写<style></style>标签,里面再写 选择器


<style type="text/css">
    h3{
       font-size: 27px;
       color: brown;
    }
</style>


  • 代码图如下


image.png

嵌入式:在一些访问频繁的网页上建议使用


  • 3.3、内联式:通过标签的style属性,在标签上直接写样式,如下以 <a></a> 标签为例,把 style 样式写到标签里面,不推荐使用


<a href="https://www.jianshu.com/u/8fed18ed70c9" style="color: purple;font-size: 23px;">我的简书</a>


内联式:不推荐使用

目录
相关文章
|
5天前
|
前端开发 Python
使用Python+openpyxl实现导出自定义样式的Excel文件
本文介绍了如何使用Python的openpyxl库导出具有自定义样式的Excel文件,包括设置字体、对齐方式、行列宽高、边框和填充等样式,并提供了完整的示例代码和运行效果截图。
8 1
使用Python+openpyxl实现导出自定义样式的Excel文件
|
11天前
|
数据采集 前端开发 JavaScript
CSS与Python爬虫
【8月更文挑战第9天】
16 8
|
12天前
|
存储 数据挖掘 程序员
揭秘Python:掌握这些基本语法和数据类型,你将拥有编程世界的钥匙!
【8月更文挑战第8天】Python是一种高级、解释型语言,以简洁的语法和强大的功能广受好评。本文从基本语法入手,强调Python独特的缩进规则,展示清晰的代码结构。接着介绍了Python的主要数据类型,包括数值、字符串、列表、元组、集合和字典,并提供了示例代码。通过这些基础知识的学习,你将为深入探索Python及其在文本处理、数据分析等领域的应用打下坚实的基础。
26 3
|
21天前
|
存储 Python
Python 基础语法变量
【7月更文挑战第27天】
31 9
|
21天前
|
开发者 Python
Python 基础语法注释
【7月更文挑战第27天】
24 6
|
1月前
|
存储 Python 容器
Python基础语法:变量和数据类型详解(整数、浮点数、字符串、布尔值)
变量和数据类型是Python编程的基础,理解这些概念对于编写高效和正确的代码至关重要。通过本文的介绍,希望你能对Python中的变量和常用数据类型有一个清晰的认识,并能够在实际编程中灵活运用这些知识。
|
1月前
|
Python
Python基础语法:运算符详解(算术运算符、比较运算符、逻辑运算符、赋值运算符)
运算符是Python编程中的重要组成部分,理解并熟练使用这些运算符有助于编写高效、简洁的代码。本文详细介绍了算术运算符、比较运算符、逻辑运算符和赋值运算符的使用方法,并通过综合示例展示了它们在实际编程中的应用。希望通过本文的介绍,您能更好地掌握Python中的运算符。
|
5天前
|
存储 数据安全/隐私保护 索引
Python基础语法day02字符串详解和列表
Python基础语法day02字符串详解和列表
|
5天前
|
Python
Python基础语法day01基础语句
Python基础语法day01基础语句
|
1月前
|
IDE JavaScript 前端开发
python语法错误(SyntaxError)
【7月更文挑战第12天】
45 10