飞跃世纪末

导航

CSS基础

1 CSS定义

CSS层叠样式表: HTML在浏览器中怎么显示,如文字的大小,颜色,字体加粗等

HTML 标签原本被设计为用于定义文档内容。

样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观。

2 CSS语法

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明

 

 

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

CSS声明总是以分号(;)结束,声明组以大括号({})括起来:

p {color:red;text-align:center;}

CSS注释以 "/*" 开始, 以 "*/" 结束

注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它

3 CSS选择器

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

 ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用

#para1

{

text-align:center;

color:red;

} 

<p id="para1">Hello World!</p>

class 选择器

class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示

类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用

.center{text-align:center;}

<h1 class="center">标题居中</h1>

你也可以指定特定的HTML元素使用class

p.center {text-align:center;}

4 CSS样式

插入样式表的方法有三种:

外部样式表(External style sheet)

内部样式表(Internal style sheet)

内联样式(Inline style)

外部样式表

当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。

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

浏览器会从文件 mystyle.css 中读到样式声明,并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存

hr {color:sienna;} p {margin-left:20px;} body 

{background-image:url("/images/back40.gif");}

不要在属性值与单位之间留有空格(如:"margin-left: 20 px" ),正确的写法是 "margin-left: 20px" 。

内部样式表

当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表

<head> 

<style> hr {color:sienna;} 

p {margin-left:20px;}

 body {background-image:url("images/back40.gif");} 

</style>

 </head>

内联样式

由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。

要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式优先级

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中,在 HTML 页的头元素中,或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式

注意:如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。

 

 

 1. 内联样式表的权值最高 1000;

 2. ID 选择器的权值为 100

 3. Class 类选择器的权值为 10

 4. HTML 标签选择器的权值为 1

5 CSS 背景

background-color 属性定义了元素的背景颜色

body {background-color:#b0c4de;}

CSS中,颜色值通常以以下方式定义:

十六进制 - 如:"#ff0000"

RGB - 如:"rgb(255,0,0)"

颜色名称 - 如:"red"

background-image 属性描述了元素的背景图像.

默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体.

body {background-image:url('paper.gif');}

 background-image 属性会在页面的水平或者垂直方向平铺

background-repeat水平或者垂直方向平铺

 

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

如果你不想让图像平铺

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

background-position背景图像与文本显示在同一个位置,为了让页面排版更加合理,不影响文本的阅读,我们可以改变图像的位置

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

background-attachment设置固定的背景图像。图像不会随着页面的其他部分滚动。

body 

{

background-image:url('smiley.gif');

background-repeat:no-repeat;

background-attachment:fixed;

}

背景简写属性

当使用简写属性时,属性值的顺序为:

body {background:#ffffff url('img_tree.png') no-repeat right top;}

background-color

background-image

background-repeat

background-attachment

background-position

6 CSS文本格式

文本颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定:

十六进制值 - 如: #FF0000

一个RGB值 - 如: RGB(255,0,0)

颜色的名称 - 如: red

body {color:red;} 

h1 {color:#00ff00;} 

h2 {color:rgb(255,0,0);}

文本对齐方式

文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐.

当text-align设置为"justify",每一行被展开为宽度相等,左,右外边距是对齐

h1 {text-align:center;}

p.date {text-align:right;}

p.main {text-align:justify;}

文本修饰

text-decoration属性主要是用来删除链接的下划线

a {text-decoration:none;}

h1 {text-decoration:overline;} 

h2 {text-decoration:line-through;} 

h3 {text-decoration:underline;}

文本转换

p.uppercase {text-transform:uppercase;}  所有大写

p.lowercase {text-transform:lowercase;}   所有小写

p.capitalize {text-transform:capitalize;}    所有首字母大写

文本缩进

文本缩进属性是用来指定文本的第一行的缩进

p {text-indent:50px;}

字符之间的间隔

h1 {letter-spacing:3px;} 字符间的空间放大

h2 {letter-spacing:-1px;} 字符间的空间减小

行与行之间的空间

p.small {line-height:70%;}

p.big {line-height:200%;}

反书写方式

.ex1 {direction:rtl;}

单词间的空白空间

p{ word-spacing:30px;}

添加文本阴影

h1 {text-shadow:3px 3px #FF0000;}

禁用文字环绕(不换行)

p{white-space:nowrap;}

文本垂直对齐图像

img.top {vertical-align:text-top;}

img.bottom {vertical-align:text-bottom;}

所有CSS文本属性。

属性

描述

color

设置文本颜色

direction

设置文本方向。

letter-spacing

设置字符间距

line-height

设置行高

text-align

对齐元素中的文本

text-decoration

向文本添加修饰

text-indent

缩进元素中文本的首行

text-shadow

设置文本阴影

text-transform

控制元素中的字母

unicode-bidi

设置或返回文本是否被重写 

vertical-align

设置元素的垂直对齐

white-space

设置元素中空白的处理方式

word-spacing

设置字间距

7 CSS 字体

CSS字型

在CSS中,有两种类型的字体系列名称:

通用字体系列 - 拥有相似外观的字体系统组合(如 "Serif" 或 "Monospace")

特定字体系列 - 一个特定的字体系列(如 "Times" 或 "Courier")

Generic family

字体系列

说明

Serif

Times New Roman
Georgia

Serif字体中字符在行的末端拥有额外的装饰

Sans-serif

Arial
Verdana

"Sans"是指无 - 这些字体在末端没有额外的装饰

Monospace

Courier New
Lucida Console

所有的等宽字符具有相同的宽度

 

 

font-family 属性设置文本的字体系列。

font-family 属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体

注意: 如果字体系列的名称超过一个字,它必须用引号,如Font Family:"宋体"。

p{font-family:"Times New Roman", Times, serif;}

字体样式

主要是用于指定斜体文字的字体样式属性。

这个属性有三个值:

正常 - 正常显示文本

斜体 - 以斜体字显示的文字

倾斜的文字 - 文字向一边倾斜(和斜体非常类似,但不太支持)

p.oblique {font-style:oblique;}

p.normal {font-style:normal;}

p.italic {font-style:italic;}

字体大小像素

h1 {font-size:40px;}
h2 {font-size:30px;}

em来设置字体大小

1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

因此,1em的默认大小是16px。可以通过下面这个公式将像素转换为em:px/16=em

h1 {font-size:2.5em;} /* 40px/16=2.5em */

IE浏览器的问题。调整文本的大小时,会比正常的尺寸更大或更小。

在所有浏览器的解决方案中,设置 <body>元素的默认字体大小的是百分比:

body {font-size:100%;}
h1 {font-size:2.5em;}

在所有浏览器中,可以显示相同的文本大小,并允许所有浏览器缩放文本的大小

设置字体加粗

p.thick {font-weight:bold;}

p.thicker {font-weight:900;}

设置字体转变

p.normal {font-variant:normal;}

一个声明中的字体属性

p.ex1

{

font:15px arial,sans-serif;

}

 

p.ex2

{

font:italic bold 12px/30px Georgia,serif;

}

所有CSS字体属性

Property

描述

font

在一个声明中设置所有的字体属性

font-family

指定文本的字体系列

font-size

指定文本的字体大小

font-style

指定文本的字体样式

font-variant

以小型大写字体或者正常字体显示文本。

font-weight

指定字体的粗细。

8 CSS 链接

链接样式

a:link - 正常,未访问过的链接

a:visited - 用户已访问过的链接

a:hover - 当用户鼠标放在链接上时

a:active - 链接被点击的那一刻

链接颜色

a:link {color:#000000;} /* 未访问链接*/ 

a:visited {color:#00FF00;} /* 已访问链接 */

a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */ 

a:active {color:#0000FF;} /* 鼠标点击时 */

当设置为若干链路状态的样式,也有一些顺序规则:

a:hover 必须跟在 a:link 和 a:visited后面

a:active 必须跟在 a:hover后面

背景颜色

a:link {background-color:#B2FF99;} 

a:visited {background-color:#FFFF85;} 

a:hover {background-color:#FF704D;} 

a:active {background-color:#FF704D;}

链接示例

a:link,a:visited

{

display:block;

font-weight:bold;

color:#FFFFFF;

background-color:#98bf21;

width:120px;

text-align:center;

padding:4px;

text-decoration:none;

}

a:hover,a:active

{

background-color:#7A991A;

}

9 CSS 列表

列表

在HTML中,有两种类型的列表:

无序列表 - 列表项标记用特殊图形(如小黑点、小方框等)

有序列表 - 列表项的标记有数字或字母

ul.a {list-style-type:circle;}

ul.b {list-style-type:square;}

ol.c {list-style-type:upper-roman;}

ol.d {list-style-type:lower-alpha;}

小黑点、小方框;数字或字母

列表项标记的图像

ul { list-style-image: url('sqpurple.gif'); }

浏览器问题兼容性解决方案

ul

{

list-style-type:none;

padding:0px;

margin:0px;

}

ul li

{

background-image:url(sqpurple.gif);

background-repeat:no-repeat;

background-position:0px 5px; 

padding-left:20px;

}

例子解释:

ul:

设置列表样式类型为没有删除列表项标记

设置填充和边距0px(浏览器兼容性)

ul中所有li:

设置图像的URL,并设置它只显示一次(无重复)

您需要的定位图像位置(左0px和上下5px)

用padding-left属性把文本置于列表中

简写属性

ul { list-style: square url("sqpurple.gif"); }

可以按顺序设置如下属性:

list-style-type

list-style-position (有关说明,请参见下面的CSS属性表)

list-style-image

所有的CSS列表属性

属性

描述

list-style

简写属性。用于把所有用于列表的属性设置于一个声明中

list-style-image

将图象设置为列表项标志。

list-style-position

设置列表中列表项标志的位置。

list-style-type

设置列表项标志的类型。

10 CSS 表格

表格边框

table, th, td
{
border: 1px solid black;
}

折叠边框

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开

table
{
border-collapse:collapse;
}

表格宽度和高度

Width和height属性定义表格的宽度和高度

table 
{
width:100%;
}
th
{
height:50px;
}

表格文字对齐

text-align属性设置水平对齐方式,像左,右,或中心:

td
{
text-align:right;
}

垂直对齐属性设置垂直对齐,比如顶部,底部或中间

td
{
height:50px;
vertical-align:bottom;
}

表格填充

td
{
padding:15px;
}

表格颜色

table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}

标题的显示位置

caption {caption-side:bottom;}

11 CSS盒子模型

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。

 

 

不同部分的说明:

Margin(外边距) - 清除边框外的区域,外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域,内边距是透明的。

Content(内容) - 盒子的内容,显示文本和图像。

最终元素的总宽度计算公式是这样的:

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的:

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

12 CSS边框

边框样式:

<style>

p.none {border-style:none;}

p.dotted {border-style:dotted;}

p.dashed {border-style:dashed;}

p.solid {border-style:solid;}

p.double {border-style:double;}

p.groove {border-style:groove;}

p.ridge {border-style:ridge;}

p.inset {border-style:inset;}

p.outset {border-style:outset;}

p.hidden {border-style:hidden;}

</style>

</head>

 

<body>

<p class="none">无边框。</p>

<p class="dotted">虚线边框。</p>

<p class="dashed">虚线边框。</p>

<p class="solid">实线边框。</p>

<p class="double">双边框。</p>

<p class="groove"> 凹槽边框。</p>

<p class="ridge">垄状边框。</p>

<p class="inset">嵌入边框。</p>

<p class="outset">外凸边框。</p>

<p class="hidden">隐藏边框。</p>

</body>

边框宽度

为边框指定宽度有两种方法:可以指定长度值,比如 2px 或 0.1em(单位为 px, pt, cm, em 等),或者使用 3 个关键字之一,它们分别是 thick 、medium(默认值) 和 thin

注意: "border-width" 属性 如果单独使用则不起作用。要先使用 "border-style" 属性来设置边框。

边框颜色

border-color属性用于设置边框的颜色。可以设置的颜色:

name - 指定颜色的名称,如 "red"

RGB - 指定 RGB 值, 如 "rgb(255,0,0)"

Hex - 指定16进制值, 如 "#ff0000"

单独设置各边

p { border-top-style:dotted;

 border-right-style:solid; 

border-bottom-style:dotted; 

border-left-style:solid; }

设置一个单一属性

border-style:dotted solid;

border-style属性可以有1-4个值

边框-简写属性

border:5px solid red;

CSS 边框属性

属性

描述

border

简写属性,用于把针对四个边的属性设置在一个声明。

border-style

用于设置元素所有边框的样式,或者单独地为各边设置边框样式。

border-width

简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。

border-color

简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。

border-bottom

简写属性,用于把下边框的所有属性设置到一个声明中。

border-bottom-color

设置元素的下边框的颜色。

border-bottom-style

设置元素的下边框的样式。

border-bottom-width

设置元素的下边框的宽度。

border-left

简写属性,用于把左边框的所有属性设置到一个声明中。

border-left-color

设置元素的左边框的颜色。

border-left-style

设置元素的左边框的样式。

border-left-width

设置元素的左边框的宽度。

border-right

简写属性,用于把右边框的所有属性设置到一个声明中。

border-right-color

设置元素的右边框的颜色。

border-right-style

设置元素的右边框的样式。

border-right-width

设置元素的右边框的宽度。

border-top

简写属性,用于把上边框的所有属性设置到一个声明中。

border-top-color

设置元素的上边框的颜色。

border-top-style

设置元素的上边框的样式。

border-top-width

设置元素的上边框的宽度。

13 CSS 轮廓

轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

轮廓(outline)属性指定元素轮廓的样式、颜色和宽度。

 

 

轮廓线

outline:green dotted thick;

轮廓样式

<style>

p {border:1px solid red;}

p.dotted {outline-style:dotted;}

p.dashed {outline-style:dashed;}

p.solid {outline-style:solid;}

p.double {outline-style:double;}

p.groove {outline-style:groove;}

p.ridge {outline-style:ridge;}

p.inset {outline-style:inset;}

p.outset {outline-style:outset;}

</style>

</head>

<body>

 

<p class="dotted">点线轮廓</p>

<p class="dashed">虚线轮廓</p>

<p class="solid">实线轮廓</p>

<p class="double">双线轮廓</p>

<p class="groove">凹槽轮廓</p>

<p class="ridge">垄状轮廓</p>

<p class="inset">嵌入轮廓</p>

<p class="outset">外凸轮廓</p>

<p><b>注意:</b> 如果只有一个 !DOCTYPE 指定 IE 8 支持 outline 属性。</p>

</body>

轮廓颜色

outline-style:dotted;

outline-color:#00ff00;

所有轮廓属性

"CSS" 列中的数字表示哪个CSS版本定义了该属性(CSS1 或者CSS2)。

属性

说明

CSS

outline

在一个声明中设置所有的轮廓属性

outline-color
outline-style
outline-width
inherit

2

outline-color

设置轮廓的颜色

color-name
hex-number
rgb-number
invert
inherit

2

outline-style

设置轮廓的样式

none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit

2

outline-width

设置轮廓的宽度

thin
medium
thick
length
inherit

 

14 CSS外边距

Margin

margin清除周围的元素(外边框)的区域。margin没有背景颜色,是完全透明的

margin可以单独改变元素的上,下,左,右边距。也可以一次改变所有的属性。

可能的值

说明

auto

设置浏览器边距。
这样做的结果会依赖于浏览器

length

定义一个固定的margin(使用像素,pt,em等)

%

定义一个使用百分比的边距

  Margin可以使用负值,重叠的内容。

单边外边距属性

margin-top:100px;

margin-bottom:100px; 

margin-right:50px;

margin-left:50px;

margin属性可以有一到四个值

15 CSS填充

当元素的 Padding(填充)(内边距)被清除时,所"释放"的区域将会受到元素背景颜色的填充

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

Padding属性,可以有一到四个值

padding: 10px;             /* 意思是上下左右值全是 10px */

padding:5px 10px;          /* 意思是上下为 5px,左右为 10px */

padding:1px 2px 3px 4px;   /* 这个写法意思是:上为 1px,右为 2px,下为 3px,左为 4px */

padding:5px 10px 7px;      /* 这种写法意思是:上为 5px,左右为 10px,下为 7px */

16 CSS分组和嵌套

分组选择器

h1,h2,p
{
color:green;
}

嵌套选择器

为所有p元素指定一个样式

为所有class="marked"的元素指定一个样式

为所有class="marked"元素内的p元素指定一个样式

17 CSS尺寸

CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样,它允许你增加行间距。

所有CSS 尺寸 (Dimension)属性

属性

描述

height

设置元素的高度。

line-height

设置行高。

max-height

设置元素的最大高度。

max-width

设置元素的最大宽度。

min-height

设置元素的最小高度。

min-width

设置元素的最小宽度。

width

设置元素的宽度。

18 CSS显示与可见性

display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏。

visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。

h1.hidden {visibility:hidden;}

display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。

h1.hidden {display:none;}

块元素装换为内联元素

li {display:inline;}

内联元素转换为块元素

span {display:block;}

注意:变更元素的显示类型看该元素是如何显示,它是什么样的元素。例如:一个内联元素设置为display:block是不允许有它内部的嵌套块元素。

inline-block行内块元素

表格设置为单一的边框

tr.collapse {

    visibility: collapse;

}

19 CSS 定位

position 属性的四个值:

static

relative

fixed

Absolute

static 定位

HTML元素的默认值,即没有定位,元素出现在正常的流中。

静态定位的元素不会受到 top, bottom, left, right影响。

fixed 定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动:

Fixed定位使元素的位置与文档流无关,因此不占据空间。

Fixed定位的元素和其他元素重叠。

p.pos_fixed { position:fixed; top:30px; right:5px; }

relative 定位

相对定位元素的定位是相对其正常位置。

h2.pos_left

{

position:relative;

left:-20px;

}

 

h2.pos_right

{

position:relative;

left:20px;

}

 即使相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。

相对定位元素经常被用来作为绝对定位元素的容器块。

absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>

h2

{

position:absolute;

left:100px;

top:150px;

}

<h2>这是一个绝对定位了的标题</h2>

<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>

重叠的元素

元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面)

一个元素可以有正数或负数的堆叠顺序。

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

img { position:absolute; left:0px; top:0px; z-index:-1; }

<img src="w3css.gif" width="100" height="140" />

<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>

注意: 如果两个定位元素重叠,没有指定z - index,最后定位在HTML代码中的元素将被显示在最前面。

裁剪元素的外形

img 

{

position:absolute;

clip:rect(0px,100px,100px,0px);

}

使用滚动条来显示元素溢出的内容

overflow 属性规定当内容溢出元素框时发生的事情

div.scroll

{

background-color:#00FFFF;

width:100px;

height:100px;

overflow:scroll;

}

属性值:visible, hidden, scroll, 或 inherit

改变光标

<span style="cursor:auto">auto</span><br>

<span style="cursor:crosshair">crosshair</span><br>

<span style="cursor:default">default</span><br>

<span style="cursor:e-resize">e-resize</span><br>

<span style="cursor:help">help</span><br>

<span style="cursor:move">move</span><br>

<span style="cursor:n-resize">n-resize</span><br>

<span style="cursor:ne-resize">ne-resize</span><br>

<span style="cursor:nw-resize">nw-resize</span><br>

<span style="cursor:pointer">pointer</span><br>

<span style="cursor:progress">progress</span><br>

<span style="cursor:s-resize">s-resize</span><br>

<span style="cursor:se-resize">se-resize</span><br>

<span style="cursor:sw-resize">sw-resize</span><br>

<span style="cursor:text">text</span><br>

<span style="cursor:w-resize">w-resize</span><br>

<span style="cursor:wait">wait</span><br>

20 CSS浮动

CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。

Float(浮动),往往是用于图像,但它在布局时一样非常有用。

img { float:right; }

彼此相邻的浮动元素会从上到下,从左到右排列

清除浮动 - 使用 clear

元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

.text_line { clear:both; }

CSS 中所有的浮动属性

"CSS" 列中的数字表示不同的 CSS 版本(CSS1 或 CSS2)定义了该属性。

属性

描述

CSS

clear

指定不允许元素周围有浮动元素。

left
right
both
none
inherit

1

float

指定一个盒子(元素)是否可以浮动。

left
right
none
inherit

 

注意:父块没有设置指定的高宽,当子块设置为浮动后,原本包裹子块的父块的高度塌陷消失,这时给父块设置overflow:hidden就能清除浮动造成的影响,使父块重新包裹子块。

21 CSS 布局

元素水平垂直居中于父元素

父元素:position: relative;

子元素:left: 0; right: 0; bottom: 0;top: 0;  margin:auto; position: absolute;  

元素居中对齐

要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。

设置到元素的宽度将防止它溢出到容器的边缘。

注意: 如果没有设置 width 属性(或者设置 100%),居中对齐将不起作用。

文本居中对齐

文本在元素内居中对齐,可以使用 

text-align: center;

文本在元素内垂直居中

Line-hight和元素的高度一致

图片居中对齐

img { display: block; margin: auto; width: 40%; }

左右对齐 - 使用定位方式

.right { position: absolute; right: 0px; width: 300px; border: 3px solid #73AD21; padding: 10px; }

注释:绝对定位元素会被从正常流中删除,并且能够交叠元素。

body { margin: 0; padding: 0; }浏览器兼容

左右对齐 - 使用 float 方式

body { margin: 0; padding: 0; } 

.right { float: right; width: 300px; background-color: #b0e0e6; }

垂直居中对齐 - 使用 padding

.center { padding: 70px 0; border: 3px solid green; }

如果要水平和垂直都居中,可以使用 padding 和 text-align: center:

垂直居中 - 使用 line-height

.center p { line-height: 1.5;

 display: inline-block; 

vertical-align: middle; }

垂直居中 - 使用 position 和 transform

除了使用 padding 和 line-height 属性外,我们还可以使用 transform 属性来设置垂直居中

22 CSS组合选择器

CSS组合选择符包括各种简单选择符的组合方式。

在 CSS3 中包含了四种组合方式:

后代选取器(以空格分隔)

子元素选择器(以大于号分隔)

相邻兄弟选择器(以加号分隔)

普通兄弟选择器(以破折号分隔)

后代选取器

后代选取器匹配值元素所有的后代元素。

div p { background-color:yellow; }

子元素选择器

与后代选择器相比,子元素选择器(Child selectors)只能匹配为某元素的子元素。

div>p { background-color:yellow; }

相邻兄弟选择器

相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。

如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。

div+p { background-color:yellow; }

后续兄弟选择器

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

div~p { background-color:yellow; }

23 CSS 伪类

CSS伪类是用来添加一些选择器的特殊效果。

伪类的语法:

selector:pseudo-class {property:value;}

CSS类也可以使用伪类:

selector.class:pseudo-class {property:value;}

anchor伪类

a:link {color:#FF0000;} /* 未访问的链接 */ 

a:visited {color:#00FF00;} /* 已访问的链接 */ 

a:hover {color:#FF00FF;} /* 鼠标划过链接 */ 

a:active {color:#0000FF;} /* 已选中的链接 */

注意: 在CSS定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。

注意: 在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。

注意:伪类的名称不区分大小写。

伪类和CSS类

伪类可以与 CSS 类配合使用:

a.red:visited {color:#FF0000;} 

<a class="red" href="css-syntax.html">CSS 语法</a>

CSS - :first - child伪类

您可以使用 :first-child 伪类来选择元素的第一个子元素

匹配第一个 <p> 元素

p:first-child { color:blue; }

匹配所有<p> 元素中的第一个 <i> 元素

p > i:first-child { color:blue; }

匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素

p:first-child i { color:blue; }

CSS - :lang 伪类

q:lang(no) {quotes: "~" "~";}

lang 类为属性值为 no 的q元素定义引号的类型

CSS-:focus伪类

鼠标焦点在的那个input会显示黄色背景

input:focus{background-color:yellow;}

24 CSS伪元素

CSS伪元素是用来添加一些选择器的特殊效果。

语法

伪元素的语法:

selector:pseudo-element {property:value;}

CSS类也可以使用伪元素:

selector.class:pseudo-element {property:value;}

:first-line 伪元素

"first-line" 伪元素用于向文本的首行设置特殊样式。

p:first-line { color:#ff0000; font-variant:small-caps; }

:first-letter 伪元素

p:first-letter { color:#ff0000; font-size:xx-large; }

注意: "first-letter" 伪元素只能用于块级元素。

伪元素和CSS类

伪元素可以结合CSS类: 

p.article:first-letter {color:#ff0000;}

多个伪元素

p:first-letter { color:#ff0000; font-size:xx-large; } 

p:first-line { color:#0000ff; font-variant:small-caps; }

CSS - :before 伪元素

":before" 伪元素可以在元素的内容前面插入新内容

h1:before { content:url(smiley.gif); }

CSS - :after 伪元素

":after" 伪元素可以在元素的内容之后插入新内容

h1:after { content:url(smiley.gif); }

例:形成特殊图形

 

 

.menu-top::after {

    position: absolute;

    content: "";

    bottom: 0px;

    left: 0px;    

width: 0px;

    height: 0px;

    border-left: 78px solid transparent;

    border-right: 78px solid transparent;

    border-bottom: 10px solid #fff;

}

 

所有CSS伪类/元素

选择器

示例

示例说明

:link

a:link

选择所有未访问链接

:visited

a:visited

选择所有访问过的链接

:active

a:active

选择正在活动链接

:hover

a:hover

把鼠标放在链接上的状态

:focus

input:focus

选择元素输入后具有焦点

:first-letter

p:first-letter

选择每个<p> 元素的第一个字母

:first-line

p:first-line

选择每个<p> 元素的第一行

:first-child

p:first-child

选择器匹配属于任意元素的第一个子元素的 <]p> 元素

:before

p:before

在每个<p>元素之前插入内容

:after

p:after

在每个<p>元素之后插入内容

:lang(language)

p:lang(it)

为<p>元素的lang属性选择一个开始值

25 CSS导航栏

熟练使用导航栏,对于任何网站都非常重要。

使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。

ul { list-style-type: none; margin: 0; padding: 0; }

list-style-type:none - 移除列表前小标志。一个导航栏并不需要列表标记

移除浏览器的默认设置将边距和填充设置为0

垂直导航栏

a { display:block; width:60px; }

display:block - 显示块元素的链接,让整体变为可点击链接区域(不只是文本),它允许我们指定宽度

width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度

激活实例;创建链接;添加边框;固定导航栏

水平导航栏

有两种方法创建横向导航栏。使用内联(inline)或浮动(float)的列表项。

这两种方法都很好,但如果你想链接到具有相同的大小,你必须使用浮动的方法。

内联列表项

li { display:inline; }可以时列表项水平显示

浮动列表项

li { float:left; } a { display:block; width:60px; }

激活实例;链接右对齐;添加分割线;固定导航条

26 CSS下拉菜单

当鼠标移动到指定元素上(图片,导航栏等)时,会出现下拉菜单。

<style>

.dropdown {

  position: relative;

  display: inline-block;

}

.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f9f9f9;

  min-width: 160px;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

  padding: 12px 16px;

}

.dropdown:hover .dropdown-content {

  display: block;

}

</style>

27 CSS图片栏

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"> 

<title>菜鸟教程(runoob.com)</title>  

<style>

div.img {

    margin: 5px;

    border: 1px solid #ccc;

    float: left;

    width: 180px;

}

 

div.img:hover {

    border: 1px solid #777;

}

 

div.img img {

    width: 100%;

    height: auto;

}

 

div.desc {

    padding: 15px;

    text-align: center;

}

</style>

</head>

<body>

 

<div class="responsive">

  <div class="img">

<a target="_blank" 

href="http://static.runoob.com/images/demo/demo1.jpg">

      <img src="http://static.runoob.com/images/demo/demo1.jpg" alt="图片文本描述" width="300" height="200">

    </a>

    <div class="desc">这里添加图片文本描述</div>

  </div>

</div>

28 CSS图片拼合技术

图像拼合就是单个图像的集合。

有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。

使用图像拼合会降低服务器的请求数量,并节省带宽。

显示图片img_navsprites.gif的一部分

img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}

父元素设置相对定位,子元素绝对定位,之后显示导航列表上一个个的定位图片

#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0p#x;width:46px;}
#home{background:url('img_navsprites.gif') 0 0;}

<ul id="navlist">

  <li id="home"><a href="/"></a></li>

  <li id="prev"><a href="/css/"></a></li>

  <li id="next"><a href="/css/"></a></li>

</ul>

悬停效果

当图片悬停的时候,图片切换到另一个位置

 

 

#home{background:url('img_navsprites_hover.gif') 0 0;}

#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}

29 CSS媒体类型

媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等。

浏览器屏幕上显示一个14像素的Verdana字体样式。但是如果页面打印,将是10个像素的Times字体,font-weight在屏幕上和纸上设置为粗体

<style>

@media screen

{

    p.test {font-family:verdana,sans-serif;font-size:14px;}

}

@media print

{

    p.test {font-family:times,serif;font-size:10px;}

}

@media screen,print

{

    p.test {font-weight:bold;}

}

</style>

30 CSS属性选择器

具有特定属性的HTML元素样式不仅仅是class和id

属性选择器

把包含标题(title)的所有元素变为蓝色

[title] { color:blue; }

属性和值选择器

[title=runoob] { border:5px solid green; }

属性和值的选择器 - 多值

包含指定值的title属性的元素样式

[title~=hello] { color:blue; }

包含指定值的lang属性的元素样式

[lang|=en] { color:blue; }

表单的属性选择器

input[type="text"]

{

width:150px;

display:block;

margin-bottom:10px;

background-color:yellow;

}

input[type="button"]

{

width:120px;

margin-left:35px;

display:block;

}

posted on 2018-06-27 14:42  小萝卜的烤兔店  阅读(199)  评论(0编辑  收藏  举报