整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
页
网站是使用HTML等制作的用于展示特定内容相关的网页集合
网页是网站中的一“页”，通常是HTML格式的文件，需要通过浏览器来阅读。
网页是构成网站的基本元素，它通常由图片、连接、文字、声音、视频等元素组分。一般以.htm或.HTML为后缀名的文件，都是HTML文件。
什么是html
html是超文本标记语言，它是用来描述网页的一种语言。
1、可以加入图片、声音、动画、多媒体文件等内容。
2、还可以从一盒文件跳转到另一个文件，与世界各地主机的文件连接。
网页是由网页元素组成，这些元素是利用html标签描述出来的，通过浏览器显示给用户。
静/动态区别：
静态：
XX.htm、xx. Html
区分方式：网页中数据的提取来源方式
动态：
Xx.jsp、xx.php、xx.asp、xx.cgi
页面中的数据可以通过和数据库等其他来源提取
动静态交互使用
Html语句的语法的基本单位：
标签、标记
tag<标签单词><标签单词 属性名1=”属性值” 属性名1=”属性值”>
多数标签成对使用，相对少数标签非成对（独立）使用<img>独立使用
<a> ... </a> 制作超级链接
1. 创建文本文件
2. 书写html代码（标签）
3. 保存文件
4. 文件名后缀改为.Html或.html
5. 浏览器打开以上网页文件
标签不能书写中文，只能是英文
代码中“空格”为缩进
嵌套
<html>
<head> </head>
<body> </body>
</html>
<font></font>修饰文字
字形face Font size=“1--7”字体大小 color颜色
<em></em>强调，斜体字
<p>段落文字</p>
<img src=”图片文件名”alt=”xxxxx”width=”像素宽度”height=”像素高度”>
绝对路径：”file：///D:/html/11.jpg”
相对路径：”../src/1.html/11.jpg”
<a>超链接</a>
页间跳转
<a href=”http://www.baidu.com”>文字、图片</a>
<a href=”../src/1.html”>文字、图片</a>
页内跳转（标签需要成对出现）href=作为起点name=作为结尾需要去到的地方
<a Href=”#变量名”>....</a>
..................
<a name=”变量名”>xxx</a>
<a href=”..../#t1”
两者结合使用<a href=”http://www.baidu.com/news/#变量名”>
...............
<a name=”变量名”></a>
“弹幕”滚动标签
标签在不同浏览器当中打开时的内容是不一样的
可用GRB单词进行颜色查找
独立使用标签：<img>< hr>< br换行>在需要换行的地方输入即可
空格在html中作为特殊符号使用：作为分隔符“ ”
Html中汉字不作为标签符
<；&abc>；作为括号使用
字符集不同会出现乱码
Align水平对齐属性；left、right、center
注释 屏蔽代码
Dos批处理 在注释前加上“rem”
Html <!-- 注释的内容...... - ->
扩展<META>元数据标签
标签名称、独立使用、主要作用
放在<head></head>中执行 部分功能在浏览器打开时就开始工作
Charset 字符集
Set 赋值
Set 集合
Th 保存表格数据的单位，等同于<td>。但自带居中加粗显示
Td、th单元格合并：
同行左右单元格合并colspan=”n”
同列上下单元格合并rowspan=”n”
家都知道我们前两章的课程中，我们在写标签时候，在浏览器中显示的效果跟我们需要的效果有很大差距，比如我们要改变一下文字的颜色，改变一下背景颜色，改变一下字体等，那应该办呢？我们天天说HTML是结构，CSS是表现，应该怎么解释这两个概念呢？HTML是结构，也就是如是需要写一个网页了，得先看看要生成这个网页需要那些标签，也就是搭建一下页面结构，结构搭好了，就像我们买了房子一样，房子就是结构，如果房子搭建好了但不装修，觉得还是不美观，那应该怎么办呢？那就得用CSS来修饰一下我们HTML标签，所以CSS的主要作用就是修饰HTML标签的。那我们一起来了解一下什么是CSS吧！
通过以下几方面了解CSS：
√ CSS的概念
√ CSS的作用
√ CSS的发展史
√ CSS的样式的定义方式
√ CSS的样式表
√ CSS的样式表的优先级
√ CSS的选择器分类
√ CSS的基本选择器
√ CSS选择器的优先级及权重
√ CSS的基本样式
√ CSS的尺寸单位介绍
√ CSS的颜色值表示法
好了我们先来看一下CSS的概念：
一、 CSS的概念
CSS：层叠样式表(Cascading Style Sheet)
二、 CSS的作用
用于控制网页的外观，修饰和美化html标签的,实现了结构和形式的分离。 另外大家注意我们采用的是DIV+CSS布局页面，那相对以前传统的TABLE网页布局页面有什么优势呢？有以下三点：
1：表现和内容相分离
2：提高页面浏览速度
3：易于维护和改版
好的我们再来了解一下CSS的发展史
三、 CSS的发展史
CSS3每个时间段又发布了那些属性呢，我们看一下下面的介绍。
说了这么多，CSS到底是怎么定义的呢？
四、 CSS的样式的定义方式
CSS样式定义在样式表中 ,然后再定义样式：
选择器{样式1：样式值1；样式2：样式值2；……}
写到这里大家应该猜到我们接下来要讲什么了吧，猜对了，就是要讲CSS样式表了！我们一起来看吧！
五、 CSS的样式表
CSS的样式表有那些呢？
1、行内样式表：在HTML标记内，使用style属性定义CSS样式。
语法：<p style=”color:red;”></p>
style=” ” 这句话就是行内样式表，双引号里面写的就CSS样式（或者叫CSS属性）及样式值（CSS属性值），这里的color是CSS属性，red是CSS属性值。这种样式表用的比较少，因为没有实现结构与表现的分离。
代码：
<h3 style="color:red;">行内样式表实现我变了颜色！</h3>
<p style="color:red;">行内样式表实现我变了颜色！</p>
页面显示效果
2. 内嵌式样式表：就是将CSS添加到<head>与</head>之间，并用<style></style>标记声明的一种样式表。这种样式表用的比较少，因为没有实现结构与表现的分离。
语法：<style>
/*这里写css内容*/
</style>
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS样式表</title>
<style type="text/css">
h3{
color:red;/*这里color是CSS属性，red是CSS属性值*/
}
p{
color:red;
}
</style>
</head>
<body>
<h3>内部样式表实现我变了颜色！</h3>
<p>内部样式表实现我变了颜色！</p>
</body>
</html>
页面效果：
3. 外部链接式样式表：在外部定义CSS样式表，通过<link/>链接标记链接到页面中的一种样式表。经常使用，这种样式表非常常用，不仅实现了结构与表现的分离，而且易于维护和改版。
语法： <link href="style.css" rel="stylesheet" type="text/css" />
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS样式表</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<h3>外部链接式样式表实现我变了颜色！</h3>
<p>外部链接式样式表实现我变了颜色！</p>
</body>
</html>
CSS代码：
h3 {
color: red;/*这里color是CSS属性，red是CSS属性值*/
}
p {
color: red;
}
页面显示效果
4. 外部导入式样式表：在外部定义css样式表，通过导入方式链接到页面中的一种样式表，使用不多，因为语法不如链接式样式表简单。
语法：
<style>
@import url(CSS路径);
</style>
HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS样式表</title>
<style>
@import url("css/style.css");
</style>
</head>
<body>
<h3>外部导入式样式表实现我变了颜色！</h3>
<p>外部导入式样式表实现我变了颜色！</p>
</body>
</html>
CSS代码
h3 {
color: red;/*这里color是CSS属性，red是CSS属性值*/
}
p {
color: red;
}
页面效果
通过以上四种样式表的比较，以后我们最常用的样式表就是链接式样式表，另外假如几种样式表如果同时存在的话，那就应该识别谁的样式呢？我们一起来看一下CSS样式表的优先级。
六CSS样式表的优先级
假如行内样式表和内部样式表同时存在时，应该识别是谁的样式呢？当然是行内样式表了！
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS样式表</title>
<style>
h3{color: blue;}
</style>
</head>
<body>
<h3 style="color: red;">行内样式表和内部样式表，行内的优先级高！</h3>
</body>
</html>
页面显示效果
内部样式表和链接式样式同时存在时，谁的高呢？当然是谁离所修饰的HTML标签近，谁就高。（遵循的原则就是就近原则）
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS样式表</title>
<style>
h3{color: blue;}
</style>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<h3>内部样式表和外部样式表，谁离我近我识别谁的颜色！</h3>
</body>
</html>
CSS代码
h3 {
color: red;/*这里color是CSS属性，red是CSS属性值*/
}
页面显示效果
仔细看看上面的代码，再来看看下面的代码
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS样式表</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<style>
h3{color: blue;}
</style>
</head>
<body>
<h3>内部样式表和外部样式表，谁离我近我识别谁的颜色！</h3>
</body>
</html>
CSS代码
h3 {
color: red;/*这里color是CSS属性，red是CSS属性值*/
}
页面显示效果
总之一句话样式表的优先级遵循的原则就是：就近原则！
好了， 我们掌握了样式表，我们知道样式是写在样式表里的，我们大家还记得样式的语法吗？回顾一下：
样式的写法：
选择器{样式1：样式值1；样式2：样式值2；……}
那CSS的选择器有哪些呢？明天，我们将继续学习选择器。
ss就如同一件化妆品，能够使得单调的网页变得丰富多彩。在这装饰网页的背后，本质上就是对一个一个html标签进行修饰，如何选择特定的html标签，这就尤其关键。
目标
如果想改变一张图片的某个部分的颜色，例如将下面图片左侧头发改变为红色，或者将左侧的衣服改为黑色。
首先肯定是先选择一个目标（头发，衣服），然后对这个目标进行样式的修改。
对比图
一个网页里，往往包含了众多的html标签，因为有选择器存在，你才能够选择特定的目标（html标签）来进行样式的修改。
这种选择器是css最基本的选择器类型，以html标签作为选择器
优点：简单明了，可以对全局标签做统一样式标准
缺点：所有同一个标签都只能使用同一个样式，无法对特定标签做差异化
html标签
标签选择器
效果
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，这个标识如同人的身份证，具有唯一性。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
虽然浏览器现允许多个相同id出现，但十分不建议这样，因为在js里，它无法知道哪个是真的id 选择器。
优点：可以对某个元素指定特定的样式
缺点：无法对样式复用，只能用于一个元素
html标签
id选择器
效果
Class选择器是css经常使用的选择器类型，用于描述一组元素的样式，class 选择器有别于id选择器，class最大的特点是可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示
优点：可以对某个元素指定特定的样式；可以对多个元素使用同一个样式，达到复用效果
缺点：无
html标签
class选择器
基本选择器总结
*请认真填写需求信息，我们会在24小时内与您取得联系。
