- 1、本文档共47页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
网页设计 CSS的基础知识
第 10 章 CSS的基础知识;10.1 什么是样式表
10.2 样式表的基本结构
10.3 如何在网页中加入css
10.4 div与span标签
10.5 CSS的几个特性 ;CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。
样式:网页的内容以什么样的形式显示出来,如文字的大小、颜色,图片的大小、插入的位置等。
层叠:当HTML文件引用CSS文件的时候,如果CSS所定义的样式发生了冲突,将依据层次的先后来处理网页中内容的样式。;CSS 主要是用于控制网页元素的显示方式
样式表的宗旨就是将结构(内容)和格式分离,HTML标记只控制网页的内容,内容的样式则交由CSS来控制。
CSS也是一种标记语言,有很多属性来源于HTML,它也需要通过浏览器解释执行。;10.2 样式表的基本结构;样式定义的语法示例;常用Selector类型;HTML标记符的Selector;例10-1:建立一个简单的样式表
html
headtitle简单的样式表/title
style type=text/css
!--
h1{color:red;font-size:35px;font-family:黑体}
p{background:yellow;color:blue;font-size:25px;font-family:隶书}
-- /style
/head
body bgcolor=lightblue
centerh1样式表/h1
p这是一个简单的样式表/p
/center
/body/html;;用户定义类;定义方式;举例如下
html head titleCSS类选择器使用 /title
style type=text/css
.red{color:red; font-size:18px;}
.green{color:green; font-size:25px}
/style /head
body
p class=redclass选择器red/p
p class=greenclass选择器green/p
h3 class=greenh3 也同样适用/p
/body/html ;;用户定义ID;# idname{样式属性:属性值; 样式属性:属性值;......}
所有HTML标签都可引用它
HTML标签# idname {样式属性:属性值; 样式属性:属性值;......}
只有该指定的标签才能引用它;举例如下
html head titleCSS id选择器使用/title
style type=text/css
#pp{color:red; font-family:黑体}
p#pt{color:blue; font-family:仿宋}
/style /head
body
h1 id=pp 这是我们定义的PP类 /h1
p id=pp这是我们定义的PP /p
p id=pt这是我们定义的PT类 /p
/body/html;;ID使用注意事项;CSS属性单位;相对长度单位:
CSS还支持下列三种长度的相对单位
em (当前字体中字母M的宽度)
ex (当前字体中字母X的高度)
px (一个象素的大小)。;颜色单位:
颜色名: #RRGGBB
rgb(rrr, ggg, bbb)
rgb(rrr%, ggg%, bbb%);10.3 如何在网页中加入css;10.3.1内联样式;以下是一个例子;10.3.2 嵌入一个样式表;示例:
STYLE TYPE=text/css MEDIA=screen !– BODY { background: url(foo.gif);color: black } P.EM { background: yellow; color: black } .note { margin-left: 5em; margin-right: 5em } -- /STYLE;样式表的规则单独保存在一个文件中
外部的样式表可以通过HTML的LINK元素连接到HTML文档中
一个样式表文件可链接到多个HTML文件;基本语法如下: head title.../title link Rel=stylesheet href=ab.css type=text/css /head;LINK标签:
LINK REL=StyleSheet HREF=“aaa.css” TYPE=“text/css” TITLE=
文档评论(0)