CSS背景

来源：互联网发布：校园网络借贷的危害编辑：程序博客网时间：2024/05/09 06:46

超文本传输协议（HTTP）的设计目的是保证客户机与服务器之间的通信。

HTTP 的工作方式是客户机与服务器之间的请求-应答协议。

web 浏览器可能是客户端，而计算机上的网络应用程序也可能作为服务器端。

举例：客户端（浏览器）向服务器提交 HTTP 请求；服务器向客户端返回响应。响应包含关于请求的状态信息以及可能被请求的内容。

在客户机和服务器之间进行请求-响应时，两种最常被用到的方法是：GET 和 POST。

GET - 从指定的资源请求数据。

POST - 向指定的资源提交要被处理的数据

CSS 概述

CSS 指层叠样式表 (Cascading Style Sheets)

---样式定义如何显示 HTML 元素

---样式通常存储在样式表中

---外部样式表可以极大提高工作效率

---外部样式表通常存储在 CSS 文件中

---多个样式定义可层叠为一

其中数字 4 拥有最高的优先权。

1.浏览器缺省设置

2.外部样式表

3.内部样式表（位于 <head> 标签内部）

4.内联样式（在 HTML 元素内部）

CSS 基础语法

1、CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。

2、当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号，但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0 之后不需要使用 px 单位，因为 0 就是 0，无论单位是什么。

3、如果值为若干单词，则要给值加引号：

4、选择器的分组：

你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。

一个id只能在文档中出现一次，但这个 id 选择器作为派生选择器可以被使用很多次;

如何插入样式表

插入样式表的方法有三种：

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link>标签在（文档的）头部：

<head>

</head>

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存

hr {color: sienna;}

p {margin-left: 20px;}

body {background-image:url("images/back40.gif");}

注意：不要在属性值与单位之间留有空格

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表：

<head>

hr{color: sienna;}

p{margin-left: 20px;}

body {background-image: url("images/back40.gif");}

</style>

</head>

内联样式

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性

This is a paragraph

</p>

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

CSS 背景

背景色

可以使用 background-color为元素设置背景色。

background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。

背景图像

需要使用 background-image。

background-image 属性的默认值是 none，表示背景上没有放置任何图像。

背景重复

可以使用 background-repeat。

属性值 repeat 导致图像在水平垂直方向上都平铺。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。

背景定位

可以利用 background-position改变图像在背景中的位置。

属性值可以使用一些关键字：top、bottom、left、right 和 center。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。

1、关键字

图像放置关键字最容易理解，其作用如其名称所表明的。例如，top right 使图像放置在元素内边距区的右上角。

根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向。

如果只出现一个关键字，则认为另一个关键字是center。

2、百分数值

换句话说，百分数值同时应用于元素和图像。

如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处，background-position:66%33%;

background-position 的默认值是 0% 0%，在功能上相当于 top left

3、长度值

长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。

背景关联

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

可以通过 background-attachment防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed）。

background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。

CSS 背景属性

属性

描述

background

简写属性，作用是将背景属性设置在一个声明中。

background-attachment

背景图像是否固定或者随着页面的其余部分滚动。

background-color

设置元素的背景颜色。

background-image

把图像设置为背景。

background-position

设置背景图像的起始位置。

background-repeat

设置背景图像是否及如何重复。

0 0