web学习

来源：互联网发布：vb format函数编辑：程序博客网时间：2024/05/18 03:30

CSS:(Cascading Style Sheet<层叠样式表单>),用来进行网页风格设计

特点：

* 精确控制布局* 网页表现统一* 支持多种设备* 制作体积小，下载更快的网页

每条规则分为：1.选择符， 2.声明
如：p, h2 {text-align:center; }
类选择符：使用之前要对实际文档标记 .name {text-align:center;}

ID选择符： #id {text-align:center;}

类可以分配给HTML文档任何数量的元素，ID却只能在某个HTML文档中使用一次，ID对给定元素应用何种样式比类具有更高的优先权。

伪类：允许将样式应用于文档中不存在的结构上 a:hover {teext-decoration:underline;}
还有：：link, :hover, :visited, :active这几个伪类经常用于链接标签上，a:link设定正常状态下链接文字的样式, a:active设定鼠标单击时链接的外观，a:visited设定访问过的链接外观, a:hover设定鼠标放置在链接文字上时文字的外观

类型：

* 外部样式表<link rel="stylesheet" href="样式表地址” type="text/css"/>   优点在于可以多页面同时调用该样表，保证了整个网站风格的统一；* 导入样式表     可以使用CSS的@import声明将一个外部样式表文件输入到另一个CSS文件中，也可以使用@import声明将一个CSS文件输入到网页文件的<style></style>标签对中 <style type="text/css"> @import url(http://...../im.css) </style>* 内联样式表   <标签名称 style="样式属性：属性值；样式属性：属性值">* 嵌入样式表   把样式表放到页面的<head>区里，      <head>      .....      <style type="text/css">      <!--      hr {color: sienna}      p {margin-left: 20px}     body {background-image: url("images/back.gif") }     -->      </style>      ....      </head>

CSS表中注释语句以”“开始以”“结束

外部样式试讲CSS包含到Web文档中的首选方法，外部样式表可以被存放在用户的缓存中，确保了文档的快速加载

rel:定义外部文档和调用文档之间的关系， stylesheet：样式调用
type:指的是外部文件的MIME类型

* 字体属性

font-family:该规则中提供一个通用的字体系列，在用户代理无法与规则匹配的特定字体时，就可以选择一个候选字体。
font-size:

1. <absolute-size>绝对字体尺寸，取值为xx-small(最小)， x-small(较小)， small(小)， medium(正常)， larget, x-large, xx-larger2. <relative-size>:相对父容器的字体尺寸。取值：larger, small3. <lenght>:CSS的长度表示法，英寸（in）， 厘米（cm）， 毫米（mm）, 磅（pt,1英寸的1/72）, picas(pc, 12磅)4. <percentage>：CSS百分比表示法（相对其父容器的字体尺寸）5. inherit：继承

如果要避免在IE中无法调整文本的文体，也可以使用em单位代替pixels，1em等于当前的字体尺寸

font-weight:粗体， normal, bold, bolder, lighter, 100|200|….|900, inherit
font-style:斜体，normal, italic, oblique, inherit
font-variant:定义小型的大写字母字体，应用于英文字母， normal， small-caps（大写, 将小写变大写，将大写变得更大）, inherit,
uppercase:将所有字母大写

* 文本属性

text-align:对齐方式，left, right, center, justify(两端对齐）， inherit（继承）。只影响内部内容，元素本身不会受影响
letter-spacing定义文本中字母的间距， normal, length, inherit
color:文本颜色,光栅图像徒手影响，这个颜色还会应用到元素的所有边框， color_name(颜色名称), hex_number（十六进制数）, rgb_number（rgb代码的颜色），短十六进制值只需要三位数字
background:背景颜色
background-color:为元素设置一种纯色
background-image:背景图像
background-repeat：平铺背景图像（将一幅图像放置于文档中作为背景，而且可以禁止重复，于是用户可以先添加图片然后再改变位置）
reapt:背景图像将在水平方向和垂直方向重复
repeat-x:在水平方向重复
repeat-y:在垂直方向重复
no-repeat:背景图像显示一次
inherit: 继承

background-attachment：图像在页面中的布局，控制背景图片是否固定或者随着页面的其余部分滚动。
scroll:会随着滚动而滚动
fixed:背景图像不会移动
inherit:继承

background-position：背景图像位置

注意：需要把background-attachment设置为fixed，才能暴增该属性在firefox和opera中正常工作

* 设置边框

border-width:边框宽
如果只包含一个属性值，边框的四个面都将设置为指定宽度，两个值，上下边框为一个值，左右边框为第二个值，如果三个值，第一个上，第二个左右，最后一个下，
也可以使用：border-top-width, border-right-width, border-bottom-width, border-left-width

边框样式：
none:无边框
dotted：边框由点组成
dashe:边框由断线组成
solid：边框是实线
double：边框是双实线
groove:边框带有立体感的沟槽
ridge:边框成脊
inset：边框内嵌一个立体边框
outset:边框外嵌一个立体边框

边框的颜色：border-color:
border-top-color, border-right-color, rder-bottom-color, border-left-color

边距
margin:|百分比|auto

内边界：padding:|百分比
padding-left, padding-right, padding-top, padding-bottom

网页链接属性： CSS为一些特殊效果准备了特定的工具，称为伪类
a:link，定义正常链接形式
a:vistited，定义已访问过的链接形式
a:active，定义鼠标点击链接时的样式
注意：每次定义链接样式时务必使用,link-vistited-hover-active这个顺序，否则可能就没有效果

在CSS 中写上a:link{}这样的定义会使整个页面的链接样式发生改变，如果想局部的话，可以再定义的前面加上id或class 来解决
如#sidebar a:link, #sidbar a:vistited {
color:#FF0000;
text-decoration:noe;
}

添加滚动条

设置光标属性：

* CSS区域及定位

普通流，浮动，绝对定位除非专门制定，否则所有框都在普通流中定位也就是说，普通流中元素的位置由元素在（X)HTML中的位置决定
垂直内边距，边框和外边距不影响行内框的高度，由一行形成的水平框称为行框，行框的高度总是足以容纳它宝航的所有行内框，设置行高可以增加这个框的高度。

可以用position属性设置对象的位置
position: static | relative | absolute | fixed | inherit

0 0