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>


内联式:不推荐使用

目录
相关文章
|
1月前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
20天前
|
前端开发 JavaScript UED
|
27天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
78 6
|
1月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
186 1
|
1月前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
57 2
|
26天前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。
|
26天前
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
|
26天前
|
前端开发
HTML 样式- CSS1
CSS (层叠样式表) 用于为 HTML 元素添加样式,包括颜色、文本、盒子模型等。CSS 可以通过内联样式、内部样式表或外部引用的方式添加到 HTML 中。推荐使用外部引用方式。本教程将介绍如何使用 CSS 为 HTML 添加样式,并提供实例演示。
|
5天前
|
存储 数据挖掘 开发者
Python编程入门:从零到英雄
在这篇文章中,我们将一起踏上Python编程的奇幻之旅。无论你是编程新手,还是希望拓展技能的开发者,本教程都将为你提供一条清晰的道路,引导你从基础语法走向实际应用。通过精心设计的代码示例和练习,你将学会如何用Python解决实际问题,并准备好迎接更复杂的编程挑战。让我们一起探索这个强大的语言,开启你的编程生涯吧!
下一篇
无影云桌面