Web前端学习：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样式优先级：近的>远的(行内样式>内部样式>外部样式)

代码演示：