一、字体设置
字体样式的设置，属性有：
font-size 设置字体大小 12px
font-style 设置字体风格 italic
font-wieght 设置字体的粗细 bold
还可以将4中属性一起写入一个font中，不过要按照：
字体风格---->字体粗细---->字体大小---->字体类型
font-family: fantasy; font-size: 24px; font-style: italic; font-weight: bold;
/*全部写在一起的方法，要按顺序来写*/ font: normal 400 24px cursive;
设置字体类型，可以设置楷书，隶书等等;
设置字体大小，设置数字后面要加px;
文本属性，文本的属性有
color 设置文本颜色
text-align 设置元素水平对齐方式
text-indent 设置首行文本的缩进
line-height 设置文本的行高
text-decoration 设置文本的装饰
color: #77F908; text-indent: 2em; line-height: 48px; text-align: right; text-decoration: underline; 二、颜色
RGB:颜色属性，16进制方法表示颜色，前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量
rgb（r、g、b）：正数的取值为0到255。
RGBA:在RGB的基础上，增加了控制透明度的参数，其中这个透明通道值为0到1。
注：
对于我们想要的颜色，可以在ps软件中先找到，然后复制其下面的参数值。
三、排版布局
3.1 水平对齐（text-align）方式属性：
left 把文本排列到左边，默认值由浏览器决定
right 把文本排列到右边
center 把文本排列到中间
justify 实现两端对齐文本效果
text-align: right;
3.2 排版文本段落：
首行缩进
text-indent :em或px
text-indent: 2em;
3.3 行高
line-height :px
line-height: 48px;
3.4 文本装饰：
text-decoration
text-decoration: underline;
underline 设置文本的下划线
overline 设置文本上划线
lint-through 设置文本的删除线
none 默认值，定义标准文本
3.5 div的应用
<!--制作一个div的模块--> <div style="width: 500px;height: 500px; /*背景颜色*/ background-color:bisque ; /*背景图片*/ background-image:url('../Demo/网页背景/buy.png'); /*图片不平铺，只显示一次*/ background-repeat:no-repeat; /*向XY两轴的偏移量*/ background-position-x:80px; background-position-y:80px "></div>
3.6 图片文本垂直对齐方式：
vertical-align
垂直对齐方式 vertical-align: bottom; 向上对齐 vertical-align:top; 向下对齐 vertical-align: middle;
middle（中央）top（顶部）bottom（底部）
文本阴影:
text-shadow
/*文本阴影*/ text-shadow: red 5px 4px 1px;
text-shadow : color x-offest y-offest biur-radius;
定义阴影的颜色---->x轴位移,用来定义水平位移量---->y轴位移，用来令阴影垂直位移量---->阴影模糊半径，代表阴影向外模糊的模糊范围。
这里还存在浏览器兼容性的问题。在我们不确定浏览器是否兼容的时候，可以上网查。caniuse.com
3.7 熟悉超链接属性的使用
使用cs设置超链接，伪类的名称，一共有四个:
a : link 单击访问时超链接样式
a : visited 单击访问后超链接样式
a : hover 鼠标悬浮其上的超链接样式
a : active 鼠标单击未释放的超链接样式
/*移上去未释放的效果*/ a:hover{ color: red; } /*单击未跳转时的效果*/ a:active{ color: blue }
最重要的就是鼠标悬浮其上的超链接样式，我们经常使用，所以得记住它的英文单词。
格式：
标签名：伪类名{声明；}
设置伪类的顺序，从上到下；
<!--在这里用风格来写鼠标的形状状态style="cursor: default"--> <a style="cursor: help" href="https://www.baidu.com"target="_self">百度</a>
3.8 背景属性的使用
常见的背景样式有背景图像和背景颜色
首先来设置背景颜色样式
background-color
/*背景颜色*/ background-color:bisque ;
背景图像：
background-image:url(图片路径）：
/*背景图片*/ background-image:url('../Demo/网页背景/buy.png');
背景重复方式：
background-repeat属性：
/*图片不平铺，只显示一次*/ background-repeat:no-repeat;
repeat 沿水平和垂直两个方向平铺
no-repeat 不平铺，即只显示一次
repeat-x 只沿水平方向平铺
repeat-y 只沿垂直方向平步
背景定位：
background-position属性：
/*向XY两轴的偏移量*/ background-position-x:80px; background-position-y:80px
Xpos(代表水平位置）,Ypos(代表垂直位置）,单位px
X% Y% 使用百分比表示背景的位置
XY方向关键词：水平方向关键词：left right center
垂直方向关键词：top bottom center
背景属性简写：background：背景颜色，背景图像，背景定位，背景不重复显示
背景图片大小控制：
background-size
auto 默认值，使用背景图片保持原样
percentage 当时用百分比时，不是对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的
cover 整个背景图片放大填充了整个元素
contain 让背景图片保持本身的宽高比例，将背景图片缩放到宽度或高度，正好适应所定义背景的区域
线性渐变： 颜色沿着一条直线过渡，从左到右，从右到左，从上到下等
linear-gradient(position(渐变方向)，color1,color2.....)
#线性渐变，从左到右设置，渐变方向，第一种颜色值，第二种颜色，质地，三种颜色时等等。#
径向渐变： 圆形或椭圆形渐变颜色，不再沿着一条直线变化，而是从一个起点朝着所有方向混合
注：此处也有浏览器兼容性问题
Ie浏览器是Trident内核加前缀-ms-
Chrome 浏览器是Webkit内核加前缀-webkit-
Safari浏览器是Webkit内核加前缀-webkit-
Opera浏览器是Blink内核加前缀-o-
Firefox浏览器是内核加前缀-moz-
兼容webkit内核的浏览器：
-webkit-liner-gradient(position，color1,color2.....)
四、列表
列表就是信息资源的一种展示形式，
以列表的样式显示，可以使信息结构化和条理化，便于浏览者能更快捷的获取相应的信息。
列表的分类：
1.无序列表<ul> <li><li> <ul>
2.有序列表<ol> <li><li> <ol>
定义列表<dl> <dt>标题<dt> <dd>1<dd><dd>2<dd> <dl>
<!--无序列表--> <!--这里可以取消前面的小黑点,设置成其他的东西--> <ul style="background-color: blue;width: 200px;list-style-type: square"> <li>泰戈尔诗集</li> <li>冰心诗集</li> <li>莎士比亚</li> </ul> <!--有序列表--> <ol style="background-color: aqua"> <li>泰戈尔诗集</li> <li>冰心诗集</li> <li>莎士比亚</li> </ol> <!--自定义列表--> <dl style="background-color: #77F908"> <dt>文人</dt> <dd>泰戈尔诗集</dd> <dd>冰心诗集</dd> <dd>莎士比亚</dd> </dl>
无序列表的特性：
1没有顺序，每个ul标签独占一行
2标签像前面有个实心小圆点
3一般用于无序类型的列表，如导航侧边，新闻栏有规律的图文组合模块的
定义列表的特性:
1没有顺序，每个第一批标签的dl标签独占一行(块元素）
2默认没有标记
3一般用于一个标题下有一个或多个列表项的情况。
列表样式：列表样式，可以设置列表前面的字符的形状
lidt-style-type
list-style-type: square
none 无标记字符号
disc 实心圆,默认类型
circle 空心圆
square 实心正方形
decimal 数字
例如：li { list-style : none }
为什么使用表格 : 简单通用结构稳定
基本结构: 行 列 单元格
表格标签:<table><table>
行标签:<tr><tr>
单元格标签:<td><td>
<table border="1"> <tr> <td colspan="3">大数据学士后32班成绩列表</td> </tr> <tr> <td rowspan="2">李志豪</td> <td>语文</td> <td>90</td> </tr> <tr> <td>数学</td> <td>90</td> </tr> <tr> <td rowspan="2">李宁</td> <td>语文</td> <td>100</td> </tr> <tr> <td>数学</td> <td>59</td> </tr> </table>
跨列：colspan
跨行: rowspan
五、表单在网页中的应用
表单语法：规定如何发送表单数据常用值method（post/get）；表示向何处发送表单数据action
<form method="post"action="menu.html"> <p> 姓名： <input name="lname"type="text"> </p> <p> 密码： <input name="pass"type="password"> </p> <p> <input type="submit"value="确定"/> <input type="reset"value="重置"/> </p> </form>
<!--单选框--> <!--关键是type的不同--> <!--假如给的名字相同，那么就是三选一--> <input type="radio"name="sprots"vaule="足球"/>足球 <input type="radio"name="sprots"vaule="篮球"checked/>篮球 <input type="radio"name="sprots"vaule="篮球"/>篮球 <br/> <!--假如给的名字不同就是，选一个确定一个，没得改变--> <input type="radio"name="sprots2"vaule="足球"/>足球 <input type="radio"name="sprot"vaule="篮球"/>篮球 <input type="radio"name="sprots1"vaule="篮球"/>篮球 <!--复选框--> <!--复选框选了可以取消--> <input type="checkbox"name="sprots"vaule="足球"/>足球 <input type="checkbox"name="sprots"vaule="篮球"checked/>篮球 <input type="checkbox"name="sprots"vaule="篮球"/>篮球
在实际网页开发中，通常采用post方式提交表单数据。
一般表格表单元素有：
input元素类型type （指定元素类型有：text，password，CheckBox，radio，submit，reset，file，hidden， image，和button，默认为text）
input元素名称name （指定表单元素的名称）
input元素的值value （type为radio时，必须指定一个值）
指定表单元素的初始宽度：size （type为text或password时元素大小为字符单位，其它的为像素px单位）
输入最大字符数：maxlength （type为text或password时）
确定按钮是否被选中：checked (type为radio或CheckBox时）
文本框： <input type="text"name="urseName"value="用户名"size="30"maxlength=“20"/>
密码框： <input type="password"name="pass"size=“20”/>
单选按钮：
<!--单选按钮--> <p> <input name="gen" type="radio"value="男"checked/>男 <input name="gen" type="radio"value="女"/>女 </p>
<!--复选框-->
<p> <!--复选框选了可以取消-->< input type= "checkbox" name= "sprots" vaule= "足球" />足球 < input type= "checkbox" name= "sprots" vaule= "篮球" checked />篮球 < input type= "checkbox" name= "sprots" vaule= "篮球" />篮球
</p>