CSS纲要

CSS纲要

主要章节：

1．HTML&CSS使用原则

2．CSS概述

3．CSS语法

4．尺寸边框与模型

5．文本格式化

6．表格样式

7．浮动定位

8．显示

9．列表样式

10．定位

一、HTML&CSS使用原则

HTML控制网页结构（搭建房子），CSS控制网页样式（装修）。

W3C建议：HTML，CSS的共有属性，优先使用CSS，便于维护。

 

二、CSS概述

1.     CSS概述

（一）      CSS有什么用？

 

ü  用于HTML文档中元素的样式定义，实现了内容与表现分离，提高了代码的可重用性和可维护性

ü  各元素可重用统一的样式声明，快速维护页面元素(文本、图像、表格)的样式(字体、字号、颜色等)

ü  可以弥补HTML对象的属性不足（例：HTML中无法为段落添加边框背景等属性）

 

 

（二）      什么是CSS？

CSS（Cascading Style Sheets）：层叠样式表，又叫级联样式表，简称样式表。

2.     使用CSS样式表

（一）使用CSS样式表

①　内联方式

样式定义在单个的HTML元素中

 

②　内部样式表

样式定义在HTML页的头元素中

 

③　外部样式表

将样式定义在一个外部的CSS文件中（.css文件），由HTML页面引用样式表文件

（二）内联方式使用CSS

样式定义在HTML元素的标准属性style里

语法：

ü 将分号隔开的一个或多个属性/值对作为HTML中元素的style属性的值

ü CSS属性和属性值之间用冒号“：”连接

ü CSS多对属性之间用“；”隔开

例：

文本

（三）内部样式表

样式表规则位于文档头元素中的

例：

 

 

 

（四）外部样式表

可实现内容与表现分离，可以被站点中的所有页面重用

①　创建一个单独的样式表文件用来保存样式规则

l  一个纯文本文件，文件后缀为.css

l  该文件中只能包含样式规则

l  样式规则由选择器和样式声明组成

②　在需要使用该样式表文件的页面上，使用元素链接需要的外部样式表文件

在文档的元素内添加元素,是单标记

例：

  all,所有的媒体介质

  screen,针对浏览器，支持浏览器显示的所有内容

  print,针对打印机，支持打印机打印现实的所有内容

 

（五）样式表特征

①　继承性

大多数CSS样式规则可以被继承，子标签会默认继承上级标签的属性

②　层叠性

可以定义多个样式表，不冲突时，多个样式表中的样式可层叠为一个，即当多个不同样式作用与一个元素时，该元素将应用所有样式

③　优先级

样式定义冲突时，按照不同样式规则的优先级来应用样式

 

（六）样式优先级

浏览器缺省设置：                                                                    

由高到低：

①　内联样式

相同的样式，重复定义，以最后一次的定义为准

②　外部CSS文件&内部样式表                                              

就近优先

 

三、CSS语法

（一）CSS语法规范

ü  内联样式：由样式声明组成

ü  样式表：由多个样式规则组成

每个样式表规则有两部分——选择器和样式声明：

 

 

 

选择器{

    属性:值;

    属性:值;

    ....

}

 

（二）选择器

①　通配选择器——*{}

自动匹配文档所有元素

②　元素（标记）选择器——标记名称{}

自动匹配指定的HTML元素,、

等

例：

h1{color:blue}

为h1元素添加样式

③　类选择器—— . 类名{}

手动为HTML添加class=“类名称”属性，多个类之间以空格分隔

允许以一种独立于文档元素的方式来指定样式

语法：. className｛color:red;｝

所有能够附带class属性的元素都能使用此样式声明，将元素的class属性值设为样式类名

例：.myClass{color:blue}

文本

特殊写法：

l  将类选择器和元素选择器结合使用，将样式规则与附带class属性的某种元素匹配，实现对某种元素中不同样式的细分控制

语法：元素选择器. className{}

p.a1{ /*只能应用给段落元素*/

  color:red;

}

l  同时应用a1,a2两个类，即要使用其一必须同时使用另外一个才有效

.a1.a2{ /*同时使用a1和a2两个类*/

  color:blue;

}

l  类选择器叠加且与元素选择器结合

p.a1.a2{ /*只能应用给段落,并且还需要同时使用a1和a2这两个类*/

      

}

 

④　id选择器——#id{}

只能添加给文档中的唯一对象，可以为标有特定id的HTML元素指定的特定样式

语法:#id属性值{}

例：#mostImportant{color:blue}

This isimportant!

This is important!被设定样式

如果发现HTML标记存在id属性，那么该ID可能被以下技术使用：

语法：

A.CSS样式

B.JavaScript --> document.getElementById()

C.jQ uery     --> $('#ID')

 

⑤　群组选择器（选择器分组）——选择器1，选择其2...{}

选择器声明以逗号隔开的选择器列表，将一些相同的规则作用于多个元素，具有相同属性的选择器的简单写法

⑥　派生选择器（派生选择器）——父元素选择器 子元素选择器....{}

要求选择器从左到右至少为父子关系，一般最多写三层

依据元素在其位置的上下文关系来定义样式，选择器之间用空格隔开

h1 span{color:blue}

A

impor

只有

元素中的元素中的文本使用该样式

⑦　伪类选择器——其他选择器:伪类{}

伪类用于向某些选择器添加特殊效果，使用冒号“：”作为结合符，左边为其他选择器，右边是伪类

常用伪类

:link

:hover 鼠标放在链接时的状态

:active

:visited

:after

:before

:focus

 

选择器优先级：

Inline,Ids,Classes,Tags

 

例1:

 

我们

,优先级 1,0,0,0

 

例2

 

我们

,优先级0,1,0,0

 

例3

 

我们

,优先级0,1,1,0

 

例4:

 

我们

,优先级0,1,2,0

 

例5:

 

#a1 #a2 .a3 .a4 p{ /*优先级:0,2,2,1*/

 

}

 

 

四、布局样式

1.    尺寸与边框

（一）样式单位

%：百分比

in：英寸

cm:厘米

mm:毫米

pt:磅（1pt等于1/72英寸）

px:像素（计算机屏幕上的一个点）

em:1em等于当前字体尺寸，2em等于当前字体尺寸的2倍

rgb(x,x,x):RGB值，如rgb(255,0,0)

rgb(x%,x%,x%):RGB百分比值，如rgb（100%，0%，0%）

#rrggbb:十六进制数，如#ff0000

#rgb:简写的十六进制数，如#f00

表示颜色的英文单词，如：red

 

CSS中必须加单位！

（二）尺寸

width:设置宽度

height:设置高度

overflow:当内容溢出元素框时如何处理

-visible：默认，即使超出元素框，也显示全部内容

-hidden：文本超出尺寸时，隐藏文本不显示

-scroll：总显示滚动条

-auto：自动，不超出不显示滚动条，超出后显示滚动条

 

（三）边框

简写方式：border:width style color;

border属性间用空格隔开

单边定义：border-left/right/top/bottom-width

               border- left/right/top/bottom-style:none|solid|dotted(点划线)|dashed(虚线);

border- left/right/top/bottom-color

 

2.    框模型

（一）     框模型

框模型定义了元素框处理元素内容、内边距、边框和外边距的方式

width和height指内容区域的宽度和高度，增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸

 

       框模型演示：

（二）     内边距

内边距：内容与框线之间的距离

-padding:value;

                     单边设置：padding-top/right/bottom/left:value;

                     简写方式：padding:value1 value2 value 3value 4

                                                 top  right   bottom left   

                   只写1个值，4个方向都一样；写2个值，第1个代表上下，第2个代表左右；写3个值，第1个代表上，第2个代表左右，第3个代表下。

（三）     外边距

外边距：与下一个元素之间的空间量

              -margin:value;

单边设置：margin-top/right/bottom/left:value;

简写方式：margin:value1 value2 value 3 value 4

                              top  right bottom left   

margin可取值为auto，由浏览器计算外边距。

例：设置居中

div｛

       width:100px;

       height:100px;

       border:1px solid black;

       margin:0 auto;

｝

（四）     补充说明

①　             块级对象的默认宽度为父对象的100%。

以下元素默认情况下为块级元素：div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,br

②　    正常文档流(标准文档流),浏览器显示的效果由代码书写顺序决定，块级元素将上下排列;内联元素将水平排列。

3.    背景

（一）     背景色

background-color属性用于为元素设置背景色，该属性接收任何合法颜色值。

为元素背景设置一种纯色

（二）     背景图像

1)       背景图片

-background-image:

默认值为none，表示背景上没有放置任何图像

如果要设置一个背景图像，需要用起始字母url附带一个图像的URL值，可以是相对url,也可以使绝对url

例：

body{

       background-image:url(“image/bg_01.gif”);

}

2)       背景重复

-background-repeat

默认情况下，背景图像在水平和垂直方向上重复出现，创建一种称为“墙纸”的效果。

可以用background-repeat属性控制背景图像的平铺效果。

-background-repeat：

       repeat:在垂直方向和水平方向重复，为重复值

       repeat-x:仅在水平方向重复

       repeat-y:仅在垂直方向重复

       no-repeat:仅显示一次

3)       背景定位

a)       -background-position:改变图像在背景中的位置

m值	说明
x% y%	第1个值是水平位置，第2个值是垂直位置，表示沿x轴和y轴的百分比，左上角是0%0%，右下角是100%100%
x y	表示沿x轴和y轴的绝对长度，左上角是0 0
left	在页面或者包含元素的左边显示
center	在页面或者包含元素的中间显示
right	在页面或者包含元素的右边显示
top	在页面或者包含元素的顶部显示
bottom	在页面或者包含元素的底部显示

background-position:horizontalvertical;

horizontal:left|center|right|value;

vertical:top|center|bottom|value;

b)       背景图片的固定

默认情况下，背景图像会随页面滚动而移动。

-background-attachment：

-scroll：默认值，背景会随文档移动

-fixed:背景图像固定，不会随页面的其余部分滚动，常用于实现为水印的图像

五、文本格式化

（一）     控制字体

字体：font-family:value1,value2;

字号：font-size：value;

加粗：font-weight:normal/bold;

（二）     控制文本样式

文本颜色：color:value;

水平对齐方式： text-align:left|center|right|justify;

文字修饰线：text-decoration:none|underline|line-through|overline;

行高：line-height:value;

首行文本缩进：text-indent:value;

文本倾斜：font-style:normal|italic;

标题字号:16px~24px

正文字号:12px~16px

六、列表样式

（一）     列表项标志

- list-style-type

用于控制列表中列表项标志的样式：

l  无序列表：出现在各列表项旁边的圆点

none:无标记

disc：实心圆，为默认值

circle:空心圆

squere：实心方块

l  有序列表：字母、数字或其他符号

none:无标记

decimal:数字，为默认值

lower-roman:小写罗马数字

upper-roman:大写罗马数字

                            ……

（二）  列表项图像

-list-style-image

使用图像来替换列表项中的标记，取值为：url（），指定图像作为有序或无序列表项的标志

列表样式：list-style-type：url(图像RL)position;

七、表格样式

（一）     表格常用样式属性

边距属性：padding

尺寸属性：width、height,设置表格或者单元格的尺寸

文本格式化属性：

背景属性：设置表格或者单元格的背景色或者背景图像

                     border属性：设置表格的边框

垂直方向对齐属性：vertical-align：top/middle/bottom，在表单元格中，设置单元格框中的单元格内容的对齐方式

（二）     表格特有样式属性

边框合并：如果设置了单元格的边框，相邻单元格的边框会单独显示，类似于双线边框

合并相邻的边框：border-collapse：separate/collapse;设置是否将表格边框合并为单一边框

边框边距：border-spacing，设置相邻单元格的边框间的距离，仅限于分隔单元格边框。

取值为长度值，可以为该属性指定一个或者两个值：

-指定1个值：该值同时应用于水平和垂直间距

-指定2个值：第一个值指定水平间距，第二个值指定垂直间距，且两个值之间用空格隔开

例：

              table{

                     border:2px dotted gray;

                     border-spacing:10px20px

}

td{

       border-collapse:separate;

       border-1px solid black;

}

八、显示

（一）     显示方式

“一切皆为框”，页面上所有元素都可显示为框，块级元素显示为一块内容，即“块框”，内联元素内容显示在行中，即“行内框”，除默认显示效果外，可用display属性来修改元素框的显示方式，即改变生成的框的类型

display:none/block/inline;

none:让生成的元素没有框，该框及其所有内容就不再显示，不占用个文档的空间

block:让行内元素表现得像块级元素一样

inline：让块级元素表现得像内联元素一样

设置内容：

-content:"value";

content控制元素内容，但显示为内联元素，所以一般与display属性组合使用

标准清理浮动的方法：

.clear:after{

       content:"."; /*手动的添加一个内联的子对象*/

       display:block;/*将子对象设置为块级对象*/

       height:0;/*让文本不要撑高块级对象*/

       visibility:hidden;/*隐藏文本*/

       clear:both;/*子对象要起到清理浮动的作用*/

}

.clear{

      zoom:1;

}

（二）     光标

默认情况下，光标会根据用户的操作发生改变

l  当鼠标悬停在连接上，光标形状变为手状

l  鼠标悬停在文本区域，显示为I状

l  鼠标悬停在一个按钮上，显示为箭头

可用cursor属性指定显示给用户的鼠标光标形状，可为用户提供一种可视化暗示，提示可进行的操作,cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状

cursor:default/pointer/crosshair/text/wait/help/….

九、定位

（一）     定位概述

定位：定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置

主要包括：

1.        普通流定位

l  块级元素框从上到下依次排列，每一个块级元素都会出现在一个新行中，元素框之间的垂直距离是由框的垂直外边距计算出来的

l  内联元素将在一行中从左到右排列水平布置，不需要从新行开始，可以用水平内边距、边框和外边距调整它们的间距

2.        浮动定位

3.        相对定位

4.        绝对定位

5.        固定定位

 

（二）     定位属性

属性	说明
position	规定元素的定位类型： static/relative/absolute/fixed
偏移属性	用于定义元素框的偏移位置： top/bottom/left/right
z-index	设置元素堆叠顺序
float/clear	浮动定位属性

使用position属性和偏移属性实现普通流(标准文档流)定位、相对定位、绝对定位和固定定位，使用float属性实现浮动定位，其它属性为辅助属性。

position:static|fixed|relative|absolute;

static:采用标准文档流实现,为默认的定位方式。

（三）     相对定位

元素仍保持其未定位前的形状，元素原本所占的空间仍保留，元素框会相对于它原来的位置偏移某个距离，设置垂直或水平位置，元素将相对于它的起点移动。

例：

relative;left:20px;top:10px;”>

（四）     绝对定位

将元素的内容从普通流中完全移除，不占据空间，并使用偏移属性来固定该元素的位置，相对于最近的已定位祖先元素，如果没有，相对于最初的包含块，如

                     例：

absolute;left:20px;top:10px;”>

（五）     固定定位

将元素的内容固定在页面的某个位置，元素从普通流中完全移除，不占用页面空间，当用户向下滚动页面时元素框并不随着移动，一般用于水印

例：

fixed;left:20px;top:10px;”>

补充：

设置透明度（Chrome、Firefox等）

opacity:value(0~1);

InternetExplorer

filter:alpha(opacity=value);

（六）     堆叠顺序

修改元素定位方式后，元素可能发生堆叠，可使用z-index属性控制元素框出现的重叠顺序

z-index:-1/1/2/3…

值为数值：数值越大堆叠顺序越高，越在顶层；可设为负值，表示离用户更远

十、浮动定位

（一）     浮动概述

浮动定位：

l 将元素排除在普通流之外，在页面不占用空间

l 浮动元素放置在包含框的左边或者右边

l 浮动元素依旧位于包含框之内

浮动的框可以向左右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止，经常用它来实现特殊定位效果

（二）     浮动定位

float属性：

    如果需要设置框浮动在包含框的左边或者右边，可通过float属性来实现，float属性定义元素在哪个方向浮动，在css中，任何元素都可以浮动

float：none/left/right;

浮动演示：

1)       包含框中有三个元素框，如果把框1向右浮动动，则它脱离文档流并向右移动，直到右边缘碰到包含框右边缘，如图：

2)       当框1向左浮动时，它脱离文档流并向左浮动，直到它的左边缘碰到包含框的左边缘，因为框1不再处于文档流中，所以它不占据空间，实际上覆盖了框2，使框2在视图中不可见，如图

3)       三个框都向左浮动，那么框1向左浮动直到碰到包含框，另外两个框向左浮动知道碰到前一个框：三个框在同一行显示，如图：

4)       如果包含框太窄，那么其它浮动块会自动向下移动，直到有足够的空间，如图所示：

 

5)       如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”，如图所示：

clear属性： 用于清除浮动带来的影响，定义了元素的哪边上不允许出现浮动元素

    clear:none/left/right/both;

                补充：通过自动为清除元素增加外边距实现的

               位置保持？

附录：

单标记：