1 CSS样式表简介

定义： CSS是Cascading Style Sheets的简称，中文名称为层叠样式表、级联样式表或样式表。
作用：实现内容与样式相分离，提高代码的可重用性和可维护性。
CSS与HTML：
1. 对比关系：HTML好比好比定义了一个房间的内容，而CSS就是定义这些内容的样式。
2. 使用原则：尽可能使用CSS属性取代HTML属性。

2 CSS与HTML的三种组合方式

2.1 内联样式

形式：把样式表写在标签内部，作为标签的 style 属性的属性值出现。
适用性：当特殊的样式需要应用到个别元素时，就可以使用内联样式。
语法例子：显示结果为白底黑字的666。

<html><head><title>CSS</title></head><body><span style = "color:#ffffff; background-color:#000000; font-size:30px;">666</span></body>
</html>

2.2 内部样式表

形式：把样式表写在head中，通过元素选择器、类选择器、ID选择器为不同元素指定样式，三种选择器优先级依次增大。
适用性：当单个文件需要特别样式时，就可以使用内部样式表。
语法例子：注意CSS的注释语句和HTML不一样。

<html><head><title>CSS</title><style type = "text/css">/*定义元素选择器*/span {color:#ffffff; background-color:#000000; font-size:30px;}/*定义类选择器*/.big {color:#ffffff; background-color:#000000; font-size:60px;}/*定义ID选择器*/#no1 {color:#000000; background-color:#ffffff; font-size:30px;}</style></head><body><span>123<span class = "big">456</span><span id = "no1">789</span>10</span></body>
</html>

运行结果如下：

2.3 外部引用

形式：将样式表单独存放，后缀名为.css，在head中指定外部样式表。
适用性：当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
首页与外部CSS样式表语法：

<!--首页-->
<html><head><title>CSS</title><link rel="stylesheet" type="text/css" href="mystyle.css"></head><body><span>123<span class = "big">456</span><span id = "no1">789</span>10</span></body>
</html>

<!--mystyle.css-->
/*定义元素选择器*/
span {color:#ffffff; background-color:#000000; font-size:30px;}
/*定义类选择器*/
.big {color:#ffffff; background-color:#000000; font-size:60px;}
/*定义ID选择器*/
#no1 {color:#000000; background-color:#ffffff; font-size:30px;}

运行结果如下：

3 总结

理解HTML与CSS各自的功能及配合原则；
掌握HTML与CSS的三种组合方式。

参考文献

《CSS菜鸟教程》

【HTML基础】CSS样式表相关推荐

HTML基础--CSS样式表（一）
1.CSS内部样式一般会写在<heaad>标签中 <!DOCTYPE html> <html lang="en"> <head>& ...
HTML基础--CSS样式表（二）
1.元素显示类型元素类型的分类,依据CSS的显示块元素(block element) 行内(内联元素) 行内块元素块元素 A)块状元素在网页中就是以块的形式显示,所谓块状就是元素显示为矩形区域 ...
WEB入门三 CSS样式表基础
学习内容 Ø CSS的基本语法 Ø CSS选择器 Ø 常见的CSS样式 Ø 网页中3种使用CSS的方式能力目标 Ø 理解CSS的 ...
[19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器...
一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...
前端基础 CSS 第十一章使用CSS样式表 ----暑假学习第七、八天
第十一章使用CSS样式表通过CSS样式定义,可以将网页制作得更加绚丽多彩.采用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其他效果实现更加精确地控制.用CSS不仅可以做出令浏览者赏心悦目 ...
前端基础 CSS 第十一章使用CSS样式表特效属性部分 ----暑假学习第九天
第十一章使用CSS样式表 11.8 定位属性使用定位属性可以控制元素的位置,包括相对定位和绝对定位两种方式.相对定位指允许元素在相对于文档布局的原始位置上进行偏移,而绝对定位是指允许元素与原始文档 ...
(原创分享，改进版)CSS样式表速成！
大话CSS样式表速成程序和美工一直是相辅相成的,一个好的Web项目需要不仅仅是程序的完美,同样一个好的用户使用页面,也可以吸引一大部分用户.往往在传统的概念里,程序和美工总是被分开来说.一方面,这 ...
Web前端基础---CSS样式--盒子模型--浮动与定位
Day02 CSS样式 DIV和CSS DIV是层叠样式表中的定位技术,全称DIVision,即为划分.有时可以称其为图层. DIV元素是用来为HTML文档内大块(block-level)的内容提供结 ...
css样式表诞生,[css]简明教程 CSS样式表概述
CSS(Cascading Style sheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计必不可少的工具之一.使用CSS能够简化网页的格式代码,加快下载显示 ...

【HTML基础】CSS样式表

目录

1 CSS样式表简介

2 CSS与HTML的三种组合方式

2.1 内联样式

2.2 内部样式表

2.3 外部引用

3 总结

参考文献

【HTML基础】CSS样式表相关推荐

最新文章

热门文章