【CSS】CSS 样式的常见属性:文本、字体、背景、表格、列表、光标、display、position

文本相关属性

取值 描述
text-decoration : none 删除链接下划线
text-decoration : underline 加下划线
text-decoration : overline 加顶线
text-decoration : line-through 加删除线
text-decoration : blink 文本闪烁
text-decoration : inherit 从父元素继承 text-decoration 属性的值
取值 描述
text-indent : 30px 段落首行缩进
取值 描述
text-transform : capitalize 首字大写
text-transform : uppercase 英文大写
text-transform : lowercase 英文小写
取值 描述
text-align : right 文字右对齐

text-align : right

文字右对齐

text-align : left

文字左对齐

text-align : center

文字居中对齐
text-align : justify 文字分散对齐
取值 描述

vertical-align : top

垂直向上对齐

vertical-align : bottom

垂直向下对齐

vertical-align : middle

垂直居中对齐

vertical-align : text-top

文字垂直向上对齐
vertical-align : text-bottom 文字垂直向下对齐

字体相关属性

color : #999999; /*文字颜色*/

font-family : 宋体,sans-serif; /*文字字体*/

font-size : 9pt; /*文字大小*/

font-style:itelic; /*文字斜体*/

font-variant:small-caps; /*小字体*/

letter-spacing : 1pt; /*字间距离*/

line-height : 200%; /*设置行高*/

font-weight:bold; /*文字粗体*/

vertical-align:sub; /*下标字*/

vertical-align:super; /*上标字*/

背景相关属性

background-color:#F5E2EC;/*背景颜色*/ 

background:transparent; /*透视背景*/

background-image : url(/image/bg.gif); /*背景图片*/

background-attachment : fixed; /*背景是否随页面内容一起滚动,scroll 滚动,fixed 固定*/

background-repeat : repeat; /*x/y 双向平铺-网页默认*/

background-repeat : no-repeat; /*不平铺*/

background-repeat : repeat-x; /*横向平铺*/

background-repeat : repeat-y; /*纵向平铺*/ 

background-position : 90% 90%; /*背景图片x与y轴的位置*/

background-position : top; /*向上对齐*/

background-position : buttom; /*向下对齐*/

background-position : left; /*向左对齐*/

background-position : right; /*向右对齐*/

background-position : center; /*居中对齐*/

表格相关属性

border-top : 1px solid #6699cc; /*上框线*/
border-bottom : 1px solid #6699cc; /*下框线*/
border-left : 1px solid #6699cc; /*左框线*/ 
border-right : 1px solid #6699cc; /*右框线*/

以上是建议书写方式,但也可以使用常规的方式 如下:
border-top-color : #369 /*设置上框线top颜色*/
border-top-width :1px /*设置上框线top宽度*/
border-top-style : solid/*设置上框线top样式*/


solid /*实线框*/
dotted /*虚线框*/
double /*双线框*/
groove /*立体内凸框*/
ridge /*立体浮雕框*/
inset /*凹框*/
outset /*凸框*/

margin-top:10px; /*上外边距*/
margin-right:10px; /*右外边距*/
margin-bottom:10px; /*下外边距*/
margin-left:10px; /*左外边距*/

padding-top:10px; /*上内边距*/
padding-right:10px; /*右内边距*/
padding-bottom:10px; /*下内边距*/
padding-left:10px; /*左内边距*/

列表相关属性

list-style-type:none; /*没有编号*/

list-style-type:decimal; /*阿拉伯数字*/

list-style-type:lower-roman; /*小写罗马数字*/

list-style-type:upper-roman; /*大写罗马数字*/

list-style-type:lower-alpha; /*小写英文字母*/

list-style-type:upper-alpha; /*大写英文字母*/

list-style-type:disc; /*实心圆形符号*/

list-style-type:circle; /*空心圆形符号*/

list-style-type:square; /*实心方形符号*/

list-style-image:url(/dot.gif); /*图片式符号*/

list-style-position: outside; /*列表符号位置,凸排*/

list-style-position:inside; /*列表符号位置,缩进*/

光标样式

取值

描述

cursor:url

需使用的自定义光标的 URL。

注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。

cursor:auto 默认光标,文本时显示 ,超链接时显示
cursor:crosshair 光标呈现为十字线
cursor:pointer 光标呈现为指示链接的指针(一只手)
cursor:move 此光标指示某对象可被移动
cursor:e-resize 此光标指示矩形框的边缘可被向右(东)移动。
cursor:ne-resize 此光标指示矩形框的边缘可被向上及向右移动(北/东)
cursor:nw-resize 此光标指示矩形框的边缘可被向上及向左移动(北/西)
cursor:n-resize 此光标指示矩形框的边缘可被向上(北)移动。
cursor:se-resize 此光标指示矩形框的边缘可被向下及向右移动(南/东)。
cursor:sw-resize 此光标指示矩形框的边缘可被向下及向左移动(南/西)。
cursor:s-resize 此光标指示矩形框的边缘可被向下移动(南)。
cursor:w-resize 此光标指示矩形框的边缘可被向左移动(西)。
cursor:text 此光标指示文本
cursor:wait 此光标指示程序正忙(通常是一只表或沙漏)
cursor:help 此光标指示可用的帮助(通常是一个问号或一个气球)

display 属性

取值 描述
display:none 此元素不会被显示。
display:block 此元素将显示为块级元素,此元素前后会带有换行符。
display:inline 默认。此元素会被显示为内联元素,元素前后没有换行符。

position 属性

取值

描述

position:absolute

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

position:fixed

生成绝对定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

position:relative

生成相对定位的元素,相对于其正常位置进行定位。

因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

position:static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
position:inherit 规定应该从父元素继承 position 属性的值。
z-index:1 当使用相对定位或绝对定位时,元素经常会出现相互重叠,此时可以使用 z-index 属性设置元素之间的叠放顺序,数值越大,越往上层,离用户越近。

float 和 clear 属性

取值 属性
float:left 元素向左浮动,假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。
float:right 元素向右浮动。
float:none 默认值。元素不浮动,并会显示在其在文本中出现的位置。
float:inherit 规定应该从父元素继承 float 属性的值。
取值 属性
clear:left 在左侧不允许浮动元素。
clear:right 在右侧不允许浮动元素。
clear:both 在左右两侧均不允许浮动元素。
clear:none 默认值。允许浮动元素出现在两侧。
clear:inherit 规定应该从父元素继承 clear 属性的值。

猜你喜欢

转载自www.cnblogs.com/bjxqmy/p/12906202.html
今日推荐