Web前端开发笔记——第三章 CSS语言 第一节 CSS的基本概念和样式表
目录
- 一、CSS和HTML
- 二、CSS的基本语法格式
- 三、CSS样式设置
- (一)行内样式
- (二)内嵌样式
- (三)引用外部CSS文件
- 四、多重样式优先级
- 结语
一、CSS和HTML
CSS,又称为层叠样式表
,HTML标签定义网页的内容和结构,而CSS定义内容的样式
。通过CSS定义样式,而不会改变网页的内容和结构。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
二、CSS的基本语法格式
CSS代码由选择器和一条或多条声明组成的,选择器
是需要改变样式的 HTML 标签,在CSS中由分号隔开每条代码为声明
,且声明是以大括号{}
括起来的。
每条声明由一个属性名和一个属性值组成,其格式为属性名称:属性值;
,注意这里声明中的“:
”和“;
”不能漏掉。
例如下列中的选择器是p,即以下的CSS样式对所有的p标签都生效。
可以通过/*注释内容*/
,来对CSS代码进行注释。
三、CSS样式设置
(一)行内样式
HTML中,如果要对一段文字颜色进行更改,需要对该标签的style=""属性
进行设置,且行内样式只能对当前某个标签
进行样式设置。
例如,下列html代码,设置文本颜色为蓝色,文字大小为15像素:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title>
</head><body><p style="color: blue;font-size: 15px;">层叠样式表(英文全称:Cascading StyleSheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
</body></html>
运行结果如下:
(二)内嵌样式
而CSS中,利用内嵌样式
,即将CSS代码内嵌到HTML文件的<head></head>
标签内,通过内嵌样式可以对多个标签
进行样式设置。
例如,下列html代码,也是一样的文本,通过CSS代码设置文本颜色为蓝色,文字大小为15像素,head标签内的style标签中type="text/css"表示当前样式是以CSS文本来规定的,其内部利用选择器表示作用于所有的p标签进行该样式设置:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">p {color: blue;font-size: 15px;}</style>
</head><body><p>层叠样式表(英文全称:Cascading StyleSheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
</body></html>
运行结果如下:
(三)引用外部CSS文件
若要将一种样式引用到多个网页时,可以直接定义一个单独的css样式表文件,然后在相应的html文件的head标签内通过link标签进行外部引用该文件,表示为<link rel="stylesheet" href="" />
,其中rel属性
代表引用的文件类型,href属性
表示引用的链接文件名称。
例如,下列代码,定义一个css文件,设置文本颜色为蓝色,文字大小为15像素:
p{color:blue;font-size: 15px;
}
然后,在index.html文件中引用该样式表,即< link rel=“stylesheet” href="…/CSS/style.css" / >:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="../CSS/style.css" />
</head><body><p>层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。</p>
</body></html>
运行结果如下:
这种外部引用的方式将HTML代码和CSS代码分开的好处是可以方便更改样式,且在多个HTML文档即多个网页中都可进行引用,不会显得过于繁琐,在维护时更加方便。
四、多重样式优先级
以上三种添加CSS样式的方式,它们是可以叠加
的,叠加时优先级如下:
行内样式>内嵌样式>引用外部CSS文件>浏览器默认样式
即如果定义了多种不同方式的CSS样式设置,会根据其优先级显示样式。
结语
以上就是全部内容,篇幅较长,感谢您的阅读和支持,若有表述或代码中有不当之处,望指出!您的指出和建议能给作者带来很大的动力!!!
Web前端开发笔记——第三章 CSS语言 第一节 CSS的基本概念和样式表相关推荐
- Web前端开发笔记——第四章 JavaScript程序设计 第一节 JavaScript的基础语法
目录 一.JavaScript的定义 二.代码的创建和使用 (一)内嵌JavaScript代码 (二)引用JavaScript文件 三.代码的注释 四.输出数据 (一)alert()弹出警告框 (二) ...
- Web前端开发笔记——第三章 CSS语言 第六节 CSS定位
目录 一.定义 二.文档流定位 (一)block类型元素 (二)inline类型元素 (三)inline-block类型元素 三.浮动定位 (一)左浮动和右浮动 (二)清除浮动 四.层定位 (一)st ...
- Web前端开发笔记——第三章 CSS语言 第四节 CSS列表、表格样式
目录 一.CSS列表样式 (一)设计列表项前标志类型 (二)设计列表项前标志位置 (三)设计列表项图片 (四)设计整体列表属性 二.CSS表格样式 (一)设计表格大小 (二)设计表格边框 (三)奇偶选 ...
- Web前端开发笔记——第三章 CSS语言 第三节 文本、字体、背景、超链接样式属性
目录 一.CSS文本属性 二.CSS字体属性 (一)常用文本字体样式属性 (二)设置整体font属性 三.CSS背景属性 (一)背景颜色 (二)背景图片 (三)图片平铺方式 (四)图片位置 (五)设置 ...
- Web前端开发笔记——第三章 CSS语言 第七节 圆角边框、阴影
目录 前言 一.圆角边框 (一)border-×-×-radius (二)border-radius 二.阴影 (一)基本阴影设置 (二)内部阴影设置 结语 前言 本节介绍仅在CSS3中的新内容,例如 ...
- Web前端开发笔记——第三章 CSS语言 第八节 CSS3文本文字设置
目录 前言 一.文本阴影 二.强制换行 三.字体设置 结语 前言 本节中的仅支持CSS3中的新语法,比如文字的阴影.长文本的换行等等. 一.文本阴影 通过定义text-shadow来对文本进行阴影设置 ...
- Web前端开发笔记——第三章 CSS语言 第五节 盒子模型
目录 一.CSS布局与定位 二.盒子模型 三.盒子模型的组成 四.设置边框的属性 五.设置外.内边距的属性 六.overflow 属性 结语 一.CSS布局与定位 在CSS中对一个网页进行布局与定位, ...
- Web前端开发笔记——第三章 CSS语言 第二节 CSS选择器
目录 前言 一.CSS选择器 (一)标签选择器 (二)id选择器 (三)类别选择器 二.针对标签的选择器嵌套 三.集体声明和全局声明 (一)集体声明 (二)全局声明 结语 前言 CSS代码由选择器和一 ...
- Web前端开发笔记——第四章 JavaScript程序设计 第二节 变量
目录 一.JavaScript中的注释 二.变量的命名规则 三.变量声明以及赋值 四.变量作用域 五.变量提升 一.JavaScript中的注释 JavaScript中单行注释通过"//&q ...
最新文章
- Leetcode 136 Single Number 仅出现一次的数字
- 高通android开发摘要
- Java 8 - 05 方法引用
- [转载]Java-集合框架完全解析
- mysql 常用优化方案_项目中常用的 19 条 MySQL 优化方案
- linux中如何快速进入某个目录
- 【转载】Java中各种修饰符与访问修饰符的说明
- BroadcastReceiver 广播机制详解
- 算法笔记 --- 排列组合
- 随手记android面试题,synchorinzed的一个面试题
- net core mysql 组件记录
- T-SQL常用日期函数
- 印地语freeCodeCamp YouTube频道+不和谐聊天现已上线
- 修复 Apple “连续互通” 方法汇总:修复 AirDrop(隔空投送),修复 Apple Watch 解锁 Mac,修复 HandOff(接力)等
- Qt(c++)调用python一直报错slot、hypot等
- 车内看车头正不正技巧_史上最全:新手开车/停车技巧(真实图解)
- ubuntu下执行sudo命令提示:xx is not in the sudoers file. This incident will be reported.
- 基于陷波滤波器的永磁同步电机振动抑制学习笔记
- np.random.normal()函数
- Windows10,没有网络图标,连不上网