Chinaunix首页 | 论坛 | 博客
  • 博客访问: 374010
  • 博文数量: 48
  • 博客积分: 1032
  • 博客等级: 上士
  • 技术积分: 1256
  • 用 户 组: 普通用户
  • 注册时间: 2012-05-19 13:24
文章分类

全部博文(48)

文章存档

2014年(3)

2013年(23)

2012年(22)

分类: Web开发

2012-12-09 00:01:18

CSS(cascading style sheet):层叠样式表单。作用:控制网页样式并允许将样式信息和网页内容分离的一种标记性语言。
链接方式:
1、内链接:

2、链接内部CSS:一般在head里面声明
3、链接外部CSS:
选择符:css选择符只能以字母开头,可以包括大小写字母,数组,连字号,下划线,句号。包含下列常用的7种css选择符:
1、HTML标记选择符【标签选择器】:用HTML的标记来代表网页中这些标记中的样式集合。
2、ID选择符:唯一性选择符,该选择符在一个页面中只能出现一次,在整个网站中也最好出现一次,如果对ID选择符多次引用只有第一次有效。特征:名字前面加‘#’;

3、CLASS选择符:多重选择符,该选择符在一个页面中可以出现多次。特征:名字前面加‘.’;

4、群选择器【逗号隔开】;eg:#id,.class{};

5、派生选择器【空格隔开】;eg:[#parents #children];

6、通配选择器【*】;通配页面上所有的选择器,效率低很少用;

7、伪类选择器:一般用在超链接上;

注解:和c语言一样使用/*XXX*/,但是不能使用//;
字体设置:
语法:font:font-style || font-variant || font-weight || font-size || line-height || font-family || word-spacing || letter-spacing
当然也可以将font的每个参数单独写:比如讲字体设置为华文楷体:font-family:华文楷体;
参数:
font-style:字体样式;可选参数:normal、italic和oblique三种,分别代表:正常字体、斜体和倾斜。
font-variant:文体类是否为小型大写字母;可选参数:normal和smal-caps,分别代表正常字体和小型大写字母的字体。
font-weight:文本的粗细。可选参数:normal | bold | bolder | lighter | 100 | ... 数组越大字体越粗。注:normal相当数组400;
font-size:对对象的文本设置。可选参数:xx-small | x-smal | small | medium | large | x-large | xx-large | larger | smaller | lenght;
line-height:行距;让文本有文本视觉空间;line-height:30px;/*使用的时候要带上单位,不同的单位效果不同*/
font-family:设置对象文体名称序列。
word-spacing:文本间距,即单词之间插入的空格数,最小单位是单词,与单词内部没有关系。可选参数:normal | 长度单位;
letter-spacing:文本间隔,指文本中字符,单词的间隔。也就是和word-spacing相对应,它表示的是单词内部的关系。可选参数:normal | 长度单位;
字体颜色:
三种颜色的设置方法:#RRGGBB,rgb(R,G,B)和颜色名;
语法:color:颜色值;
使用#RRGGBB表示,比如蓝色:color:#00FF00;每种浏览器都支持这种颜色值;
文本设置:
字母大小写转换:
语法:text-transform:capitalize | uppercase | lowercase | none
参数:
capitalize:使每个词的首字母大写;
uppercase:使每个字的所有字母大写;
lowercase:使每个字的所有字母都小写;
none:字母以正常形式显示;
文本修饰:
语法:text-decoration:underline | overline | line-through | blink | none
参数:
underline:给文字添加下划线;
overline:上划线:
line-through:删除线;
blink:文字在闪烁;
none:缺省使用无;
空格处理方式:通常情况下网页代码中有很多连续空格符只接收一个空格符。
语法:white-space:normal | pre | nowrap
参数:
normal:默认处理方法,即只接收一个一个空格符;
pre:用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐。
nowrap:强制在同一行内显示所有文本,直到文本结束或者遭遇br对象。
设置文本的垂直与水平对齐:
文本垂直对齐:vertical-align:baseline | sub | super | top | text-top |middle | button | text-bottom
参数:
baseline:使元素和上级元素的基线对齐。
sub:是对象以下标的形式显示。
supper:使对象以上标的形式显示。
top:使元素和行中最高的元素向上对齐。
text-top:使元素和上级元素的字体向上对齐。
middle:居中对齐。
button:使元素和行中最高的元素向下对齐。
text-button:使元素和上级元素的字体向下对齐。
水平对齐:text-align:left | right | center | justify
参数:
left:默认对齐方式,左对齐;
right:右对齐;
center:居中;
justify:左右对齐;
文本缩进:该属性可以定义块级元素(P、H1等)第一行接受的缩进数量。该值必须是一个长度或一个百分比。
语法:text-indent:<长度> | <百分比>
参数:
长度:表示文本缩进的具体长度;eg:text-indent:20px;
百分比:用百分率表示,表示该文本缩进在对象中占有的百分率;视上级元素的宽度而定。
设置背景:
语法:background:background-color | background-image | background-repeat | background-attachment | background-position(这种使用方式表示复合使用,单个参数使用叫做独立使用)
参数:
background-color:transparent | color ;说明:transparent表示背景色透明(用的比较少),color表示颜色值,如#ff0000;
background-image:none | url(url); 使用例子:body { background:url(image/bg1.jpg) repeat-y}
background-attachment:scroll(默认值) | fixed;说明:scroll表示图像因内容滚动而滚动;fixed表示固定的,即图像固定在网页中。
background-position:length | length;这种方式直接跟浮点数字和单位标识符组成的长度值。分别表示X轴和Y轴。
background-position: position | position;这种方式可以接top,center,button,left,right等方位值。两种方式可以混用。
background-repeat:repeat | no-repeat | repeat-x | repeat-y;表示图像如何铺排。
repeat:默认值。在纵向和横向上平铺。
no-repeat:背景图片不平铺。
repeat-x:只在横向平铺。
repeat-y:只在纵向平铺。
设置尺寸:
设置宽度:
语法:width:auto | length;
参数:
auto:根据浏览器窗口调节宽度,默认值;这个属性确实比较好用。
length:表示按具体的值加单位标识符表示,可以是百分率。百分率是基于父对象的宽度,不能使负值。
设置高度:
语法:height:auto | length;
参数:和width一样,不重复了。两者结合起来就可以确定对象的尺寸。
(牛x的用法来了,外补丁可以设置层居中)
设置外补丁:所谓的外补丁就是围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。也就是对象(比如div)与对象之间的间隔,后面还有一个内补丁,就是对象内部填充距离。
margin: auto | length;
使用方法:
1、margin后面接四个数值或百分率值,表示上右下左,按顺时针方向表示外延边的值。
2、后面接一个数值或百分率值时表示上右下左都是相同的值。
3、后面接两个数值或百分比时,第一个表示上下外延边,第二个表示左右外延边。

3、后面接三个数值或百分比时,第一个表示上端的外延边,第二个表示左右的外延边,第三个表示下端的外延边。

margin:外边距有重叠效果,即在竖直方向,当两个元素的外边框连在一起时,两者的距离并不是两者margin之和,而是取最大margin为准;

设置内补丁:不允许使用负值。padding表示复合属性,padding-top表示顶端内补丁,padding-left表示左端内补丁。。。
padding:length;
参数:length表示百分率或数值。不能为负值,且不能为auto。
对象的边框:
语法:border:border-width || border-style || border-color
参数:
border-width:medium(默认宽度) | thin(小于默认宽度) | thick(大于默认宽度) | length(直接表示边框宽度的值)
border-style:none|dotted|dashed|solid|double|groove|ridge|inset|outset
none:无边框默认值
dotted:点线,一个个点组成边框
dashed:表示虚线,边框用虚线表示。
solid:表示实线。
double:双线边框。
groove:立体形式的凹槽。
ridge:立体形式的凸槽。
inset:立体形式的凹边。
outset:立体形式的凸边。
border-color:color;表示边框的颜色。这里的颜色可以跟四个值,和讲外补丁一样,不同个数的值表示不同边的颜色。
对于边框也可以不使用这种复合属性而使用各个边框属性单独设置。
border-top:表示顶端的边框;
border-right:表示右端的边框;
border-button:表示底端的边框;
border-left:表示左端的边框;
使用方法相同:border-top:border-width || border-sytle || border-color
定位:
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。
CSS三种基本的定位机制:普通流、浮动和绝对定位。
position:static | absolute | relative
static:默认值。无特殊定位;
absolute:将对象从文档流中流出,使用left、right、top、button等属性表示接近的一个父对象的绝对定位的方位。
relative:对象不可层叠,但依据left、right、top和button等属性在正常文档流中偏移位置。
注:设置定位属性值为absolute时,会将对象脱离出正常的文档流的绝对定位,而不考虑他周边内容的布局。要激活对象的绝对定位(absolute),必须指定left、right、top和button属性中的一个,并且设置此属性值为absolute。
设置对象层叠顺序:
z-index:auto | number
参数:
auto:默认值,由其父对象的定位决定。
number:无单位的整数值,可为负数。数值越大的对象越往前端显示。
列表:
  • 都可以使用这些属性。
list-style:list-style-image || list-style-position || list-style-type
参数:
list-style-image:用来设置列表的图像。可选参数:none | url(url)
list-style-position:用来设置列表项标记如何根据文本排列。
可选参数:outside | inside
outside:列表项目标放置在文本以外,且环绕文本不根据标记对齐。
inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐。
list-style-type:用来设置列表项所使用的预设标记。
可选参数:disc(实心圆) | circle(空心圆) | square(实心方块) | decimal(阿拉伯数字) | lower-roman(小写罗马数字) | upper-roman(大写罗马数字) | lower-alpha(小写英文字母) | upper-alpha(大写英文字母) | none(不使用项目符号)
CSS控制表格:涉及到的属性;
border-collapse:separate | collapse
参数:
separate:默认值,表示边框独立。
collapse:表示相邻边被合并,前者表示有边框,后者表示合并了边框。
table-layout:auto | fixed
参数:
auto:默认的自动算法,布局将基于各单元格的内容。

fixed:固定布局的算法,表格和列的宽度取决于col对象的宽度总和。假如没有指定,则会取决于第一行每个单元格的宽度。如果没有指定则表格呈递的默认宽度是100%;

valign -- 代表行的垂直对齐方式(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | baseline(基线对齐))(此属性应该使用CSS实现) 。

CSS设置滚动条:
属性:(貌似只有ie支持这些属性)
scrollbar-3dlight-color:color;滚动条亮边框的颜色。
scrollbar-highlight-color:color;滚动条3d界面的亮边颜色。
scrollbar-face-color:color;滚动条3D表面。
scrollbar-arrow-color:color;滚动条方向箭头的界面。
scrollbar-shadow-color:color;滚动条3D界面的暗边框的颜色。
scrollbar-darkshadow-color:color;滚动条暗边框的颜色。
scrollbar-base-color:color;滚动条基准颜色。基准颜色:滚动条中全部区域的颜色,包括滚轮。理解好可拖动区域,是区域。
scrollbar-track-color:color;滚动条的拖动区域的颜色。拖动区颜色:值滚动条能拖动的区域,也就是不包含那个滚轮。
CSS布局:
设置层的漂移:float:none | left | right
none:默认值表示不漂移。
left:文本流向对象的左边。
right:文本流向对象的右边。
在使用float属性的时候要确定对象的宽度,默认情况层对象的宽度是100%,即使使用了float也不会漂移。因为没有多余的空间给下个对象进行漂移。
清除层的漂移范围:
clear:none | left | right | both
参数:
none:默认值。允许两边都可以有浮动对象。
left:不允许左边有浮动对象。
right:不允许右边有浮动对象。
both:不允许有浮动对象。
设置层的可视区域:
属性clip用来设置对象的可视区域,区域外的部分是透明的。
clip:auto | rect(number number number number)
参数:
auto:默认值,对象无剪切。
rect:依据上右下左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数据,其中任一数值都可以用auto表示,表示该边不剪切。
例如:clip:rect(18px,auto,auto,auto);表示的是是对象从上到下18px部分被显示,其余部分隐藏。
内容超过层大小时:
overflow: visible | auto | hidden | scroll
overflow这四个参数表示:
visible:默认值,不剪切内容也不剪切滚动条。如果显示声明该属性,则clip属性设置将失效。
auto:在必须时对象内容才会被裁剪或者显示滚动条。
hidden:不显示超过对象尺寸的内容。
scroll:总是显示滚动条。
鼠标指针的不同表示:
该属性表示在对象上移动的鼠标采用的光标形状,设置不同的属性值光标状态不同。
cursor:auto | all-scroll | col-resize | crossshair | default | hand | move | help | no-drop | not-allowed
pointer | progress | row-resize | text | vertical-text | wait | *-resize | url(url)
设置对象可见性:
有两种方式设置对象是否可见:1、用属性display设置对象是否隐藏;2、用visibility设置属相是否被显示。
display:block | none | inline | inline-block list-item
参数:
block:块对象默认值。将对象强制作为块对象呈递,在对象之后添加新行。
none:隐藏对象。其不为隐藏对象那个保留物理空间(这点注意和visibility的hidden属性相区别)。
inline:内联对象的默认值,将对象强制作为内联对象,从对象中删除行。
inline-block:将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。
list-item:将块对象指定为列表项目,并可以添加可选项目标志。
visibility:inherit | visible | hidden(这个属性只是物理上的隐藏,也就是物理空间依然存在)
参数:
inherit:默认值。继承父对象的可见性。
visible:表示对象可见。
hidden:表示隐藏对象。
选择符:
通配选择符:指选定文档对象模型(DOM)中的所有类型的单个对象。语法形式用(*)表示所有类型。
类型选择法:以文档对象模型(DOM)作为选择符,选择某个HTML标记为对象,设置其样式规则。p、div、td等,也就是HTML标记选择符。
包含选择符:布局中常常用到容器层和其包含的子层,如果用到包含选择符就可以对某个容器层的子层控制,使其他同名的对象不受该规则的影响。
语法: E1 E2
{
/*对子层的控制规则*/
}/*E1为父层,E2指2小点的层或者子层对象,E1对象包含E2对象

11

,11就同时具有td和p的样式,而其它表格的内容不受此影响*/
ID选择符
类选择符
分组选择符:指对多个标记设置同样的样式,在不同的类型中,表示同样的样式。将同样的定义用于多个选择符,将选择符以逗号的方式分隔并分组。语法:E1,E2{/*CSS CODE*/}
伪类:
概述:被支持css的浏览器自动识别的特殊选择符。最大的用处就是在对链接在不同状态下定义不同的样式。
用法:在原有的语法里加上一个伪类,在选择符中用冒号接上伪类的类型,然后在大括号中输入css样式来修饰页面。
语法:选择符:伪类{属性:值}
伪类和类的区别:伪类是css已经定义好的,不能像类选择符一样任一取名字。
伪类的四种状态:
1、访问链接状态“:link”
2、鼠标光标置于其上的状态":hover"
3、获得焦点的状态":active"
4、访问后的状态":visited"
阅读(1993) | 评论(0) | 转发(1) |
给主人留下些什么吧!~~