目录
一、CSS简介
- CSS 指层叠样式表 (Cascading Style Sheets)
- 让网页元素的样式更加丰富
- 使用 CSS 我们可以大大提升网页开发的工作效率
- 使用 CSS 同时控制多重网页的样式和布局 有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。
二、CSS的基础语法
1、代码演示
- 在python编辑器中先创建一个HTLML文档
- 然后在<body>标签内写入一个文本内容，字体大小为<h1>
- 接着在<head></head>标签中创建一个<style>标签，在<style>中写入css语句，这个css语句是要修改<h1>标签内的文本样式
注意：声明标签样式都是写在style里面的，style标签通常是在title标签下
- 写入css样式和未写入css样式的的运行结果对比
2、css注释
注释语法： /*注释内容*/
三、CSS选择器
css选择器一共有五种，分别是：
- id选择器
- class选择器
- 标签选择器
- 层级选择器
- 伪类选择器
下面将对这五类选择器的使用进行演示和说明
1、id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
代码演示 ：
- 运行结果
2、class选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
代码演示：
- 运行结果
3、标签选择器
一个完整的HTML页面是由很多不同的标签组成，而[标签选择器]，则是决定哪些标签采用相应的CSS样式 。
代码演示 ：
- 运行结果
4、层级选择器
主要应用在标签嵌套的结构中，层级选择器，是结合上面的两种选择器来写的选择器,它可与标签选择器结合使用，减少命名，同时也可以通过层级，限制样式的作用范围。
代码演示：
- 运行结果
5、伪类选择器
常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态。
代码演示：
- 运行结果
四、CSS样式形式
CSS一共分为三种样式，分别为：
- 外部样式
- 内部样式
- 行内样式
下面将对这三种样式进行演示说明
1、外部样式
格式：<link type="text/css" rel="stylesheet" href="css路径" />
用处：这种形式是把css单独写到一个css文件内，然后在源代码中以link方式链接。它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。
备注：
- Rel：指明连接的是什么文件；
- Type：指明引入的文件的格式类型；
- Href：指明文件的路径，以引入文件为基准的相对路径。
代码演示：
- 举例：<link type="text/css" rel="stylesheet" href="index.css"/>
- 先在HTML文件中写入内容
- 然后创建一个index.css文件，在index.css文件中设置h3标签文本颜色为红色
- 最后运行HTML文件，文字变为红色，这就说明HTML文件应用了index.css中的样式
2、内部样式
格式：
<style type="text/css">
选择器 {声明1、声明2………}
</style>
用处：这种形式是内部样式表，它是以<style>和</style>结尾，写在源代码的head标签内。这样的样式表只能针对本页有效。不能作用于其它页面
代码演示：
- 运行结果
3、行内样式
行内样式：就是直接在html标签后面写样式代码
举例：<p style="color:red;text-align:center;font-size:30px">行内样式</p>
用处：这种在标签内以style标记的为内部样式，内部样式只针对标签内的元素有效，因其没有和内容相分离，所以不建议使用。
注意：CSS样式优先级：近的>远的(行内样式>内部样式>外部样式)
代码演示：
- 内部样式中设置p标签的文本内容为红色，行内样式设置p标签的文本内容为绿色
- 运行结果
1243
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
