HTML学习笔记<5>[CSS]
1. CSS指层叠样式表(Cascading Style Sheet),用以定义HTML元素的样式。
CSS规则由两个主要部分构成:选择器和一条或多条声明。
即:selector {declaration1,declaration2,……,declarationN}
注1:可以对选择器进行分组,这样被分组的选择器可以共享声明。
注2:子元素继承父元素的所有声明的属性。但是若子元素需要特殊的声明,可以另行声明,两者不冲突。
注3:CSS的派生选择器可以通过依据元素在上下文中关系来定义样式,使代码更加简洁。
注4:对样式的设定可以通过id具体应用到HTML具体的某个元素上。
例如:#red{color:red;},该例中的对颜色样式的设定仅应用到id为red的元素之上。
注5:对样式的设定可以通过class具体应用到HTML具体的某个元素上。同注4,但注意类选择器通常 以'.'+"类名"指定具体的类。即将id选择器的'#'替换为'.'。
注6:对样式的设定可以通过属性具体应用到HTML具体的某个元素上。同注4、注5。格式通常如下:
[title=W3School]{border:5px solid blue;} 注意,可以将蓝色部分的"="替换为"~="、"|="等,具体功能见下表。
2. 样式表创建
①:外部样式表(当样式需要应用到许多页面时,使用外部样式表是理想的方式)
例:<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>
②:内部样式表(当单个文档需要特殊的样式时,就应该使用内部样式表。)
可以使用 <style> 标签在文档头部定义内部样式表。
例:
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
③:内联样式(慎用)
例:<p style="color: sienna; margin-left: 20px">This is a paragraph</p>
3. 背景设置
①:使用background-color属性可设置任意合法的颜色值。
例:p {background-color: gray;}
②:使用background-image属性可将图片设置为背景,该属性默认值为none,故需要设置一个url值,如下:
例:body{background-image:url(/i/eg_bg_03.gif);}
注1:若要使图片在界面上进行平铺,可以使用background-repeat属性,该属性默认值便为xy平铺,有需 要可设置为只在x或y轴上平铺或不平铺,对应值分别为:repeat-x/repeat-y/no-repeat。
注2:通过background-position属性可以设置背景图片在界面中的位置(一般适用于no-repeat下)。
该属性值可以为百分数和像素值。
注3:如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置 时,图像就会消失。可以通过 background-attachment 属性设置fixed值以防止这种滚动。