首页 > 代码库 > css
css
个人总结，希望可以帮到初学者。
一、Css层叠样式表，用于控制页面布局、颜色以及背景等。W3C组织所有。
二、引入方式：
内嵌式：<style type="text/css">css代码</style> 写在当前页面的head中。
行内式：通过style属性，写在指定HTML标签上面。
链接式:将Css代码样式表写在以 .css结尾的文件中； (多个页面可以引入同一个css文件，达到了Css样式复用的目的)
三、语法以及选择器：
语法： 选择器{
Css属性：值；
Css属性：值；
}
注释：/*注释内容*/
选择器：
1、按照标签名找： 例如 body{ background:#666666;}
2、按照Id属性找标签：注意：id属性在同一个页面中，id属性值不允许重复：
例如; #firstTab tr td{样式} 找id属性值firstTab的标签， 然后找他里面的tr标签，再找tr里面的td标签。
3、按照层次找：
#firstTab tr td{} 中间加空格，只能加一个，表示向指定标签里面找其他标签；
4、按照class找，可以找多个标签：
例如：.tab_center{css代码} 找class属性为tab_center的所有标签；
5、同时 找多个标签（并且）：.tab_center,#sec_tab tr td{} 表示： 找class为tab_center的，并且还有id为sec_tab中tr 中td标签；
优先级别：
行内式优先级最高 ，id>class，标签名（相同样式可以覆盖）
四、css引入方式：
1、 行内式
<h1 style="color:white;background-color:blue">
</h1>
2、 内嵌式
<style type="text/css">
h1{
color:white;
background-color:blue
}
</style>
3、 链接式
<link href="http://www.mamicode.com/mystyle.css" rel="stylesheet" type="text/css" />
五、相关属性：
1、背景：
背景颜色：background-color:#345761;
背景图片：background-image:url(‘12.bmp‘);
背景图片是否重复：background-repeat:no-repeat;/*背景纵向重复 repeat-y，横向重复：repeat-x,*/
背景图片横向位置：/*background-position-x:10px;
背景图片纵向位置：background-position-y:10px;*/
背景图片位置：background-position:110px 110px;/*控制页面背景图片位置*/
背景图片是否随着内容滚动：background-attachment:fixed;
简写：
background:颜色 url（‘图片路径‘） 是否重复 x位置 y位置
例如：background:#666 url(‘12.bmp‘) no-repeat 20px 20px;
2、首行缩进：text-indent:20px;
行高：line-height:50px;
文字间距：letter-spacing:2px;
3、文字：
字体控制： font: italic 12px "黑体"; font-style font-size font-family ;
字体加粗：font-weight:bold 或者100-900
字体颜色：color:#666;
text-align:center;水平居中；(针对文字和行元素)
vertical-align:middle;垂直居中；（针对表格单元格使用）
4、 浮动：float:left;
如果该元素使用这个属性，此时后面紧挨着他的元素会受影响。
清除浮动效果：
clear:left/right/both;
5、margin位移：指定一个标签，相对于父容器，在该父容器中一个位移；
略写：margin：两个参数： 第一个参数：上下，第二个：左右；
四个参数： 上右下左；
详细写法： margin-left;margin-right;margin-bottom;margin-top;
6、让指定的容器，在父容器中居中（这里不是文字居中，文字居中使用text-align）
使用：margin:0 auto; 实现水平居中效果； 注意：（center标签不建议使用）此时必须在该html中加入如下头文件：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
7、display:属性值为：none隐藏元素
inline将块级元素变为行级元素
block 将行级（内联）元素变为块级别元素
8、padding：（内边距或者补白）：
某个容器中内容（包含标签或者文字）与该标签相邻边框的补白（距离）。
9、margin:（外边距或者位移）：
某个容器相对于父容器，移动位置。也叫做外边距。 只要外部容器足够大，就可以通过margin来移动这个标签在父容器中的位置。
10、对页面滚动条的控制：
scrollbar-3dlight-color:#999999;
scrollbar-arrow-color:#666666;
scrollbar-darkshadow-color:#999999;
scrollbar-face-color:#AEB404;
scrollbar-highlight-color:#EEEEEE;
scrollbar-shadow-color:#EEEEEE;
scrollbar-track-color:#F3F3F3;
11、是否显示滚动条：
overflow：auto ;超出指定标签的宽和高，出滚动条，如果不超出，就不显示滚动条；
scroll一直显示滚动条。
hidden 超出的内容隐藏，始终不显示滚动条。
12、文本超出容器需要显示省略号：
overflow:hidden;/*隐藏滚动条，滚动条永远不显示*/
text-overflow:ellipsis;/*文本溢出，溢出部分为...*/
white-space:nowrap; /*让文本不允许换行*/
13、文本转化大小写：
text-transform:属性，属性值如下：
capitalize : 将每个单词的第一个字母转换成大写，其余无转换发生
uppercase : 转换成大写
lowercase : 转换成小写
14、文字有下划线：text-decoration：属性值如下：
underline : 下划线
line-through : 贯穿线
overline : 上划线
15、表格控制：常用属性：
border-collapse:collapse;内外边框合并。
16、ul列表去掉标示符：list-style:none; list-style-type:none;
17、边框：border: border-style border-width border-color 同时对这三个属性设置
实线：solid 虚线：dotted、 dashed
五：相关概念：（面试问题）
行级元素：
1、不独占一行。
2、没有独立的宽和高。高度和宽度随着内容变化而变化。给宽高IE9以上可以有效果，以下版本无效果。
3、padding（内边距有关）有时候不起作用。
4、不能嵌套块级别元素。
例如：<span></span>
<image></image>
<input/><a>
块级元素：
1、独占一行。
2、有独立的宽高，有独立的空间。
例如：<ul><ol> <div><h>
盒子模型：我们将页面中的元素看做是现实中能盛放东西的盒子，
他们都具有：边框(border） 填充(padding) 边距(margin) 内容（content)。
六、Css定位与布局：
相对定位(relative)：
在相对定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间。相对自身位置进行定位处理。
绝对定位(absolute)：
对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。（对象处于不同层次上）
Position：属性：
absolute : 将对象从文档流中拖出，使用 left ， right ， top ， bottom (想激活自定位，必须用上面几个中至少一个来控制位置)等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。
relative : 对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置
七、Css中伪类:
a:link {color:gray;}/*链接没有被访问时前景色为红色*/
:visited{color:yellow;}/*链接被访问过后前景色为****/
:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/
:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/
注意：li：hover 对IE6失效。
本文出自 “扣小眸J2EE” 博客，谢绝转载！
css