超文本传输协议(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>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
浏览器会从文件 mystyle.css 中读到样式声明,并根据它来格式文档。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image:url("images/back40.gif");}
注意:不要在属性值与单位之间留有空格
内部样式表
当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表:
<head>
<style type="text/css">
hr{color: sienna;}
p{margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
内联样式
要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性
<p style="color: sienna; margin-left:20px">
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 | 设置背景图像是否及如何重复。 |