第二天
样式，css
浏览器只是html的环境，所以浏览器可以加载标签。除了html，其他的我们统统叫做资源。
在html中添加css的几种方法：
第一种：行间样式
给标签添加一个style属性，在style属性中写样式属性。
style是标签属性，color是样式属性
第二种：行内样式
在head标签中添加style标签，所有的样式属性都写在style中。
选择器：就是取一个可供选择的名字
1、标签名：原有的标签名 如h、p、a等
2、id名：唯一的一个名字
3、类名 class：可以有多个
标签名：p{...}，id名：#xie{...}，类名：.dier{...}
取名可以取a1 但不能取1a，名字尽量语义化
选择器权重：同时满足三个选择器时，以权重来计算最终结果。
标签权重为：1 类的权重为：10 id的权重为：100 行的权重为：1000
css常见样式
字体：font
颜色:color:red
大小：font-size：20px；20是数字 px是像素 默认字体nt是16px
样式：font-style：normal； 正常
：italic； 斜体
：oblique； 倾斜
字形：font-family:"微软雅黑"（除了汉子调成中文，其他无论什么都输英文格式）
图片：img
宽 width：200px
高 height：200px
第三种：外部引入
新建css文件，专写样式，再html中引用该资源。
<link rel="stylesheet" type="text/css" href="路径">
div 盒模型
div是标签，是一个模块，方便我们页面排版。
div是个标签，做项目时，需看到盒子占的空间，
常用属性：宽、高、边框
边框：border
边框样式：boeder-style：solid（实线）/dashed（虚线）
边框颜色：border-color：red
边框粗细：border-width
这三个可以简写： border：1px solid blue
div的边距：
外边距：margin 内边距：padding
maegin-top；margin-right;margin-bottom;margin-left。注意顺序
常见的margin设置方式：
margin：10px；代表上右下左都是10px
margin：10px 20px；代表上下是10px 左右是20px
margin：10px 20px 30px ；代表上是10px 左右是20px 下是30px
margn：10px 20px 30px 40px；代表上右下左（顺时针）
margin：20px auto；上下都是20px 左右平均，效果是水平居中
备注： 两个挨着元素，当外边距有重叠时，按最大的值，不会叠加。上面的两个div
最终实际外边距是30px。
文本样式：text
文本对齐方式：text-align:center/left/right/justify;
文本缩进:：text-indent:20px;
文本样式：text-decoration:none/underline;
表格：table
表格标签：<table></table>
行标签：<tr></tr>(无列)
单元格：<td></td>
快捷方式：tr * 3 > td * 3 Tab
单元格合并：
水平合并 colspan=”3”
上下合并 rowspan=”2”
块级元素、行级元素
块级元素：不管内容多少，他都会独占一行。
优点:方便写网页结构，缺点: 浪费太多排版。
特点：可以设置宽高，常见的 div p li ul 等
行级元素：不管内容多少，不会独占一行。
优点、特点：与块级相反
块级变成行级 ：在块级css样式上加个属性 display:inline;
行级变块级： 在行级css样式上加个属性 display:block;
行级块元素 给这个标签加属性 display:inline-block; 既能设置宽高，又能在一行。
浙公网安备 33010602011771号