HTML基础___CSS样式表__上 <第九天>
2007-06-28 13:04
295 查看
学习内容:
1.CSS简介
2.CSS的简单运用
3.CSS__字体属性
4.CSS__颜色及背景属性
1.CSS简介
CSS------Cascading Style Sheet的缩写,译为:层叠样式表 or 级联样式表 即 样式表.
样式表的功能:
灵活控制网页中文字的字体,颜色,大小,间距,风格,位置.
随意设置一个文本块的行高,缩进,并可以为其加入三维效果的边框.
更方便地为网页中的任何元素设置不同的背景颜色和背景图片.
精确控制网页中各元素的位置.
可为网页中的元素设置各种过滤器,从而产生如阴影,辉光,模糊和透明等效果.
可以结合脚本语言,使网页中的元素产生各种动态效果.
CSS的特点:
减少图形文件的使用.
集中管理样式信息.
共享样式设定
将样式分类使用.多个文件可使用同一个CSS样式文件,一个文件上也可以同时使用我个CSS文件.如果样式冲突,浏览器根据愉下规则显示样式属性:
如果在同一文件中应用两种样式时,浏览器显示出两种样式中除冲突属性之外的所有属性.
如果在同一文件中应用两种样式是相互冲突的,浏览器显示出最里面的样式属性.
如果存在直接冲突,自定义样式的属性(class属性的样式)将覆盖HTML标记样式的属性.
2.CSS的简单运用
CSS的基本语法: 选择符{样式属性:取值;样式属性;取值;....}
如 : body{color;black} 实现功能是将页面中的文字显示为黑色.
CSS的选择符:
一. 类选择符
用类选择符可以把相同的元素分类定义成不同的样式.定义选择符时,在自定类名称的前面加一个句点 ( . )
类选择符的语法:标记名.类名{样式属性:取值;样式属性:取值;........}
例:p.red{color:red}
p.black{color:black}
在这段代码中,定义了段落选择符P的red和black两个类,red和black就可以称为类选择符.
类的名称可以是任意英文单词或以英文开头与数字的组合.
值得注意的是.类选择符在实际应用中,可以省略HTML标记名,也就是实例中的P,直接写成下面的代码: .red{color:red} .black{color:black} 这段代码定义了样式,并没有应用样式.如果要应用样式中的red类,还需要在正文中添加如下代码: <p class=red> 要应用black样式同样要添加<p class=black>.
二.ID选择符
在HTML/XML中,在需要惟一标识一个元素时,就会赋予它一个id标识,以便在整个文档中快速找到这个元素.而ID选择符则用来对这个单一元素定义单独的样式.定义方法和类选择符大同小异.只是把句号. 改成井号＃而在调用类时需要把class换成id.
ID选择符语法:标记名#标识名{样式属性:取值;样式属性:取值;......}
例：定义＃exam{color:#ff0000} 引用 <p id="exam">
ＩＤ选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用．
三.包含选择符
包含选择符也称为联选择符，是对某种元素包含关系（对元素１里包含元素２）定义的样式表．这种方式只对在元素１里的元素２定义，对单独的元素１或元素２无定义．
例：table a{font-size:12px}
这段代码只对表格内的链接文字有效，设定了文字大小为１２像素，而对于表格外的链接文字则不起作用．
添加CSS的方法
1.链入外部样式表
把样式表单独保存为一个文件,然后在页面中用<link>标记链接,而<link>标记必须放页面的<head>区域内.
语法:<link rel="styleshee" type="text/css" href="样式表文件的地址">
rel="styleshee"指在页面中使用的是外部样式表.
type="text/css"是指文件的类型是样式表文本.
href参数则用来设定文件的地址.可以是绝对地址或相对地址.
样式表文件扩展名.css 其内容就是定义的样式,不包含HTML的标记,如:
hr{color:#000ff}
p{color:black;font-famil:"宋体"}
2.内部样式表
内部样式表是把样式表的内容直接放到页面的<head>区域里,通过<stle>标记插入.
语法: <style type="text/css">
选择符{样式属性:取值;样式属性:取值;....}
选择符{样式属性:取值;样式属性:取值;....}
.......................
</style>
由于有些低版本的浏览器不能识别style标记,因此使用HTML语言的注释语句来隐藏样式表的定义内容.写成
语法: <style type="text/css">
<!--
选择符{样式属性:取值;样式属性:取值;....}
选择符{样式属性:取值;样式属性:取值;....}
.......................
-->
</style>
3.导入外部样式表
导入外部样式表是指内部样式表的<style>区域里引用一个外部的样式表文件,导入里需要使用@import声明
语法:<style type="text/css">
@import url(样式表地址)
选择符{样式属性:取值;样式属性:取值;....}
选择符{样式属性:取值;样式属性:取值;....}
.......................
</style>
4.内嵌样式
内嵌样式是混合在HTML标记里使用的,用这种方法可以很直观的对某个元素直接定义样式,内嵌样式的使用是直接在HTML标记里加入<style>参数.
语法:< HTML标记 style="样式属性:取值;样式属性:取值;...."}
书写CSS的注意事项
1.如果属性的值是多个单词组成,则必须使用引号将属性值括起来.
2.如果要对一个选择符指定多个属性,则需要使用分号将所胡的属性和值分开.
3.可以将具有相同属性的值勤的先择符组合起来,用逗号将其分开.
如:p,table{font-size:9pt} td,body,div{font:13px arial,sans-serif,宋体}
4.CSS样式表中的注释语句以:"/*"开头,以"*/"结尾. C语言好像也是这么注释的.:)
3.CSS__字体属性
设置字体 ____font-famlily
语法:font-famlily:"字体1","字体2",..
设置字号 ____font-size
语法:font-size:大小取值
取值范围:绝对大小:xx-smail \ x-smll \ small \ medium \ large \ x-large \ xx-large
相对大小: larger \ smaller
长度值或百分比
长度值是由浮点数字和单位标识符组成的长度值.单位:pt(点,1点=1/72英寸) \px(像素),in(英寸)等.
设置字体风格_____font-style
语法:font-style:样式的取值
样式的取值范围: normal(正常显示) ___italic(斜体显示)___ oblique(偏斜体显示)
设置加粗字体_____font-weight
语法:font-weight: 字体粗度值
取值范围: normal正常显示bold粗体bolder特粗体lighter特细体number 数字100-900
小型的大写字母___font-variant
语法:font-variant:取值
取值范围:normal正常small-caps英文显示为小型的大写字母体.
复合属性:字体____font
语法:font:字体取值
字体取值可以包含字全\体族科,字体大小,字体风格,加粗字体,小型大写字母.之间用空格相连 .如h2{font:bolder italic 14pt 黑体}
4.CSS__颜色及背景属性
颜色属性设置___color
语法:color:颜色取值
背景颜色____background-color
语法:background-color:颜色取值
背景图像___background-image
语法:background-image:url(图像地址)
背景重复____background-repeat
语法:background-repeat:取值
取值范围:repeat 图像在纵向和横向上平铺
no-repeat 图像不平铺
repeat-x 图像在水平方向上平铺
repeat-y 图像在垂直方向上平铺
背景附件___backrgound-attachment
语法:background-attachment:取值
取值范围: scroll图像是随对像内容滚动. 默认
fixed图像是固定在页面上静止不动的.
背景位置____background-position
语法:background-position:位置取值
取值范围:百分比,长度top center bottom 纵向的关键字既顶端,居中,底端
left center right 横向的关键字,既左,中,右
复合属性:背景___background
语法:background:取值
和字体font属性类似.它也可以包含背景颜色,背景图像,重复属性,附件属性,背景位置.用空格相连如:body{background:url(pic22.jpg) no-repeat right bottom}
本文出自 “Persist Persist Insists” 博客，谢绝转载！
1.CSS简介
2.CSS的简单运用
3.CSS__字体属性
4.CSS__颜色及背景属性
1.CSS简介
CSS------Cascading Style Sheet的缩写,译为:层叠样式表 or 级联样式表 即 样式表.
样式表的功能:
灵活控制网页中文字的字体,颜色,大小,间距,风格,位置.
随意设置一个文本块的行高,缩进,并可以为其加入三维效果的边框.
更方便地为网页中的任何元素设置不同的背景颜色和背景图片.
精确控制网页中各元素的位置.
可为网页中的元素设置各种过滤器,从而产生如阴影,辉光,模糊和透明等效果.
可以结合脚本语言,使网页中的元素产生各种动态效果.
CSS的特点:
减少图形文件的使用.
集中管理样式信息.
共享样式设定
将样式分类使用.多个文件可使用同一个CSS样式文件,一个文件上也可以同时使用我个CSS文件.如果样式冲突,浏览器根据愉下规则显示样式属性:
如果在同一文件中应用两种样式时,浏览器显示出两种样式中除冲突属性之外的所有属性.
如果在同一文件中应用两种样式是相互冲突的,浏览器显示出最里面的样式属性.
如果存在直接冲突,自定义样式的属性(class属性的样式)将覆盖HTML标记样式的属性.
2.CSS的简单运用
CSS的基本语法: 选择符{样式属性:取值;样式属性;取值;....}
如 : body{color;black} 实现功能是将页面中的文字显示为黑色.
CSS的选择符:
一. 类选择符
用类选择符可以把相同的元素分类定义成不同的样式.定义选择符时,在自定类名称的前面加一个句点 ( . )
类选择符的语法:标记名.类名{样式属性:取值;样式属性:取值;........}
例:p.red{color:red}
p.black{color:black}
在这段代码中,定义了段落选择符P的red和black两个类,red和black就可以称为类选择符.
类的名称可以是任意英文单词或以英文开头与数字的组合.
值得注意的是.类选择符在实际应用中,可以省略HTML标记名,也就是实例中的P,直接写成下面的代码: .red{color:red} .black{color:black} 这段代码定义了样式,并没有应用样式.如果要应用样式中的red类,还需要在正文中添加如下代码: <p class=red> 要应用black样式同样要添加<p class=black>.
二.ID选择符
在HTML/XML中,在需要惟一标识一个元素时,就会赋予它一个id标识,以便在整个文档中快速找到这个元素.而ID选择符则用来对这个单一元素定义单独的样式.定义方法和类选择符大同小异.只是把句号. 改成井号＃而在调用类时需要把class换成id.
ID选择符语法:标记名#标识名{样式属性:取值;样式属性:取值;......}
例：定义＃exam{color:#ff0000} 引用 <p id="exam">
ＩＤ选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用．
三.包含选择符
包含选择符也称为联选择符，是对某种元素包含关系（对元素１里包含元素２）定义的样式表．这种方式只对在元素１里的元素２定义，对单独的元素１或元素２无定义．
例：table a{font-size:12px}
这段代码只对表格内的链接文字有效，设定了文字大小为１２像素，而对于表格外的链接文字则不起作用．
添加CSS的方法
1.链入外部样式表
把样式表单独保存为一个文件,然后在页面中用<link>标记链接,而<link>标记必须放页面的<head>区域内.
语法:<link rel="styleshee" type="text/css" href="样式表文件的地址">
rel="styleshee"指在页面中使用的是外部样式表.
type="text/css"是指文件的类型是样式表文本.
href参数则用来设定文件的地址.可以是绝对地址或相对地址.
样式表文件扩展名.css 其内容就是定义的样式,不包含HTML的标记,如:
hr{color:#000ff}
p{color:black;font-famil:"宋体"}
2.内部样式表
内部样式表是把样式表的内容直接放到页面的<head>区域里,通过<stle>标记插入.
语法: <style type="text/css">
选择符{样式属性:取值;样式属性:取值;....}
选择符{样式属性:取值;样式属性:取值;....}
.......................
</style>
由于有些低版本的浏览器不能识别style标记,因此使用HTML语言的注释语句来隐藏样式表的定义内容.写成
语法: <style type="text/css">
<!--
选择符{样式属性:取值;样式属性:取值;....}
选择符{样式属性:取值;样式属性:取值;....}
.......................
-->
</style>
3.导入外部样式表
导入外部样式表是指内部样式表的<style>区域里引用一个外部的样式表文件,导入里需要使用@import声明
语法:<style type="text/css">
@import url(样式表地址)
选择符{样式属性:取值;样式属性:取值;....}
选择符{样式属性:取值;样式属性:取值;....}
.......................
</style>
4.内嵌样式
内嵌样式是混合在HTML标记里使用的,用这种方法可以很直观的对某个元素直接定义样式,内嵌样式的使用是直接在HTML标记里加入<style>参数.
语法:< HTML标记 style="样式属性:取值;样式属性:取值;...."}
书写CSS的注意事项
1.如果属性的值是多个单词组成,则必须使用引号将属性值括起来.
2.如果要对一个选择符指定多个属性,则需要使用分号将所胡的属性和值分开.
3.可以将具有相同属性的值勤的先择符组合起来,用逗号将其分开.
如:p,table{font-size:9pt} td,body,div{font:13px arial,sans-serif,宋体}
4.CSS样式表中的注释语句以:"/*"开头,以"*/"结尾. C语言好像也是这么注释的.:)
3.CSS__字体属性
设置字体 ____font-famlily
语法:font-famlily:"字体1","字体2",..
设置字号 ____font-size
语法:font-size:大小取值
取值范围:绝对大小:xx-smail \ x-smll \ small \ medium \ large \ x-large \ xx-large
相对大小: larger \ smaller
长度值或百分比
长度值是由浮点数字和单位标识符组成的长度值.单位:pt(点,1点=1/72英寸) \px(像素),in(英寸)等.
设置字体风格_____font-style
语法:font-style:样式的取值
样式的取值范围: normal(正常显示) ___italic(斜体显示)___ oblique(偏斜体显示)
设置加粗字体_____font-weight
语法:font-weight: 字体粗度值
取值范围: normal正常显示bold粗体bolder特粗体lighter特细体number 数字100-900
小型的大写字母___font-variant
语法:font-variant:取值
取值范围:normal正常small-caps英文显示为小型的大写字母体.
复合属性:字体____font
语法:font:字体取值
字体取值可以包含字全\体族科,字体大小,字体风格,加粗字体,小型大写字母.之间用空格相连 .如h2{font:bolder italic 14pt 黑体}
4.CSS__颜色及背景属性
颜色属性设置___color
语法:color:颜色取值
背景颜色____background-color
语法:background-color:颜色取值
背景图像___background-image
语法:background-image:url(图像地址)
背景重复____background-repeat
语法:background-repeat:取值
取值范围:repeat 图像在纵向和横向上平铺
no-repeat 图像不平铺
repeat-x 图像在水平方向上平铺
repeat-y 图像在垂直方向上平铺
背景附件___backrgound-attachment
语法:background-attachment:取值
取值范围: scroll图像是随对像内容滚动. 默认
fixed图像是固定在页面上静止不动的.
背景位置____background-position
语法:background-position:位置取值
取值范围:百分比,长度top center bottom 纵向的关键字既顶端,居中,底端
left center right 横向的关键字,既左,中,右
复合属性:背景___background
语法:background:取值
和字体font属性类似.它也可以包含背景颜色,背景图像,重复属性,附件属性,背景位置.用空格相连如:body{background:url(pic22.jpg) no-repeat right bottom}
本文出自 “Persist Persist Insists” 博客，谢绝转载！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML基础___文字与段落 <第二天>
- HTML基础___框架结构 <第八天>
- HTML基础___表格 <第六天>
- HTML基础___CSS样式表__下 <第十天>
- HTML基础___CSS样式表__中 <第十天>
- HTML的<table>标签基础 - HTML 表格
- HTML的<img>标签基础
- Html学习笔记 --- html中<ul>与<ol>区别
- HTML的<pre>标签中嵌套HTML标签时被解析的解决方案
- <html>
- HTML的<object>标签
- <!DOCTYPE html>很重要
- JavaScript写在Html页面的<head></head>中
- java 从零开始，学习笔记之基础入门<统计图>（四十四)
- html的<a href="" />标签点击出现蓝色边框解决方法
- html的<marquee></marquee>标签实现滚动效果
- JSP HTML的<object>标签的用法
- <HeadFirst_HTML与CSS> O'REILLY_Chap.2_认识HTML中的"HT"
- <HeadFirst_HTML与CSS> O'REILLY_Chap.8_增加字体和颜色样式
- Oracle 基础 <1> --存储过程