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>


内联式:不推荐使用

目录
相关文章
|
10月前
|
IDE 数据挖掘 开发工具
Python作为一种广受欢迎的高级编程语言,以其简洁的语法和强大的功能吸引了众多初学者和专业开发者
Python作为一种广受欢迎的高级编程语言,以其简洁的语法和强大的功能吸引了众多初学者和专业开发者
223 7
|
5月前
|
前端开发
|
6月前
|
Python
课时19:Python的基本语法
今天给大家带来分享的是 Python 的基本语法,分为以下六个部分。 1.在 Python 中严格区分大小写 2.Python 中的每一行就是一条语句,每条语句以换行结束 3.Python 中每一行语句不要过长 4.条语句可以分多行编写,语句后边以\结尾 5.Python 是缩进严格的语言,不要随便写缩进 6.在 Python 中使用#来表示注释
103 2
|
8月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
142 34
|
10月前
|
存储 索引 Python
Python 的基本语法
这些是 Python 的基本语法要素,掌握它们是学习和使用 Python 的基础。通过不断地实践和应用,你将能够更深入地理解和熟练运用这些语法知识,从而编写出高效、简洁的 Python 代码
400 61
|
8月前
|
存储 开发者 Python
python基本语法
Python的基本语法简洁而强大,支持多种编程范式,包括面向对象编程和函数式编程。通过掌握变量和数据类型、操作符、控制结构、函数、类和模块等基本概念,可以有效地编写高效、可读的Python代码。无论是初学者还是经验丰富的开发者,Python都提供了丰富的工具和库来满足各种编程需求。
257 13
|
9月前
|
JavaScript 前端开发
jQuery和CSS3斑马线样式range滑块特效
jQuery和CSS3斑马线样式range滑块特效
|
10月前
|
存储 Python
Python编程入门:理解基础语法与编写简单程序
本文旨在为初学者提供一个关于如何开始使用Python编程语言的指南。我们将从安装Python环境开始,逐步介绍变量、数据类型、控制结构、函数和模块等基本概念。通过实例演示和练习,读者将学会如何编写简单的Python程序,并了解如何解决常见的编程问题。文章最后将提供一些资源,以供进一步学习和实践。
192 1
|
10月前
|
机器学习/深度学习 数据挖掘 开发者
Python编程入门:理解基础语法与编写第一个程序
【10月更文挑战第37天】本文旨在为初学者提供Python编程的初步了解,通过简明的语言和直观的例子,引导读者掌握Python的基础语法,并完成一个简单的程序。我们将从变量、数据类型到控制结构,逐步展开讲解,确保即使是编程新手也能轻松跟上。文章末尾附有完整代码示例,供读者参考和实践。
|
10月前
|
前端开发 JavaScript UED

热门文章

最新文章

推荐镜像

更多