CSS备忘笔记

一.CSS的概念

　　CSS(Cascading Style Sheet)，中文译为层叠样式表，它是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

二.CSS使用方式

　　使用CSS控制页面有4种方式，分别为行内样式、内嵌式、链接式、导入式。

　　1.行内样式。直接写在HTML标签里，例如<div style="width:100px;height:100px;"></div>

　　2.内嵌式。写在<style></style>中，例如

　　　　<style type="text/css">

　　　　div{

　　　　　　width：100px;

　　　　　　height:100px;

　　　　}

　　　　</style>

　　3.链接式。使用频率最高，也最为实用，便于维护。例如

　　　　<link href="test.css" type="text/css" rel="stylesheet" />

　　　　rel即为relation的缩写，规定当前文档与被链接文档之间的关系，只有当rel为"stylesheet"时才能得到所有浏览器的支持，而其他值只能到部分的支持。

　　4.导入式。与内嵌式类似，也是写在<style></style>中，有4种写法，例如

　　　　<style type="text/css">

　　　　　　　@import url("1.css");

　　　　　　　@import url(2.css);

　　　　　　　@import "3.css";

　　　　　　　@import 4.css　　　

　　　　</style>

　　链接式跟导入式都属于外部引入css文件，十分相像，它们的主要区别是

　　(1).兼容性的区别。导入式@import对于低版本浏览器是不支持的，而链接式link无兼容性问题。

　　(2).加载顺序的区别。链接式link引入css时，css文件随页面同时加载；而导入式@import引入的css文件得等到页面加载完毕后才被加载。

　　优先级顺序为：行内样式>内嵌式>链接式>导入式

三.CSS基本语法

　　(一).CSS选择器

　　HTML中的标签的样式都是通过CSS选择器进行控制的，进而实现各种效果，有3中类别的选择器。

　　1.标签选择器。例如

　　　　div{width:100px;height:100px;}

　　2.类别选择器。例如

　　　　.class1{color:red;}

　　　　div .class2{color:blue;}

　　3.ID选择器。例如

　　　　#id1{color:black;}

　　(二).选择器的声明

　　选择器的声明可以有集体声明和嵌套声明。

　　集体声明，例如

　　h1,h2,h3,h4{color:red;}

　　嵌套声明，例如

　　h1 .class1 {color:red;} 表示h1标签下的所有class为class1的标签的字体为红色。

四.CSS文字样式

　　1.字体 font-family

　　font-family:黑体,宋体,Arial,sans-serif;

　　font-family属性可以同时声明多种字体，以逗号分隔，如果浏览器不支持第一个字体，则会尝试下一次。

　　注：sans-serif不是单个字体的名称，而是一类字体的统称，font-family的最后都要求添加sans-serif，当客户端没有指定字体时可以使用本机上的默认字体。serif也是类似的。

　　注：一些字体如Times New Roman中间会有空格，这时需要用双引号将其引起来，如"Times New Roman"。

　　2.文字大小 font-size

　　font-size的属性值可以是相对大小，也可以是绝对大小。

　　绝对单位：in(inch,英寸)，cm(厘米)，mm(毫米)，pt(point,印刷的点数,相当于1/72inch) 

　　绝对大小关键字：xx-small，x-small，small，medium，large，x-large，xx-large

　　注：绝对大小不随显示器和父标签的改变而改变。

　　相对大小的设置就比较灵活，如px(像素)，其显示大小与显示器的大小及其分辨率有关系。

　　采用%或者em都是相对于父标签而言的比例，如果没有设定父标签的字体大小，则就相对于浏览器的默认值。

　　例如

　　font-size:200%;  即在父标签的基础上乘以200%

　　font-size:0.5em;  即在父标签的基础上乘以0.5

　　3.文字颜色 font-color
　　有5种设置文字颜色的方法，例如

　　h1{color:red;}

　　h1{color:#FFFFFF;}

　　h1{color:#FFF;}

　　h1{color:rgb(0,0,0);}

　　h1{color:rgb(100%,100%,100%);}

　　4.文字粗细 font-weight

　　有12个属性值，分别为normal(默认值),bold(粗体字符),bolder(更粗的字符),lighter(更细的字符),

　　100,200,300,400,500,600,700,800,900(定义由细到粗的字符,400相当于normal,700相当于bold)

　　5.斜体 font-style

　　有三个属性值normal,italic,oblique。

　　注：italic和oblique都是表示的斜体，不同的是italic表示使用斜体字，oblique表示将文字倾斜，不过最终的效果大体相当。

　　6.文字的下划线、顶划线和删除线　text-decoration

　　text-decoration:underline;  下划线

　　text-decoration:overline;　顶划线

　　text-decoration:line-through;  删除线

　　text-decoration:blink;　文字闪烁(在IE下支持,firefox中支持的很好)

　　7.英文字母大小写 text-transform

　　有三个属性值,capitalize(单词首字母大写),uppercase(全部大写),lowercase(全部小写)

五.背景控制

　　1.背景颜色 background-color

　　例如　background-color:#FFFFFF;

　　2.背景图片 background-image

　　例如　background-image:url(1.jpg);

　　3.背景图的重复 background-repeat

　　背景图片都是直接重复地铺满整个页面,通过background-repeat可以设置图片的重复方式，包括水平重复、垂直重复以及不重复。

　　background-repeat:repeat-y;　//垂直方向重复

　　background-repeat:repeat-x;　//水平方向重复

　　background-repeat:no-repeat;　//不重复

 　  4.背景图的定位 background-position

 　　background-position属性用于设置图片在X轴及Y轴方向的定位，可以使用left,top,bottom,right,center这5种标准对齐方式来进行设定。

　　还可以通过百分比以及绝对像素进行精确控制，例如

　　background-position:30% 20px; 背景左端处于元素30%的位置，上端处于元素20px的位置。

　　5.背景滚动  background-attachment

　　当背景图片较大时，浏览器出现了滚动条，如果不希望图片随着文字的移动而移动，而是固定在一个位置上，就可以设置background-attachment的值为fixed来实现。

　　background-attachment:fixed; 固定背景图片

 六.链接样式和鼠标样式控制

　　1.链接样式

　　CSS提供了四个伪类用于对链接样式进行控制。

　　a:link  超链接的普通样式，即正常浏览状态的样式

　　a:visited  被点击过的超链接的样式

　　a:hover  鼠标指针经过超链接上时的样式

　　a:active  在超链接上单击时，即"当前激活"时，超链接的样式

　　2.鼠标样式 cursor

　　cursor属性规定要显示的鼠标光标的类型或形状，其属性值有蛮多，简单的列举几个

　　auto: 浏览器的默认值

　　default:默认光标，通常是一个箭头

　　crosshair:光标呈十字状

　　pointer:光标呈一只手状

　　move:光标指示对象可被移动

　　text:光标指示文本

　　wait:光标呈沙漏状

　　help:光标呈问号状

  七.列表样式控制

　　列表分为有序列表(ol)和无序列表(ul)。

　　无序列表(ul):列表中的各个元素在逻辑上没有先后顺序，不需要描述列表中的每条必须从1,2,3或A,B,C的形式递增。

　　有序列表(ol):列表中的各个元素存在顺序上的区分，从上至下可以有序地编号为1,2,3或A,B,C。

　　有三个属性用于控制列表样式，list-style-type,list-style-image,list-style-position

　　1.list-style-type

　　此属性用于设置列表项标记的类型，有如下值

　　none:不显示任何符号

　　disc:实心圆

　　circle:空心圆

　　square:正方形

　　decimal:数字，1,2,3……

　　upper-alpha:大写英文字母，A,B,C……

　　lower-alpha:小写英文字母，a,b,c……

　　upper-roman:大写罗马字母，I,II,III……

　　lower-roman:小写罗马字母，i,ii,iii……

　　2.list-style-image

　　此属性用图片来代替列表符号，例如

　　list-style-image:url(test1.jpg);

　　注：使用list-style-image属性，用图片来代替列表符号，在各个浏览器的下样式有明显的区别，因此不推荐采用此属性。如果希望列表符号采用图片的样式，可以将list-style-type属性的值设置为none，然后修改<li>标签的背景属性background来实现。

　　3.list-style-position

　　该属性用于声明列表标志相对列表内容的问题，有inside和outside两个值。

　　outside:默认值，保持标志位于文本的左侧。

　　inside:列表标志位于文本以内。

  八.CSS网页布局与定位

　　(一).初识div

　　div(division)简单而言是一个区块容器标签，即<div></div>之间相当于一个容器，可以容纳各种HTML元素。

　　span与div类似，但是有区别，span是行内元素(内联元素)，div是块级元素。接下来说一下它们的区别。

　　block块级元素：当前对象显示为一个方块，它将占据整行，其他的对象只能在下一行显示。

　　in-line行内元素(内联元素)：与block对象相反，它允许下一个对象与之共享一行进行显示。

　　常见的块级元素有：div、form、h1~h6、ul、ol、li、table、tbody、th、td、tr、p、pre

　　常见的行内元素(内联元素)：span、a、img、input、strong、em、i、label、select、br

　　块级元素与内联元素可以相互转换。

　　块级元素转换为内联元素：display:in-line

　　内联元素转换为块级元素：display:block

　　(二).盒模型

　　所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间，一般来说这些被占据的空间往往都要比单纯的内容要大，也即可以通过调整盒子的边框和距离等参数来调节盒子的位置。

　　一个盒子模型由content(内容)、border(边框)、padding(间隙/内边距)、margin(间隔/外边距)这四个部分组成。

　　一个盒子的实际宽度=左外边距+左边框宽+左内边距+content宽度+右内边距+右边框宽+右外边距

　　一个盒子的实际高度=上外边距+上边框宽+上内边距+content宽度+下内边距+下边框宽+下外边距

　　1.border

　　border一般用于分离元素，border的外围即为元素的最外围，因此计算元素实际的宽和高时，就要将border纳入。

　　border 简写属性在一个声明设置所有的边框属性，可以按顺序设置，即border-width,border-style,border-color。

　　border-width和border-color都好说，重点说一下border-style。

　　border-style可能的属性值有：

　　none:定义无边框

　　dotted:定义点状边框

　　dashed:定义虚线

　　solid:定义实线

　　double:定义双线

　　groove:定义3D凹槽边框

　　ridge:定义3D垄状边框

　　inset:定义3Dinset边框

　　outset:定义3Doutset边框

 　可以单独的针对某一方位的边框进行样式设置，即采用border-left,border-right,border-top,border-bottom这四个属性即可(margin、padding与之相同)。

 　2.padding

　　padding用于控制content与border之间的距离，使用padding属性可以在一个声明中设置所有的内边距属性。

　　有如下四种写法：

　　(1).padding:10px 20px 30px 40px

　　　　上内边距为10px,右内边距为20px,下内边距为30px,左内边距为40px(从顶部开始的顺时针)

　　(2).padding:10px 20px 30px

　　　　上内边距为10px,右内边距和左内边距为20px,下内边距为30px

　　(3).padding:10px 20px

　　　　上内边距和下内边距为10px,右内边距和左内边距为20px

　　(4).padding:10px

　　　　所有四个内边距都是10px

 　　注：margin的写法与之相同。

　　3.margin

　　margin是指元素与元素之间的距离。

　　当两个行内元素紧时，它们之间的距离即为第一个元素的margin-right加上第二个元素的margin-left。

　　当两个块级元素上下放置时，它们之间的距离不再是margin-bottom和margin-top的和，而是两者之间的较大者。

 　(三).元素的定位

 　1.float定位

　　float的属性值可以设置为left、right或者默认值none，当设置了元素向左或者向右浮动时，元素会向其父元素的左侧或右侧紧靠。但对于父元素而言，它的内容就已经不属于父块了。

 　　在页面布局时，如果某一元素采用了浮动定位，则其后的元素会受到其影响，这时可以通过设置元素的clear属性来清除对float的影响。

　　clear:left;  //清除float对左侧的影响

　　clear:right;  //清除float对右侧的影响

 　  clear:both;  //清除两端的float影响

　　2.position定位

　　　position属性一共有4个值，分别为static、absolute、relative、fixed。

　　　(1).static

　　　　　static为默认值，它表示块保持在原本应该在的位置上，即该值没有任何移动的效果。

　　　(2).absolute

　　　　　absolute表示绝对定位。可以通过设置top、right、bottom、left这4个CSS属性值，来进行定位。

　　　　　注：使用绝对定位，它的top和left属性应该解释为它是相对于其position属性设置为除static值以外的祖先元素。如果绝对定位的元素没有定位过的祖先，则它的top和left属性使用文档坐标进行度量——就是相对于文档左上角的偏移量。如果想相对于一个属于常规文档流中的容器绝对定位一个元素，则将容器的position指定为relative，top和left指定为0px。这就让容器变成了动态定位，但它仍留在文档流中原来的位置。任何绝对定位元素的子元素都相对于容器进行定位。

　　　(3).relative

　　　　　relative表示相对定位，即相对于它原来的位置进行调整，同样可以设置top、right、bottom、left这4个CSS属性值。

　　　(4).fixed

　　　　　fixed本质上是跟absolute一样的，只不过元素不随着浏览器的滚动条向上或者向下移动。

　　3.z-index空间位置

　　　z-index属性用于调整定位时重叠块的上下位置，z-index值大的页面位于其值较小的上方。