CSS基础知识汇总

前言

原文连接：http://www.cnblogs.com/wanghzh/p/5805678.html

在此基础上又做了大量的扩充

CSS简介

CSS是Cascading Style Sheets的简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。

CSS的引用方式

1.行内式

行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。

2.嵌入式

嵌入式是将CSS样式集中写在网页的标签对的标签对中。格式如下：

<head>

    <style type="text/css">

           ...此处写CSS样式

    </style>

</head>

3.导入式

将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在标记中，使用的语法如下：

<style type="text/css">

    @import"mystyle.css"; 此处要注意.css文件的路径

</style>

4.链接式

也是将一个.css文件引入到HTML文件中<link href="mystyle.css" rel="stylesheet" type="text/css"/>

注意：

导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。

CSS选择器(Selector)

“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素

基础选择器

选择器类型	说明	例子
*	通用元素选择器，匹配任何元素	* { margin:0; padding:0; }
E	标签选择器，匹配所有使用E标签的元素	p { color:green; }
.info和E.info	class选择器，匹配所有class属性中包含info的元素	.info{background:#fff;} p.info{ background:blue; }
#info和E#info	id选择器，匹配所有id属性等于footer的元素	#info{background:#fff;} p#info {background:#fff;}

组合选择器

选择器类型	说明	例子
E,F	多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔	Div,p{color:#fff;}
E F	后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔	#nav li{display:inline;} li a{font-weight:bold;}
E > F	子元素选择器，匹配所有E元素的子元素F	div>strong {color:#fff;}
E + F	毗邻元素选择器，匹配所有紧随E元素之后的同级元素F,注意:F为匹配的元素	p + p {color:#f00;}
E~F	匹配任何在E元素之后的同级F元素，与E+F略有不同，这个是匹配同级的所有F元素，E+F只匹配毗邻的那个F	p + a{color: yellow;}

注意嵌套规则：

块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。

块级元素不能放在p里面。

有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt

li内可以包含div

属性选择器

选择器类型	说明	例子
E[att]	匹配所有具有att属性的E元素，不考虑它的值。注意：E在此处可以省略，比如“[checked]”。以下同。）	p[title]{color:#f00;}
E[att=val]	匹配所有att属性等于“val”的E元素	div[class="error"]{color:#f00;}
E[att~=val]	匹配所有att属性具有多个空格分隔的值`<td class="name passwd"></td>`、其中一个值等于“val”的E元素	td[class~="name"]{color:#f00;}
E[att^="val"]	属性att的值以"val"开头的元素	div[id^="nav"]{ background:#ff0;}
E[att$="val"]	属性att的值以"val"结尾的元素	div[id$="nav"]{ background:#ff0;}
E[att*="val"]	属性att的值包含"val"字符串的元素	div[id*="nav"]{ background:#ff0;}

伪类选择器

选择器类型	说明
E:link	(没有接触过的链接）,用于定义了未被点击的链接的常规状态。
E:hover	(鼠标滑过链接上的状态）,用于产生视觉效果。
E:visited	(访问过的链接),用于阅读文章，能清楚的判断已经访问过的链接。
E:active	(在链接上按下鼠标时的状态),用于表现鼠标按下时还没有释放时。
E:focus	匹配获得当前焦点的E元素,一般作用于input类似的输入框，在输入中改变样式
E:before	在每个E元素的内容之前插入内容,注意要有content属性，值为加入的内容
E:after	在每个E元素的内容之后插入内容,注意要有content属性，值为加入的内容
E:first-child	匹配E的父元素的第一个子元素,注意是父元素的第一个子，相当于自己兄弟的第一个元素，同理还有last-child
E:first-line	匹配E元素的第一行，这个是在E的子元素里的第一行
E:first-letter	匹配E元素的第一个字母
E:enabled	匹配表单中激活的元素
E:disabled	匹配表单中禁用的元素
E:checked	匹配表单中被选中的radio（单选框）或checkbox（复选框）元素
E::selection	匹配用户当前选中的元素,默认是背景色变蓝，注意是::
E:not(s)	匹配不符合当前选择器E的任何元素,例：div > *:not(p){}, div的所有子元素中，不是p标签的
E:nth-child(n)	匹配其父元素E的第n个子元素，第一个编号为1，例如：a:nth-child(2){color: yellow}
E:nth-of-type(n)	与:nth-child()作用类似，但是仅匹配使用同种标签的元素,例如：a:nth-of-type(2){color: yellow},只找到同辈中第二个a标签

<style type="text/css">

    a:link{

        color: red;

    }

    a:visited {

        color: blue;

    }

    a:hover {

        color: green;

    }

    a:active {

        color: yellow;

    }

    input:focus{color: yellow};

</style>

</head>

<body>

    <input>

    <input value="22222222">

    <a href="http://www.baidu.com" target="_blank">hello-world</a>

</body>

CSS常用属性

颜色属性：

<div style="color:blueviolet">ppppp</div>

<div style="color:#ffee33">ppppp</div>

<div style="color:rgb(255,0,0)">ppppp</div>

<div style="color:rgba(255,0,0,0.5)">ppppp</div>

###其他的颜色属性说明：

opacity

元素的透明度，语法：opacity: 0.5;

属性值在0.0到1.0范围内，0表示透明，1表示不透明。

transparent

全透明，使用方式：color: transparent;

字体属性

a:first-child{

    font-size: 20px|30%|larger;  /*字号大小*/

    font-family: 'Verdana', serif;  /*字体*/

    font-weight: lighter|bold;  /*调整深浅*/

    font-style: oblique;  /*斜体*/

}

背景属性

a:first-child{

    background-color: cornflowerblue;  /*背景颜色*/

    background-image: url('1.jpg');  /*背景图片*/

    background-repeat: no-repeat;(repeat:平铺满);

    background-position:-105px  -112px;  /*多用于一个素材图片可能包含多个图片元素，取得其中所需元素*/

}

注意：如果将背景属性加在body上，要记得给body加上一个height，否则结果异常，这是因为body为空，无法撑起背景图片

文本属性

p:first-child{

    text-align: center;  /*文本位于左中右*/

    line-height: 100px;  /*文本+上下空白总共占用的高度，与字体大小无关*/

    text-transform: uppercase|lowercase|capitalize  /*大写|小写|首字母大写*/

    letter-spacing: 10px;  /*每个字母的间隔*/

    word-spacing: 20px;  /*每个单词的间隔*/

    text-indent: 20px;  /*缩进*/

    background-position:-105px  -112px;  /*多用于一个素材图片可能包含多个图片元素，取得其中某个位置所需元素*/

    text-decoration: none|underline|overline|line-through  /*文本装饰，无|下划线|上划线|中线，常用于a标签去除下划线*/

}

###其他的文本属性说明：

text-overflow: 文本溢出样式，经常和overflow:hidden要配合使用，overflow+width先限定宽度，才有可能出现溢出的情况

    clip 修剪文本。

    ellipsis 显示省略符号...来代表被修剪的文本。

    string 使用给定的字符串来代表被修剪的文本。

text-shadow：文本阴影

    第一个参数是左右位置

    第二个参数是上下位置

    第三个参数是虚化效果

    第四个参数是颜色

    text-shadow: 5px 5px 5px #888;

white-space: 设置元素中空白的处理方式

    normal：默认处理方式。

    pre：保留空格，当文字超出边界时不换行

    nowrap：不保留空格，强制在同一行内显示所有文本，直到文本结束或者碰到br标签

    pre-wrap：保留空格，当文字碰到边界时换行

    pre-line：不保留空格，保留文字的换行，当文字碰到边界时换行

word-wrap：自动换行

    word-wrap: break-word;  /*常和write-space: pre-wrap配合使用，用于长文本在页面的输出*/

float属性

这个东西比较复杂，专门写了文章深入说明，请移步这里：

http://www.cnblogs.com/caseast/p/5831240.html
position

1.static，默认值 static：无特殊定位，对象遵循正常文档流。

top，right，bottom，left等属性不会被应用。可用margin定位边距说到这里我们不得不提一下一个定义——文档流，文档流其实就是文档的输出顺序，也就是我们通常看到的由左到右、由上而下的输出形式，在网页中每个元素都是按照这个顺序进行排序和显示的，而float和position两个属性可以将元素从文档流脱离出来显示。默认值就是让元素继续按照文档流显示，不作出任何改变。

2.position:relative & absolute

relative：相对定位，对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

absolute：绝对定位，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。如果设定 position:relative，就可以使用 top,bottom,left和right来相对于元素在文档中应该出现的位置来移动这个元素。[意思是元素实际上依然占据文档中的原有位置，只是视觉上相对于它在文档中的原有位置移动了]；当指定 position:absolute 时，元素就脱离了文档[即在文档中已经不占据位置了，使用chrome审查元素，虽然代码上在父元素的relative中，但点击父元素是不包含absolute部分的]，可以准确的按照设置的top,bottom,left 和 right来定位了。如果一个元素绝对定位后，其参照物是以离自身最近元素是否设置了相对定位，如果有设置将以离自己最近元素定位，如果没有将往其祖先元素寻找相对定位元素，一直找到html为止。

3.position:fixed

在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。

fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。

注意点：一个元素若设置了position:absolute或fixed;则该元素就不能设置float。这是一个常识性的知识点，因为这是两个不同的流，一个是“浮动流”，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流（普通流）。

小结一下：css有3种基本的定位机制（普通流、定位流、浮动流）

普通流：普通流中元素框的位置由元素在XHTML中的位置决定。块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。普通流就是html文档中的元素如块级元素、行内元素依据他们的显示属性按照在文档中的先后次序依次显示。是块级元素就占一行或多行，是行内元素就和其他元素共处一行，没什么好说的，该咋显示咋显示，一个萝卜一个.position:relative和position:static都遵循普通流

定位流：包括position:absolute|fixed,两者区别就是absolute在就近的position:relative里定位，fixed在浏览器里定位。使用了这个流，元素就脱离了普通流的规则。也不能再使用float，float只能作用于普通流，让普通流漂浮到浮动流。

浮动流：同样脱离于普通流，但和定位流又不在一个层次中，详情参考上边详细讲解float的博客

<head>

<style type="text/css">

    .pos_left_re

    {

        position:relative;

        top: -20px;

        left:-20px;

    }

    .pos_right_re

    {

        position:relative;

        top: -20px;

        left:20px

    }

    .pos_ab{

        position: absolute;

        top: 100px;

        left: 50px;

    }

    .pos_fixed{

        position: fixed;

        top: 250px;

        left: 50px;

    }

</style>

</head>

<body>

    <h2>这是位于正常位置的标题</h2>

    <h2 class="pos_left_re">这个标题相对于其正常位置向左移动</h2>  <!--首先relative依然会遵循标准流，所以他的相对位置是在标准流的基础上，会被第一个h2挤压到第二行，在此基础上相对运动-->

    <h2 class="pos_right_re">这个标题相对于其正常位置向右移动</h2>

    <div class="pos_right_re">相对位置中的绝对位置:

        <a class="pos_ab">absolute</a>

        <div class="pos_ab">重叠的</div>  <!--定位流不遵循标准流的位置规则，不存在挤压，会叠在一起-->

    </div>

    <div class="pos_fixed">fixed</div>

</body>

display属性

这个在html中有过介绍，参考我的这篇博文：http://www.cnblogs.com/caseast/p/5822186.html
zoom 缩放比例

    .zoom {

        zoom: 150%;

    }

cursor自定义光标

cursor: default; 默认

cursor: none; 无光标

cursor: pointer; 小手光标

cursor: help; 小问号光标

cursor: move; 十字箭头移动光标

cursor: text; I 型光标

cursor: wait; 等待中光标

cursor: url("/static/o_mouse.png"), auto; 自定义图片的光标
z-index 元素层叠顺序

z-index 仅在定位元素上有效（例：position:absolute|relative|fixed;）

数字大的覆盖数字小的，可以为负数
important 优先级

CSS写在不同的地方有不同的优先级，.css文件中的定义<元素style中的属性，但是如果使用!important，事情就会变得不一样，css定义中的用!important限定的定义却是优先级最高的。
overflow溢出

规定溢出元素的首选滚动方法

visible 默认值。内容不会被修剪，会呈现在元素框之外。

hidden 内容会被修剪，并且其余内容是不可见的。

scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit 规定应该从父元素继承 overflow 属性的值。
边框border

border-style：边框样式

solid 默认，实线

double 双线

dotted 点状线条

dashed 虚线

border-color：边框颜色

border-width：边框宽度

border-radius：圆角

>1个参数：四个角都应用

>2个参数：第一个参数应用于左上、右下；第二个参数应用于左下、右上

>3个参数：第一个参数应用于左上；第二个参数应用于左下、右上；第三个参数应用于右下

>4个参数：左上、右上、右下、左下（顺时针）

border: 简写

>border: 2px yellow solid;

box-shadow：边框阴影

>第一个参数是左右位置

>第二个参数是上下位置

>第三个参数是虚化效果

>第四个参数是颜色

>box-shadow: 10px 10px 5px #888;

用border实现三角图案

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .triangle-one {

            display: inline-block; /*同行显示的div*/

            border-top: 50px red solid;

            border-right: 50px green solid;

            border-bottom: 50px yellow solid;

            border-left: 50px blue solid;

        }

        .triangle-two {

            display: inline-block;

            border-top: 0 red solid;

            border-right: 50px green solid;

            border-bottom: 50px yellow solid;

            border-left: 50px blue solid;

        }

        .triangle-stree {

            display: inline-block;

            border-top: 50px red solid;

            border-right: 0 green solid;

            border-bottom: 50px yellow solid;

            border-left: 50px blue solid;

        }

    </style>

</head>

<body>

    <div class="triangle-one"></div>

    <div class="triangle-two"></div>

    <div class="triangle-stree"></div>

</body>

margin和padding

这两个很好理解，margin是外边距，padding是内边距

写法：

margin:0 相当于 0 0 0 0 上右下左顺时针，padding一样

如果是0 auto 就是上下是0，左右是auto