现在的位置: 首页 > 综合 > 正文

CSS学习笔记—显示属性、自身属性、文本属性

2013年08月18日 ⁄ 综合 ⁄ 共 5529字 ⁄ 字号 评论关闭

根据Mozilla Firefox推荐的css书写顺序:

显示属性:display,list-style,position,float,clear
自身属性:width,height,margin,padding,border,background
文本属性:color,font,text-decoration,text-align,vertical-align,white-space...

 

书写顺序实例:

    display: ;  
    visibility: ;  
    float: ;  
    clear: ;  
  
    position: ;  
    top: ;  
    right: ;  
    bottom: ;  
    left: ;  
    z-index: ;  
  
    width: ;  
    min-width: ;  
    max-width: ;  
    height: ;  
    min-height: ;  
    max-height: ;  
    overflow: ;  
  
    margin: ;  
    margin-top: ;  
    margin-right: ;  
    margin-bottom: ;  
    margin-left: ;  
  
    padding: ;  
    padding-top: ;  
    padding-right: ;  
    padding-bottom: ;  
    padding-left: ;  
  
    border: ;  
    border-top: ;  
    border-right: ;  
    border-bottom: ;  
    border-left: ;  
  
    border-width: ;  
    border-top-width: ;  
    border-right-width: ;  
    border-bottom-width: ;  
    border-left-width: ;  
  
    border-style: ;  
    border-top-style: ;  
    border-right-style: ;  
    border-bottom-style: ;  
    border-left-style: ;  
  
    border-color: ;  
    border-top-color: ;  
    border-right-color: ;  
    border-bottom-color: ;  
    border-left-color: ;  
  
    outline: ;  
    list-style: ;  
  
    table-layout: ;  
    caption-side: ;  
    border-collapse: ;  
    border-spacing: ;  
    empty-cells: ;  
  
    font: ;  
    font-family: ;  
    font-size: ;  
    line-height: ;  
    font-weight: ;  
    text-align: ;  
    text-indent: ;  
    text-transform: ;  
    text-decoration: ;  
    letter-spacing: ;  
    word-spacing: ;  
    white-space: ;  
    vertical-align: ;  
    color: ;  
  
    background: ;  
    background-color: ;  
    background-image: ;  
    background-repeat: ;  
    background-position: ;  
  
    opacity: ;  
    cursor: ;  
    content: ;  
    quotes: ; 
 
View Code

display 元素呈现方式

常用值:
block 呈块元素显示
inline 行内元素显示
none 隐藏,不占位
inline-block 行内块元素
table 呈表格显示

不常用值:
list-item,run-in,inline-table,inherit,table-row,table-cell,table-column,table-caption,table-row-group,table-header-group,table-footer-group,table-column-group

已废弃:compact,marker

visibility 元素是否可见

visible 元素可见,占位
hidden 元素不可见
collapse 在表格中使用(删除行或列,不影响布局,不占位置),其他元素时同hidden
inherit 继承

float 浮动

none 不浮动
left 左float
right 右float
inherit 继承

clear 清除浮动

none 允许float
left 不允许左float
right 不允许右float
both 不允许左右float
inherit 继承

position 定位

static 没有定位
absolute{top,right,bottom,left,z-index} 绝对定位,相对于第一个定位父元素
relative{...} 相对定位,相对于正常位置定位
fixed{...} 固定定位,相对于浏览器窗口定位
inherit 继承

兼容fixed:
el { position: fixed; bottom: 0; right: 0; _position: absolute; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
ie6闪动:
*html { background-image:url(about:blank); background-attachment:fixed; }

width 宽

auto 默认
length px,em等单位
% 基于父元素
inherit 继承

min-width 最小宽度

length 最小宽度值
% 基于父元素
inherit 继承

兼容:el { min-width: 100px; width: auto!important; width: 100px;}

max-width 最大宽度

none 默认
length 最大宽度值
% 基于父元素
inherit 继承

兼容:el { max-width: 100px; _width: expression(this.offsetWidth > 100? '100px': true); }

height 高

auto 默认
length 单位值
% 基于父元素
inherit 继承

min-height 最小高度

auto 默认
length 单位值
% 基于父元素
inherit 继承

兼容:el { min-height: 100px; height: auto!important; height: 100px;}

max-height 最大高度

none 默认
length 单位值
% 基于父元素
inherit 继承
兼容:el { max-width: 100px; _width: expression(this.offsetWidth > 100? '100px': true); }

overflow 内容溢出

visible 默认
hidden 裁剪内容,多余不可见
auto 裁剪内容,超出显示滚动条
scroll 裁剪内容,显示滚动条
inherit 继承

margin 外边距

auto 浏览器自动计算
length 单位值
% 基于父元素
inherit 继承

简写:el { margin: top right bottom left; }

padding 内边距

auto 浏览器自动计算
length 单位值
% 基于父元素
inherit 继承

简写: el { padding: top right bottom left; }

border 边框

所有边框属性:
border-top: ;  
border-right: ;  
border-bottom: ;  
border-left: ; 
简写: el { border: 1px #000 solid; } 
  
边框宽: 
border-top-width: ;  
border-right-width: ;  
border-bottom-width: ;  
border-left-width: ;
简写: el { border-width: 1px; }  
  
边框样式: 
border-top-style: ;  
border-right-style: ;  
border-bottom-style: ;  
border-left-style: ; 
简写: el { border-style: solid; } 
  
边框颜色:
border-top-color: ;  
border-right-color: ;  
border-bottom-color: ;  
border-left-color: ;
简写: el { border-color: #000; }

outline 轮廓

outline-color 轮廓颜色
outline-style 轮廓样式
outline-width 轮廓宽度

简写: el { outline: 1px solid red; }

list-style 列表

list-style-type 标记
list-style-position 位置
list-style-image 图标

简写: el { list-style: type position image }

table-layout 定义表格算法

automatic 默认,由单元格内容决定
fixed 由表格宽或列宽决定
inherit 继承

caption-side 定义表格标题位置

top 默认,标题在表格之上
bottom 标题在表格之下
inherit 继承

border-collapse 是否合并边框

separate 默认,边框分开,不忽略border-spacing 和 empty-cells
collapse 合并边框,忽略border-spacing 和 empty-cells
inherit 继承

border-spacing 边框间距

length 边框间距(x, y),一个参数时默认y = x
inherit 继承

empty-cells 空单元格

show 默认,在空单元格周围绘制边框
hide 不在空单元格周围绘制边框
inherit 继承

font 字体

font-family 字体
font-size 字体大小
font-style 字体样式
font-weight 字体粗细
font-variant 是否以小型大写字母字体显示
font-stretch 字体收缩或拉伸
font-size-adjust 设置aspect值

简写 el { font: style variant weight size/line-height family; }

line-height 行高

normal 默认
number 数字,字体尺寸*数字
length 固定行高
% 基于当前尺寸
inherit 继承

text 文本

text-align 水平对齐方式
left 居左
right 居右
center 居中
justify 两边对齐
inherit 继承 

text-decoration 文本装饰
none 默认
underline 下划线
overline 上划线
line-through 删除线
blink 闪烁
inherit 继承

text-indent 缩进
length 缩进值
% 基于父元素
inherit 继承

text-transform 文本大小写
none 默认
capitalize 以大写字母开头
uppercase 大写
lowercase 小写
inherit 继承

text-shadow 文本阴影
x 水平位置,必选,可以是负值
y 垂直位置,必选,可以是负值
blur 模糊半径
color 颜色
语法: el { text-shadow: 2px 2px 3px #000; }

letter-spacing 字间距

normal 默认,无额外字间距
length 字间距值
inherit 继承

word-spacing 单词间距

normal 默认,无额外单词间距
length 单词距值
inherit 继承

white-space 元素空白

normal 默认,无
pre 保留空白
nowrap 不换行
pre-wrap 保留空白,换行
pre-line 合并空白,保留换行
inherit 继承

vertical-align 竖向居中

baseline 默认,父基准线
top 上对齐
middle 中对齐
bottom 下对齐
length 值
% 基于line-height,可以负值
inherit 继承

sub 下标
super 上标
text-top 元素顶端与父元素顶端对齐
text-bottom 元素顶端与父元素底端对齐

color 颜色

颜色名称 red
颜色进制 #ccc
颜色rgb rgb(255, 0, 0)
inherit 继承

background 背景

background-color 背景颜色
background-position 背景图位置
background-size 背景图尺寸
background-repeat 背景重复方式
background-origin 背景图定位区域
background-clip 背景图绘制区域
background-image 背景图像
background-attachment 背景图是否固定
inherit 继承

 opacity 透明度

value 透明度值0~1(IE:1~100)
inherit 继承

兼容:el { opacity: .5; filter: Alpha(opacity: 50); }

cursor 光标形状

default 默认光标
auto 浏览器默认
pointer 手型
text 指示文本
help 问号或气球

url 自定义光标
crosshair 十字线
move 可移动
wait 表或沙漏

e-resize 右|东
ne-resize 上/右 | 北/东
nw-resize 上/左 | 北/西
n-resize 上 | 北
se-resize 下/右 | 南/东
sw-resize 下/左 | 南/西
s-resize 下 | 北/西
w-resize 左 | 西

content 插入内容

none 无
normal 无
content 插入内容 
inherit 继承

备注:content与伪元素:after 和:before配合使用

例如:在某元素内容之后添加内容 el:after { content: "我是被添加的内容"; } 

quotes 设置引号嵌套

none 
string string string string 例如:' " ' ' " ' " ' "  " ' ",代表双引号嵌套单引号
inherit 继承

抱歉!评论已关闭.