CSS 笔记

css定义和应用

在HTML中,可以用<style>标签定义样式表.如:

<style type="text/css">

<!--

[*|标签].类名称{属性:值;属性:值;}

[*|标签].类名称{属性:值;属性:值;}

-->

</style>

 

方框中的内容为可选项,如果使用*表示该CSS可以用于包含class属性的HTML标签中,这时*也可省.如果要指定用于某个标签,则可输入标签,如p.style1,该CSS只用于<p>

 

创建和应用HTML标签样式

<style type="text/css">

<!--

选择符{属性:值;属性:值;}

-->

</style>

例:

内联CSS

<标签 style="属性:值;属性:值;">

外部样式表应用

<style type="text/css">

<!--

@import url("url")

-->

</style>

或

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

CSS属性

设置字体属性

文本的字体 font-family:name

字体的大小 font-size:absolute-size|relative-size|length
absolute-size 表示根据对象字体进行调节,取值可以是xx-small,x-small,small,medium,large x-large xx-large
relative-size 表示相对大小,取值可以是larger,smaller
length 可用以下单位 ex,in,cm,mm,pt,px,%

color color:color

字体样式 font-syle:normal|italic|oblique italic和oblique均表示斜体

行高 line-height:normal|length

字体粗细 font-weight:normal|bold|bolder|lighter|number bold表示精体 lighter表示细体 number设置数字 normal为400

字母的大小写 text-transform:upercase|lowercase|capitalize|none capitalize表示首字母转为大小写,none表示无转换

小型大写字母 font-variant:normal|small-caps

文本的修饰 text-decoration:underline|overline|line-throungh|blink|none 分别为下划线,上划线,删除线,文本闪烁,无

 

设置背景属性

背景颜色 background-color:color|transparent

背景图像 background-image:url("url")|none

背景重复 background-repeat:repeat|no-repeat|repeat-x|repeat-y 后两个为横向平铺和纵向平铺

背景滚动 background-attachment:scroll|fixed

背景图像的初始位置 background-position:length||length 或background-position:position||position

 

设置区块属性

单词间的距离 word-spacing:normal|length

文字间的距离 letter-spacing:normal|length

文本的水平对齐方式 text-align: left|center|right|justify justify表示两端对齐

内容的垂直对齐方式 vertical-align:auto|baseline|sub|super|top|text-top|middle|bottom|text-bottom|length

文本的缩进 text-indent:length

元素内的空格 white-space:normal|pre|nowrap

元素内的换行 display:block|inline|list-item|none

 

设置方框属性

宽度 width:auto|length

高度 height:auto|length

浮动 float:none|left|right

浮动范围 clear:none|left|right|both

边距 margin:auto|length

上边距 margin-top:auto|length

右边距 margin-right:auto|length

下边距 margin-bottom:auto|length

左边距 margin-left:auto|length

内容与边框的距离 padding:length

padding-top:length

padding-right:length

padding-bottom:length

padding-left:length

 

设置边框属性

边框宽度,样式,颜色 border:border-width||border-style||border-color

边框颜色 border-color:color

边框样式 border-style:none|hidden|dotted|dashed|soled|double|groove|ridge|inset|outset 分别为:无,隐藏,点线,虚线,实绩,双线,3D凹槽，菱线边框，3D凹 边，3D凸边

边框宽度 border-width:medium|thin|thick|length 分别为：默认，小于默认，大于默认，自定义长度

四边

border-top:border:border-width||border-style||border-color

border-top-color

border-top-style

boder-top-width

border-right:border:border-width||border-style||border-color

border-right-color

border-right-style

boder-right-width

border-bottom:border:border-width||border-style||border-color

border-bottom-color

border-bottom-style

boder-bottom-width

border-left:border:border-width||border-style||border-color

border-left-color

border-left-style

boder-left-width

 

设置列表属性

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

列表标记图像 list-style-image:none|url("url")

列表标记对齐方式 list-style-position:outside|inside

列表预设标记 list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none
分别为：实心圆|实心方块|数字|小写罗马数字|大写罗马数字|小写字母|大写字母|无

 

设置定位属性

定位方式 position:static|absolute|relative

可见性 visibility:inherit|visible|collapse|hidden

层叠顺序 z-index:auto|number

与父对象的相关位置

top:auto|length

left:auto|length

right:auto|length

bottom:auto|length

可视区域 clip:auto|rect(number number number number) poisition必须为absolute

内容超过范围 overflow:visible|auto|hidden|scroll