一、CSS属性
1、CSS尺寸属性
(1)CSS的单位是px(固定值),最好不要省略(值为0时可省,为具体值时不可省)
(2)width:指定元素的宽度,单位是px或%
(3)height:指定元素的高度,单位是px或%
2、CSS字体属性
(1)font-size:文字大小(字号)
(2)color:文字颜色
(3)font-family:字体
(4)font-weight:粗细。取值:bold(加粗,相当于<b>)、normal(去掉粗体)
(5)font-style:斜体。取值:italic,相当于<i>
3、CSS文本属性
(1)color:文本颜色
(2)text-align:水平对齐方式。取值:left | center(水平居中) | right
注:text-align只对块级元素有效(eg:块状元素中的文本、图片等内容),对行内元素无效
(3)vertical-align:文本的上下对齐。取值:top | middle(垂直居中) | bottom
(4)line-height:行间距(行高)。值为:文字高度+上下填充,单位:px或%
注:垂直居中 height: Xpx; && line-height: Xpx;
(5)text-decoration:文本修饰线。取值:none、underline(下划线)、overline、line-through(删除线)
(6)text-indent:首行缩进。取值:px或em(文字的x倍大小)或%
注:此属性一般用在<p>标签,段落前空2格。即 p { text-indent: 2em; }
(7)letter-spacing:字母间距或中文字间距
(8)word-spacing:英文单词间距
(9)text-transform:none、capitalize(首字母大写)、uppercase(全大写)、lowercase(全小写)
4、CSS列表属性
(1)list-style-type:列表的类型。取值:none(不要前面的点,可以用图片来做) | disc | circle | square
(2)list-style-image:列表的图片。格式:list-style-image:url(xxx/xxx.jpg);
(3)list-style-position:符合的位置。取值:outside(外)(默认)、inside(内)
注:
a). 实际开发时,控制列表项目符号,通常将list-style置为none(list-style: none;),通过为<li>设置背景图像的方式实现不同的列表项目符号
b). 用列表做的不兼容,所以换用背景做
5、CSS背景属性
用背景做,所有元素的内外边距(padding、margin)都要去掉 -- 用组合选择器
(1)background-color:背景颜色。默认transparent,背景透明
(2)background-image:背景图片。格式:background-image:url(xxx/xxx.jpg);
注:背景图片优先于背景颜色
(3)background-repeat:背景平铺。取值:repeat(平铺)(默认)、no-repeat(不平铺)、repeat-x(水平方向)、repeat-y(垂直方向)
(4)background-position:背景图距离左边和上边的距离。有两个取值:水平方向、垂直方向,默认水平垂直都居中。其值可以为:"left|center|right top|middle|bottom" 或 "50% 50%" 或 "100px 200px"
(5)background-attachment:当移动滚动条时,背景是固定的(fixed)还是跟着滚动的(scroll)
二、常用属性
1、overflow
(1)visible:内容不会被修剪,会呈现在元素框之外(默认值)
(2)hidden:溢出内容会被修剪,并且被修剪的内容是不可见的
(3)auto:在需要时产生滚动条,即自适应所要显示的内容
(4)scroll:溢出内容会被修剪,且浏览器会始终显示滚动条
2、display
(1)a{display: block;}:行内元素 --> 块元素
(2)div{display: inline;}:块元素 --> 行内元素
(3){display: inline-block;}:行内块元素
(4){display: none;}:元素被隐藏(相当于该元素不存在)
三、长度值
1、长度单位,目前比较常用到px(像素)、em、百分比(%)。这三种单位都是相对单位
2、三种常用的长度单位
(1)像素(px):较常用
(2)em:本元素给定字体的font-size值。如果元素的font-size为14px,那么1em=14px;如果元素的font-size为18px,那么1em=18px
<style type="text/css">
/* 实现段落首行缩进24px(也就是两个字体大小的距离) */
p {
font-size: 12px;
/* 首行缩进,2em=2*12px=24px */
text-indent: 2em;
}
</style>
注:如果给font-size设置单位为em时,计算的标准以父元素的font-size为基础
<head>
<style type="text/css">
p {
font-size: 14px
}
/* 以父元素<p>的font-size为基础。0.8em=0.8*14px */
span {
font-size: 0.8em;
}
</style>
</head>
<body>
<p>以这个<span>例子</span>为例</p>
</body>
(3)百分比(%)
<style type="text/css">
/* 设置行高(行间距)为字体的130%。130%*12px */
p {
font-size: 12px;
line-height: 130%
}
</style>