【HTML XHTML CSS基础教程(第6版)】笔记之CSS笔记(7~25章)

 

第7章 CSS构造块

 

1.在样式表中添加注释

/*内容*/

 

2.CSS颜色

rgb(红,黄,蓝)

这三个参数可以用百分号:rgb(35%,0%,50%);

也可以用数字,如上代码就相当于rgb(89,0,127),因为255的35%约等于89,255的50%约等于127;

 

 

 

 

第8章 操作CSS样式表文件

1.链接外部样式表

<link rel="stylesheet" type="text/css" href="地址" />

 

2.创建内部样式表

<style type="text/css">

</style>

 

3.导入外部样式表

<style>

@import "样式名";或改写成@import url(地址和样式名);

</style>

 

 

 

 

第9章 定义选择器

1.构造选择器

选择器可以定义最多五个不同的标准来选择应该进行格式化的元素:

元素的类型或名称

    eg:h1:要选择的元素的名称

    h1{color : red;}

元素所在的上下文

    eg:只应用于h1元素中的em元素.

    h1 em{color : red;}//

元素的类或id

    eg:选择所有属于very类的em元素

    em.very{color : red;}

    eg:只选择id为gaudi的div元素

    div#gaudi{color : red;}

元素的伪类或伪元素本身

    eg:选择属于link伪类的a元素(通俗的说,这意味着还没有访问过a元素)

    a: link{color : red;}

元素是否有某些属性和值.

    eg:可以使用方括号在选择器中添加关于目标元素的属性和/或值的信息.

    a[name]{color : red;}

 

2.按照名称选择元素

使用所需要选择的元素的名称作为选择器.

通配符*匹配代码中任何元素名称

 

3.按照ID或类选择元素

按照ID选择:

使用#符号

按照类选择:

使用.符号

 

4.按照上下文选择元素

①按照祖先元素选择要格式化的元素:

使用空格

eg:表示选择id等于gaudi的div元素中包含的任何p元素

div#gaudi p{color : red;}

 

②按照父元素选择要格式化的元素:

使用>符号

eg:表示只选择id为gaudi div元素的子元素的那些p元素.它们不能包含在任何其他元素中.

div#gaudi > p{color : red;}

 

③选择父元素的第一个子元素来进行格式化

使用:first-child

eg:表示只选择gaudi div元素的第一个子元素的p元素

div#gaudi p:first-child{color : red}

 

④按照相邻同胞元素选择要格式化的元素.

使用+符号

eg:表示只选择直接跟在同胞p元素后面的p元素

div#gaudi p+p{color : red}

 

5.选择元素的一部分

①选择元素的第一行

使用:first-line

eg:选择每个p元素的第一行

p : first-line{color : red}

 

②选择元素的第一个字母

使用:first-letter

eg:选择每个p元素的第一个字母

p : first-letter{color : red}

first-letter和first-line选择器称为伪元素,因为它们引用无法手工地标为独立元素的实际内容.

只有某些CSS属性可以应用伪元素.

 

6.按照状态选择链接元素

:link表示来改变还没有被点击过的或者当前没有被点击或指向的链接的外观.

:visited表示来改变访问者已经点击过的链接

:focus表示来改变具有焦点的链接

:hover表示来改变鼠标当前指向的链接的外观

:active表示来改变链接被点击时的外观.

eg:

a:link{color : red}

 

7.按照属性选择元素

使用[]符号,符号内输入要选择元素的属性

还可以输入 属性="value" 表示目标元素的属性必须是这个值.

或输入 属性~="value" 表示目标元素的属性可以包含这个值.

或输入 属性|="value" 表示目标元素的这个属性的值必须以value-(即你输入的值后面加上连字符)开头(这常用来搜索特定语言中的元素)

eg:选择每个具有class="div"属性的div元素

div[class="div1"] {color : red}

 

8.指定元素组

常常需要将同样的样式规则应用于多个元素.可以为每个元素重复地设置规则,也可以组合使用选择器一次性地设置规则

使用,符号

eg:选择h1和h2元素

h1,h2{color : red}

 

 

 

 

第10章 用CSS样式进行格式化

1.选择字体系列

font-family:name

这里name是首选字体的名称

 

2.指定替代字体

font-family:name, name2

这里name2是选择的第二种字体.用逗号和空格分隔每个选项

 

3.创建斜体

font-style:normal表示正常

font-style:italic表示斜体

 

4.应用粗体格式

font-weight:normal表示正常

font-weight:bold表示粗体

 

5.设置字体大小

①直接指定特定的字体大小

font-size:xxpx

xx表示设置大小的数组

②依赖于父元素设置大小

font-size:相对值

相对值例如:1.5em或150%相对于父元素的大小来设定

 

6.设置行高

line-height:n/p%/a

n表示一个数字,它将与元素的字体大小相乘,求出需要的行高

p%是字体大小的百分数来设定行高

a是一个采用像素或磅等单位的绝对值.

 

7.设置颜色

color:colorname/#rrggbb/rgb(r,g,b)

colorname是16预定义的颜色之一

#rrggbb表示颜色的十六进制

rgb(r,g,b)表示所需颜色中的红,绿,蓝成分的百分比

 

8.修改文本的背景

background:color/url(image.gif)

color表示颜色的十六进制

url(image.gif)表示以图像作为背景,可以加

repeat(使图像在水平和垂直方向并排显示)

repeat-x(使图像只在水平方向并排显示)

repeat-y(使图像只在垂直方向并排显示)

no-repeat(使图像不并排显示).

fixed或scroll来决定背景是否应该随画布一起滚动

输入x,y来设置背景图像的位置,x可以为left,center和right或具体数值,y可以为top,center和bottom或具体数值

 

9.控制间距

①指定单词间距:

word-spacing:xx

xx表示一个带单位的数字.

②指定字母间距:

letter-spacing:xx

xx表示一个带单位的数字.

 

10.增加缩进

text-indent:xx

xx表示一个带单位的数字.

该属性是继承的

 

11.设置空白属性

white-space:pre/nowarp/normal

pre表示让浏览器显示文本中所有的空白和回车

nowarp表示使所有空白成为非断裂点

normal表示使对空白的处理恢复正常

 

12.对齐文本

text-align:left/right/center/justify

left:让文本对齐左边

right:让文本对齐右边

center:让文本在屏幕上居中

justify:让文本同时对齐左右两端

 

13.修改文本的大小写

text-transform:capitalize/uppercase/lowercase/none

capitalize:使每个单词的首字母大写

uppercase:使所有字母大写

lowercase:使所有字母小写

none:让文本保持原样

 

14.使用小型大写字母

使用小型大写字母:

font-variant:small-caps

取消小型大写字母:

font-variant:none

 

15.装饰文本

text-decoration:underline/overline/line-through/blink/none

underline:给文本加上下划线

overline给文本加上上划线

line-throught给文本加上删除线

blink让文本间歇性地出现和消失

none恢复正常

 

 

 

 

第11章 用CSS样式进行布局

1.改变背景

①使用背景图像

background-image:url(image.gif)

②让背景图像重复显示

background-repeat:direction

direction表示repeat,repeat-x,repeat-y,no-repeat这四个选项

③控制背景图像是否随页面一起滚动

background-attachment:fixed/scroll

fixed表示背景图像固定

scroll表示背景图像随页面滚动

④改变背景颜色

background-color:transparent/color

transparent:让父元素的背景露出来(默认值)

color:表示颜色名或rgb颜色值

⑤同时修改所有背景属性

background:xxx xxx xxx xxx

xxxx表示以任意次序指定任何接受的背景属性

eg:

#id {background:url(xxx.jpg) left top repeat;}

 

2.设置元素的高度或宽度

①宽度

width:w

w表示元素的宽度,或带单位的长度或父元素的百分数,或auto让浏览器计算宽度

②高度

height:h

h表示元素的高度,或带单位的长度或父元素的百分数或auto让浏览器计算高度

 

3.设置元素周围的外边距

margin:x

x表示要添加的空间量,可以表示为长度,父元素宽度的百分比或auto

还可以在margin属性上添加后缀组成:

margin-top 上边距

margin-bottom 下边距

margin-left 左边距

margin-right 右边距

 

4.在元素周围添加内边距

padding:x

x表示要添加的空间量,可以表示为带单位的长度,或父元素宽度的百分比

与margin一样,也可以带以上四个后缀组成新属性

 

5.定位position

static :　 默认值。无特殊定位，对象遵循HTML定位规则

absolute :　 将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。 如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index属性定义

fixed :　 未支持。对象定位遵从绝对(absolute)方式(让元素固定在浏览器中)。但是要遵守一些规范

relative :　 对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置

 

6.让元素浮动

float:left/right

left,让元素浮动到左边,其他内容围绕在它右边.

right,让元素浮动到右边,其他内容围绕在它左边.

 

7.控制元素的浮动位置

clear : none / left / right / both

none :　 默认值。允许两边都可以有浮动对象

left :　 不允许左边有浮动对象

right :　 不允许右边有浮动对象

both :　 不允许有浮动对象

 

8.指定元素的三维位置

z-index:n

n是一个数字,表示元素在对象堆中的层次次序

 

9.设置边框

①边框样式

border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

none :　 默认值。无边框。不受任何指定的

border-width 值影响

hidden :　 隐藏边框。IE不支持

dotted :　 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线

dashed :　 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线

solid :　 实线边框

double :　 双线边框。两条单线与其间隔的和等于指定的 border-width 值

groove :　 根据 border-color 的值画3D凹槽

ridge :　 根据 border-color 的值画3D凸槽

inset :　 根据 border-color 的值画3D凹边

outset :　 根据 border-color 的值画3D凸边

②边框宽度

border-width:n

n是所需要的宽度,包括单位的缩写,如5px

③边框颜色

border-color:color

color是颜色名或rgb颜色

 

10.修改光标

cursor : auto | all-scroll | col-resize| crosshair | default | hand | move | help | no-drop | not-allowed | pointer | progress | row-resize | text | vertical-text | wait | *-resize | url ( url )

auto :　 默认值。浏览器根据当前情况自动确定鼠标光标类型。

all-scroll :　 IE6.0 有上下左右四个箭头，中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。

col-resize :　 IE6.0 有左右两个箭头，中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。

crosshair :　 简单的十字线光标。

default :　 客户端平台的默认光标。通常是一个箭头。

hand :　 竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。

move :　 十字箭头光标。用于标示对象可被移动。

help :　 带有问号标记的箭头。用于标示有帮助信息存在。

no-drop :　 IE6.0 带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。

not-allowed :　 IE6.0 禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。

pointer :　 IE6.0 和 hand 一样。竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。

progress :　 IE6.0 带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。

row-resize :　 IE6.0 有上下两个箭头，中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。

text :　 用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。

vertical-text :　 IE6.0 用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转90度的形状。

wait :　 用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。

*-resize :　 用于标示对象可被改变尺寸方向的箭头光标。 w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize

url ( url ) :　 IE6.0 用户自定义光标。使用绝对或相对 url 地址指定光标文件(后缀为 .cur 或者 .ani )。

 

11.决定溢出的位置

overflow : visible | auto | hidden | scroll

visible :　 默认值。不剪切内容也不添加滚动条。假如显式声明此默认值， 对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效

auto :　 在必需时对象内容才会被裁切或显示滚动条

hidden :　 不显示超过对象尺寸的内容

scroll :　 总是显示滚动条

 

12.垂直对齐元素

vertical-align : auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length

auto :　 CSS1 根据 layout-flow 属性的值对齐对象内容

baseline :　 CSS1 默认值。将支持 valign 特性的对象的内容与基线对齐

sub :　 CSS1 垂直对齐文本的下标

super :　 CSS1 垂直对齐文本的上标

top :　 CSS1 将支持 valign 特性的对象的内容对象顶端对齐

text-top :　 CSS1 将支持 valign 特性的对象的文本与对象顶端对齐

middle :　 CSS1 将支持 valign 特性的对象的内容与对象中部对齐

bottom :　 CSS1 将支持 valign 特性的对象的内容与对象底端对齐

text-bottom :　 CSS1 将支持 valign 特性的对象的文本与对象顶端对齐

length :　 CSS2 由浮点数字和单位标识符组成的长度值 | 百分数。可为负数。 定义由基线算起的偏移量。基线对于数值来说为0， 对于百分数来说就是0%。请参阅 长度单位 。目前IE尚未实现此参数

 

 

 

 

第12章 用CSS样式产生动态效果

1.显示和隐藏元素

display:none/inline/....

none:表示隐藏

inline:表示显示

....:表示还有很多,不过只需要了解以上两个

 

visibility : inherit | visible | collapse | hidden

inherit :　 默认值。继承父对象的可见性

visible :　 对象可视

collapse :　 未支持。主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。 对于表格外的其他对象，其作用等同于 hidden。

hidden :　 对象隐藏

 

display与visibility的区别

display隐藏元素在窗口中不会留下痕迹;

而visibility隐藏元素会保留其占据的物理空间

 

 

 

 

第13章 用于手持设备的样式表

讲手机浏览器的,略

 

 

 

 

第14章 用于打印的样式表

略吧

 

 

 

 

第15章 列表

1.基础

<ol>(有序列表)或<ul>(无序列表)

<li></li>

<li></li>

</ol>或</ul>

 

2.选择标识(着重号)

CSS样式:list-style-type:maker

这里maker是一下值之一:

disc(●)

circle(○)

square(■)

decimal(1,2,3.....)

upper-alpha(A,B,C.....)

lower-alpha(a,b,c.....)

upper-roman(I,II,Ⅲ,Ⅳ.....)

lower-roman(罗马数字小写)

none(不带标志)

 

3.选择列表的起始编号

属性start和value

eg:表示整个列表从2开始编号,并将第二个列表项的编号设置为5

<ol start="2">

<li></li>

<li value="5"></li>

</ol>

 

4.使用自定义列表标志

自定义标志的CSS样式:

li{list-style-image:url(图像地址);}

取消自定义标志的CSS样式

li{list-style-image:none}

 

5.控制标志的位置

CSS样式:

list-style-position:inside/outside

inside:让标志缩在列表项文本内.

outside:让标志显示在列表项文本的左边

该属性是继承的.

 

6.同时设置所有列表样式的属性

list-style : list-style-image || list-style-position || list-style-type

该属性是复合属性,属性值可参考以上的属性

eg:设置了三个值

UL { list-style: url(图像地址) inside square; }

 

7.创建定义列表

适合词汇表

<dl>

<dt>词汇</dt>

<dd>对词汇的解释</dd>

<dt>词汇</dt>

<dd>对词汇的解释</dd>

<dt>词汇</dt>

<dd>对词汇的解释</dd>

....

</dl>

 

 

 

 

第16章 表格

1.基本表格

<table>

    <tr>

        <td>

        </td>

    </tr>

</table>

 

2.控制间距

①控制单元格内边距的方法

cellpadding="n",n表示像素

②控制单元格间距的方法

cellspacing="n",n表示像素

③用CSS控制单元格内边距的方法

padding:value

value表示像素或父元素的百分比

④用CSS控制单元格间距的方法

border-spacing:value

value表示像素或父元素的百分比

 

3.单元格跨行跨列

跨行:

rowspan="n"

n表示单元格跨越的行数

跨列:

colspan="n"

n表示单元格跨越的列数

 

4.将表格划分为列组

<colgroup></colgroup>

 

5.将表格划分为水平区域

<thead>

</thead>

<tbody>

</tbody>

<tfoot>

</tfoot>

每个表格只能有一个thead和一个tfoot,但至少要有一个tbody

 

6.选择要显示哪些外部边框

在table标记中,输入frame="location"

location的值为以下:

void:表示没有外部边框

above:表示顶部边框

below:表示底部边框

hsides:表示顶部和底部边框

vsides:表示左右边框

rhs:表示右边框

lhs:表示左边框

bos或border:表示四边边框

 

7.选择应该显示哪些内部边框

在table标记中,输入rules="area"

area的值为以下:

none:表示没有内部分隔线

rows:表示表格中每行之间有水平分隔线

cols:表示表格中每列之间有垂直分隔线

groups:表示列组和水平部分之间有分隔线

all:表示表格中每行和每列之间都有分隔线

 

 

 

 

第17章 表单

form还有关于PHP的,略

 

 

 

 

第18章 视频,音频和其他多媒体

 

 

 

 

第19章 脚本

略

 

 

 

 

第20章 体会javascript

略

 

 

 

 

第21章 符号和非英语字符

1.字符编码

Unicode被设计为对世界上所有语言的所有字符进行编码的通用系统.通过为每种语言中的每个字符分配唯一代码,Unicode使你可以在文档中包含任何语言的任何字符,并且真正包含多种语言的多种字符,无需担心它们会被误解.HTML中最常用的Unicode形式是UTF-8

 

2.声明页面的字符编码

在页面的head部分的顶部,输入

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

 

3.声明样式表的编码

在样式表的第一行输入

#charset "code"

code表示用于保存样式表的编码名称,如可以为utf-8

 

 

 

 

第22章 测试和调试网页

略

 

 

 

 

第23章 在网上发布页面

略

 

 

 

 

第24章 吸引人们访问

列出关键字,告诉搜索引擎你的页面时关于什么的

在页面head部分输入

<meta name="" content="" />