css.docx
- 文档编号:17645399
- 上传时间:2023-04-24
- 格式:DOCX
- 页数:25
- 大小:22.69KB
css.docx
《css.docx》由会员分享,可在线阅读,更多相关《css.docx(25页珍藏版)》请在冰豆网上搜索。
css
CSS
1.定位
1.position定位方式
Static//该值一般不用,默认就是这个,不起任何作用
Relative//对象遵循常规流,通过top等参照自身偏移定位,不影响其他
Absolute//对象脱离常规流,通过top等绝对定位,不影响其他任何元素,其margin不与任何margin重叠,该属性还会使float失效
Fixed//对象脱离常规流,通过top等参照窗口定位,对象不会在出现滚动条时滚动
2.right偏移
相对参照物右偏移可以用数字,百分比表示
3.left
同上
4.top
同上
5.bottom
同上
6.clip裁剪
Rect(n,n,n,n)//检索设置对象的可视区域,但是只有position设置为absolute时才有用
2.布局
1.display对象表现形式
None//隐藏对象,与visiblity的属性为hidden不同,其不为对象保留其物理空间
Inline//将对象转换为内敛元素
Block//将对象转换成块状元素
。
。
2.float浮动
Right//左浮动
Left//右浮动
3.clear对浮动的处理
Left//不允许对象的左边有浮动对象,使左浮动往下
Right//不允许对象右浮动,使右浮动的对象往下
Both//左右都不可以有对象的浮动
4.overflow溢出处理
Visible//对溢出的内容不作仍和处理,可能会超出容器,默人
属性
Hidden//隐藏溢出的内容
Scroll//滚动条处理内容
Auto/没有溢出时不出现滚动条,溢出时出现滚动条
5.overflow-x横向溢出处理
属性值同overflow
6.overflow-y纵向溢出处理
7.visibility
Visible//对象可见
Hidden//隐藏对象,但保留其物理空间
Collapse//隐藏表格用,但是还可以被其他地方利用对于表格外的对象其作用和hidden一样
3.尺寸
1.height//设置对象的高度
百分比,或数字表示
2.width//设置对象的宽
百分比,或数字表示
3.Max-height//设置元素的最大高度
百分比,或数字表示
4.Max-width//设置元素的最大宽
同上
5.min-height//设置元素的最小高度
同上
6.min-width//设置元素最小宽
同上
4.外边距
1.Margin//设置对象四个边的外边距
四个值按上右下左的顺序表示
值可以是百分数,可以是数字
Auto表示百分数的50%
2.margin-left//左边的外边距
3.margin-right//右边的外边距
4.margin-top//上边的外边距
5.margin-bottom//下边的外边距
5.内边距
Padding//设置四边的内边距
可以百分数。
可以是数字
Padding-left//设置左边的内边距
Padding-right
Padding-top
Padding-bottom
6.边框
Border:
width,style,color设置四个边框的三个值
Border-top:
width,style,color设置top边框的三个值
Border-bottom:
width,style,color设置bottom边框的三个值
Border-right:
width,style,color设置right边框的三个值
Border-left:
width,style,color设置left边框的三个值
Border-width:
设置四个边框的宽
Border-top-width:
设置上边的边框宽
Border-style:
设置四个边的样式
none:
无轮廓。
border-color将被忽略,border-width计算值为0,除非边框轮廓为图像,即border-image。
hidden:
隐藏边框。
IE7及以下尚不支持
dotted:
点状轮廓。
IE6下显示为dashed效果
dashed:
虚线轮廓。
solid:
实线轮廓
double:
双线轮廓。
两条单线与其间隔的和等于指定的border-width值
groove:
3D凹槽轮廓。
ridge:
3D凸槽轮廓。
inset:
3D凹边轮廓。
outset:
3D凸边轮廓。
Border-color:
设置四个边框的颜色
Border-top-color:
设置上边框的颜色
Border-radius:
设置边角的样式
提供四个值,每个值可以有两个值x/y表示水平和垂直曲率半径
Border-top-left-radius//设置左上角的样式
Box-shadow:
设置对象的阴影
提供五个值水平偏移,垂直偏移,模糊度,阴影外延值,阴影的颜色,当有insert时为内阴影,没有该值是外阴影
Border-image:
设置边框图像的五个值,如下
Border-image-resource:
URL();图像的地址
Border-image-slice:
数值和百分比;设置背景图的分割方式
Border-image-width:
设置边框的宽度,课省略用外部的border-width设置
Border-image-outset:
设置边框的外延值
Border-image-repeat:
设置图像重复方式
stretch:
指定用拉伸方式来填充边框背景图。
repeat:
指定用平铺方式来填充边框背景图。
当图片碰到边界时,如果超过则被截断。
round:
指定用平铺方式来填充边框背景图。
图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。
space:
指定用平铺方式来填充边框背景图。
图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。
7.背景
Background:
设置背景的所有值
Background-color:
设置背景颜色
Background-image:
url()设置背景图像
也可以用渐变动态画背景图
Linear-gradient:
top/角度指定线性渐变的方向开始color,结束color,加私有前缀
Radial-gradient:
径向渐变,私有前缀
Position,shape,sizecolor
Repeating-linear-gradient:
重复线性渐变
Repeating-radial-gradient:
重复径向渐变
Background-repeat:
设置背景图像的重复方式
No-repeat,repeat-x,repeat-y,repaet
Background-attachment:
fixed相对于窗体固定
scroll相对于元素固定,会随着滚动条的滚动二滚动
background-position:
背景图像的位置
percentage/num/left/bottom/top/right
background-origin:
设置背景图像在什么区域显示
padding-box:
从padding区域(含padding)开始显示背景图像。
border-box:
从border区域(含border)开始显示背景图像。
content-box:
从content区域开始显示背景图像。
Background-clip:
背景图像的裁剪
padding-box:
从padding区域(不含padding)开始向外裁剪背景。
border-box:
从border区域(不含border)开始向外裁剪背景。
content-box:
从content区域开始向外裁剪背景。
Background-size:
设置背景图像的
用长度值指定背景图像大小。
不允许负值。
,提供两个值的时候一个用于高度一个用于宽度
用百分比指定背景图像大小。
不允许负值。
auto:
背景图像的真实大小。
cover:
将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。
Contain
8.颜色
Opacity:
设置对象的透明度
Color:
指定颜色
9.字体
Font:
字体里面的所有属性
Font-style:
设置字体
normal:
指定文本字体样式为正常的字体
italic:
指定文本字体样式为斜体。
对于没有设计斜体的特殊字体,如果要使用斜体外观将应用oblique
oblique:
指定文本字体样式为倾斜的字体。
人为的使文字倾斜,而不是去选取字
体中的斜体
Font-weight:
设置字体的粗细
normal:
正常的字体。
相当于number为400
bold:
粗体。
相当于number为700。
bolder:
特粗体。
也相当于strong和b对象的作用
lighter:
细体
用数字表示文本字体粗细。
取值范围:
100|200|300|400|500|600|700|800|900
Font-size:
设置字体的大小
Font-family:
设置什么字体名、宋体
10.文本
Text-transform:
文字转换,针对英文的
none:
无转换
capitalize:
将每个单词的第一个字母转换成大写
uppercase:
将每个单词转换成大写
lowercase:
将每个单词转换成小写
White-spacing:
空格的处理方式
pre:
用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字超出边界时不换行。
可查阅pre对象
nowrap:
强制在同一行内显示所有文本,合并文本间的多余空白,直到文本结束或者遭遇br对象。
pre-wrap:
用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字碰到边界时发生换行。
pre-line:
保持文本的换行,不保留文字间的空白距离,当文字碰到边界时发生换行。
World-wrap:
设置当内容超出边界处理方式
normal:
允许内容顶开或溢出指定的容器边界。
break-word:
内容将在边界内换行。
如果需要,单词内部允许断行。
Text-align:
设置文本的水平对齐方式
left:
内容左对齐。
center:
内容居中对齐。
right:
内容右对齐。
justify:
内容两端对齐。
Word-spacing:
num设置单词的间隔大小
Letter-spacing:
num设置字符的间隔大小
Text-index:
num设置文本的缩进大小
Vertical-align:
设置内联元素的垂直对齐方式
baseline:
将支持valign特性的对象的内容与基线对齐
sub:
垂直对齐文本的下标
super:
垂直对齐文本的上标
top:
将支持valign特性的对象的内容与对象顶端对齐
text-top:
将支持valign特性的对象的文本与对象顶端对齐
middle:
将支持valign特性的对象的内容与对象中部对齐
bottom:
将支持valign特性的对象的文本与对象底端对齐
text-bottom:
将支持valign特性的对象的文本与对象顶端对齐
Line-height:
num设置行高
11.文字装饰需要私有前缀
Text-decoration:
符合属性还没有致辞的
Text-decoration-line:
设置文本装饰线
none:
指定文字无装饰
underline:
指定文字的装饰是下划线
overline:
指定文字的装饰是上划线
line-through:
指定文字的装饰是贯穿线
blink:
指定文字的装饰是闪烁。
Text-decoration-color:
指定文本装饰线的颜色
Text-decoration-style:
指定文本装饰线的样式
solid:
实线
double:
双线
dotted:
点状线条
dashed:
虚线
wavy:
波浪线
text-shadow:
设置文字的阴影
第1个长度值用来设置对象的阴影水平偏移值。
可以为负值
第2个长度值用来设置对象的阴影垂直偏移值。
可以为负值
如果提供了第3个长度值则用来设置对象的阴影模糊值。
不允许负值
设置对象的阴影的颜色。
12.列表也可以应用在display:
list-item的元素
List-style:
image,position,type设置列表的符合属性
List-style-image:
url()列表图像的地址
List-style-position:
设置列表项目放置的位置
outside:
列表项目标记放置在文本以外,且环绕文本不根据标记对齐
inside:
列表项目标记放置在文本以内,且环绕文本根据标记对齐
推荐使用outside也是默认属性
List-style-type:
列表预设标记
disc:
实心圆(CSS1)
circle:
空心圆(CSS1)
square:
实心方块(CSS1)
decimal:
阿拉伯数字(CSS1)
lower-roman:
小写罗马数字(CSS1)
upper-roman:
大写罗马数字(CSS1)
lower-alpha:
小写英文字母(CSS1)
upper-alpha:
大写英文字母(CSS1)
none:
不使用项目符号(CSS1)
armenian:
传统的亚美尼亚数字(CSS2)
cjk-ideographic:
浅白的表意数字(CSS2)
georgian:
传统的乔治数字(CSS2)
lower-greek:
基本的希腊小写字母(CSS2)
hebrew:
传统的希伯莱数字(CSS2)
hiragana:
日文平假名字符(CSS2)
hiragana-iroha:
日文平假名序号(CSS2)
katakana:
日文片假名字符(CSS2)
katakana-iroha:
日文片假名序号(CSS2)
lower-latin:
小写拉丁字母(CSS2)
upper-latin:
大写拉丁字母(CSS2
13.表格
Table-layout:
表格布局方式
auto:
默认的自动算法。
布局将基于各单元格的内容。
表格在每一单元格读取计算之后才会显示出来。
速度很慢
fixed:
固定布局的算法。
在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关。
也就是说,内容可能被裁切
Border-collapse:
设置边框
separate:
边框独立
collapse:
相邻边被合并
Border-spacing:
设置单元格与单元格的间隙
Caption-side:
设置caption在表格的位置
top:
指定caption在表格上边
bottom:
指定caption在表格下边
Empty-cells:
设置空单元格的显示方法
hide:
指定当表格的单元格无内容时,隐藏该单元格的边框。
show:
指定当表格的单元格无内容时,显示该单元格的边框。
14.用户界面
Text-overflow:
文本溢出时显示方法,但是前提要是overflow设置为hidden
clip:
当对象内文本溢出时不显示省略标记(...),而是将溢出的部分裁切掉。
ellipsis:
当对象内文本溢出时显示省略标记(...)。
Outline:
outline-widthoutline-style,outline-color复合属性外边框修饰,在border外面
Outline-width:
num轮廓线的宽度
Outline-style:
轮廓线的样式
none:
无轮廓。
与任何指定的outline-width值无关
dotted:
点状轮廓。
dashed:
虚线轮廓。
solid:
实线轮廓
double:
双线轮廓。
两条单线与其间隔的和等于指定的outline-width值
groove:
3D凹槽轮廓。
ridge:
3D凸槽轮廓。
inset:
3D凹边轮廓。
outset:
3D凸边轮廓。
Outline-color:
指定外轮廓的颜色
Outline-offset:
外轮廓线的偏移距离,border为零
Cursor:
设置在该对象上时鼠标的形状
:
[
]*[auto|default|none|context-menu|help|pointer|progress|wait|cell|crosshair|text|vertical-text|alias|copy|move|no-drop|not-allowed|e-resize|n-resize|ne-resize|nw-resize|s-resize|se-resize|sw-resize|w-resize|ew-resize|ns-resize|nesw-resize|nwse-resize|col-resize|row-resize|all-scroll]
对于用特定图片表示的鼠标对于ieopera只能有*.cur格式的图片,而对于其他浏览器可以用好多格式的图片
∙:
link,:
visited{
∙cursor:
url(example.svg#linkcursor),
∙url(hyper.cur),
∙url(hyper.png)23,
∙pointer;
∙}
Zoom:
num浮点数,百分数,设置对象的缩放比例
Resize:
是否允许用户对页面的缩放
none:
不允许用户调整元素大小。
both:
用户可以调节元素的宽度和高度。
horizontal:
用户可以调节元素的宽度
vertical:
用户可以调节元素的高度。
15.多列在报纸上的排版比较多见。
私有前缀
Columns:
column-widthcolumn-count设置对象的列数,还有每列的宽度
Column-width:
num设置多列的宽度
Column-count:
num设置多列的数量
Column-gap:
num设置多列的间的间隙
Column-rule:
设置列与列之间的边框,复合属性
Column-rule-width:
列与列边框的厚度
用长度值来定义边框的厚度。
不允许负值
medium:
定义默认厚度的边框。
thin:
定义比默认厚度细的边框。
thick:
定义比默认厚度粗的边框。
Column-rule-style:
列与列边框的样式
none:
无轮廓。
column-rule-color与column-rule-width将被忽略
hidden:
隐藏边框。
dotted:
点状轮廓。
dashed:
虚线轮廓。
solid:
实线轮廓
double:
双线轮廓。
两条单线与其间隔的和等于指定的column-rule-width值
groove:
3D凹槽轮廓。
ridge:
3D凸槽轮廓。
inset:
3D凹边轮廓。
outset:
3D凸边轮廓
Column-span:
设置对象是否跨所有列
none:
不跨列
all:
横跨所有列
column-fil:
设置对象的高度是否统一
auto:
列高度自适应内容
balance:
所有列的高度以其中最高的一列统一
16.元素的变换,私有前缀
Transform:
对元素进行一些基本的转换
none:
无转换
matrix(
以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f]变换矩阵
translate(
指定对象的2Dtranslation(2D平移)。
第一个参数对应X轴,第二个参数对应Y轴。
如果第二个参数未提供,则默认值为0
translateX(
指定对象X轴(水平方向)的平移
translateY(
指定对象Y轴(垂直方向)的平移
rotate(
指定对象的2Drotation(2D旋转),需先有transform-origin属性的定义
scale(
指定对象的2Dscale(2D缩放)。
第一个参数对应X轴,第二个参数对应Y轴。
如果第二个参数未提供,则默认取第一个参数的值
scaleX(
指定对象X轴的(水平方向)缩放
scaleY(
指定对象Y轴的(垂直方向)缩放
skew(
指定对象skewtransformation(斜切扭曲)。
第一个参数对应X轴,第二个参数对应Y轴。
如果第二个参数未提供,则默认值为0
skewX(
指定对象X轴的(水平方向)扭曲
skewY(
指定对象Y轴的(垂直方向)扭曲
Transform-origin:
设置对象的转换所参照的原点
用百分比指定坐标值。
可以为负值。
用长度值指定坐标值。
可以为负值。
left:
指定原点的横坐标为left
center①:
指定原点的横坐标为center
right:
指定原点的横坐标为right
top:
指定原点的纵坐标为top
center②:
指定原点的纵坐标为center
bottom:
指定原点的纵坐标为bottom
每个属性提供两个值,第一个表示横坐标,第二个表示众坐标
17.对变换过场中的过度设置
Transition:
transition-porpertytransition-durationtransition-timing-function
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- css
![提示](https://static.bdocx.com/images/bang_tan.gif)