原创力文档- 1、本文档共27页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
查看更多
第五章
CSS样式表（一）
制作贵美“商品分类”版块
制作背景为圆角矩形的效果
本章任务
掌握CSS的基本语法
使用文本和字体样式美化网页
使用背景样式美化网页
本章目标
样式表能实现内容与样式的分离，方便团队开发
css garden /
程序员写代码
美工做样式
内容与样式和谐统一的完整网页
为什么使用CSS样式表3-1
样式复用、方便网站的后期维护
为什么使用CSS样式表3-2
同一网站共用同一样式，确保网站统一的风格
页面的精确控制，实现精美、复杂页面
为什么使用CSS样式表3-3
CSS的用途
1、外观美化
2、布局、定位
head
style type=text/css
选择器（即修饰对象）{
对象的属性1: 属性值1;
对象的属性2: 属性值2;
}
/style
/head
style标签声明标签内为CSS
多条样式规则
1.多个属性间用分号分隔
2.用冒号声明对应属性值
li {
color: red;
font-size: 30px;
font-family: 隶书;
}
选择器
样式规则
CSS基本语法
标签选择器
style type=text/css
li{
color:red;
font-size:28px;
font-family:隶书;
}
/style
… …
div
ul
li家用电器/li
… …
/ul
/div
标签选择器：用于修饰同类HTML标签的共性风格
选择器的分类3-1
style type=text/css
.blue{color:blue;}
……
/style
……
ul
li class=blue家用电器/li
li各类书籍/li
li class=blue手机数码/li
li日用百货/li
/ul
……
如果希望部分li标签采用其他样式，怎么办？
类选择器(class)
定义样式，注意类名有点号
选择器的分类3-2
应用类样式，其他元素也可以使用
style
#menu{
width:200px; background:#ccc;
font:bold 14px 宋体;
}
/style
… …
div id=menu
ul
li家用电器/li
……
/ul
/div
ID选择器
选择器的分类3-3
如果希望控制某个DIV块样式，并且要求块元素唯一，怎么办？
需求说明：
使用各类CSS选择器，实现如下的页面美化效果
练习——CSS选择器
完成时间：25分钟
div块：总宽度200px，背景灰色#ccc
商品类别：字体为橘色（#ff7300），粗体，大小为14px
其余商品： 字体大小为12px
div-ul-li组织结构
行距、对齐等：
line-height （行高）
text-align （对齐）
letter-spacing （字符间距）
text-decoration （文本修饰 ）
white-space （空白处理 ）
文本属性2-1
字符间距：5px
文本修饰：带下划线
空白处理：不断行
字体、字号：
font（缩写形式）
font-weight（粗细）
font-size（大小）
font-family（字体）
字体：宋体
颜色：红色
字号：12px
对齐：左对齐
所有li的默认样式：
字体、字号：宋体，12px
对齐方式：左对齐
行高：28px
首行标题样式：
字符间距：5px
空白处理：不换行
文本修饰：带下滑线
大字体样式：
字号：16px
颜色：红色
所有li的默认样式：
字体、字号：宋体，12px
对齐方式：左对齐
行高：28px
文本属性2-2
style tylie=text/css
li{
font: 12px 宋体;
text-align:left;
line-height:28px;
}
.title{
letter-spacing:5px;
white-space:nowrap;
text-decoration:underline;
}
.bigFont {
font-size:16px;
color:red;
}
/style
所有li的默认样式：
字体、字号：宋体，12px
对齐方式：左对齐
行高：28px
首行标题样式：
字符间距：5px
空白处理：不换行
文本修饰：带下滑线
大字体样式：
字号：16px
颜色：红色
font字体样式的缩写形式
背景属性2-1
背景属性：
backgroun
文档评论（0）