Web前端开发案例教程——HTML+CSS+JavaScript (4).pptVIP

字体属性 h3{font-family:隶书;font-weight:bolder;color:green;margin:auto} p{font-size:14px;font-style:italic;color:#8B008B;font-weight:bold} 实例4-4：设置字体属性 文本属性 p{line-height:40px;word-spacing:4px; text-indent:30px ;text-decoration:underline;text-transform:lowercase;margin:auto} 实例4-5：设置常用文本属性 背景属性2-1 背景属性 背景属性2-2 body{background:url(images/background.jpg);background-repeat:repeat-x} 实例4-6：设置常用背景 列表属性 列表（li）常用属性 list-style （列表风格） 属性值 方式 语法实现 示例 none 无风格 list-style:none; 刷牙 洗脸 disc 实心圆（ul默认类型） list-style:disc; ● 刷牙 ● 洗脸 circle 空心圆 list-style:circle; ○ 刷牙 ○ 洗脸 square 实心正方形 list-style:square; ■ 刷牙 ■ 洗脸 decimal 数字（ol默认类型） list-style:decimal 1. 刷牙 2. 洗脸 列表属性2-2 列表属性的典型应用 float属性用于定义元素的浮动方向 style li{ width:120px; color:red; font:24px 隶书; list-style:none; float:left; } /style …… ul li购物车/li …… /ul 设置列表为none去掉圆点 所有html标签都有的float浮动属性，此处用于横向排列 实例4-7：列表常用属性 * 提一下CSS编码规范： 1）代码都小写 2）可以添加注释说明：同C#,单行//，多行/*......*/ * 规定块的样式，一般和DIV标签配对使用 * * 1、font为缩写形式，又细分为font-weight、 font-size、 font-family 2、不断行：指一行内容较多，浏览器默认会换行显示。如设置为不断行，则超过一行时也不断行。例如：本例新闻标题的链接，因从数据库读出，布置新闻标题有多长。为了页面美观起见，可以规定新闻标题不断行，及时超过一行也不换行显示。 行高：line-heigth还有一功能，它规定行高后，可以是本行内容垂直居中。 * 1、 background为缩写形式，又细分为background-color等几个子属性 * * 2、注意背景色在背景图的后面 * CSS样式表基础 第四章 学习目标 ?掌握CSS的基本语法及样式规则 ?掌握类选择器和ID选择器的定义方式 ?使用文本和字体样式美化网页 ?使用背景样式美化网页 ?使用伪类样式控制超链接样式 ?掌握CSS样式中常用的属性设置 CSS是Cascading Style Sheets（层叠样式表）的缩写，解决了网页界面排版的问题。 ?实现内容和样式的分离，利于团队开发。 为什么使用CSS样式表3-2 4.1CSS基础 实现页面的精确控制 为什么使用CSS样式表3-3 CSS的用途 1、外观美化 2、布局、定位 应用css样式的前后对比 head style type=text/css 选择器（即修饰对象）{ 对象的属性1: 属性值1; 对象的属性2: 属性值2; } /style /head style标签声明标签内为CSS 多条样式规则 1.多个属性间用分号分隔 2.用冒号声明对应属性值 li { color: red; font-size: 30px; font-family: 宋体; } 选择器 样式规则 CSS基本语法 4.2CSS基本语法 标签选择器 style type=text/css li{color:red;font-size:28px; font-family:宋体; } /style … … div ul li服装城/li li食品/li li团购/li /ul /div 标签选择器：用于修饰同类HTML标签的共性风格 选择器的分类3-1 实例4-1：标签选择器 style type=text/css .blue{color:blue;}