多语言展示
当前在线:1232今日阅读:91今日分享:37

需要了解的css样式

今天接着昨天的需要了解的html标签和属性为大家继续讲解基础性的知识,常用到的css样式和属性。可以说很多。让我一一道来。首先说下写法。给大家看个例子就明白了。1 //定义一个div标签 里面给个id值,或者class值 2 这是一个测试
3 //然后在css文件中定义样式 4 .test{ color:#FF000; background:#000000; } 5 //或者 6 #mytest{ color:#FF000; background:#000000; } 7 //可以看到样式是写在{}里面的,class用点,id值用'#'号 一.文本属性1.word-spacing: 单词之间的距离2.letter-spacing: 字母之间的距离3.text-decoration: 定义文字的装饰: none(没有)/underline(下划线)/overline(上划线)4.vertical-align: 元素在垂直方向的位置: baseline(基线)/top(顶部)/text-top(文本顶部)/middle(中间)/bottom(底部)/text-bottom(文本顶部)5.text-transform:使文本转换为其它方式: capitalize(字母全部大写)/uppercase(首字母大写)/lowercase(字母全部小写)/none(无)6.text-align:文字的对齐: left(左)/right(右)/center(居中)7.text-indent: 文本的首行缩进8.line-height:10px 文本的行高二.字体属性1.font-family:使用什么字体2.font-style:字体的样式:normal/italic(斜体)/3.font-variant:字体大小写:normal/small-caps4.font-weight:字体的粗细:normal/bold5.font-size:字体的大小三.颜色和背景属性(backgroud)1.color:定义字体颜色2.background-color: 定义背景色3.background-image:定义背景图片4.background-repeat:背景图案重复方式:repeat-x/repeat-y/no-repeat5.background-attachment:设置滚动:scroll(滚动)/fixed(固定的)6.background-position:背景图案的初始位置:top/left/right/bottom四.块属性(block)边距属性:1.margin-top:设置顶部边距2.margin-right:设置右边距3.margin-bottom:设置底边距4.margin-left:设置左边距填充距属性:5.padding-top:设置顶端填充距6.padding-right:设置顶端填充距7.padding-bottom:设置顶端填充距8.padding-left:设置顶端填充距五.定义超链接:a:link { color:green;text-decoration:nore} 未访问过的状态a:visited { color:ren;text-decoration:underline;16px} 访问过的状态a:hover { color:blue;text-decoration:underline;16px} 鼠标激活的状态六.边框属性(border)border-top-width(顶端边框宽度)border-right-width(右端边框宽度)border-bottom-width(底端边框宽度)border-left-width(d左边框宽度)border-width(一次定义边框宽度)border-color(设置边框颜色)border-style(设置边框样式)border-top(一次定义顶端各种属性)border-right(一次定义右端各种属性)border-bottom(一次定义底端各种属性)border-left(一次定义左端各种属性)七.项目符号和编号display:定义是否显示 none(不显示),block(块状显示)white-space: 属性设置如何处理元素内的空白list-style-type:在列表前加项目符号,disc(圆点),circle(圈),square(方形),decimal(阿拉伯数 字),lower-roman:(小写罗马数字),upper-roman(大写罗马数字),lower-alpha(小写英文字母),upper- alpha:大写英文字母),nonelist-style-tyle:在列表前加图标或者符号list-style-position:决定列表位置list-style:一次性定义列表样式八.定位(positioning)即层属性类型:设定对象的定位方式。有三种方式:Absolute(绝对定位)、Relative(相对定位)、Static(无特殊定位)。相对应的CSS属性是”position”,如:position:relative。1.Visibility:设定对象定位层的最初显示状态,有三种状态:Inherit(继承父层的显示属性)Visible(对象可视),Hidden隐藏对象。相对应的CSS属性是”visibility”。2.Z-Index:设置对象的层叠顺序。编号较大的层会显示在编号较小的层上边。变量值可以是正值也可以是负值。相对应的CSS属性是”z-index”。3.Overflow:设置如果层的内容超出了层的大小时如何处理。有四种处理方式:visible,增加层的大小,从而将层的所有内容显示出 来,hidden,保持层的大小不变,将超出层的内容剪裁掉;Scroll,总是显示滚动;Auto,只有在内容超出层的边界时才显示滚动条。九.其他width:定义宽度属性height:定义高度属性float:浮动,left(左浮动),right(右浮动)clear:清除浮动以上便是一些比较常用到的css属性了,这些就需要大家多多去写去做,这样才印象深刻点,建议大家使用Dreamweaver ,主要是使用软件里面的提示功能。有些东西我们不必要都记住,但是知道怎么使用就可以,也可以在网上找些css手册来看。
推荐信息