HTML学习笔记<5>[CSS]

来源：互联网发布：mac 虚拟光驱软件编辑：程序博客网时间：2024/05/21 22:53

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值以防止这种滚动。

阅读全文

0 0