这样的标签,HTML的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成,而不使用任何的格式化标签。
(2)如何创建CSS
如何插入样式表:
当读到一个样式表时,浏览器会根据它来格式化HTML文档。
插入样式表的方法有三种:
外部样式表
当样式需要应用于很多页面时,外部样式表将是理想的选择。
在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。
每个页面使用标签链接到样式表。
标签在(文档的)头部:
(注:
此处没有分号)
浏览器会从文件mystyle.css中读到样式声明,并根据它来格式文档。
内部样式表
当单个文档需要特殊的样式时,就应该使用内部样式表。
你可以使用
内联样式
由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。
请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。
要使用内联样式,你需要在相关的标签内使用样式(style)属性。
Style属性可以包含任何CSS属性。
本例展示如何改变段落的颜色和左外边距:
sienna;margin-left:
20px">
Thisisaparagraph
2、语法:
(1)用分号将各个声明分开
(2)CSS对大小写不敏感,如果涉及到与HTML文档一起工作的话,class和id名称对大小写是敏感的。
(3)如果值为若干单词组成时,则要给值加引号:
p{font-family:
"sansserif";},body{font-family:
Verdana,sans-serif;}此处有两个值,但都是一个单词,因此不需要引号
p{
font-family:
Times,"TimesNewRoman",serif;
}
3、选择器:
(1)元素选择器:
最常见的CSS选择器是元素选择器。
换句话说,文档的元素就是最基本的选择器。
(2)派生选择器允许你根据文档的上下文关系来确定某个标签的样式:
listrong{}
我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用
- 我是斜体字。
这是因为strong元素位于li元素内。
- 我是正常的字体。
在上面的例子中,只有li元素中的strong元素的样式为斜体字,无需为strong元素定义特别的class或id,代码更加简洁。
(3)id选择器可以为标有特定id的HTML元素指定特定的样式。
在现代布局中,id选择器常常用于建立派生选择器(id名为sidebar的更大元素内部的p将会有如下格式)。
#sidebarp
{
font-style:
italic;
text-align:
right;
margin-top:
0.5em;
}
上面的样式只会应用于出现在id是sidebar的元素内的段落。
注:
即使被标注为sidebar的元素只能在文档中出现一次,这个id选择器作为派生选择器也可以被使用很多次:
#sidebarp{
font-style:
italic;
text-align:
right;
margin-top:
0.5em;
}
#sidebarh2{
font-size:
1em;
font-weight:
normal;
font-style:
italic;
margin:
0;
line-height:
1.5;
text-align:
right;
}
(4)类选择器允许以一种独立于文档元素的方式来指定样式。
要应用样式而不考虑具体设计的元素,最常用的方法就是使用类选择器。
在CSS中,类选择器以一个点号显示:
.center{text-align:
center}
可以变形为其他选择器:
a、派生选择器:
在类名为fancy的更大元素的内部的td将会有一下样式
.fancytd
{
color:
#f60;
background:
#666;
}
b、基于它们的类而被选择:
td.fancy{
color:
#f60;
background:
#666;
}
在上面的例子中,类名为fancy的表格单元将是带有灰色背景的橙色。
注:
多类选择器:
一个class值中可能包含一个词列表,各个词之间用空格分隔。
例如,如果希望将一个特定的元素同时标记为重要(important)和警告(warning),就可以写作:
.important{font-weight:
bold;}
.warning{font-style:
italic;}
.important.warning{background:
silver;}
//如果需要继承了前两个选择器的属性,同时又增加了一个属性,可以采用此方法。
Thisparagraphisveryimportant.
Thisisawarning.
Thisparagraphisaveryimportantwarning.
//此处会自动匹配important和warning,如果有.important.warning{}多类选择器,会匹配此选择器
(4)CSS属性选择器:
可以为拥有指定属性的HTML元素设置样式,而不仅限于class和id属性。
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[lang|=en]//属性值中包含en的元素就会对该属性申效
{
color:
red;
}
可以应用样式:
Hello!
//申效Hi!
//申效
无法应用样式:
Hi!
Hao!
注:
还可以根据多个属性进行选择,只需将属性选择器链接在一起即可。
例如,为了将同时有href和title属性的HTML超链接的文本设置为红色,可以这样写:
a[href][title]{color:
red;}
CSS选择器参考手册
选择器
描述
[attribute]
用于选取带有指定属性的元素。
[attribute=value]
用于选取带有指定属性和值的元素。
[attribute~=value]
用于选取属性值中包含指定词汇的元素。
[attribute|=value]
用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
[attribute^=value]
匹配属性值以指定值开头的每个元素。
[attribute$=value]
匹配属性值以指定值结尾的每个元素。
[attribute*=value]
匹配属性值中包含指定值的每个元素。
(5)CSS子元素选择器:
与后代选择器相比,子元素选择器(Childselectors)只能选择作为某元素子元素的元素。
如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Childselector)。
例如,如果您希望选择只作为h1元素子元素的strong元素,可以这样写:
h1>strong{color:
red;}这个规则会把第一个h1下面的两个strong元素变为红色
结合派生选择器和子选择器
请看下面这个选择器:
panytd>p
上面的选择器会选择作为td元素子元素的所有p元素,这个td元素本身从table元素继承,该table元素有一个包含company的class属性。
(6)相邻兄弟选择器(Adjacentsiblingselector)可选择紧接在另一元素后的元素,且二者有相同父元素。
例如,如果要增加紧接在h1元素后出现的段落的上边距,可以这样写:
h1+p{margin-top:
50px;}
这个选择器读作:
“选择紧接在h1元素后出现的段落,h1和p元素拥有共同的父元素”。
结合其他选择器(要灵活使用它们的顺序)
相邻兄弟结合符还可以结合其他结合符:
html>bodytable+ul{margin-top:
20px;}
这个选择器解释为:
选择紧接在table元素后出现的所有兄弟ul元素,该table元素包含在一个body元素中,body元素本身是html元素的子元素。
(7)CSS伪类用于向某些选择器添加特殊的效果
语法
伪类的语法:
selector:
pseudo-class{property:
value}
CSS类也可与伪类搭配使用。
selector.class:
pseudo-class{property:
value}
锚伪类
在支持CSS的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:
活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。
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之后,才是有效的。
提示:
伪类名称对大小写不敏感。
CSS2-:
first-child伪类
您可以使用:
first-child伪类来选择元素的第一个子元素。
这个特定伪类很容易遭到误解,所以有必要举例来说明。
给定以下规则:
p:
first-child{font-weight:
bold;}
li:
first-child{text-transform:
uppercase;}
第一个规则将作为某元素第一个子元素的所有p元素设置为粗体。
第二个规则将作为某个元素(在HTML中,这肯定是ol或ul元素)第一个子元素的所有li元素变成大写。
A、在下面的例子中,选择器匹配作为任何元素的第一个子元素的p元素:
p:
first-child{color:
red;}
b、在下面的例子中,选择器匹配所有
元素中的第一个元素:
p>i:
first-child{font-weight:
bold;}
(8)CSS伪元素(Pseudo-elements)
语法
伪元素的语法:
selector:
pseudo-element{property:
value;}
CSS类也可以与伪元素配合使用:
selector.class:
pseudo-element{property:
value;}
:
first-line伪元素
"first-line"伪元素用于向文本的首行设置特殊样式。
在下面的例子中,浏览器会根据"first-line"伪元素中的样式对p元素的第一行文本进行格式化:
p:
first-line{color:
#ff0000;font-variant:
small-caps;}
:
first-letter伪元素:
"first-letter"伪元素用于向文本的首字母设置特殊样
CSS2-:
before伪元素
":
before"伪元素可以在元素的内容前面插入新内容。
下面的例子在每个
元素前面插入一幅图片:
h1:
before
{
content:
url(logo.gif);
}
CSS2-:
after伪元素
":
after"伪元素可以在元素的内容之后插入新内容。
下面的例子在每个
元素后面插入一幅图片:
h1:
after
{
content:
url(logo.gif);
}
二、css样式
第一部分:
这一部分主要针对框架的内部样式
1、背景:
背景色
可以使用background-color属性(其默认值是transparent。
)为元素设置背景色。
这个属性接受任何合法的颜色值。
这条规则把元素的背景设置为灰色:
p{background-color:
gray;}
如果您希望背景色从元素中的文本向外少有延伸,只需增加一些内边距:
p{background-color:
gray;padding:
20px;}
背景图像
要把图像放入背景,需要使用background-image属性。
background-image属性的默认值是none,表示背景上没有放置任何图像。
如果需要设置一个背景图像,必须为这个属性设置一个URL值:
body{background-image:
url(/i/eg_bg_04.gif);}
背景重复
如果需要在页面上对背景图像进行平铺,可以使用background-repeat属性。
body
{
background-image:
url(/i/eg_bg_03.gif);
background-repeat:
repeat-y;
}
背景关联
如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。
当文档滚动到超过图像的位置时,图像就会消失。
您可以通过background-attachment属性防止这种滚动。
通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响:
body
{
background-image:
url(/i/eg_bg_02.gif);
background-repeat:
no-repeat;
background-attachment:
fixed
}
注:
采用百分比定位背景时,只有背景颜色会发生位置改变,而文本内容没有变。
2、CSS文本:
CSS文本属性可定义文本的外观。
通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等。
缩进文本
把Web页面上的段落的第一行缩进,这是一种最常用的文本格式化效果。
CSS提供了text-indent属性,该属性可以方便地实现文本缩进。
通过使用text-indent属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。
这个属性最常见的用途是将段落的首行缩进:
p{text-indent:
5em;}
提示:
如果想把一个行内元素的第一行“缩进”,可以用左内边距或外边距创造这种效果。
注:
使用百分比值,text-indent可以使用所有长度单位,包括百分比值。
百分数要相对于缩进元素父元素的宽度。
换句话说,如果将缩进值设置为20%,所影响元素的第一行会缩进其父元素宽度的20%。
在下例中,缩进值是父元素的20%,即100个像素:
div{width:
500px;}
p{text-indent:
20%;}
CSStext-align属性:
值left、right和center会导致元素中的文本分别左对齐、右对齐和居中,该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式。
text-align不会控制元素的对齐,而只影响内部内容。
元素本身不会从一端移到另一端,只是其中的文本受影响。
最后一个水平对齐属性是justify,它会带来自己的一些问题。
值justify可以使文本的两端都对齐。
在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。
然后,调整单词和字母间的间隔,使各行的长度恰好相等。
您也许已经注意到了,两端对齐文本在打印领域很常见。
不过在CSS中,还需要多做些考虑。
提示:
将块级元素或表元素居中,要通过在这些元素上适当地设置左、右外边距(因为text-align仅可以处理其内部的文本)来实现。
HTMLDOMtextAlign属性
字间隔
word-spacing属性可以改变字(单词)之间的标准间隔。
字母间隔
letter-spacing属性与word-spacing的区别在于,字母间隔修改的是字符或字母之间的间隔。
字符转换
text-transform属性处理文本的大小写。
这个属性有4个值:
默认值none对文本不做任何改动,将使用源文档中的原有大小写。
顾名思义,uppercase和lowercase将文本转换为全大写和全小写字符。
最后,capitalize只对每个单词的首字母大写
文本装饰
text-decoration属性,这是一个很有意思的属性,它提供了很多非常有趣的行为。
text-decoration有5个值:
∙none
∙underline
∙overline
∙line-through
∙blink
不出所料,underline会对元素加下划线,就像HTML中的U元素一样。
overline的作用恰好相反,会在文本的顶端画一个上划线。
值line-through则在文本中间画一个贯穿线,等价于HTML中的S和strike元素。
blink会让文本闪烁,类似于Netscape支持的颇招非议的blink标记。
none值会关闭原本应用到一个元素上的所有装饰。
通常,无装饰的文本是默认外观,但也不总是这样。
例如,链接默认地会有下划线。
处理空白符
white-space属性会影响到用户代理对源文档中的空格、换行和tab字符的处理。
下面的表格总结了white-space属性的行为:
值
空白符
换行符
自动换行
pre-line
合并
保留
允许
normal
合并
忽略
允许
nowrap
合并
忽略
不允许(即使占满原浏览器的尺寸也不准换行)
pre
保留
保留
不允许
pre-wrap
保留
保留
允许
3、CSS字体:
CSS字体属性定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)。
CSS字体属性
属性
描述
font
简写属性。
作用是把所有针对字体的属性设置在一个声明中。
font-family
设置字体系列。
font-size
设置字体的尺寸。
font-size-adjust
当首选字体不可用时,对替换字体进行智能缩放。
(CSS2.1已删除该属性。
)
font-stretch
对字体进行水平拉伸。
(CSS2.1已删除该属性。
)
font-style
设置字体风格。
font-variant
以小型大写字体或者正常字体显示文本。
font-weight
设置字体的粗细。
normal,700等价于bold。
注:
font-size属性可设置字体的尺寸。
该属性设置元素的字体大小。
注意,实际上它设置的是字体中字符框的高度;实际的字符字形可能比这些框高或矮(通常会矮)。
(即每个字符会成为一个框)各关键字对应的字体必须比一个最小关键字相应字体要高,并且要小于下一个最大关键字对应的字体。
h1{font-size:
300%}//相对于父元素字符的尺寸,父元素的尺寸和p中一样大
h2{font-size:
200%}//如果没有这么设定,那么他将按自己原有的尺寸显示
p{font-size:
100%}
Thisisheader1
Thisisheader2
Thisisaparagraph
4、CSS列表
CSS列表属性(list)
属性
描述
list-style
简写属性。
用于把所有用于列表的属性设置于一个声明中。
list-style-image
将图象设置为列表项标志。
list-style-position
设置列表中列表项标志的位置。
list-style-type
设置列表项标志的类型。
marker-offset
5、css表格
CSSTable属性
属性
描述
border-collapse
设置是否把表格边框合并为单一的边框。
border-spacing
设置分隔单元格边框的距离。
caption-side
设置表格标题(表格外面的字)的位置。
caption-side:
bottom
empty-cells
设置是否显示表格中的空单元格。
hide、show(默认值)、inherent
table-layout
设置显示单元、行和列的算法。
(见下面)
(1)border-collapse属性
bord
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
-
css
总结
冰豆网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。