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>

运行效果截图：

通过上面的截图，我们不难发现只有只有 id=“aa” 的标题变了颜色，与是几级标题无关，只看是不是 id=“aa” ，这就是id选择

写作不易，如果看完对你有帮助，感谢点赞支持！

加油！

共同努力！

Keafmd

CSS入门基础（样式，css文件，选择器）相关推荐

CSS入门基础-目录
CSS简介-CSS入门基础(001) CSS选择器-CSS入门基础(002) id选择器的使用-CSS入门基础(003) 子选择器的使用-CSS入门基础(004) 字体样式-CSS入门基础(005) ...
CSS布局基础（CSS浮动）
CSS布局基础(CSS浮动) CSS浮动浮动元素表现出行内块特点布局原则浮动布局重点清除浮动清除浮动时机 CSS浮动 float: none(默认,不浮动)|left|right; 默认情况 ...
html给图标加角标,HTML+CSS入门如何使用CSS创建一个图片角标
本篇教程介绍了HTML+CSS入门如何使用CSS创建一个图片角标,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 角标是一个给某元素标明"New",& ...
13 ，CSS 入门基础,行内排版内嵌式排版和外部排版样式
1.认识 CSS 2.传统 HTML 设计网页版面的缺点 3.CSS 的特点 4.CSS 的排版样式 13.1 认识CSS CSS的英文全名是 Cascading Style Sheets,中文可翻译 ...
学起来 —— CSS 入门基础
Hello,大家好! 小女来更博啦!CSS福利送上~~~ 首先给大家介绍一下CSS到底是什么? 一.CSS概念 W3C规范中,要求有三条:一为"两个分离",二为语言遵循语义化, ...
【测试基础】之03 CSS入门基础
CSS基础目标知道CSS的作用基本掌握CSS语法规则 CSS简介 CSS:(Cascading Style Sheets)指层叠样式表作用:用来定义如何显示HTML元素(定义HTML元素的样式 ...
CSS入门基础学习（上）
css是层叠样式表的简称,有时称为css样式表或级联样式表. css是一种标记语言,用于设置HTML页面中的文本内容,图片的外形,以及版面的布局和外观显示样式.可以美化HTML的外观页面看起来更加简介 ...
CSS入门基础详解——笔记、案例
CSS入门学习一.CSS简介 1.什么是css css:层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记 ...
css基础选择器教程,CSS核心基础一些常见的选择器的使用小白教程
要想将CSS样式应用于特定的HTML元素,首先要找到该目标元素.在CSS中,执行这一任务的样式规则部分被称为选择器.在CSS中有很多的选择器,包含标记(标签)选择器.类别选择器.id选择器.通配符选择 ...

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

CSS入门学习

CSS的简介

基本语法结构

基本用法

给元素添加样式

行内样式

内部样式

外部样式

定义样式css文件

在html中引入css文档

选择器

标签选择

类选择

id选择

CSS入门基础（样式，css文件，选择器）相关推荐

最新文章

热门文章