动态网页：和服务器打交道的网页，数据不是死的，数据动态更新。
1、静态网页简单介绍
html、css、js
html：就是一些标签的累积。
css：负责给页面中的文字添加样式，背景色、文字颜色、大小
js：实现页面的动画效果
2、CSS简介
cascading style sheet 层叠样式表
单独的html可以布局出有样式的页面，为什么还需要css呢？
1、分离出来之后方便管理
2、分离出来的样式表可以重复利用
3、浏览器缓存样式表，提高响应速度
html离开css照样活得很潇洒，但是css离开html过不下去。
以后写代码。html是单独的html文件，后缀名.html，css是单独的css文件，后缀名是.css，js文件是单独的js文件，后缀名是.js
开发流程
1、由产品经理或者客户提出需求。
2、由UI设计师设计出来页面。
3、再交给前端妹子来写页面。
4、交给后端的汉子来添加数据，实现业务逻辑。
5、交给测试组来测试。
黑盒：测试不行 白盒:测试人员可以看代码，修改代码 测试 老练测试
3、三种链接方法
行内样式表
写在开始标签里面，格式 style="color:red;"
内联样式表
要写在head标签中，格式 <style type="text/css">这里写样式表</style> type属性可加可不加
外联样式表
将link标签写在head中，格式为：
<link type="text/css" rel="stylesheet" href="2wailian.css" />
href是一个链接地址，地址要写对
CSS语法特点
1、格式为：选择器{}
2、大括号里面写样式
3、样式的格式，是 属性:属性值; 要以分号结尾
html中：属性="属性值" 多个属性使用空格隔开
4、html中注释： <!--注释写到这里-->
css中： /*中间写注释*/
【注】不要在注释中再写注释
4、常用选择器
只能有数字、字母、下划线组成，数字不能开头
标签：html中所有的标签都可当做选择器名。给文件中所有的这个标签设置样式
class：在标签中给标签一个class属性，属性值就是类名，
在css中，写class选择器是给所有的这一类的标签设置样式，格式为
.类名{}
【注】一个标签可以有多个类名，中间用空格隔开
id: 在html中，id名一定要注意是唯一的。id一般配合js使用。
id选择器格式为 #id名{}
组合:可以将id选择器、class选择器、标签选择器、层级选择器组合到一起给样式，中间用逗号隔开
层级：有层级关系的，我们可以直接从父级标签找到子级标签或者子子级标签，层级之间使用空格隔开
伪类（link,hover,active,visited, focus, first-child,last-child）
link---正常状态设置
hover---鼠标放上去设置
active---激活状态设置
visited---访问过后状态设置
可靠顺序为link-visited-hover-active
focus:一般配合input使用，当文本框成为焦点的时候给样式
first-child:父级标签中的第一个是这个标签时候生效
last-child:父级标签中的最后一个是这个标签时候生效
比如 a:first-child 那么父级标签的第一个孩子必须是a标签才有效。
属性（）：一般也只用于input框
格式为：
input[name="username"]{
background-color: red;
}
通用：通用选择器就是给整个页面都设置样式，
格式为： *{}
5、继承性优先级（了解）
继承性：主要针对于文本属性，比如字体大小、文本颜色
单个选择器优先级
行内优先级 > id选择器 > class选择器 > 标签选择器
内联样式和外联样式优先级一样。
多个选择器优先级
哪个定位的越精确，哪个优先级越高。
6、行内元素、块元素、行内块元素
块元素：p table h1 ol ul div hr
其他的都是行内元素
在css中
【注1】块元素才有宽高属性，行内元素没有宽高属性
【注2】如果不设置块元素的宽度，那么其宽度默认占用整行，如果没有对其设置高度，那么高度由内容填充。如果没有内容，那就没有高度
【注3】有两个特殊的标签， img input，这两个是行内块元素，布局的时候不会另起一行，但是他们有宽度和高度的属性。
7、CSS文件分离
将公用的一些css文件。比如头部或者尾部单独列出来
1、提高样式表的利用率
2、提高访问速度（浏览器会缓存样式表）
<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="body.css">
<link rel="stylesheet" href="footer.css">
8、常用属性
1、宽高
width\height：设置块标签的宽度和高度
min-height\max-height\max-width\min-width(了解)
2、单位
px：像素
em：相对单位，相对于父级的大小
rem：也是一个相对单位，是相对于html字体的大小（了解）
%：也是一个相对单位。相对于父级的宽度或者高度
3、字体
font-size\color\font-weight\font-family\font-style
4、文本属性
text-indent
text-align
text-overflow
text-decoration
text-shadow
line-height
vertical-align
网友评论