css总集

时间:2021-09-14 15:38:25

1
font-style normal 正常显示
italic 斜体

百分比 字体大小
font-size 像素 字体大小

font-family 字体名称 设置字体名称

letter-spacing noranl 正常显示
长度 文本间隔

word-spacing noranl 正常显示
数字 单词间隔

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 元件往下端靠齐

2
background-attachment scroll 背景图像随视窗滚动
空格 条的移动而移动
fixed 背景图像不会随视窗滚动条

background-color 十六进制
英文名称
三原色
transparent 透明

background-image URL background-image:url("bg.jpg")
空格 背景图片
none 不设置基本图片

background-position top left 背景图像在上左方
(2) top center 上方中间
top right 上右方
center left 中间左方
center center IE中间
center right 下左方
bottom 正下方
bottom right 下右方

background(1) repeat 将背景图案填满整个背景
repeat-x 水平填满
-y 垂直填满
no-repeat 背景图案只出现一个

属性:
list-style-type none 无符号
disc 实体的小圆点
cirele 空心的小圆点
square 实心的小方块
decimal 1,2,3...
lower-roman i,ii,iii...
upper-roman I,II,III...
lower-alpha a,b,c...
upper-alpha A,B,C...

list-style-position inside 清单项目往右移
outside 正常显示

list-style-image URL list-style-image:url(xx.gif)
none 不显示任何图像

3
属性:
border-color 十六进制 上、右、下、左线颜色
英文名称 border-color:red;
三原色 (四边为红)
border-color:red green;
(上下红,左右绿)
border-color:red green blue;
(上红,左右绿,下蓝)
border-color:red green blue yellow;
(上红,右绿,下蓝,左黄)

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:长度 形态 颜色

属性:
padding-bottom 长度/百分比 上
padding-left 长度/百分比 左
padding-bottom 长度/百分比 元件右端边线的空隙
padding-top 长度/百分比 上端

简易写法:padding:10px
padding:2px 4px
padding:2px 6px 10px
padding:1px 2px 3px 4px

margin系列属性介绍:
margin-bottom auto 自动调整空隙
长度/百分比 设置下端空隙
margin-left auto 自动调整空隙
长度/百分比 左端
margin-right auto .....
...... 右
margin-top auto .....
...... 上
简化:margin:2px 4px
margin:2px 6px 10px
margin:1px 2px 3px 4px

4
17.1css中区块的使用
width 像素/百分比 区块的宽度
auto
height ........... 高度
auto
min-height ............ 最小高度
auto
max-height ............ 最大高度
auto
min-width ............ 最小宽度
auto
max-width ............ 最大宽度
auto

17.2css中浮动的使用
float none 正常显示
left 左浮动
right 右浮动
clear none 允许两边浮动
left 不允许左边浮动
right 右边
both 两边

17.3css中定位的使用
position relative 设置区块基准点为左上角
absolute 网页
statio 无设置
left auto 以基准点定位在左边
像素/百分比 定位在左边
top auto 上边
像素/百分比 上边
right auto 右边
........... 右边
bottom auto 下
.......... 下
z-index auto 自动调整高度
数字 数字越大越往上层

17.4css中溢出的使用
overflow visible 不剪切内容也不添加滚动条
auto 在必需时才会剪切或显示滚动条
hidden 不显示超过对象尺寸的内容
scroll 总是显示滚动条
overflow-x (同上)
overflow-y (同上)

17.5css中滚动条的使用
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 ......... 滚动条的拖动区域

5
1.设定颜色
红色的几种合法定义:
#fOO
#ffOOOO
red
red(255,0,0)
red(100%,0%,0%)
2.十六进制三元组
第一个字节:红色的值
二 绿
三 蓝
简化写法:#cccccc 可写成#ccc,#ff6633 可写成#f63
3.17种具名颜色:
黑色 black 000000
藏蓝色 navy 000080
绿色 green 008000
海蓝色 teal 008080
银色 silver 0c0c0c
蓝色 blue 0000ff
酸橙色 lime 00ff00
浅绿色 aqua 00ffff
绛(jiang)紫色 maroon 800000
紫色 purple 800080
橄榄绿 olive 808000
灰色 gray 808080
红色 red ff0000
紫红色 fuchsia ff00ff
黄色 yellow ffff00
橙色 orange ffa500
白色 white ffffff

4.使用span更好的控制文本中局部区域的文本
文本内容

5.使用display属性提供区块转换
inline(转换成内联),block(转换成区块),none(不占位的隐藏)