CSS基础汇总
第一经过CSS的时候是做牛腩系统的时候，牛腩上用了两集的视频就把CSS写了个大概，我知道这对于一门语言来说感觉有点太轻了，今天DRP系统视频也是用了几集的视频就把CSS介绍了一下，CSS其实就是那么回事，CSS对于一般的程序员来讲，知道一般性的知识就够了，因为我们不是搞美工的，我们没有必要那么要求我们自己，没门知识其都有他的高深之处只不过我们应该认清，什么样的是有用的知识，我们即学即用即可，没有必要去费很大的力气搞自己用不到的知识。闲话不多说了.....
CSS基础汇总
CSS是Cascading Style Sheet 的缩写。译作「层叠样式表」。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
语法结构： Selector { property: value }
一、样式表的分类：行内样式表、内嵌样式表、外部样式表。
（1）行内样式表：使用style属性来定义。如果希望某段文字和其它段落的文字显示风格不一样。可选用行内样式。
<head>
<title>CSS</title>
</head>
<body>
<p style="color:Red; font-style:italic;">我是中国人</p>
<p style="color:Blue">我是美国人</p>
</body>
</html>
（2）内嵌样式表：内嵌样式只对某张网页起作用。它是写在<head></head>里面的。
<head>
<title>CSS</title>
<style type="text/css">
.p1{color:Red; font-size:30px;}
.p2{color:Blue}
</style>
</head>
<body>
<p class="p1">我是中国人</p>
<p class="p2">我是美国人</p>
</body>
</html>
（3）外部样式表：如果希望多个页面甚至于整个网站所有页面都采用统一风格，可选用外部样式表。
根据样式文件与网页的关联方式，又分为两种：链接外部样式表和导入样式表。
A 链接外部样式表：
<head>
<link rel="Stylesheet" type="text/css" href="mycss.css"/>
</head>
B 导入样式表
<head>
<style type="text/css">
@import mycss.css
</style>
</head>
注意：
如果有多个样式规则用于现一个页面时，样式规则起作用的优先级别是：行内样式表（写在标签内的）>内嵌样式表（写在文档头部的）>外部样式表（在外部文件中）。
二、选择器：HTML选择器、class选择器、ID选择器。
（1） HTML选择器：使用HTML本来就固有的标签来标识。如P(段落)、SPAN（块）。
语法： HTML选择器{ property:value; }
<head>
<title>CSS</title>
<style type="text/css">
P{ font-family:System;color:red;font-size:25px;}
</style>
</head>
<body>
<p>我是中国人</p>
</body>
（2）类选择器(Class)：
语法： . 类名{样式规则…}
<head>
<title>CSS</title>
<style type="text/css">
.test{ font-family:System;color:red;font-size:25px;}
</style>
</head>
<body>
<p class="test">我是中国人</p>
</body>
</html>
（3）ID选择器:使用HTML元素的ID属性（不常用）。
语法： #ID名{样式规则…}
<head>
<title>CSS</title>
<style type="text/css">
#IDP{ font-family:System;color:red;font-size:25px;}
</style>
</head>
<body>
<p ID="#IDP" >我是中国人</p>
</body>
</html>
id和class选择器的区别
id在于一个页面同一个ID只能只有一次。
class可以无限制使用，可以服用，用于修饰一类。
id的优点（class的缺点）：id写在css用"#"选择器，class写在css中用"."选择器。"#"选择器的优先级高于"."选择器大约10倍。
所以当你需要提升优先级的时候，id标签，或者id容器内的标签将是很容易和有效的
三、访问连接
<a href="#">流行饰品</a>
超链接样式 说明 :
A:link{color:red} 未被访问的链接样式
A:visited{color:green} 已被访问的链接样式
A:hover{color:yellow} Mouse悬停在链接上时的样式
A:active{color:blue} Mouse正在按下时链接文字的样式
<a>这地方这个标签是一个伪类，所谓的伪类：是CSS中已经定义好了，不能像类选择符一样随意用别的名字，根据上面的语法可以解释为对象（选择符）在某个状态下伪类的样式。
四、常用样式属性
CSS的属性非常大，庞大的几本书都写不完，这里仅列出常用的且实用的CSS属性。
1 字体属性Font：
（1）font-style：设置字体样式
（2）font-size：设置字体大小
（3）font-family：设置字体类型如:宋体
（4）font-weight : normal | bold | bolder | lighter | number
设置字体粗细
normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置
bold : 粗体。相当于number为700。也相当于b对象的作用
bolder :特粗体
lighter :细体
2 文本属性Text:
（1）text-align :设置文本对齐方式。
（2）text-decoration : none || underline || blink || overline || line-through
设置文本装饰
none : 无装饰
blink : 闪烁
underline : 下划线品
line-through : 贯穿线
overline : 上划线
3 背景属性Background：
（1）background-color：设置背景颜色。
（2）background-image：设置背景图像。background-image: url(图像地址)
（3）background-repeat：设置一个指定的背景图像如何被重复显示。
4 定位属性position（1）position : static | absolute | relative
设置对象的定位方式
static : 默认值。无特殊定位，对象遵循HTML定位规则
absolute : 将对象从文档流中流出，即将其转化为一个“层”，并使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义
relative :对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置
（2）z-index : auto | number
设置对象的层叠顺序。
auto : 遵从其父对象的定位
number : 无单位的整数值。可为负数
5 方框属性Box:
常用的方框属性有：边界属性Margin、边框属性Border、填充属性Padding。
（1）边界属性Margin：
(1-1)margin-top 设置对象的上边距
(1-2)margin-right 设置对象的右边距
(1-3)margin-bottom 设置对象的下边距
(1-4)margin-left 设置对象的左边距
（2）边框属性Border：
(2-1)border-style 设置对象的样式
(2-2)border-width 设置对象的宽度
(3-3)border-color 设置对象的颜色
（3）填充属性Padding：
(1-1)padding-top 设置对象与上边框之间的距离
(1-2) padding -right 设置对象右边框之间的距离
(1-3) padding -bottom设置对象下边框之间的距离
(1-4) padding -left设置对象左边框之间的距离
6 表格属性Table:
（1）border-collapse : separate | collapse
separate : 边框独立（标准HTML）
collapse : 相邻边被合并
设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开。
posted on 2012-05-10 14:27 zhangtao1212 阅读(125) 评论(0) 编辑 收藏 举报
