css属性
一、字体属性：
属性 属性含义 属性值
font-family 使用什么字体 所有字体
font-style 字体是否斜体 Normal italic oblique
font-variant 字体是否用小体大写 Normal samll-caps
font-weight 定义字体的粗细 Normal bold bolder lithter等
font-size 定义字体的大小 Absolute-size relative-size length percentage
二、颜色和背景属性
属性 属性含义 属性书写格式 属性值
clolr 定义前景色 例：p{color:red} 颜色
background-color 定义背景色 body{background-color:yellow} 颜色
background-image 定义背景图案 body{background-image:url(.jpg)} 图片路径
background-repeat 背景图案重复方式 body{background-repeat:repeat-y} repeat-x repeat-y no-repeat
background-attachment 设置滚动 body{background-attachment:scroll} scroll fixed
background-position 背景图案的初始位置 body{background:url(.jpg)top center} percentage等
三、文本属性
属性 属性含义 属性值
word-spacing 各个单词之间的间距 Normal<length>长度为单位
letter-spacing 每个字母之间的间距 同上
text-decoration 文字的“装饰”样式 none|underline|overline|line_through|blink
vertical-align 元素在垂直方向上的位置 baseline|sub|super|top|text-top|middle|等
text-transform 文本转换为其他形式 capitalize|uppercase|lowercase|none
text-align 文字的对方方式 left|right|center|justify
text-indent 文本的首行的缩进方式 length|percentage
line-height 文本的行高 normal|number|length|percentage
四、容器属性
属性 属性含义 属性值
margin-top 顶端边距 length|percentage|auto
margin-right 右侧边距 同上
margin-bottom 底端边距 同上
margin-left 左侧边距 同上
2,填充距属性
属性 属性含义 属性值
padding-top 顶端填充距 length|percentage
padding-right 右侧填充距 同上
padding-bottom 底端填充距 同上
padding-left 左侧填充距 同上
填充距指的是文本边框与文本之间的距离。
3,边框属性
属性 属性含义 属性值
border-top-width 顶端边框宽度 thin|medium|thick|length
border-right-width 右侧边框宽度 同上
border-bottom-width 底端边框宽度 同上
border-left-width 左侧边框宽度 同上
border-width 一次定义边框宽度 同上
border-color 设置边框颜色 color
border-style 边框样式 none|dotted|dash|solid等
border-top 一次定义顶端的各种属性 border-top-width
border-right 一次定义右侧的各种属性 同上
border-bottom 一次定义底端的各种属性 同上
border-left 一次定义左侧的各种属性 同上
4，图文混排
属性 属性含义 属性值
width 定义宽度属性 length|percentage|auto
height 定义高度属性 length|auto
float 使文字环绕在一个元素的四周 left|right|none
clear 定义某一边是否有环绕文字 left|right|none|both
5,分级属性
分级属性包括了“list-style”（列表样式）、“list-item”（列表项）等多种属性
属性 属性含义 属性值
display 是否显示 block inline list-item none
white-space 决定是否处理空白部分 normal pre nowrap
list-style-type 在列表项前加项目编号 disc circle等
list-style-image 在列表项前加图案 <url>|none
list-style-position 列表项中第二行的起始位置 inside outside
list-style 一次定义前面的列表属性 keyword|position|url
例：
<html>
<head>
<title> fenji css </title>
<style type=“text/css”>//*定义CSS*//
<!--
p{display：block；white-space：normal}
//*定义显示属性为“block”，意思是在新的区域里显示； white-space的属性
normal使多重空白合成为一个*//
em{display：inline}
//*定义EM的显示属性为“inline” 目的是为了其控制下的文本显示中不折行*//
li{display：list-item；list-style：square}
//*定义li的显示属性为“list-item”，显示在列表项中加入一个符号标记， 而
list-style属性值定义为square使列表项前的标记为方块*//
img{display：block} //*定义图片属性为block使图片在新的位置打开*//
-->
</style>
</head>
<body>
<p><em>sample</em>text<em>sample</em>text<em>sample</em>
text<em>sample</em> text<em>sample</em></p>//*定义一段文本*//
<ul>//*定义列表项*// <li>list-item 1</li>
<li>list-item 2</li> <li>list-item 3</li> </ul>
<p><img src=“ss01068.jpg” width=“280”height=“185”
alt=“invisible”></p>//*定义一幅图片*//
</body>
</html>
6,鼠标属性
在CSS当中，这种样式是通过“cursor”属性来实现的
属性值 解释
auto 自动,按照默认状态自行改变
crosshair 精确定位"+"字
default 默认指针
head 手形
move 移动
e-resize 箭头朝右方
ne-resize 箭头朝右上方
nw-resie 箭头朝左上方
n-resize 箭头朝上方
se-resize 箭头朝右下方
sw-resize 箭头朝左下方
s-resize 箭头朝下方
w-resize 箭头朝左方
text 文本"I"形
wait 等待
help 帮助
<p><span style=“cursor:hand”>手的形状</span><br>
//*设置鼠标属性为手的形状*//
Div+CSS布局大全
XHTML下css+dir布局总结
XHTML是可扩展标识语言的缩写
CSS---是层叠样式表的缩写
1为页面添加正确DOCTYPE
DOCTYPE是document type的简写.主要用来说明你用的XHTML或者HTML是什么版本.
2设定一个名字空间
直接在DOCTYPE声明后面添加如下代码:
<html XMLns="http://www.w3.org/1999/xhtml">
3声明你的编码语言
代码如下:
<meta http-equiv="Content-Type" content="text/html;charset=GB2312"/>
简体中文---GB2312 繁体内容---BIG5
4用小写字母书写所有的标签
XML对大小写是敏感的
5为图片添加alt属性
正确写法:
<img src="logo.gif" alt="互动力工作标志,点击返回首页">
6给所有属性值加引号
7关闭所有的标签
在标签尾部使用一个正斜杠"/"来关闭它们自己.如:<br />
8收藏夹小图标
首先制作一个16X16的icon图标,命名为:favicon.ico,放在根目录下.
然后嵌入head区;
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
9 用CSS定义元素外观
css是不区别空格和大小写的.
1 颜色值
可用RGB值和十六进制写.如:color:rgb(255,0,0) color:#FF0000
2 定义字体
body {font-family:"Luciad Grande",Verdana,Lucida,Arial,Helvetica,宋体,sans-serif;}
Verdana字体适合所有的Windows系统
3 群选择器
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔
p,td,li {font-size:12px;}
4 派生选择器
可使用派生器给一个元素里的子元素定义样式
li strong {font-style:italic;font-weight:normal;}
5 id选择器
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义
<div id="menubar"></div>
然后在样式表里这样定义:
#menubar {MARGIN:0px;BACKGROUND:#FEFEFE;COLOR:#666;}
6类别选择器
在CSS里用一个点开关表示类别选择器定义,如:
.14px{color:#f60;font-size:14px;}
在页面中,用class="类别名"的方法调用:
<span class="14px">14px大小的字体</span>
7定义链接的样式
CSS中用四个伪类来定义链接的样式,分别是:a:link a:visited a:hover和a:active
如:
a:link{font-weight:bold;text-decoration:none;color:#c00;}
a:visited{font-weight:bold;text-decoration:none;color:#c30;}
a:hover{font-weight:bold;text-decoration:underline;color:#f60;}
a:active{font-weight:bold;text-decoration:none;color:#F90;}
上面语句分别定义了"链接 已访问过的链接、鼠标停在上方时、点下鼠标时"的样式
注意：必须按以上顺序写，否则显示可能和你预想的不一样。
它们的顺序是："LVHA"
8组合使用选择器创造精致的设计效果
9缩写是按照顺时针的顺序
10行高
line-height:150% 说明行距为正常的150%
10 结构化代码div(division)、id、class
1 结构化id标签，与class的有区别：
如果你的属性页面包含了一个div，它的id为"content"，它就不可能有另外
一个div或者其他元素拥有相同的名字。相反，class属性可以在任意
个页面中一次又一次地使用
2 id的规则
一个id值必须用一个字母或者下划线开关，它不能用一个数字进行开关
11 制作好的网站可以到w3c进行标准校正
validator.w3.org
jigsaw.w3org/css-validator/
调用样式表
外部调用样式表，通常采用2种方法使用样式表：
1 页面内嵌法：就是将样式表直接写在页面代码的head区。
如：<style type="text/css"><!-body {bockground:white;color:black;}-> </style>
2 外部调用法:将样式表写在一个独立的.css文件中，然后在页面head区用
类似以下代码调用
如：<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />
为搜索引擎准备的内容
1 允许搜索机器人搜索站内所有链接。
如：<meta content="all" name="robots" />
2 设置站点作者信息
如：<meta name="author" content="ajie@asd.com,阿基米德" />
3 设置站点版权信息
如：<meta name="Copyright" content="www.w3cn.org,自由版权" />
4 站点的简要介绍
如:<meta name="description" content="新网页设计师" />
5 站点的关键词
<meta content="designing,with,web,standards,xhtml,css" name="keywords" />
代码规范
1 所有的标记都必须要有一个相应的结束标记
不成对的，在后面加斜杠。如：<br />
2 所有标签的元素和属性的名字都必须使用小写
3 所有的XML标记都必须合理嵌套
正确写法：<p><b></b></p>
4 所有的属性必须用引号“”括起来
5 把所有< 和&特殊符号用编码表示
任何小于号(<)，不是标签的一部分，必须编码为<
任何大于号(>),不是标签的一部分，必须编码为>
任何与号(&)，不是实体的一部分，都必须编码为&
6 给所有属性赋一个值
如：<td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked">
7 不要在注释内容中使用"--"
如：用等号或者空格替换内部的虚线。
<!--这里是注释=========这里是注释->
CSS入门
css是Cascading Style Sheets(层叠样式表)的缩写，是一种对web文档添加
样式的简单机制，属于表现层的布局语言。
1.基本语法规范
典型CSS的语句：
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中“p“我们称为“选择器”（selectors）,指明我们要给"p"定义样式；
样式声明写在一对大括号"{}"中；
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔；
"#FF0000"和"#FFFFFF"是属性的值(value).
2.颜色值
3.定义字体
4.群选择器
5.派生选择器
6.id选择器
7.类别选择器
8.定义链接的样式
CSS布局入门
1 定义DIV
分析div例子：
#sample {MARGIN:10px 10px 10px 10px;
PADDING:20px 10px 10px 20px;
BORDER-TOP:#CCC 2px solid;
BORDER-RIGHT:#CCC 2px solid;
BORDER-BOTTOM:#CCC 2px solid;
BORDER-LEFT:#CCC 2px solid;
BACKROUND:url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;
COLOR:#666;
TEXT-ALIGN:center;
LINE-HEIGHT:150%;WIDTH:60%; }
说明如下：
层的名称为sample,在页面中用就可以调用这个样式。
MARGIN是指层的边框以外留的空白，用于页边距或者与其它层制造
一个间距。"10px 10px 10px 10px"分别代表上右下左"(顺时针方向)
四个边框，如果一样，缩写成"MARGIN:10px;"如边距为零，写成"MARGIN:0px;"
