css的优点:表达效果丰富,可读性好,利于信息检索,文档体积小。
初始css:css的一个样式表是一组规则,通过这组规则告诉浏览器用什么样式来显示数据。
一个样式表的格式如下:
选择器
{
属性1:属性值1
.........
属性值2:属性值2
}
xml关联css
将当前xml文件关联到某个层叠样式表
例如:
<?xml-stylesheet type="text/css" href="show.css"?>
此外css语句还可以直接写在xml文件内部,还有一种方式,在标记内使用”style“属性来定义样式。
一个xml文件可以同时调用多个样式表文件。
伪元素
首字符伪元素是选择一个元素的首字符,在元素前后加first-letter来选择的。
例:将元素的首字符显示为下沉的大写字母效果:
title:first-letter
{
font-size:200%
vertical-align:text-top;
}
css中伪类有:link,visited,:hover,:active,:focus,:first-child(用于指定元素的第一个子元素)
css的属性
显示属性 display
html默认的display属性有:inline,block,inline-block,none
block(块):通过display将值定为”block“:display:block,使得文本在浏览器的一个区域快显示。
例如
name
{
display:block;
}
此外通过设置width和heigth来设置块区域的宽度与高度
例如:
name{display:block
width:200px;heigth:180px;}
特点:同级别的元素将按元素的先后顺序靠左对齐。子元素指定的块区域被包含在为父元素指定块区域中。
通过设置position属性的为absolute,改变块区域默认地靠左对齐方式,但同时设置left,top,width,heigth属性的值,以便精确的设置块区区域的位置和大小。
例如:
name
{
display:block;
position:absolute;
left=100;top=120;
width=200;heigth=120;inline
}
inline方式:通过display将值定为”inline“:display:inline,使得文本以行在浏览器显示。
例如
{
name
display:inline;
}
特点:同级别元素使用方式来显示文本,按着元素的先后顺序首尾相接。父元素的显示方式是“block”,子元素的显示方式是inline,那么子元素将被包含在为父元素指定的块区域中以行的方式显示。
行方式:通过设置position属性的为absolute,改变某行默认地按先后顺序尾随在宁一行首尾之后,但同时设置left,top属性的值。
例如:
{name
display:inline;
position:absolute;
left-100;
top=120;
}
不显示文本:
display:none(不占用空间,不显示文本)
visibility:hidden(不显示文本。但是占用空间)
文本属性
texr-align:用来设置文本的对齐方式(left.right.....)
vertical-align:用来设置文本的垂直对齐方式,默认值为baseline.sub,,ttext-sub,bottom,text-bottom
line-height:设置行间距
text-transfrom:字母全大小写转换。
text-decoration:加下划线
tex-index:设置文本首行的缩进量。
边框
属性:
border-xxx-width属性
border-xxx-color属性
border-xxx-style属性
若border有一个值,四边为同一个值,若有2个值为上下为值1,左右为值2。若有三个值,上为值1,左右为值2,下为值3.若有四个值,上1右2左3下4.
定位显示
定位分为绝对定位和相对定位。有三种属性:static,absolute和relative。定位首先要设置偏移量,通过left和right属性来决定。
绝对定位:absolute是以父元素(设置position属性)的左上角为原点。通过偏移量来决定显示的位置,偏移后,原来的位置不再占用空间,偏移量通过left属性和top属性来决定
相对定位:reletive是指相对于自身原来位置偏移量来决定显示的位置,偏移后,原来的位置还要占用空间。偏移量通过left属性和top属性来决定。
定位显示
<?xml version="1.0" encoding="gb2312"?>
<?xml-stylesheet type="text/css"href="07.css"?>
<root>
root
<frame1>
元素1
<frame2>
元素2
</frame2>
</frame1>
<fram3>
元素3
</frame3>
</root>
absolute属性值:
①以父元素(设置了position属性)左上角为基准,进行偏移。
②如果父元素没有设置position属性,则向上以父元素的父元素.....直到浏览器左,上角为基准
使用属性color和background-color可以设置文本的字符颜色和背景颜色。
环绕文本
float浮动的原则:
①上方元素不浮动,则浮动元素上不去;
②浮动元素,脱离原来的文档流;③下方元素会占据浮动元素的位置④浮动会对后续元素有影响,要清除浮动的影响
清除浮动的影响:
兄弟元素之间:clear:left/right/both;
父子元素之间的父元素:overflow:hidden;