Web前端 学习知识点总结（一）HTML基本标签. Web前端 学习知识点总结（二）之Form和Css选择器. Web前端 学习知识点总结（三）Css字体、文本样式以及盒子模型. Web前端 学习知识点总结（四）之display 和 float. Web前端 学习知识点总结（五）qq导航条案例，使用min-width解决留白. Web前端 学习知识点总结（六）定位position. Web前端 学习知识点总结（七）Css3动画animation. Web前端 学习知识点总结（八）JavaScript的常用基础. Web前端 学习知识点总结（九）JavaScript的BOM和DOM基础. Web前端 学习知识点总结（十）jQuery基础 获取文本和选择器. Web前端 学习知识点总结（十一）jQuery进阶 动画和节点操作. Web前端 学习知识点总结（十二）jQuery进阶 表单验证和简单正则表达式. Web前端 学习知识点总结（十三）学生管理系统案例.
CSS的文字样式，使用css来绘制页面、美化页面、处理页面的图片，使得页面设计更加美观。css的设计，不难，重要的理解基本的语句之后，对需求进行对应的代入，对号入座，通过一定时间的积累，一定可以完成。
CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。下面介绍几个最主要的文字样式。
字体样式可以显示操作系统上自带的样式。 英文影响英文,中文影响中英文。 混合设置字体时 英文在前 中文在后。 （c:/Windows/font）处可以找到操作系统中自带的样式。
font-size 属性设置文本的大小。
注意：如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)
用来设置字体的颜色。可以使用对应颜色的单词。 补充另外的使用格式 1.十进制color：rgb（255,0,0，0.5） 0.5是透明度范围，可以用于做背景（0-1） 2.十六进制（用拾色器）;
该语句主要是为了对文字加粗使用的。 一般字体粗细 normal=400 bold=700 可使用的范围在100-900;
示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。
通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。（对段落进行相应的调整）。
（块元素）位置对齐方式
left //左对齐right //右对齐center //居中主要作用是可以进行首行缩进 结合font-size一起来设置 2em（是一个相对单位， 相对与当前的font-size，实现首行缩进的效果）。
行间距变换 多行(行间距) 单行(竖直居中)
往往结合a标签来使用。
middle属性; 可以加在图片上 使得图文对齐。 1 是让图片填充（消除产生的留白问题）。 2.是让图片后的文字居中。
代码如下（示例）：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*未点击的状态*/ a:link{} /*访问后的状态*/ a:visited{} /*当鼠标悬浮的时候的状态*/ a:hover{} /*当鼠标按下不松开的状态*/ a:active{} </style> </head> <body> <a href="#">领礼品</a> </body> </html>hover是经常使用，用来设置效果的。
用来去除列表前方的小圆点。
图标的样式
可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。
这条规则把元素的背景设置为灰色：
p {background-color: gray;}background-image 属性的默认值是 none，表示背景上没有放置任何图像。
如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：
body {background-image: url(/i/eg_bg_04.gif);}大多数背景都应用到 body 元素，不过并不仅限于此。
背景的位置 x 右为正 y 下为正。
也可以用百分百 % %
可以用英文单词 水平left center right
竖直top center bottom
调整插入背景的大小 可能会压缩或者拉伸。
(1)px
(2)百分比 可能会压缩,拉伸,留白
(3）cover 不会留白 但是会裁剪 会模糊
(4) contain 不会失真 但是会留白
创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从下到上渐变。
/* 从上到下，蓝色渐变到红色 */ linear-gradient(45deg, blue, red); /* 渐变轴为45度，从蓝色渐变到红色 */ linear-gradient(45deg, blue, red); /* 从右下到左上、从蓝色渐变到红色 */ linear-gradient(to left top, blue, red); /* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */ linear-gradient(0deg, blue, green 40%, red);background: red url() no-repeat 95% center; 颜色 图片 no-repeat x y
当果一个元素覆盖在另外一个元素之上，而你想显示下面的元素，这时你就需要把上面这个元素的background设置为transparent 最后的效果图：
盒子模型主要是用来布局的，主要是padding和margin两个属性的使用，一般在设置的时候，最开始需要 *{margin: 0px; padding: 0px; } 对所有的额外属性进行清除，更好的根据要求，来设计自己的界面。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style > *{margin: 0px; padding: 0px; } div{ width: 100px; height: 100px; /*solid 实线*/ /*dashed 虚线*/ /*dotted 点线*/ /*none 无显示*/ /*1.border*/ border:1px solid red; /*一个是全部*/ border-width: 4px; /*border-width: 1px 2px 3px 4px;(上右下左)*/ /*边框的风格*/ border-style:double ; /*2.外边距 在块元素中*/ /*auto 居中*/ margin:1px 2px 3px 4px ; margin: auto; /*3padding: ;内边距*/ /*主要用于调整文字 可以上下居中*/ padding: ; padding-left: ; /*padding向内扩展*/ /*box-sizing: border-box;*/ 组合这两个语句保证padding不会向外扩展是向内扩张 /*padding向外扩展*/ /*默认属性*/ box-sizing: content-box; /*4盒子阴影*//*CSS3*/ /*内阴影和外阴影*/ /*内阴影 X y 模糊半径*/ /*不写inset是默认外阴影*/ /*1px 从原点开始，沿x轴正方向的长度（倘若为负值，为沿x轴负方向的长度）； 2px 从原点开始，沿y轴正方向的长度；（倘若为负值，为沿y轴负方向的长度）； 3px 阴影的模糊度，只允许为正值； 4px 阴影扩展半径；*/ box-shadow:1px 1px 10px green ; } </style> </head> <body> <div> </div> </body> </html>小案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style > *{ /*最开始要设置的值*/ margin: 0; padding: 0; } /*边框border 和窗口宽度 width*/ div{ border: 1px solid red; width: 300px; } /*对大标题h2背景进行tiaoz*/ div h2{ /*内部字体的缩进*/ text-indent: 20px; /*字体大小*/ font-size: 18px; /*颜色*/ color: white; /*加粗*/ font-weight:bold; /*背景渐变*/ background:linear-gradient(to bottom,#0467ac,#63a7d6,#b6dbf5); /*行间距*/ line-height: 35px; margin-bottom:20px ; } /*对小标题dt的背景进行调整*/ div dl dt{ margin-left:40px; text-indent:10px; /*行间距的调整*/ line-height:35px; background:linear-gradient(to bottom,#e4f1fa,#bddff7,#e4f1fa); } /*对小标题a标签内属性调整*/ div dl dt a{ color:#0467AC; font-size: 14px; font-weight:bold; /*去掉下划线*/ text-decoration: none; } /*对小标题a的悬浮状态进行调整*/ div dl dt a:hover{ text-decoration: underline; } /*对内容背景*/ div dl dd { margin-left:40px; text-indent: 10px; /*line-height: 20px;*/ } /*对内容文字*/ div dl dd a{ line-height: 26px; font-size: 12px; color: gray; text-decoration: none; } /*对内容悬浮状态*/ div dl dd a:hover{ color: firebrick; text-decoration: underline; } </style> </head> <body> <div class="home"> <h2>家用电器</h2> <dl> <dt><a href="#">大家电</a></dt> <dd> <a href="#">平板电视</a> <a href="#">洗衣机</a> <a href="#">冰箱</a> </dd> <dd> <a href="#">空调</a> <a href="#">烟机/灶具</a> <a href="#">热水器</a> </dd> <dd> <a href="#">冷柜/酒柜</a> <a href="#">消毒柜</a> <a href="#">家庭影院</a> </dd> </dl> <dl> <dt><a href="#">生活电器</a></dt> <dd> <a href="#">电风扇</a> <a href="#">净化器</a> <a href="#">吸尘器</a> </dd> <dd> <a href="#">净水设备</a> <a href="#">挂烫机</a> <a href="#">电话机</a> </dd> </dl> <dl> <dt><a href="#">厨房电器</a></dt> <dd> <a href="#">榨汁机</a> <a href="#">电压力锅</a> <a href="#">电饭煲</a> </dd> <dd> <a href="#">豆浆机</a> <a href="#">微波炉</a> <a href="#">电磁炉</a> </dd> </dl> <dl> <dt><a href="#">五金家装</a></dt> <dd> <a href="#">淋浴/水槽</a> <a href="#">电动工具</a> <a href="#">手动工具</a> </dd> <dd> <a href="#">仪表仪器</a> <a href="#">浴霸/排气</a> <a href="#">灯具</a> </dd> </dl> </div> </body> </html>最后的结果：
该案例的核心在于对字体样式的调整，以及margin和padding和综合运用。
