在线学习HTML5的第03天——CSS
(灯哥日记)从小白做起,在线学习HTML5
一.CSS
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
-----百度百科
1.特点
CSS的特点:
- 丰富的样式定义
CSS提供了丰富的文档样式外观,以及设置文本和背景属性的能力;允许为任何元素创建边框,以及元素边框与其他元素间的距离,以及元素边框与元素内容间的距离;允许随意改变文本的大小写方式、修饰方式以及其他页面效果。- 易于使用和修改
CSS可以将样式定义在HTML元素的style属性中,也可以将其定义在HTML文档的header部分,也可以将样式声明在一个专门的CSS文件中,以供HTML页面引用。总之,CSS样式表可以将所有的样式声明统一存放,进行统一管理。另外,可以将相同样式的元素进行归类,使用同一个样式进行定义,也可以将某个样式应用到所有同名的HTML标签中,也可以将一个CSS样式指定到某个页面元素中。如果要修改样式,我们只需要在样式列表中找到相应的样式声明进行修改。- 多页面应用
CSS样式表可以单独存放在一个CSS文件中,这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件,在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。- 层叠
简单的说,层叠就是对一个元素多次设置同一个样式,这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表,而某些页面中的某些元素想使用其他样式,就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写,在浏览器中看到的将是最后面设置的样式效果。- 页面压缩
在使用HTML定义页面效果的网站中,往往需要大量或重复的表格和font元素形成各种规格的文字样式,这样做的后果就是会产生大量的HTML标签,从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中,可以大大的减小页面的体积,这样在加载页面时使用的时间也会大大的减少。另外,CSS样式表的复用更大程度的缩减了页面的体积,减少下载的时间。来源网络
2.编程环境
Microsoft Edge/Chrome/Firefox 等浏览器, Visual Studio Code 或 记事本等。
二.CSS样式表
1.为什么要用CSS样式表
- HTML标签的外观比较单一,字体比较单一,颜色只有黑白色,字体的类型大小都没有变化。
- CSS样式表能实现Web页面的内容与样式分离,方便管理与开发。
- CSS简化了网页的格式代码,外部的样式表还会被浏览器保存在缓存里,加快了下载显示的速度,也减少了需要上传的代码数量。
2.CSS的语法
<style type="text/css">
...
</style>
- 从
<style>
开始类型为CSS样式到</style>
结束。 - 代码中的
...
是样式规则可以选择多种选择器。
3.三大选择器
- 标签选择器
最常见的css选择器当属元素选择器了,在HTML文档中该选择器通常是指某种HTML元素
每条声明以分号”;”结尾。如果在一个声明中使用了不正确的属性值,或者不正确的属性,则该条声明会被忽略掉。
<style type="text/css">
p{background-color:red;}
h{font-size: 10px; backgroud-color: red;}
html{background-color: red;}
</style>
我们也可以同时对多个html元素进行声明:
<style type="text/css">
h1, h2, h3, h4, h5, h6, p {font-family: 宋体;}
</style>
- ID选择器
可以给某一元素赋一个id,一个元素只能拥有一个id,一个id只能给一个元素
给p标签添加一个id叫“pp”
<p id="pp">...</p>
使用ID选择器的方法为井号”#”后面跟id值。
<style type="text/css">
#pp{font-family: 宋体;}
</style>
可以对以上多个标签进行需要的操作
- 类选择器
在同一个页面内,允许相同名字的class。如果在同一个页面也许要多次用到,就可以用class定义。
给标签添加类名叫pp
<p class="pp">...</p>
使用类选择器的方法为井号”.”后面跟类名。
<style type="text/css">
.pp{font-family: 宋体;}
</style>
除了上面三种选择器以外还有派生选择器,属性选择器等多种选择器。
4.常用的样式属性
文本属性
文本属性 | 属性说明 |
---|---|
font-size | 字体大小 |
font-family | 字体类型 |
font-style | 字体样式 |
color | 颜色 |
text-align | 对齐方式 |
背景属性
背景属性 | 属性说明 |
---|---|
background-color | 背景颜色 |
background-image | 背景图像 |
background-repeat | 如何被重复可取值 |
边框属性
5.样式表的使用
内嵌样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>写在head标签里面</title>
<style type="text/css">
p{font-family: 宋体;}
</style>
</head>
<body>
<p>这是一个段落。</p>
</body>
</html>
行内嵌入样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>写在body的标签里面</title>
</head>
<body>
<p style="font-family: 宋体;color:red;font-size:20px;">这是一个段落。</p>
</body>
</html>
外部样式文件
- 链接(link)外部样式表
<head>
<link rel="stylesheet" type="text/css" href="1.css">
</head>
rel 属性规定当前文档与被链接文档之间的关系。
只有 rel 属性的 “stylesheet” 值得到了所有浏览器的支持。其他值只得到了部分地支持。
背景属性 | 属性说明 |
---|---|
alternate | 文档的替代版本(比如打印页、翻译或镜像)。 |
stylesheet | 文档的外部样式表。 |
start | 集合中的第一个文档。 |
next | 集合中的下一个文档。 |
prev | 集合中的上一个文档。 |
contents | 文档的目录。 |
index | 文档的索引。 |
glossary | 在文档中使用的词汇的术语表(解释)。 |
copyright | 包含版权信息的文档。 |
chapter | 文档的章。 |
section | 文档的节。 |
subsection | 文档的小节。 |
appendix | 文档的附录。 |
help | 帮助文档。 |
bookmark | 相关文档。 |
- 导入(@import)外部样式表
<head>
<style type="text/css">
@import 1.css;
</style>
</head>
![](https://img-blog.csdnimg.cn/81585450c13b437aa14b128fb7f04013.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6ZmI5aSn54i3KOW3suengyk=,size_17,color_FFFFFF,t_70,g_se,x_16#pic_center)