客户端网页编程--第四章

来源：互联网发布：telnet端口命令编辑：程序博客网时间：2024/04/28 01:31

第四章 CSS基础

使用CSS的优点：

提高页面浏览速度
缩短改版时间，降低维护费用
控制页面布局
实现表单和结构、内容相分离
更方便搜索引擎的搜索

外部样式表：在同一文档中，可以引用多个外部样式表文件。

eg:

/*mystyles.css*/

h1,h2,h3,h4 { color: blue}

、、、、、

<head>

嵌入式样式表：作用范围仅限于该网页

eg:

、、、样式定义、、、、、

</style>

内联样式表：放在某个元素内，仅供该元素使用

<h1 style="color: red;">红色标题列</h1>

样式规则语法：

body { color: black; padding: lem;}

body-----选择器

{color: black; padding: lem}----------声明块（color、padding:属性 black、lem:值）

注释：

/* */可以出现在样式规则之前，可以出现在样式规则之内，可以跨越多行注释。

1、元素选择器：

em { color: blue;}

2、类选择器：

.类名 {属性：值；}

3、ID选择器：

#id名 { 属性：值；}

4、包含选择器;

p em {color: blue;}

<body>

<h1>Heading <em>here</em> </h1>

<p>Lorem ipsum dolor <em>sit </em> amet</p>

</body>

5、通配符选择器：

* {color: red;}

6、伪类选择器：

a:link---未访问网页时

a:visited----已访问网页后

a:hover----光标悬浮其上时

a：active-----获取焦点（如鼠标点击）

选择器的选择：

1、是否重复使用（是则用类选择器，否则用id选择器）

2、组合类选择器<p class="red big"> font</p>

3、id选择器比类选择器更具体

CSS属性单位：

px（像素）:相对于浏览者的计算机屏幕分辨率来显示的

颜色单位：

1、为颜色取名：black

2、使用十六进制数组定义颜色，如#fcoeab

字体：

1、设置字体名称：font-family

2、设置字重：font-weight

3、设置字体大小：font-size

文本属性：

1、设置文本横向对齐：text-align

2、设置文本修饰方式：text-decoration

3、设置行高：line-height

字体颜色和背景：

1、文本颜色：color

2、背景颜色：background-color

3、背景图片：background-image

4、背景图片重复：background-repeat

eg:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        p {
            text-align: center;
        }
        div{
            height: 500px;
            border: 1px solid red;
            background-image:url("海豚.bmp");
            background-repeat: repeat-x;
            background-attachment: fixed;
            background-position: 0px 50%;
        }
    </style>
</head>
<body>
    <p>AAA</p>
    <div>
    你好呀！
    </div>
</body>
</html>

样式继承：

1、margin、padding、border、background不被继承

2、font-size被计算时继承于子元素

样式折叠:

step1找到选择器匹配特定元素的所有声明

step2根据样式声明的重要性和来源进行优先级排序

step3按照特殊性排序

step4比较CSS的顺序

0 0