CSS 文本属性可定义文本的外观:
通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等。
属性名称 属性值 说明
font-style normal 正常显示
italic 斜体
font-variant normal 正常显示
small-caps 将英文大小写字母写调为同宽
font-weight normal 正常显示
bold 粗体
font-size 像素 字体大小
百分比 字体大小
font-family 字体名称 设置字体名称
.......................................................................................................................................................................
CSS 中的文本属性:
属性名称 属性值 说明
color 十六进制 颜色
英文名称 颜色
三原色单位 颜色
letter-spacing normal 正常显示
长度 文本间隔
word-spacing normal 正常显示
数字 单词间距
white-space normal 文本自动处理换行
pre 换行和空白受保护
nowrap 强制在同一行显示
text-align left 文字靠左
right 文字靠右
center 文字靠中
text-decoration none 正常显示
underline 加上下划线
overline 加顶线
line-through 加删除线
text-indent 长度 首行缩进
百分比 同上
line-height 像素 行高
数字 / 百分比 行高
text-transform none 正常显示可以包含大,小字符
capitalize 字符串第一个字符大 写
uppercase 设置大写字符
lowercase 设置小写字符
vertical-align sub 设置文字为下标。
super 设置文字为上标。
top 元件往上端靠齐。
middle 设置文字是在中线位置。
bottom 元件往下端靠齐。
.......................................................................................................................................................................
属性名称 属性值 说明
background-attachment scroll 设置背景图像会随视条的移动而移动。
fixed 设置背景图像不会随视窗滚动条的移动而移动。
background-color 十六进制 background-color:#ff0000;
英文名称 background-color:red;
三原色 background-color:rgb(255,0,0)
transparent background-color:transparent;透明
background-image URL background-image:url("bg.jpg")背景图片
background-position none 不设置背景图片
top left 设置背景图案出现在上左方。
top center 设置背景图案出现在上方中间。
top right 设置背景图案出现在上右方。
center left 设置背景图案出现在中间左方。
center center 设置背景图案出现在 IE 中间。
center right 设置背景图案出现中间右方。
bottom left 设置背景图案出现在下左方。
bottom 设置背景图案出现在正下方。
bottom right 设置背景图案出现在下右方。
background-repeat repeat 将背景图案填满整个背景。
repeat-x 将背景图案在水平方向添满。
repeat-y 将背景图案在垂直方向添满。
no-repeat 图案只出现一次。
背景图案简化方案:
background: 颜色 背景图片 repeat attachment position;
background-attachment -- 定义背景图片随滚动轴的移动方式取值: scroll | fixed | inherit
scroll: 随着页面的滚动轴背景图片将移动
fixed: 随着页面的滚动轴背景图片不会移动
inherit: 继承
初始值:scroll
继承性: 否适用于: 所有元素
background:背景.attachment:附着.
.......................................................................................................................................................................
CSS 中边框的使用
属性名称 属性值 说明
border-color 十六进制 可依序设置上,右,下,左线颜色
英文名称 border-color:red( 四边均为红色 )
三原色 border-color:red green
( 上下为红色,左右为绿色 )
border-color:red green blue
( 上为红色、左右为绿色、下为蓝色 )
border-color:red green blue yell
( 上右下左分别为红绿蓝黄 )
border-style none 不显示边线
dotted 点线
dashed 虚线
solid 实线
double 双线
border-width 长度 border-width:0.2cm 0.3cm 0.4cm 0.5cm;
border-width:1 2 3 4;简化方案: border: 形态 长度 颜色
例如 border: 1px solid black;
简写跟全部写法
border-bottom-style:dotted;
border-bottom-color:#666;
border-bottom-width:1px;
border-top:#666 solid 1px;(一条边的简写)
borde:#666 solid 1px;(四条边的简写)
.......................................................................................................................................................................
CSS 中边界的使用
属性名称 属性值 说明
padding-bottom 长度 / 百分比 元件下端边线的空隙
padding-left 长度 / 百分比 元件左端边线的空隙
padding-right 长度 / 百分比 元件右端边线的空隙
padding-top 长度 / 百分比 元件上端边线的空
隙
简易写法:
padding:10px
padding:2 px 4p x
padding:2p x 6p x 10p x
padding:1p x 2p x 3p x 4p x
.......................................................................................................................................................................
margin 系列属性介绍
属性名称 属性 说明
margin-bottom auto 自动调整空隙
长度 / 百分比 设置下端空隙
margin-left auto 自动调整空隙
长度 / 百分比 设置左端空隙
margin-right auto 自动调整空隙
长度 / 百分比 设置右端空隙
margin-top auto 自动调整空隙
长度 / 百分比 设置上端空隙
简化方案:
margin:2p x 4p x
margin:2p x 6p x 10p x
margin:1 px 2 px 3 px 4 px
常用网页顶格设置:margin:0;
.......................................................................................................................................................................
CSS 中区块的使用
属性名称 属性值 说明
width 像素 / 百分比 区块的宽度
auto
height 像素 / 百分比 区块的 高度
auto
min-height 像素 / 百分比 区块最小高度
auto
max-height 像素 / 百分比 区块最大高度
auto
min-width 像素 / 百分比 区块最小宽度
auto
max-width 像素 / 百分比 区块最大宽度
auto
......................................................................................................................................................................
CSS 中浮动的使用属性名称 属性值 说明
float none 正常显示
left 左浮动
right 右浮动
clear none 允许两边浮动
left 不允许左边浮动
right 不允许右边浮动
both 不允许两边浮动
.......................................................................................................................................................................
CSS 中定位的使用
属性名称 属性值 说明
position relative 设置区块基准点为左上角
absolute 置网页的为基准点左上
static 无设置
left auto 以基准点定位在左边
像素/百分比 定位在左边
top auto 以 基准点定位在上边
像素/百分比 定位在上边
right auto 以 基准点定位在 右 边
像素/百分比 定位在 右边
bottom auto 以 基准点定位在 下 边
像素/百分比 定位在 下边
z-index auto 自动调整高度
数字 数字越大越往上层
.......................................................................................................................................................................
CSS 中溢出的使用
属性名称 属性值 说明
overflow visible 不剪切内容也不添加滚动条
auto 在必需时对象内容才会被裁切或显示滚动条
hidden 不显示超过对象尺寸的内容
scroll 总是显示滚动条
overflow-x ( 同上 )
overflow-y ( 同上 )
.......................................................................................................................................................................
CSS 中滚动条的使用
属性名称 属性值 说明
scrollbar-3dlight-color 颜色 / 十六进制 滚动条亮边框
scrollbar-highlight-color 颜色 / 十六进制 滚动条 3D 界面亮边
scrollbar-face-color 颜色 / 十六进制 滚动条 3D 表面
scrollbar-arrow-color 颜色 / 十六进制 滚动条方向箭头
scrollbar-shadow-color 颜色 / 十六进制 滚动条 3D 暗边
scrollbar-darkshadow-color 颜色 / 十六进制 滚动条暗边框
scrollbar-base-color 颜色 / 十六进制 滚动条基准颜色
scrollbar-track-color 颜色 / 十六进制 滚动条的拖动区域
.....................................................................................................................................................................
定位
相对定位
#myBox {
Position: relat ive; Top: 20px;
Left: 20px;
}
绝对定位
#myBox {Position:absolute;
Top: 20px;
Left: 20px;}
浮动
.news img {
Float: left; }
.news p {
Float: right; }
设定颜色
红色的几种合法定义:
#f00;
#ff0000;
Red;
Rgb(255,0,0);
Rgb(100%,0%,0%);
.......................................................................................................................................................................
使用 display 属性提供区块转换
inline-block,block,none
<style>
.inline{display:inline; width:100px;
height:100px; padding:5px;
background-color:#F00;}
.block{display:block; width:100px;
height:100px; padding:5px;background-color:#0f0;}
.inline-block{display:inline-block;
width:100px;height:100px; padding:5px;background-color:#00f;}
</style>
<body>
<span class="inline">
inline
</span>inline
<span class="block">
block
</span> block
<span class="inline-block">
inline-block
</span>inline-block
</body>
我们发现内联对象`inline`给它设置属性`height`和`width`是没有用的,致使它变宽变大的
原因是内部元素的宽高`+padding`。
观察inline对象的前后元素我们会发现`inline`不单独占一行,
其它元素会紧跟其后。
而块对象`block`是可以设置宽高的,但是它的实际宽高是本身宽高`+padding`。
观察`block`的前后元素我们会发现`block`要单独占一行。
然而,当我们即需要div有宽高,又不希望它独占一行怎么办?
这个时候我们就需要使用`inline-block`了,再观察一下上面的demo,
我们会发现`inline-block`
即具有`block`的宽高特性又具有`inline`的同行元素特性。
然而,在IE6/7下padding对inline的宽高是对其没影响的。
.......................................................................................................................................................................
perspective:200px; 放在父一级,当其值越大时,元素离观看者越近,视觉上元素放大,反之元素缩小。
transform新增函数
rotateX():如果值为正值,元素围绕X轴顺时针旋转;反之,如果值为负值,元素围绕X轴逆时针旋转。
rotateY():如果值为正值,元素围绕Y轴顺时针旋转;反之,如果值为负值,元素围绕Y轴逆时针旋转。
rotateZ():rotateZ()函数指定元素围绕Z轴旋转,如果仅从视觉角度上看,rotateZ()函数让元素顺时针或逆时针旋转,并且效果和rotate()效果等同,
translateZ();让元素在Z轴进行位移,当其值越大时,元素离观看者越近,视觉上元素放大,反之元素缩小。
.......................................................................................................................................................................
渐变:
直线渐变
background:linear-grdient(left,red,blue,yellow);直线颜色渐变。
background:linear-grdient(left bottom,red,blue,yellow);对角颜色渐变。
background:linear-grdient(left,rgba(255,255,255,0.5),rgba(241,266,233,0.8));透明颜色渐变。
background:linear-grdient(left,rgba(255,255,255,0.5),rgba(241,266,233,0.8),url(pic/mm.jpg));图片渐变透明。
background:linear-grdient(left,red 20%,blue 30%,yellow 50%);颜色百分比分布。
background: -webkit-linear-gradient(180deg, red, blue);带有指定的角度的线性渐变:
CSS3 径向渐变
background: -webkit-radial-gradient(red, green, blue);
.......................................................................................................................................................................
CSS - :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容。
h1:before
{
content:url(smiley.gif);
}
CSS - :after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容。
h1:after
{
content:url(smiley.gif);
}
.......................................................................................................................................................................
.......................................................................................................................................................................
.......................................................................................................................................................................
通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等。
属性名称 属性值 说明
font-style normal 正常显示
italic 斜体
font-variant normal 正常显示
small-caps 将英文大小写字母写调为同宽
font-weight normal 正常显示
bold 粗体
font-size 像素 字体大小
百分比 字体大小
font-family 字体名称 设置字体名称
.......................................................................................................................................................................
CSS 中的文本属性:
属性名称 属性值 说明
color 十六进制 颜色
英文名称 颜色
三原色单位 颜色
letter-spacing normal 正常显示
长度 文本间隔
word-spacing normal 正常显示
数字 单词间距
white-space normal 文本自动处理换行
pre 换行和空白受保护
nowrap 强制在同一行显示
text-align left 文字靠左
right 文字靠右
center 文字靠中
text-decoration none 正常显示
underline 加上下划线
overline 加顶线
line-through 加删除线
text-indent 长度 首行缩进
百分比 同上
line-height 像素 行高
数字 / 百分比 行高
text-transform none 正常显示可以包含大,小字符
capitalize 字符串第一个字符大 写
uppercase 设置大写字符
lowercase 设置小写字符
vertical-align sub 设置文字为下标。
super 设置文字为上标。
top 元件往上端靠齐。
middle 设置文字是在中线位置。
bottom 元件往下端靠齐。
.......................................................................................................................................................................
属性名称 属性值 说明
background-attachment scroll 设置背景图像会随视条的移动而移动。
fixed 设置背景图像不会随视窗滚动条的移动而移动。
background-color 十六进制 background-color:#ff0000;
英文名称 background-color:red;
三原色 background-color:rgb(255,0,0)
transparent background-color:transparent;透明
background-image URL background-image:url("bg.jpg")背景图片
background-position none 不设置背景图片
top left 设置背景图案出现在上左方。
top center 设置背景图案出现在上方中间。
top right 设置背景图案出现在上右方。
center left 设置背景图案出现在中间左方。
center center 设置背景图案出现在 IE 中间。
center right 设置背景图案出现中间右方。
bottom left 设置背景图案出现在下左方。
bottom 设置背景图案出现在正下方。
bottom right 设置背景图案出现在下右方。
background-repeat repeat 将背景图案填满整个背景。
repeat-x 将背景图案在水平方向添满。
repeat-y 将背景图案在垂直方向添满。
no-repeat 图案只出现一次。
背景图案简化方案:
background: 颜色 背景图片 repeat attachment position;
background-attachment -- 定义背景图片随滚动轴的移动方式取值: scroll | fixed | inherit
scroll: 随着页面的滚动轴背景图片将移动
fixed: 随着页面的滚动轴背景图片不会移动
inherit: 继承
初始值:scroll
继承性: 否适用于: 所有元素
background:背景.attachment:附着.
.......................................................................................................................................................................
CSS 中边框的使用
属性名称 属性值 说明
border-color 十六进制 可依序设置上,右,下,左线颜色
英文名称 border-color:red( 四边均为红色 )
三原色 border-color:red green
( 上下为红色,左右为绿色 )
border-color:red green blue
( 上为红色、左右为绿色、下为蓝色 )
border-color:red green blue yell
( 上右下左分别为红绿蓝黄 )
border-style none 不显示边线
dotted 点线
dashed 虚线
solid 实线
double 双线
border-width 长度 border-width:0.2cm 0.3cm 0.4cm 0.5cm;
border-width:1 2 3 4;简化方案: border: 形态 长度 颜色
例如 border: 1px solid black;
简写跟全部写法
border-bottom-style:dotted;
border-bottom-color:#666;
border-bottom-width:1px;
border-top:#666 solid 1px;(一条边的简写)
borde:#666 solid 1px;(四条边的简写)
.......................................................................................................................................................................
CSS 中边界的使用
属性名称 属性值 说明
padding-bottom 长度 / 百分比 元件下端边线的空隙
padding-left 长度 / 百分比 元件左端边线的空隙
padding-right 长度 / 百分比 元件右端边线的空隙
padding-top 长度 / 百分比 元件上端边线的空
隙
简易写法:
padding:10px
padding:2 px 4p x
padding:2p x 6p x 10p x
padding:1p x 2p x 3p x 4p x
.......................................................................................................................................................................
margin 系列属性介绍
属性名称 属性 说明
margin-bottom auto 自动调整空隙
长度 / 百分比 设置下端空隙
margin-left auto 自动调整空隙
长度 / 百分比 设置左端空隙
margin-right auto 自动调整空隙
长度 / 百分比 设置右端空隙
margin-top auto 自动调整空隙
长度 / 百分比 设置上端空隙
简化方案:
margin:2p x 4p x
margin:2p x 6p x 10p x
margin:1 px 2 px 3 px 4 px
常用网页顶格设置:margin:0;
.......................................................................................................................................................................
CSS 中区块的使用
属性名称 属性值 说明
width 像素 / 百分比 区块的宽度
auto
height 像素 / 百分比 区块的 高度
auto
min-height 像素 / 百分比 区块最小高度
auto
max-height 像素 / 百分比 区块最大高度
auto
min-width 像素 / 百分比 区块最小宽度
auto
max-width 像素 / 百分比 区块最大宽度
auto
......................................................................................................................................................................
CSS 中浮动的使用属性名称 属性值 说明
float none 正常显示
left 左浮动
right 右浮动
clear none 允许两边浮动
left 不允许左边浮动
right 不允许右边浮动
both 不允许两边浮动
.......................................................................................................................................................................
CSS 中定位的使用
属性名称 属性值 说明
position relative 设置区块基准点为左上角
absolute 置网页的为基准点左上
static 无设置
left auto 以基准点定位在左边
像素/百分比 定位在左边
top auto 以 基准点定位在上边
像素/百分比 定位在上边
right auto 以 基准点定位在 右 边
像素/百分比 定位在 右边
bottom auto 以 基准点定位在 下 边
像素/百分比 定位在 下边
z-index auto 自动调整高度
数字 数字越大越往上层
.......................................................................................................................................................................
CSS 中溢出的使用
属性名称 属性值 说明
overflow visible 不剪切内容也不添加滚动条
auto 在必需时对象内容才会被裁切或显示滚动条
hidden 不显示超过对象尺寸的内容
scroll 总是显示滚动条
overflow-x ( 同上 )
overflow-y ( 同上 )
.......................................................................................................................................................................
CSS 中滚动条的使用
属性名称 属性值 说明
scrollbar-3dlight-color 颜色 / 十六进制 滚动条亮边框
scrollbar-highlight-color 颜色 / 十六进制 滚动条 3D 界面亮边
scrollbar-face-color 颜色 / 十六进制 滚动条 3D 表面
scrollbar-arrow-color 颜色 / 十六进制 滚动条方向箭头
scrollbar-shadow-color 颜色 / 十六进制 滚动条 3D 暗边
scrollbar-darkshadow-color 颜色 / 十六进制 滚动条暗边框
scrollbar-base-color 颜色 / 十六进制 滚动条基准颜色
scrollbar-track-color 颜色 / 十六进制 滚动条的拖动区域
.....................................................................................................................................................................
定位
相对定位
#myBox {
Position: relat ive; Top: 20px;
Left: 20px;
}
绝对定位
#myBox {Position:absolute;
Top: 20px;
Left: 20px;}
浮动
.news img {
Float: left; }
.news p {
Float: right; }
设定颜色
红色的几种合法定义:
#f00;
#ff0000;
Red;
Rgb(255,0,0);
Rgb(100%,0%,0%);
.......................................................................................................................................................................
使用 display 属性提供区块转换
inline-block,block,none
<style>
.inline{display:inline; width:100px;
height:100px; padding:5px;
background-color:#F00;}
.block{display:block; width:100px;
height:100px; padding:5px;background-color:#0f0;}
.inline-block{display:inline-block;
width:100px;height:100px; padding:5px;background-color:#00f;}
</style>
<body>
<span class="inline">
inline
</span>inline
<span class="block">
block
</span> block
<span class="inline-block">
inline-block
</span>inline-block
</body>
我们发现内联对象`inline`给它设置属性`height`和`width`是没有用的,致使它变宽变大的
原因是内部元素的宽高`+padding`。
观察inline对象的前后元素我们会发现`inline`不单独占一行,
其它元素会紧跟其后。
而块对象`block`是可以设置宽高的,但是它的实际宽高是本身宽高`+padding`。
观察`block`的前后元素我们会发现`block`要单独占一行。
然而,当我们即需要div有宽高,又不希望它独占一行怎么办?
这个时候我们就需要使用`inline-block`了,再观察一下上面的demo,
我们会发现`inline-block`
即具有`block`的宽高特性又具有`inline`的同行元素特性。
然而,在IE6/7下padding对inline的宽高是对其没影响的。
.......................................................................................................................................................................
perspective:200px; 放在父一级,当其值越大时,元素离观看者越近,视觉上元素放大,反之元素缩小。
transform新增函数
rotateX():如果值为正值,元素围绕X轴顺时针旋转;反之,如果值为负值,元素围绕X轴逆时针旋转。
rotateY():如果值为正值,元素围绕Y轴顺时针旋转;反之,如果值为负值,元素围绕Y轴逆时针旋转。
rotateZ():rotateZ()函数指定元素围绕Z轴旋转,如果仅从视觉角度上看,rotateZ()函数让元素顺时针或逆时针旋转,并且效果和rotate()效果等同,
translateZ();让元素在Z轴进行位移,当其值越大时,元素离观看者越近,视觉上元素放大,反之元素缩小。
.......................................................................................................................................................................
渐变:
直线渐变
background:linear-grdient(left,red,blue,yellow);直线颜色渐变。
background:linear-grdient(left bottom,red,blue,yellow);对角颜色渐变。
background:linear-grdient(left,rgba(255,255,255,0.5),rgba(241,266,233,0.8));透明颜色渐变。
background:linear-grdient(left,rgba(255,255,255,0.5),rgba(241,266,233,0.8),url(pic/mm.jpg));图片渐变透明。
background:linear-grdient(left,red 20%,blue 30%,yellow 50%);颜色百分比分布。
background: -webkit-linear-gradient(180deg, red, blue);带有指定的角度的线性渐变:
CSS3 径向渐变
background: -webkit-radial-gradient(red, green, blue);
.......................................................................................................................................................................
CSS - :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容。
h1:before
{
content:url(smiley.gif);
}
CSS - :after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容。
h1:after
{
content:url(smiley.gif);
}
.......................................................................................................................................................................
.......................................................................................................................................................................
.......................................................................................................................................................................