表现标准语言CSS3学习 入门+导入方式
如何学习：
-
css是什么
-
css怎么用(快速入门)
-
css选择器（重点+难点）
-
美化网页（文字、阴影、超链接、列表、渐变...）
-
盒子模型
-
浮动
-
定位
-
网页动画（特效效果）
1.1 什么是CSS
Cascading Style Sheet 层叠级联样式表
CSS：表现（美化网页）字体、颜色，边距、高度、宽度、背景图片、网页定位、网页浮动...
1.2 发展史
CSS1.0
CSS2.0 DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO
CSS2.1 浮动、定位
CSS3.0 圆角、阴影、动画... 浏览器兼容性
1.3 快速入门
style 注释方式为/* */
- 放到HTML文件内部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范 <style> 可以编写css代码,每一个声明，最好使用分号结尾。
语法：
选择器{
声明1;
声明2;
}
-->
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
- 与HTML分离
在html的同级目录下，建立css文件夹。
用link进行连接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范 link方式
-->
<link rel="stylesheet" href="css/Style.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
h1{
color: red;
}
css的优势
-
内容和表现分离
-
网页结构表现单一，可以实现复用
-
样式十分丰富
-
建议使用独立于html的css文件
-
利用SEO(Search Engine Optimization)：汉译为搜索引擎优化，容易被搜索引擎收录。
1.4四种css的导入方式
表现方式，就近原则！哪个离代码近，哪个就有优势。
- 行内样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style = "color: red">我是标题</h1>
</body>
</html>
- style标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 注释 */
h1{
color: red;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
- 外部样式链接式link
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范 link方式
-->
<link rel="stylesheet" href="css/Style.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
h1{
color: red;
}
- 外部样式导入式@import 2.1中使用的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@import url("css/style.css");
</style>
</head>
<body>
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 >我是标题</h1>
</body>
</html>