200字范文 > CSS入门基础（样式 css文件选择器）

CSS入门基础（样式 css文件选择器）

时间：2020-03-04 09:40:37

CSS入门学习

CSS的简介基本语法结构基本用法给元素添加样式行内样式内部样式外部样式定义样式css文件在html中引入css文档选择器标签选择类选择id选择

CSS的简介

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

基本语法结构

选择器 {声明1;声明2;}

详细样例：

h1 {font-size:12px;color:#F00;}

CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;” 都要写上。

基本用法

给元素添加样式

行内样式

通过直接在元素上写个style属性

<h1 style="color:red ">改变标题颜色</h1>

这个语句的效果就是调整标题的颜色

运行效果：

内部样式

通过选择器，选择当前的文档中的元素，统一添加样式

<style type="text/css">选择器{样式的属性名：属性值;}h1{color:red;}</style><h1>内容</h1>

完整样例代码：

<!DOCTYPE html><html><head><meta charset="utf-8"><style>h1{color: red;}</style><title></title></head><body><h1>内容</h1></body></html>

效果截图：

这样我们就通过内部样式的方式来修饰了h1。

外部样式

单独将style标签中的内容统一定义在一个 css文件中，css文件中，不需要写style标记，直接写样式即可。

定义样式css文件

CSS代码保存在扩展名为.css的样式表中. HTML文件引用扩展名为.css的样式表

h1{color:red;}

在html中引入css文档

<head>……<link href="css文件的位置" rel="stylesheet" type="text/css" />……</head>

<h1>需要样式的标记</h1>

样例：

↓这个是css文件

↓这个是html代码

05.html文件通过<link href="css/h1red.css" rel="stylesheet" type="text/css" />这句代码调用同级文件夹css中的 h1red.css 的css文件，来对 h1 标题进行颜色修改

完整代码：

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><link href="css/h1red.css" rel="stylesheet" type="text/css" /></head><body><h1>需要样式的标记</h1></body></html>

效果截图：

选择器

标签选择

<h1>一级标题</h1>

h1{color: cornflowerblue;}

完整代码：

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>h1{color: blue;}</style></head><body><h1>一级标题</h1><h1>一级标题</h1><h2>二级标题</h2><h2>二级标题</h2><h2>二级标题</h2></body></html>

效果截图：

从上面的效果截图我们可以所有的一级标题都变成了蓝色，因为我们对所有的h1标签都进行了设置颜色，这就是标签选择。

类选择

<h1 class="colorblue">一级标题</h1><h2 class="colorblue">二级标题</h2>

.colorblue{color: cornflowerblue;}

完整代码：

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>.colorblue{color: cornflowerblue;} </style></head><body><h1 class="colorblue">一级标题</h1><h2 class="colorblue">二级标题</h2><h2 class="colorred">二级标题</h2><h2 class="colorred">二级标题</h2><h3 class="colorblue">三级标题</h3></body></html>

效果截图：

从上图我们可以发现所有的 class=“colorblue” 的标题都是蓝色，不论是几级标题，而其他的非colorblue类都没有变颜色，这就是对类进行选择。

id选择

<h2 id="idh2">二级标题</h2>

#idh2{color: red;}

完整代码：

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>#aa{color: red;}</style></head><body><h1 id="idh1">一级标题</h1><h2 id="aa">二级标题</h2><h3 id="aa">三级标题</h3><h2 id="idh2">二级标题</h2></body></html>

运行效果截图：