CSS的样式表与HTML的介绍
你好！ 这是我自己编辑的一些知识点。如果你想学习CSS与HTML的有关知识, 可以仔细阅读这篇文章，了解一下关于CSS与HTML的基本语法知识。
什么是CSS?
CSS全称Cascading Style Sheets,译为层叠样式表.能够真正做到网页表现与内容分离的一种样式设计语言.
如何使用CSS
内联样式
- 通过HTML元素的style属性来设置CSS样式.
- 缺点：只对当前元素有效，CSS代码出现冗余
style="css属性:css属性值"
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内联样式</title>
</head>
<body>
<!--
内联样式：通过HTML元素的style属性进行设置
*语法结构：与HTML元素的属性的语法结构相同
style="CSS语法结构"
*缺点：只对当前元素有效，CSS代码出现冗余
-->
<p style="color: blueviolet;">哈哈哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈哈哈</p>
</body>
</html>
内嵌样式表
通过HTML元素的style元素来设置CSS样式.
优点:
- 相对于内联样式
- 通过CSS选择器定位HTML页面中一个或一类元素
缺点:
- 将CSS代码嵌入到HTML页面中，只对当前HTML页面有效
- 编码风格不符合编写原则中的低耦合,导致CSS代码可能出现冗余
语法如下:
<style type="text/css">
选择器{
属性名:属性值;
}
</style>
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内嵌样式表</title>
<!--
内嵌样式表：通过style元素进行设置
*旧版本：设置type属性值为"text/css"
*语法结构：
<style>
CSS语法结构
</style>
*优点：相对于内联样式
通过CSS选择器定位HTML页面中一个或一类元素
*缺点：将CSS代码嵌入到HTML页面中，只对当前HTML页面有效
*编码风格不符合编写原则中的低耦合
*导致CSS代码可能出现冗余
-->
<style>
p{
##p是CSS选择器:用来定位当前HTML页面的元素
color: blueviolet;
}
</style>
</head>
<body>
<p>哈哈哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈哈哈</p>
</body>
</html>
外联样式表
-
通过HTML元素的元素来引入外部CSS样式表
-
创建一个CSS文件，用来存储CSS样式内容
-
在HTML页面中通过元素引入外部指定的CSS文件
-
link元素：
1.作用：用来引入HTNL页面外部的资源
2.属性：
1）rel属性：用来设置外部资源与当前HTML页面的关系
2）href属性：用来引入外部资源的路径（相对路径和绝对路径）
3.优点：
1）相对于内嵌样式表和内联样式
2）将CSS样式与HTML页面进行分离（低耦合）
3）不会出现内嵌样式表或内联样式产生的代码冗余
4.缺点：可能会对HTML页面的加载造成负担，导致性能下降
5.相对路径：目标文件相对于当前文件的路径（推荐）
6.绝对路径：目标文件相对于根目录的路径
具体语法如下：
<link rel="stylesheet" href="style.css">
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外联样式表</title>
<!--
外联样式表：
1.创建一个CSS文件，用来存储CSS样式内容
2.在HTML页面中通过<link>元素引入外部指定的CSS文件
<link>元素：
*作用：用来引入HTNL页面外部的资源
*属性：
*rel属性：用来设置外部资源与当前HTML页面的关系
*href属性：用来引入外部资源的路径（相对路径和绝对路径）
优点：相对于内嵌样式表和内联样式
*将CSS样式与HTML页面进行分离（低耦合）
*不会出现内嵌样式表或内联样式产生的代码冗余
缺点：可能会对HTML页面的加载造成负担，导致性能下降
相对路径：目标文件相对于当前文件的路径（推荐）
绝对路径：目标文件相对于根目录的路径
-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>哈哈哈哈哈哈哈哈哈</p>
</body>
</html>
选择器的语法格式
具体语法如下：
选择器{
属性名称:属性值;
属性名称:属性值;
...
}
语法特点:
- CSS声明总是以键值对形式存在
- CSS声明总是以分号(;)结束
- 声明组以大括号({})括起来
- 为了让CSS可读性更强,每行只描述一个属性
HTML
什么是HTML？
HTML是个缩写形式，其全称为 Hyper Text Markup Language,翻译成中文的含义为超文本标记语言。HTML不是一门编程语言，而是一门标记语言。
HTML版本发展历程
- 超文本标记语言（第一版）1993年6月发布
- HTML 2.0 1995年11发布，2000年6月宣布过时
- HTML 3.2 1997年1月14日，W3C推荐标准
- HTML 4.0 1997年12月18日，W3C推荐标准
- HTML 4.01 1999年12月24日，W3C推荐标准
- HTML 5正式草案2008年1月22日公布，发行于2014年10年29日
HTML结构
示例代码是HTML页面最基本的结构
<!DOCTYPE html> ##声明HTML的版本
<html lang="en">
<head>
<meta charset="UTF-8"> ##空元素：不包含任何文本内容，没有结束标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> ##闭合元素：具有开始标签和结束标签，可以包含文本内容
</head>
<body>
</body>
</html>
- HTML文档文件的后缀名为html和htm,两种后缀名没有如何区别
- HTML文档也被称为网页
- HTML文档包括HTML标签和纯文本
HTML元素
- HTML标记标签通常被称为HTML标签，HTML标签和HTML元素通常都是描述同样的意思
- HTML标签是由尖括号包围的关键词
- HTML标签通常是成对出现的
- 标签对中的第一个标签是开始标签,第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
建议:
- 不要忘记结束标签
- HTML元素
1）没有内容的HTML元素被称为空元素,空元素是在开始标签中关闭的
2）在XHTML和XML以及未来版本的HTML中,所有元素都必须被关闭 - 推荐使用小写标签名
1）HTML标签对大小写不敏感
2）W3C在HTML4中推荐使用小写
HTML头部
- head元素包含了所有的头部标签元素.在<head>元素中你可以插入脚本(scripts),样式文件(CSS),以及各种meta信息.可以添加在头部区域的元素标为:<title>,<style>,<meta>,<link>,<script>,<noscript>,<base>
- title元素:定义了不同文档的标题,<title>在HTML文档中是必须的
- link元素:定义了一个文档和外部资源之间的关系
- style元素:定义了HTML文档的样式文件引用地址
- meta元素:描述了一些基本的元数据.<meta>标签提供了元数据,元数据也不显示在页面上,但会被浏览器解析.
meta元素的使用示例
为搜索引擎定义关键词
<meta name="keywords" content="HTML,CSS,XML,XHTML,JavaScript">
为网页定义描述内容
<meta name="description" content="Free Web tutorials on HTML and CSS">
定义网页作者
<meta name="author" content="jinvunlong">
设置HTML页面的编码格式
<meta charset="UTF-8">
HTML属性
- 属性是HTML元素提供的附加信息
- HTML元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现,比如:name=“value”.
<font color="red">hello world!</font>
建议：
- HTML属性常用引用属性值
- 推荐使用小写属性
属性: - 通用属性:几乎所有元素都可以使用的属性,例如id,name,style等
- 私有属性:某一个/类元素所具备的属性
- 事件属性:为某个元素绑定事件(DOM学习)
- 自定义属性:开发者为某个元素设置的属性,一般都是在前端框架中使用
HTML注释
<!-- 这是一个注释 -->
代码
<!DOCTYPE html>
<html lang="en">
<head>
<!--指示当前HTML页面的编码格式-->>
<meta charset="UTF-8">
<!--指定当前HTML页面的视口-->>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度一下，你就知道</title>
</head>
<body>
今天第一个作业
</body>
</html>