css属性.docx

上传人:b****3 文档编号:26448508 上传时间:2023-06-19 格式:DOCX 页数:20 大小:35.25KB
下载 相关 举报
css属性.docx_第1页
第1页 / 共20页
css属性.docx_第2页
第2页 / 共20页
css属性.docx_第3页
第3页 / 共20页
css属性.docx_第4页
第4页 / 共20页
css属性.docx_第5页
第5页 / 共20页
点击查看更多>>
下载资源
资源描述

css属性.docx

《css属性.docx》由会员分享,可在线阅读,更多相关《css属性.docx(20页珍藏版)》请在冰豆网上搜索。

css属性.docx

css属性

CSS3新属性

1.css2中的背景属性

Background-color背景颜色

Background-image背景图片

Background-position背景图片的位置

Background-position-x背景图片的x位置

Background-position-y背景图片的y位置

Background-repeat背景图片的重复方式

Background-attachment背景图片的绑定方式

Background:

背景图片的综合属性设定

CSS3中新增的属性:

多背景属性

格式:

background:

url(图片地址)重复设定定位属性等,

url(图片地址)重复设定定位属性等,

url(图片地址)重复设定定位属性等....

Background-origin:

背景原点定位属性

Padding-box:

padding开始的位置为原点(默认)

Border-box从最外面边框开始的位置为原点

Content-box:

从内容开始的位置为原点

Background-clip:

背景图片切割属性

Border-box从边框开始切割(默认,不切割)

Padding-boxpadding向外(边框)的内容不现实

Content-box:

内容向外(边框和padding)不显示

text:

文字切割(需要使用浏览器前缀)

Background-size:

设置背景图片的大小

值为长度单位即可

Auto背景图片原始大小默认值

cover适当缩放图片使得图片刚好能覆盖元素

contain适当缩放图片使得元素刚好包含图片

关于颜色

CSS2中的颜色表示方式

英文单词:

red,green,blue,pink....

rgb模式:

rgb(红色值,绿色值,蓝色值)所有值为0-255

HEX模式:

#红色值绿色值蓝色值(所有值为00-FF)

CSS3中新增的颜色表示方式

rgba模式

增强的RGB模式,在RGB模式的基础上增加了A值,A表示透明度,取值为0-1之间的数值,0为完全透明,1为完全不透明

格式:

rgba(红色值,绿色值,蓝色值,透明度)

hsl模式

HSL模式也叫做色轮模式

H色调选择颜色种类取值0-360

S饱和度0%-100%

L亮度0%-100%

注意:

HSL模式的目的是为了无限的接近自然界颜色种类的表示方式。

hsla模式

在HSL模式的基础上添加的透明度值的新的颜色表示方式

H色调选择颜色种类取值0-360

S饱和度0%-100%

L亮度0%-100%

A透明度0-1之间的小数

新的颜色属性

Opacity:

设置透明度属性

设置元素的透明值,取值为0-1之间的小数

新的颜色值

Transparent透明属于英文单词颜色

关于浏览器前缀

浏览器:

IE浏览器-ms-前缀

火狐浏览器-moz-前缀

chrome浏览器-webkit-前缀

safari浏览器-webkit-前缀

opera浏览器-o-前缀

标准的实验性质属性书写规范:

-webkit-CSS属性;

-moz-CSS属性;

-o-CSS属性;

-ms-CSS属性;

CSS属性;

新的图像表示方式

渐变:

分为四种线性渐变、径向渐变、重复的线性渐变和重复的径向渐变。

注意:

渐变本质是图像。

不是一种颜色。

线性渐变

最简单的颜色渐变

Linear-gradient(开始颜色,结束颜色);

改变方向的颜色渐变

Linear-gradient(方向,开始颜色,结束颜色);

注意:

方向值可以使用位置单词,一共八个方向,left.right.,top,bottom,lefttop,leftbottom,righttop,rightbottom。

多颜色渐变

Linear-gradient(方向,开始颜色,中间色....,结束颜色)

制定渐变颜色的位置

Linear-gradient(方向,开始颜色位置点,中间色位置点....,结束颜色位置点)

注意:

位置点可以是像素可以是百分比,只要是长度就行...

径向渐变

最简单的径向渐变

Radial-gradient(开始颜色,结束颜色)

带有制定原点

Radial-gradient(原点,开始颜色,结束颜色)

注意:

原点为坐标,可以是像素可以是百分比也可以是英文单词.

设定渐变的形状

Radial-gradient(原点,形状,开始颜色,结束颜色)

circle圆形

ellipse椭圆形默认值

设定渐变的大小

Radial-gradient(原点,形状大小,开始颜色,结束颜色)

Closest-side最近的边

Closest-corner最近的角

Farthest-side最远的边

Farthest-corner最远的角

cover覆盖

contain包含

多颜色渐变

Radial-gradient(原点,形状大小,开始颜色,,中间色...结束颜色)

制定渐变颜色的位置

Radial-gradient(原点,形状大小,开始颜色位置点,中间色位置点...结束颜色位置点)

 

重复的线性渐变

Repeating-linear-gradient(方向,开始颜色,中间色...结束色位置点)

注意:

结束颜色的位置点决定渐变的重复次数,例如,50%重复2次,20%重复5次

重复的径向渐变

Repeating-radial-gradient(方向,开始颜色,中间色...结束色位置点)

注意:

结束颜色的位置点决定渐变的重复次数,例如,50%重复2次,20%重复5次

 

角度单位:

deg度,一个圆周为360度

turn圈/周一个圆周就是1turn

grad梯度一个圆周400梯度

rad弧度一个圆周2N弧度(基本不用..)

文本属性:

text-transform:

设定大小写转换的属性

auto原始大小

capitalize首字母大写

uppercase转化为大写字母

lowercase转化为小写字母

full-width适用于拉丁字符...

white-space:

设置元素内部空白字符的处理方式

normal正常

nowrap强制内容超过元素不换航

pre设置元素内部空白为与格式化模式,超过不换航

Pre-wrap:

设置元素内部为预格式化模式,超出换行

Tab-size:

设置tab键的长度

值为整数或者长度单位

注意:

设置整数值表示tab键的N倍。

Letter-spacing设置字符间距

值为长度单位(对汉字有效)

Word-spacing设置单词间距

值为长度单位(对汉字单词无效)

Word-break:

设置是否允许在一个单词内部断开换行

normal正常

break-all允许断开单词

Word-wrap:

设置一行内单词的断开设置(overflow-wrap)

normal正常

Word-break:

允许单词断开

注意:

word-break属性是在元素的边界处直接断开单词。

Word-wrap如果能够换行就换行处理,没办法时就断开单词。

Text-fill-color:

设置文字的填充颜色

Text-stroke:

设置文字的描边效果

格式:

text-stroke:

颜色粗细

Text-stroke-width:

设置描边的宽度

Text-stroke-color:

设置描边的颜色

 

边框背景图片

边框背景图片切割及对应视图

Border-image-source设置边框背景图像的资源

格式:

border-image-source:

url(图片地址)

Border-image-width:

设置边框背景图像的宽度

值为长度值

border-image-slice:

设置用于当作背景图的切割点

注意:

改值默认单位为像素,但是不可以添加单位,避免和宽度冲突。

Border-image-repeat:

设置边框背景图片的重复或者覆盖方式

stretch拉伸(默认值)

repeat重复图片

round重复图片,保证图片个数为整数个,会进行适当的缩放

Border-image-outset:

设置边框背景图片的外移值。

值为长度单位

Border-image:

边框背景图片的综合设定属性

格式:

Border-image:

url(图片地址)切割点/宽度重复

边框圆角属性:

Border-radius:

一次性设置四个角的圆角

格式1:

(四角)

Border-radius:

一个值

设定所有角的水平和垂直半径都是当前这个值

格式2:

(对角线)

Border-radius:

值1值2;

设置左上角和右下角的水平和垂直半径为值1

设置右上角和左下角的水平和垂直半径为值2

格式3:

Border-radius:

值1值2值3;

设置左上角的水平和垂直半径为值1.

设置右上角和左下角的水平和垂直半径为值2

设置右下角的水平和垂直半径为值3

格式4;

Border-radius:

值1值2值3值4:

从左上角到左下角顺时针的设定每个角的水平和垂直半径分别为值1值2值3值4.

格式5:

格式5:

(四角)

Border-radius:

值1/值2

设置四个角的每个角的水平半径为值1,垂直半径为值2

备注:

在格式5的基础上值1可以变为1-4个值,值2也可以写成1-4个值分别表示每个角的设定方式。

综合起来border-radius一共20种设定方式

 

Border-top-left-radius:

设置左上角的圆角

格式:

一个值的设置方式

Border-top-left-radius:

水平和垂直半径值;

两个值的设置方式

Border-top-left-radius:

水平半径值垂直半径值;

Border-top-right-radius设置右上角的圆角

格式:

一个值的设置方式

Border-top-right-radius:

水平和垂直半径值;

两个值的设置方式

Border-top-right-radius:

水平半径值垂直半径值;

Border-bottom-left-radius设置左下角的圆角

格式:

一个值的设置方式

Borde-bottom-left-radius:

水平和垂直半径值;

两个值的设置方式

Border-bottom-left-radius:

水平半径值垂直半径值;

Border-bottom-right-radius:

设置右下角的圆角

格式:

一个值的设置方式

Border-bottom-right-radius:

水平和垂直半径值;

两个值的设置方式

Borde-bottom-right-radius:

水平半径值垂直半径值;

 

定位属性:

clip定位元素切割属性

auto默认不切割

rect矩形切割

Rect(上,右,下,左)

上值:

从上倒下切多少

下值:

从上到下留多少

左值:

从左到右切多少

右值:

从左到右留多少

注意:

当前属性仅在元素是绝对定位时有效。

尺寸属性:

Width:

设置元素内容的宽度

Height:

设置元素内容的高度

Max-width:

设置元素的最大宽度

Max-height:

设置元素的最大高度

当前元素没有内容时,高度为0,添加内容后,元素会变高,但是一旦达到了最大高度,则不再继续变大,内容会超过元素。

Min-width:

设置元素的最小宽度。

Min-height:

设置元素的最小高度

当元素没有内容或者内容高度没有达到最小高度时,元素默认为最小高度,一旦内容超过元素的最小高度,则会增加元素的高度用来包含内容。

注意:

min和max的宽度设置较少使用。

盒子大小:

Box-sizing:

设置接受宽高的盒子的位置

Content-box:

宽高为盒子的content部分设定(默认)

Border-box:

宽高为盒子的所有部分(border、padding、content)设定,增加边框或者padding都会使得content发生变化

文本修饰:

Text-decoration:

文本修饰属性

Text-decoration-line:

设定文本修饰线的位置

underline下划线overline上划线line-through删除线

text-decoration-color:

设定文本修饰线的颜色

Text-decoration-style:

设定文本修饰线的风格

值和边框的风格一样。

Text-shadow:

设置文字的阴影属性

格式:

text-shadow:

水平偏移垂直偏移模糊程度颜色。

盒子阴影

Box-shadow:

设置元素的阴影

格式:

box-shadow:

水平偏移垂直偏移模糊程度增大尺寸颜色内置阴影.

书写模式:

Writing-mode:

设置文本的书写方向

Lr-tb从左到右,从上到下书写

Tb-rl从上倒下,从右到左书写。

direction:

设置文本流的方向

ltr正常方向,从左到右

rtl从右到左

Unicode-bidi设置文本内容的显示方向

normal正常

Override-bidi:

设置和direction方向一致

用户界面:

Cursor设定鼠标的样式

值:

有很多

pointer小手

none原装箭头

move十字键头

Url(图片地址)xy,pointer

Ime-mode:

设置输入法切换方式

值:

auto任意切换输入法

disabled禁止切换输入法,只能输入英文

Outline轮廓线综合属性

Outline-style:

设置轮廓线的样式

值和边框样式一样。

Outline-width设置轮廓线的宽度

Outline-color设置轮廓线的颜色

Outline-offset设置轮廓线的偏移位置

注意:

默认位置为0,在边框之外,可以设置正数或者负数,向外或者向内移动轮廓线,常用在表单中。

Resize:

设置元素的可调整大小属性

none禁止调整大小除了textarea都是默认值

both可以水平和垂直方向调整textarea的默认值

horizontal水平方向可以调整

vertical垂直方向可以调整

text-overflow:

设置文本溢出的处理方式(文本本身)

Clip:

超出文字切割处理

Ellipsis:

超出部分变成...

Zoom:

设置元素的放大或者缩小倍数。

值为整数或者小数,用来表示扩大或者缩小的倍数。

尽量不要使用该属性改变元素大小。

User-select:

设定用户是否可以选中文本内容

none禁止选中所有内容

text仅允许选中文本

element可以选中文本单受范围约束

All:

可以选中所有内容

注意:

ie69-都无法实现该属性,但是可以使用事件解决,onselectstart=”returnfalse”

 

变换属性

Transform-origin:

设置元素的变换的原点位置

transform:

设置元素的变换属性

none不变换

rotate()设置元素的旋转角度

格式:

rotate(角度值)

scale()设置元素的缩放变换

格式:

scale(水平缩放倍数,垂直缩放倍数)

ScaleX()设置元素水平方向的缩放变换

格式:

scaleX(倍数)

ScaleY()设置元素的垂直方向缩放变换

格式:

scaleY(倍数)

Translate()设置元素的平移变化

格式:

translate(水平位移,垂直位移)

TranslateX()设置元素水平方向的平移变化

格式:

translateX(长度)

TranslateY()设置元素垂直方向的平移变化

格式:

translateY(长度)

Skew()设置元素在x轴和y轴的扭曲方式

格式:

skew(x轴角度,y轴角度)

SkewX()设置元素在x轴的扭曲方式

格式:

skewX(角度)

SkewY()设置元素在y轴的扭曲方式

格式:

skewY(角度)

matrix()矩阵变换

格式:

matrix(水平伸缩比例,纵向扭曲,横向扭曲,垂直伸缩比例,水平偏移量,垂直偏移量)

matrix的默认值为matrix(1,0,0,1,0,0)

 

过度属性:

transition设置元素的过度属性

格式:

Transition:

变换的属性变换的时间变换的方法延迟开始时间

格式:

Transition:

变换的属性变换的时间变换的方法延迟开始时间,

变换的属性变换的时间变换的方法延迟开始时间,

变换的属性变换的时间变换的方法延迟开始时间,

...

 

Transition-delay:

设置变换开始之前的等待时间(延迟)

Transition-duration:

变换的过度时间

Transition-property:

设置变换的css属性

none无属性参与过度

all制定所有css属性

某个属性

transition-timing-function:

设置变换的函数(方法)

linear线性过度

ease平滑过度

Ease-in由慢到快

Ease-out由快到慢

ease-in-out先慢在快再慢

动画属性:

Animation:

动画的综合属性设定

Animation-name:

设定动画的名称

注意,要和@keyframe语法一起使用

animation-duration:

设置动画的播放时间

值为时间,单位一般用秒

animation-timing-function:

设置动画的过度方式

linear线性过度

ease平滑过度

ease-in由慢到快

Ease-out由快到慢

ease-in-out由慢到快再到慢

cubic-bezier():

自定义贝塞尔曲线

animation-delay:

设置动画开始的延迟时间

值的开始播放动画之前的延迟事件

animation-iteration-count:

设定动画播放的次数

可以写整数次,也可以也infinite(无限次)

animation-direction:

动画播放的方式是否允许反向

normal正常,不反向

alternate可以反向播放

 

多列布局:

column-count:

设置列的数量

设置列数,宽度自动调整

column-width:

设置列的宽度

设置宽度,列数自动调整

column-gap:

设置列与列之间的间隙

值为长度单位

column-rule:

设置列与列之间的分割线的样式宽度和颜色

column-rule-style设置列与列之间的分割线的样式

solid实线

dashed虚线

double双线

和border的取值基本一致

column-rule-width设置列与列之间的分割线的宽度

column-rule-color设置列与列之间的分割线的颜色

column-fill:

设置每列的高度是否一致

Auto:

自动设置

Balance:

统一每列的高度

注意:

基本没浏览器支持.,

column-span:

设置元素的跨列属性

none不横跨所有列

all横跨所有列,一般用于标题设置

column-break-after:

在制定元素的列尾部设置是否断行

auto:

默认值,自动设定如果有空间就跟随

Always:

强制断行,不允许其他元素在该元素后跟随

column-break-before:

设置元素的头部是否断行

auto:

默认值,自动设定如果有空间就跟随

Always:

强制断行,不允许其他元素在该元素前跟随

column-break-inside:

暂不支持

Columns:

用于设置列的宽度或者列的数量属性

注意:

同时只能设置一个属性数量或者宽度,同时设置无效。

 

伸缩盒子模型

Flex-grow:

设置盒子的扩展比率

值是数字

每个元素的扩展空间=总剩余空间/(子元素比例和)*当前元素的比例;

Flex-shrink:

设置盒子的收缩比例

每个元素的收缩空间=总超出空间/(子元素的比例和)*当前元素的比例

Flex-direction:

设置子元素的排列方式

row横向排列

Row-reverse横向倒序排列

column纵向排列

Column-reverse纵向倒序排列

Flex-wrap:

设置超出的元素的换行方式

Nowrap:

不换航处理,伸缩子元素

Wrap:

超出的子元素换行

Wrap-reverse超出子元素反向换行(原行和超出行交换位置)

Flex-flow:

设置元素的换行及超出处理方式

格式:

flex-flow:

方向换行处理方式

Order:

设置子元素在伸缩盒子内的排列顺序

值为数字,可以正数可以负数,数值越大越靠后。

Align-items:

设置子元素的在纵轴方向的对齐方式

stretch拉伸子元素占满位置(默认)

Flex-start伸缩盒子的开始位置(注意方向)

Flex-end伸缩盒子的结束位置(注意方向)

center伸缩盒子的中间位置(注意方向)

baseline效果和flex-start基本一致

注意:

要设置在伸缩盒子的外层盒子上而非子元素上

Align-slef:

设置当前元素在伸缩盒子内的纵轴的对方i方式

auto默认值

stretch拉伸子元素占满位置

Flex-start伸缩盒子的开始位置(注意方向)

Flex-end伸缩盒子的结束位置(注意方向)

center伸缩盒子的中间位置(注意方向)

baseline效果和flex-start基本一致

注意:

要设置在伸缩盒子的子元素上而非外层盒子

Justify-content:

设置伸缩盒子的子元素的水平对齐方式

Flex-start伸缩盒子的开始位置

Flex-end伸缩盒子的结束位置

center伸缩盒子的中间位置

Space-between伸缩盒子的两端对齐位置

Space-around每个子元素平均分布在盒子中

Flex-basis设置元素的伸缩基准值

值为长度

如果元素的所有基准值超过总盒子的长度,所有子元素会按照基准值的比例伸缩子元素。

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > PPT模板 > 其它模板

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1