CSS 的一些记录
CSS的引用
显示申明
<style>//*CSS样式定义开始*//
<!--
div
{width：200;
filter blur(add=true,direction=135,strengh=20);
} //*定义DIV范围内的样式，包括宽度(width)、模糊滤镜属性(blur)*//
-->
</style>//*样式定义结束*//
内嵌
<p
style="font-size：48;font-style：bold;
color:red;">hongen </p>
css文件
<head> <link rel=stylesheet
href=“style.css”> …… </head>
CSS的语法
CSS样例：
a.externalLink {
color:Red
｝
CSS的组件：
l
Class ：某类元素：
<img class=”genericImage" />
l
ID ： 某个元素：
<img id="specificImage" />
n
所有的class：
.genericImage { border-color: black; }
n
所有的ID：
#specificImage { border-style: dashed; }
n
img元素中的class：
img.genericImage { border-color: black; }
n
img元素中的id：
img# specificImage { border-style: dashed; }
n
指定元素：
u
p中包含的a
p a { color: Green; }
u
任意p和a
p, a { color: Black; }
u
p中直接包含的a
p + a { color: Yellow; }
CSS属性
字体 Font
“font-style”、“font-variant”、“font-weight”、“font-size”、“font-family”
<p style=“font：italic small-caps
bold 36pt,GlitzyCurl”>Leaf</p>
背景和颜色
Color
background
<background-color>
<background-image> url()
<background-repeat> repeat-x
repeat-y no-repeat
<background-attacement> fix
scroll
< background-position>
percentage length left right top bottom
background：url（ss01038.jpg）no-reapeat
文本属性
定义间距
word-spacing letter-spacing : 单词 字母的间距。normal
<长度>
text-decoration :
vertical-align: baseline sub super top text-top middle
bottom text-top percentage
text-tranform: capotalize uppercase lowercase none
text-align: left right center justify
text-indent
line-height
链接: 伪元素
//*定义伪类元素（ａ：），大括号内定义了前景色属性和文本装饰属性，
hover加上‘font-size’属性目的是让鼠标激活链接时改变字体*//
a：link{color：green;text-decoration：none}
//*未访问时的状态，颜色为绿色(green)，文本装饰属性(text-decoration)值
为没有(none)*//
a：visited{color：red;text-decoration：none}
//*访问过的状态，颜色为红色(red)，文本装饰属性值为没有*//
a：hover{color：blue;text-decoration：overline;font-size：20pt}
//*鼠标激活的状态，颜色为蓝色(blue)，
文本装饰属性值为上划(overline)，
字体大小为20pt*//
容器属性- 边框: margin
边距顺序是上、右、下、左 top right bottom left
body{margin：1em
2em 3em 4em}
//*定义文本的上、右、下、左的边距分别为1、2、3、4em*//
- 填充距：padding
- 边框：border
- 宽度：border-top-width border-width ... thin medium think length
- 颜色：border-color
- style：none dotted dash solid double groove ridge inset outset
- 图文混排：
- width height：length / percentage /auto
- float ： left/ right /none 漂浮
- clear: left /right / none / both 是否允许环绕
- 项目符号和编号
Display
定义是否显示
Block、inline、list-item、none
White-space
怎样处理空白
Normal、pre、nowrap
List-style-type
加项目编号
Disc、circle、square等
List-style-image加图案<url>|none
List-style-position
第二行起始位置
Inside、outside
List-style
一次定义列表<keyword>|<position>|<url>
鼠标：
Auto CrosshairDefault Hand Move e-resize Ne-resize Nw-resize n-resize Se-resize Sw-resize s-resize w-resize Text Wait Help
定位
- position 定义位置 absolute relate static
- left top width height 坐标
- clip 剪切 shape auto
- overflow 内容超出部分的处理 visible hidden scroll auto
- z-index auto | integer
- visibility inherit visible hidden