CSS整理
1. 样式表的简介:样式表由样式规则组成,这些规则告诉浏览器如何显示文档。
根据样式表所在位置,可分为行内样式、内嵌样式表、外部样式表
Ø 样式表的基本语法
1. 样式规则:h2{color:limegreen;}
其中:h2:选择器 color:属性 limegreen:属性值
2. 样式表,例如:
<style>----------------样式标签
H2{color:green;font-family:System;}
</style>
Ø 样式表的常用属性:
属性
CSS名称
说明
颜色
Color
设置或检索文本的颜色
背景属性
background-color
设置或检索对象的背景颜色
background-image
设置或检索背景图象
字体属性
font-family
设置或检索文本的字体
font-size
设置或检索文本字体的大小
font-style
设置或检索文本的字体样式。如:斜体
文本属性
text-align
设置或检索文本的对齐方式,包括:左对齐等
text-indent
设置或检索文本第一行的缩进量
vertical-align
设置或检索文本的纵向位置
边框属性
border-style
设置或检索边框样式
border-with
设置或检索边框的宽度
border-bottom
设置或检索下边框的属性
border-color
设置或检索边框颜色
定位属性
width
设置或检索对象的宽度
height
设置或检索对象的高度
left
设置或检索对象的左定位
top
设置或检索对象的顶部定位
position
设置或检索对象的定位形式
z-index
设置或检索对象的堆叠顺序
2. 行内样式表:行内样式使用元素标签的SYTLE属性定义。例如:
<p style=”color:red;font-family:Times New Roman;font-weght:bold”>………</p>
3. 内嵌样式表:也称为嵌入样式表,内嵌样式表放置在<head>标签内。使用格式如下:
<head>
<style type=&rdquo
相关文档:
Eric Meyer’s CSS Reset
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, fo ......
假如我们想通过前台自主选择CSS样式来达到改变颜色、风格等目的的话,用JS调用CSS文件就OK。
先做两个(或多个)CSS文件。
style_1.css 代码:
body{background-color: #ccff66;}
......
style_2.css 代码:
body{background-color: #ff0000;}
......
JS代码如下:
<link rel="stylesheet" rev="stylesheet" ......
我们先来分析一下块级元素、内联级元素的定义和解析:
块元素(block
element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。
“form"
这个块元素比较特殊,它只能用来容纳其他块元素。
如果没有css的作用,块元素
......
<html>
<head>
<mce:style type="text/css"><!--
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
line-height:150%;
}
div.header,div.footer
{
padding:0.5em;
color:white;
background-color:gray;
clear:left;
}
h1.header
{
padding:0;
margin:0;
}
div. ......
CSS+DIV是网站标准中常用的术语之一,通常为了说明与HTML网页设计语言中的表格定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用css+div的方式实现各种定位。那么使用DIV+CSS编码时很容易犯一些错误。本文列举了一些常见的错误:
1. 检查HTML元素是否有拼写错误、是否忘记结束标记
有时候我们在 ......