学习H5的第三天

字体设置

font文字简写

font是font-style（倾斜） font-weight （粗细）font-size （大小）/ line-height （行高）font-family （字体）的简写。

font:italic  800 30px/80px "宋体"；顺序不能改变 ,必须同时指定font-size和font-family属性时才起作用

font-size：大小

单位可以是px，pt，em等 12pt=16px  1em=16px  浏览器默认是16px,设计图常用字号是12px

font-family字体

当字体是中文字体、英文字体中有空格时，需加双引号；

多个字体中间用逗号链接,先解析第1个字体,如果没有解析第2个字体,以此类推，浏览器默认的是微软雅黑字体

        

color 字体颜色

字体颜色可以用英文、16进制表、rgb选择

line-height 行高 和height数值一样会垂直居中

line-height的数据=height的数据，可以实现单行文本垂直居中

font-weight 加粗

font-weight:bolder(更粗的)/bold（加粗）/normal（常规）

font-weight:100-900; 100-500不加粗   600-900加粗

font-weight：lighter（变细）

font-style 倾斜

font-style：italic(斜体字)/oblique(倾斜的文字)/normal（常规显示）;

text-align（文本水平对齐）：left 水平靠左

                      ：right 水平靠右

                      ：center 水平居中

                      ：justify水平2端对齐，但是只对多行起作用

text-decoration文本修饰  超链接去除下划线

text-decoration:none没有/underline下划线/overline上划线/line-through删除线

text-indent首行缩进

text-indent可以取负值；    text-indent属性只对第一行起作用

letter-spacing字间距 用在中文中

word-spacing字间距 用在英文

控制文字和文字之间的间距

Line-herght：xxpx； 行高

副元素是什么

<Span></span> 是嵌套用的

列表属性

List：列表 style：样式 type：类型  position：位置

list-style-type定义列表符合样式

list-style-type:disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉符号)

list-style-image将图片设置为列表符合样式

list-style-image:url();

list-style-position设置列表项标记的放置位置。

list-style-position：outside；列表的外面 默认值

list-style-position：inside；列表的里面

list-style简写

list-style:none; 去除列表符号

表格制作

<table border=“1px”（表格边框属性）cellspacing=“0”（ 表示单元格间隙）>【表格】

<cod width=”xxx”、（一、单元格宽度）>【col带表一列】

<cod width=”xxx”、（单元格宽度）>

<cod width=”xxx”、（单元格宽度）>

<tr align=“center”（一、对齐方式=“居中”）>【表示一行、align】

  <td width=“xxx”(二、单元格宽度) align=“center”（二、对齐方式=“居中”）></td>【单元格】

  <td colspan=“7”>姓名</td>【横向合并7】【rowspan 是竖着合并】

<td></td>

<td></td>

<td></td>

</tr>

横着做的

th=加粗水平居中的td

数列

<cod width=”100”> 

<cod width=”xxx”>  可以简化成<codgroup span=”5”  width=”xxx”>

<cod width=”xxx”>

<cod width=”xxx”>

<cod width=”xxx”>

<cod width=”200”>--------------<codgroup span=”5”  width=”xxx”>

背景图片

background-color 背景颜色  background-color：red；reda（，，，透明）透明值0-1

background-image 背景图片background-image:url();

background-repeat 背景图片的平铺background-repeat:no-repeat/repeat/repeat-x/repeat-y

background-position 背景图片的定位background-position：两个方位、一个方位（动一个方位另一个居中）、两个像素、一个像素（动一个方向，另一个方向居中）center居中

background-attachment 背景图片的固定background-attachment : scroll (滚动)/ fixed（固定，固定在浏览器窗口里面，固定之后就相对于浏览器窗口了） ;

缩写：background：颜色 图片位置 不平铺 位置、居中

Background-size:宽度% 高度%

Margin-top：200px 往下移动

Overflow：hidden 清除往下移动的效果（溢出：隐藏）

Display：block 做成单独的模块