CSS常用属性及描述

合集下载

css属性分类介绍

css属性分类介绍

css属性分类介绍css属性分类介绍CSS分类⽬录1. ⽂本/字体/颜⾊1. ⽂本相关2. 字体相关3. 颜⾊相关4. 背景相关2. ⼤⼩/布局1. ⼤⼩属性2. margin 外边距3. padding 内边距4. border 边框5. position 定位3. 列表/表格1. 多列属性2. 可伸缩框属性3. 列表属性4. Grid属性5. Table属性4. 动画属性1. Animation 动画属性2. Transition 过渡属性CSS属性分类⽂本/字体/颜⾊/背景字体类1. font-family:指定字体1. 需要考虑客户端机器上是否装有字体2. 可以排列多个字体,⽤逗号分隔,如果有空格⽤引号分隔3. 最后⼀个建议放通⽤字体名,这个属性只有⼏个选项:serif | sans-serif | cursive | fantasy | monospace2. font-size:字体⼤⼩,要注意有绝对⼤⼩,相对⼤⼩,长度,百分⽐1. ⼀般建议采⽤相对⼤⼩,即em或者rem2. 典型的长度单位,详细信息请参考3. font-style:正常体、斜体、倾斜体4. font-weight:设置粗体5. font-variant:⽤来将所有字体都变成⼤写,但是原来是⼤写的字体呢⼜要⽐默认的要⼤⼀些6. font:1. 简写形式,如上所有跟字体相关的字体混合在⼀起2. font-family是必选的,⽽且⼀定要在最后;font-size如果有,必须出现在倒数第⼆个, 后⾯可以⽤/跟⼀个line-height的设置3. 剩下的font-style, font-weight, font-variant就⽆所谓了,前⾯任意排列4. font还⽀持⼀些类似caption, icon等快捷描述5. 详细请参考7. line-height:⼀个数字,默认差不多为1.2,有normal/数字/长度/百分⽐1. ⼀般建议使⽤纯数字, ⽤长度和百分⽐都在某些特殊情况下超出预期,即⼦元素的⾏⾼被⽗亲元素设置了,同时⼦元素还有默认的浏览器字体设置的场景。

CSS_style属性大全

CSS_style属性大全

CSS style属性大全显示:标签属性/属性行为集合事件滤镜方法对象样式一、标签属性属性描述ALIGN align 设置或获取表格排列。

ALLOWTRANSPARENCY allowTransparency 设置或获取对象是否可为透明。

APPLICATION APPLICATION 表明对象的内容是否为HTML 应用程序(HTA),以便免除浏览器安全模式。

ATOMICSELECTION 指定元素及其内容是否可以一不可见单位统一选择。

BEGIN begin 设置或获取时间线在该元素上播放前的延迟时间。

BORDER border 设置或获取框架间的空间,包括3D 边框。

canHaveChildren 获取表明对象是否可以包含子对象的值。

canHaveHTML 获取表明对象是否可以包含丰富的HTML 标签的值。

CLASS className 设置或获取对象的类。

contentWindow 获取指定的frame 或iframe 的window 对象。

DA TAFLD dataFld 设置或获取由dataSrc 属性指定的绑定到指定对象的给定数据源的字段。

DA TASRC dataSrc 设置或获取用于数据绑定的数据源。

disabled 获取表明用户是否可与该对象交互的值。

END end 设置或获取表明元素结束时间的值,或者元素设置为重复的简单持续终止时间。

firstChild 获取对象的childNodes 集合的第一个子对象的引用。

FRAMEBORDER frameBorder 设置或获取是否显示框架的边框。

hasMedia 获取一个表明元素是否为HTML+TIME 媒体元素的Boolean 值。

HEIGHT height 设置或获取对象的高度。

HIDEFOCUS hideFocus 设置或获取表明对象是否显式标明焦点的值。

HSPACE hspace 设置或获取对象的水平边距。

ID id 获取标识对象的字符串。

css属性大全中文对照表

css属性大全中文对照表

css属性⼤全中⽂对照表Aalign-content 规定弹性容器内的⾏之间的对齐⽅式,当项⽬不使⽤所有可⽤空间时。

align-items 规定弹性容器内项⽬的对齐⽅式。

align-self 规定弹性容器内所选项⽬的对齐⽅式。

all 重置所有属性(除了 unicode-bidi 和 direction)。

animation 所有 animation-* 属性的简写属性。

animation-delay 规定开始动画的延迟。

animation-direction 规定动画是向前播放、向后播放还是交替播放。

animation-duration 规定动画完成⼀个周期应花费的时间。

animation-fill-mode 规定元素在不播放动画时(在开始之前、结束之后、或同时)的样式。

animation-iteration-count 规定动画的播放次数。

animation-name 规定 @keyframes 动画的名称。

animation-play-state 规定动画是播放还是暂停。

animation-timing-function 规定动画的速度曲线。

Bbackface-visibility 定义当⾯对⽤户时元素的背⾯是否应可见。

background 所有 background-* 属性的简写属性。

background-attachment 设置背景图像是与页⾯的其余部分⼀起滚动还是固定的。

background-blend-mode 规定每个背景图层(颜⾊/图像)的混合模式。

background-clip 定义背景(颜⾊或图像)应在元素内延伸的距离。

background-color 规定元素的背景⾊。

background-image 规定元素的⼀幅或多幅背景图像。

background-origin 规定背景图像的初始位置。

background-position 规定背景图像的位置。

background-repeat 设置是否以及如何重复背景图像。

css教程菜鸟

css教程菜鸟

css教程菜鸟CSS(层叠样式表)是一种用于描述网页上的元素布局和样式的语言,它能够使网页更加美观和易于阅读。

本文将介绍一些CSS的基础知识和常用属性,以帮助菜鸟入门。

首先,让我们了解一下CSS的基本语法。

CSS由选择器和声明块组成。

选择器指定了要应用样式的HTML元素,而声明块则包含了一系列属性-值对,用于描述要应用到元素上的样式。

下面是一个简单的示例:```p {color: red;font-size: 20px;}```上述代码中,选择器“p”表示要应用样式的HTML段落元素。

声明块中的属性-值对指定了段落的文本颜色为红色,字体大小为20像素。

接下来,我们将介绍一些常用的CSS属性。

1. 字体属性:用于设置文本的字体样式,如字体大小、字体族等。

例如:```p {font-size: 16px;font-family: Arial, sans-serif;}```上述代码将段落的字体大小设置为16像素,字体族为Arial或者sans-serif。

2. 背景属性:用于设置元素的背景样式,如背景颜色、背景图片等。

例如:```body {background-color: lightblue;background-image: url("bg.jpg");}```上述代码将页面的背景颜色设置为浅蓝色,背景图片为名为“bg.jpg”的图片。

3. 边框属性:用于设置元素的边框样式,如边框宽度、边框颜色等。

例如:```div {border: 1px solid black;}```上述代码将`<div>`元素的边框宽度设置为1像素,边框颜色为黑色。

4. 盒模型属性:用于调整元素的尺寸和定位,如元素的宽度、高度、外边距等。

例如:```img {width: 200px;height: 150px;margin-top: 10px;}```上述代码将图片的宽度设置为200像素,高度设置为150像素,并且向上外边距10像素。

CSS常用属性大全

CSS常用属性大全

CSS常用属性一 CSS文字属性:color : #999999; /*文字颜色*/font-family : 宋体,sans-serif; /*文字字体*/font-size : 9pt; /*文字大小*/font-style:itelic; /*文字斜体*/font-variant:small-caps; /*小字体*/letter-spacing : 1pt; /*字间距离*/line-height : 200%; /*设置行高*/font-weight:bold; /*文字粗体*/vertical-align:sub; /*下标字*/vertical-align:super; /*上标字*/text-decoration:line-through; /*加删除线*/text-decoration: overline; /*加顶线*/text-decoration:underline; /*加下划线*/text-decoration:none; /*删除链接下划线*/text-transform : capitalize; /*首字大写*/text-transform : uppercase; /*英文大写*/text-transform : lowercase; /*英文小写*/text-align:right; /*文字右对齐*/text-align:left; /*文字左对齐*/text-align:center; /*文字居中对齐*/text-align:justify; /*文字分散对齐*/vertical-align属性vertical-align:top; /*垂直向上对齐*/vertical-align:bottom; /*垂直向下对齐*/vertical-align:middle; /*垂直居中对齐*/vertical-align:text-top; /*文字垂直向上对齐*/ vertical-align:text-bottom; /*文字垂直向下对齐*/ 二、CSS边框空白padding-top:10px; /*上边框留空白*/padding-right:10px; /*右边框留空白*/padding-bottom:10px; /*下边框留空白*/padding-left:10px; /*左边框留空白三、CSS符号属性list-style-type:none; /*不编号*/list-style-type:decimal; /*阿拉伯数字*/list-style-type:lower-roman; /*小写罗马数字*/list-style-type:upper-roman; /*大写罗马数字*/list-style-type:lower-alpha; /*小写英文字母*/list-style-type:upper-alpha; /*大写英文字母*/list-style-type:disc; /*实心圆形符号*/list-style-type:circle; /*空心圆形符号*/list-style-type:square; /*实心方形符号*/list-style-image:url(/dot.gif); /*图片式符号*/ list-style-position: outside; /*凸排*/list-style-position:inside; /*缩进*/四、CSS背景样式background-color:#F5E2EC; /*背景颜色*/background:transparent; /*透视背景*/background-image : url(/image/bg.gif); /*背景图片*/ background-attachment : fixed; /*浮水印固定背景*/ background-repeat : repeat; /*重复排列-网页默认*/ background-repeat : no-repeat; /*不重复排列*/background-repeat : repeat-x; /*在x轴重复排列*/ background-repeat : repeat-y; /*在y轴重复排列*/指定背景位置background-position : 90% 90%; /*背景图片x与y轴的位置*/ background-position : top; /*向上对齐*/background-position : buttom; /*向下对齐*/background-position : left; /*向左对齐*/background-position : right; /*向右对齐*/background-position : center; /*居中对齐*/五、CSS连接属性a /*所有超链接*/a:link /*超链接文字格式*/a:visited /*浏览过的链接文字格式*/a:active /*按下链接的格式*/a:hover /*鼠标转到链接*/鼠标光标样式:链接手指 CURSOR: hand十字体 cursor:crosshair箭头朝下 cursor:s-resize十字箭头 cursor:move箭头朝右 cursor:move加一问号 cursor:help箭头朝左 cursor:w-resize箭头朝上 cursor:n-resize箭头朝右上 cursor:ne-resize箭头朝左上 cursor:nw-resize文字I型 cursor:text箭头斜右下 cursor:se-resize箭头斜左下 cursor:sw-resize漏斗 cursor:wait光标图案(IE6) p {cursor:url(“光标文件名.cur”),text;} 六、CSS框线一览表border-top : 1px solid #6699cc; /*上框线*/border-bottom : 1px solid #6699cc; /*下框线*/border-left : 1px solid #6699cc; /*左框线*/border-right : 1px solid #6699cc; /*右框线*/以上是建议书写方式,但也可以使用常规的方式如下:border-top-color : #369 /*设置上框线top颜色*/border-top-width :1px /*设置上框线top宽度*/border-top-style : solid/*设置上框线top样式*/其他框线样式solid /*实线框*/dotted /*虚线框*/double /*双线框*/groove /*立体内凸框*/ridge /*立体浮雕框*/inset /*凹框*/outset /*凸框*/七、CSS表单运用文字方块按钮复选框选择钮多行文字方块下拉式菜单选项1选项2八、CSS边界样式margin-top:10px; /*上边界*/margin-right:10px; /*右边界值*/margin-bottom:10px; /*下边界值*/margin-left:10px; /*左边界值*/九、CSS滤镜属性Filter:在样式中加上滤镜特效。

css3 手册所有

css3 手册所有

css3 手册所有一、引言CSS(层叠样式表)是一种用于描述文档样式的标记语言,具体包括字体、颜色、布局等方面的样式定义。

CSS3是CSS的最新版本,是Web开发中常用的样式定义语言之一。

本手册将详细介绍CSS3的各项属性及其使用方法。

二、选择器1. 元素选择器元素选择器是CSS中最常用的选择器之一,通过元素名称来选择文档中的元素。

例如,使用`p`选择器可以选择所有的`<p>`标签。

2. 类选择器类选择器用于选择带有特定类名的元素。

通过在类名前面加上点号(.),例如`.red`,可以选择具有`red`类的元素。

3. ID选择器ID选择器用于选择具有特定ID的元素。

通过在ID名称前面加上井号(#),例如`#header`,可以选择具有`header`的ID的元素。

4. 属性选择器属性选择器用于选择具有特定属性值的元素。

通过在属性名前加上方括号([]),例如`[type="text"]`,可以选择type属性值为"text"的元素。

5. 伪类选择器伪类选择器用于选择元素的特殊状态。

常见的伪类选择器有`hover`、`active`和`visited`等。

6. 伪元素选择器伪元素选择器用于在文档中添加不存在的元素并为其添加样式。

常见的伪元素选择器有`::before`和`::after`等。

三、文本样式1. 字体可以使用`font-family`属性设置元素的字体。

例如,`font-family: Arial, sans-serif;`可以设置字体为Arial。

2. 颜色可以使用`color`属性设置元素的文本颜色。

例如,`color: red;`可以将文本颜色设置为红色。

3. 背景可以使用`background-color`属性设置元素的背景颜色。

例如,`background-color: #f1f1f1;`可以将背景颜色设置为浅灰色。

四、盒子模型1. 尺寸可以使用`width`和`height`属性设置元素的宽度和高度。

CSS帮助手册

CSS帮助手册

CSS帮助手册2篇CSS帮助手册(上)CSS(层叠样式表)是一种用于描述网页中元素的样式和布局的标记语言。

它通过为HTML元素添加样式,实现了网页的美化和个性化。

本篇文章将为大家介绍CSS的基本语法、选择器和常用样式属性。

一、CSS基本语法CSS的语法由选择器和声明块组成。

选择器用于选择需要添加样式的HTML元素,而声明块则包含了一系列样式属性和值。

1. 选择器选择器是CSS中最重要的部分,它用于指定需要应用样式的HTML元素。

常见的选择器有:- 元素选择器:通过HTML元素的标签名选择元素,如`p`表示所有`<p>`元素。

- 类选择器:通过HTML元素的`class`属性选择元素,如`.red`表示所有`class`为red的元素。

- ID选择器:通过HTML元素的`id`属性选择元素,如`#header`表示`id`为header的元素。

- 属性选择器:通过HTML元素的属性选择元素,如`[type="text"]`表示所有`type`属性为text的元素。

- 伪类选择器:通过HTML元素的特殊状态选择元素,如`:hover`表示鼠标悬停时的元素。

2. 声明块声明块由一对花括号`{}`包裹,每个声明由属性和值构成。

属性用于指定需要修改的样式,值用于指定属性的具体取值。

例如,下面的CSS代码将为所有`<p>`元素设置红色字体:```cssp {color: red;}```二、常用的CSS样式属性CSS提供了众多样式属性,可以用来修改HTML元素的外观和布局。

以下是常用的样式属性及其作用:1. 字体样式- `color`:用于设置文本颜色,值可以是颜色名称或RGB值。

- `font-size`:用于设置字体大小,值可以是像素、百分比或者其他单位。

- `font-family`:用于设置字体样式,值可以是字体名称或者字体族名称。

2. 边框样式- `border`:用于设置边框样式,属性值由边框宽度、边框样式和边框颜色组成。

Css div 常用CSS标签及属性

Css div 常用CSS标签及属性

Css+div总结的一些常用CSS标签及属性CSS中的长度绝对单位:几乎不用在网页中in 英寸 1in = 2.54cmcm 厘米 1cm = 0.394inpt 磅 1in = 72ptpc pica 1in = 6pc相对单位:较常用em 1em = 相应字体的font-size值ex 1ex = 相应字体中的小写x字母的高度值,较难求得,一般取0.5em px 最为常用的CSS中的元素分类display 设定元素所属类别,不可继承none(设定为不显示在屏幕上)block(块级元,包括 P,H1-H6,list,div,body)inline(内联元,包括 a,em,span)list-item(列表元,如 LI)颜色与背景类color 设置文字颜色#rgb #rrggbb rgb(255,255,255) rgb(100%,100%,100%)H1{color:red}H1{color:#f00}H1{color:#ff0000}H1{color:rgb(255,0,0)}H1{color:rgb(100%,0%,0%)}background-color 设置背景颜色,格式同上;不可继承,可用于所有元BODY{background-color:red}BODY{background-color:#f00}BODY{background-color:#ff0000}BODY{background-color:rgb(255,0,0)}BODY{background-color:rgb(100%,0%,0%)}background-image 设置背景图片,默认为none,不可继承,可用于所有元url(imageURL) nonebody{backround-image:url(back.jpg);}background-repeat 设置背景图片是否重复排列,不可继承,用于所有元repeat(XY轴均重复) repeat-x(X轴重复排列) repeat-y(Y轴重复排列) No-repeat(不重复排列,默认值)BODY{background-repeat:repeat-x;}BODY{background-repeat:No-repeat;}background-attachment 设定背景图片是否卷动,不可继承,用于所有元scroll(随网页卷动,默认值) fixed(不随网页卷动)BODY{background-attachment:fixed;}background-position 设定背景图片或背景颜色开始显示的位置,不可继承,用于块级元和可替换元top,buttom,left,right,center(用关键字)70px 10px(用长度值)50% 30%(用百分比)BODY{background-position:right top;}BODY{background-position:50px 10px;}BODY{background-position:20% 50%;}background 定义背景综合属性,不要求顺序,各属性值以空格分开BODY{background:#ffcc00 url(bg.jpg) fixed center}字型类font-family 设置字型属性,取值可以是任何字型名称,缺省为浏览器内定字型,可以设多个以逗号(,)分开,有空格的英文字型可用单引号或双引号括起来。

CSS常用样式属性大全

CSS常用样式属性大全

CSS常用样式属性大全1. 文本属性- `color`:设置文本颜色- `font-size`:设置字体大小- `font-family`:设置字体系列- `font-weight`:设置字体粗细- `text-align`:设置文本对齐方式- `text-decoration`:设置文本装饰(如下划线、删除线等)- `text-transform`:设置文本大小写转换2. 背景属性- `background-color`:设置背景颜色- `background-image`:设置背景图片- `background-repeat`:设置背景图片的重复方式- `background-position`:设置背景图片的位置- `background-size`:设置背景图片的尺寸3. 边框属性- `border`:设置元素边框样式、宽度和颜色- `border-radius`:设置元素边框的圆角- `border-color`:设置元素边框的颜色- `border-width`:设置元素边框的宽度4. 布局属性- `display`:设置元素的显示方式(如块级、内联等)- `width`:设置元素的宽度- `height`:设置元素的高度- `margin`:设置元素外边距- `padding`:设置元素内边距- `float`:设置元素的浮动方式5. 盒模型属性- `box-sizing`:设置元素的盒模型计算方式- `overflow`:设置元素溢出内容的处理方式- `position`:设置元素的定位方式- `top`:设置定位元素的上边距- `bottom`:设置定位元素的下边距- `left`:设置定位元素的左边距- `right`:设置定位元素的右边距以上是CSS中常用的样式属性,通过合理使用这些属性可以实现各种各样的页面效果。

在编写CSS代码时,建议将样式属性单独分行展示,以增加代码的可读性和维护性。

css属性大全

css属性大全

css属性大全CSS属性大全。

CSS(Cascading Style Sheets)是一种用来为网页添加样式和布局的样式表语言。

它可以控制网页的字体、颜色、间距、边框、背景等各种样式,是网页设计中不可或缺的一部分。

在这篇文档中,我们将详细介绍CSS中的各种属性,帮助您更好地掌握CSS的应用。

1. 字体属性。

字体属性用于设置网页中文本的字体样式、大小、粗细等。

常用的属性包括font-family(设置字体系列)、font-size(设置字体大小)、font-weight(设置字体粗细)、font-style(设置字体样式)等。

2. 文本属性。

文本属性用于设置文本的对齐方式、行高、间距等。

常用的属性包括text-align(设置文本对齐方式)、line-height(设置行高)、letter-spacing(设置字符间距)、word-spacing(设置单词间距)等。

3. 背景属性。

背景属性用于设置网页元素的背景样式。

常用的属性包括background-color(设置背景颜色)、background-image(设置背景图片)、background-repeat(设置背景重复方式)、background-position(设置背景位置)等。

4. 边框属性。

边框属性用于设置网页元素的边框样式。

常用的属性包括border-width(设置边框宽度)、border-style(设置边框样式)、border-color(设置边框颜色)、border-radius(设置边框圆角)等。

5. 盒模型属性。

盒模型属性用于设置网页元素的尺寸、内边距、外边距等。

常用的属性包括width(设置元素宽度)、height(设置元素高度)、padding(设置内边距)、margin(设置外边距)等。

6. 定位属性。

定位属性用于设置网页元素的位置。

常用的属性包括position(设置定位方式)、top(设置元素顶部位置)、left(设置元素左侧位置)、z-index(设置元素层级)等。

css 总结

css 总结

css 总结CSS是网页设计中不可或缺的基础技术之一,它实现了网页的布局、样式和交互效果等方面的功能。

对于前端开发人员来说,掌握CSS 的基本知识和技巧非常重要,下面就对CSS进行一些简单的总结。

一、基本语法CSS代码由选择器和声明块组成,选择器用于确定需要应用样式的元素,而声明块则包含一个或多个属性和对应的值。

例如:```h1 {color: red;font-size: 24px;}```上面的代码使用了h1选择器,表示应用样式到网页中所有的h1元素。

花括号内是声明块,其中color和font-size是两个属性,而red和24px则是对应属性的值。

二、选择器CSS中有各种各样的选择器,用于指定需要应用样式的元素。

下面列出一些常见的选择器:- 标签选择器:根据元素的标签名来选择元素,如div、p、h1等;- 类选择器:根据元素的class属性来选择元素,用“.”加类名表示,如.class;- ID选择器:根据元素的id属性来选择元素,用“#”加id名称表示,如#id;- 伪类选择器:可以根据元素的状态来选择元素,如:hover表示当鼠标放在元素上方时的状态;- 后代选择器:可以通过两个或多个选择器的组合来选择元素,如divp表示选择div元素下的所有p元素。

三、基本样式属性CSS中有众多的样式属性,下面列出一些常用的基本样式属性:- color:设置文字的颜色,可以使用颜色名称、16进制RGB值或RGB值;- font-size:设置文字大小,可以使用像素、em、rem单位等;- background:设置元素的背景,可以设置颜色或背景图片等;- border:设置元素的边框,可以设置边框颜色、粗细和样式等;- margin:设置元素的外边距,可以设置上下左右四个方向的外边距;- padding:设置元素的内边距,可以设置上下左右四个方向的内边距。

四、盒模型CSS中的盒模型指的是网页中的元素在样式效果下所占的空间范围。

CSS中常用的五种编辑属性

CSS中常用的五种编辑属性

CSS中常⽤的五种编辑属性CSS 字体属性属性描述font 简写属性。

作⽤是把所有针对字体的属性设置在⼀个声明中。

font-family 设置字体系列。

font-size 设置字体的尺⼨。

font-style 设置字体风格。

font-variant 以⼩型⼤写字体或者正常字体显⽰⽂本。

font-weight 设置字体的粗细。

CSS ⽂本属性属性描述color 设置⽂本颜⾊direction 设置⽂本⽅向。

line-height 设置⾏⾼。

letter-spacing 设置字符间距。

text-align 对齐元素中的⽂本。

text-decoration 向⽂本添加修饰。

text-indent 缩进元素中⽂本的⾸⾏。

text-transform 控制元素中的字母。

unicode-bidi 设置⽂本⽅向。

white-space 设置元素中空⽩的处理⽅式。

word-spacing 设置字间距。

CSS 边框属性属性描述border 简写属性,⽤于把针对四个边的属性设置在⼀个声明。

border-style ⽤于设置元素所有边框的样式,或者单独地为各边设置边框样式。

border-width 简写属性,⽤于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。

border-color 简写属性,设置元素的所有边框中可见部分的颜⾊,或为 4 个边分别设置颜⾊。

border-bottom 简写属性,⽤于把下边框的所有属性设置到⼀个声明中border-left 简写属性,⽤于把左边框的所有属性设置到⼀个声明中。

border-right 简写属性,⽤于把右边框的所有属性设置到⼀个声明中。

border-top 简写属性,⽤于把上边框的所有属性设置到⼀个声明中。

CSS 列表属性(list)属性描述list-style 简写属性。

⽤于把所有⽤于列表的属性设置于⼀个声明中。

list-style-image 将图象设置为列表项标志。

CSS3常用属性大全

CSS3常用属性大全

CSS3动画属性(Animation)@keyframes//规定动画。

animation//所有动画属性的简写属性,除了animation-play-state属性。

animation-name//规定@keyframes动画的名称。

animation-duration//规定动画完成一个周期所花费的秒或毫秒。

animation-timing-function//规定动画的速度曲线。

animation-delay//规定动画何时开始。

animation-iteration-count//规定动画被播放的次数。

animation-direction//规定动画是否在下一周期逆向地播放。

animation-play-state//规定动画是否正在运行或暂停。

animation-fill-mode//规定对象动画时间之外的状态。

CSS背景属性(Background)background-attachment//设置背景图像是否固定或者随着页面的其余部分滚动。

background //在一个声明中设置所有的背景属性。

background-color //设置元素的背景颜色。

background-image //设置元素的背景图像。

background-position //设置背景图像的开始位置。

background-repeat //设置是否及如何重复背景图像。

background-clip //规定背景的绘制区域。

background-origin //规定背景图片的定位区域。

background-size //规定背景图片的尺寸。

CSS边框属性(Border和Outline)border //在一个声明中设置所有的边框属性。

border-bottom //在一个声明中设置所有的下边框属性。

border-bottom-color //设置下边框的颜色。

border-bottom-style //设置下边框的样式。

CSS属性大全

CSS属性大全

CSS属性⼤全1. ⽂字属性「字体族科」(font-family),设定时,需考虑浏览器中有⽆该字体。

「字体⼤⼩」(font-size),注意度量单位。

《绝对⼤⼩》|《相对⼤⼩》|《长度》|《百分⽐》(⼀般设置双数)「字体加粗」(font-weight),除了 normal(正常)、bold(粗体)、bolder(特粗)、lighter(细体)外,还有9种以像素为度量为单位的设置⽅式(100,200,300,400,500,600,700,800,900)。

「字体风格」(font-style),也就是字型。

(normal : 正常的字体italic : 斜体。

对于没有斜体变量的特殊字体,将应⽤obliqueoblique : 倾斜的字体)「字体变形」(font-variant),字体变形属性决定了字体显⽰是normal (普通) ,还是Small-caps(⼩型⼤写字母)当⽂字中所有字母都是⼤写的时候,⼩型⼤写字母(值)会显⽰⽐⼩写字母稍⼤的⼤写字符。

「字体」(font),《字体风格》|《字体变形》|《字体加粗》|《字体⼤⼩》|《⾏⾼》|《字体族科》2. ⽂本属性「⽂字间距」(word-spacing),主要⽤于控制⽂字间相隔的距离。

有正常(normal)和值(⾃定义间隔值)两种选择⽅式。

「字母间距」(letter-spacing),其作⽤与字符间距类似,也有正常(normal)和值(⾃定义间隔值)两种选择⽅式。

「垂直对齐」(vertical-align),控制⽂字或图像相对于其母体元素的垂直位置。

如将⼀个2×3像素的GIF图像同其母体元素⽂字的顶部垂直对齐,则该GIF图像将在该⾏⽂字的顶部显⽰。

共有基线(baseline,将元素的基准线同母体元素的基准线对齐)、下标(sub,将元素以下标的形式显⽰),上标(super,将元素以上标的形式显⽰)、顶部(top ,将元素顶部同最⾼的母体元素对齐)、⽂本顶对齐(text-top,将元素的顶部同母体元素⽂字的顶部对齐)、中线对齐(middle,将元素的中点同母体元素的中点对齐)、底部(bottom,将元素的底部同最低的母体元素对齐)及值(⾃定义)等9种选择。

常用的CSS属性的英文单词总结及用法、解释

常用的CSS属性的英文单词总结及用法、解释
padding -内边界:确定围绕块元素的空格填充数量,其中包含4个属性“padding-top控制上留白的宽度、padding-right控制右留白的宽度、padding-bottom控制下留白宽度、padding-left控制左留白的宽度。
2、边框
border-width -宽 :控制边框的宽度,其中分为4个属性:border-top-width顶边框的宽度、border-right-width右边框的宽度、border-bottom-width底边框的宽度、border-left-width左边框的宽度。
blue 蓝色 bug 软件程序中的错误
body 主体,一个HTML 标记 building 建立
bold 粗体 button 按钮
anchor 锚记<a>标记是这个单词的缩写 anchor 锚记<a>标记是这个单词的缩写
arrow 箭头 arrow 箭头
auto 自动 auto 自动
text-align - 文本对齐:设置块的水平对齐方式。共有左对齐(left)、右对齐(right)、居中(center)和均分(justify)等4种选择。
text-indent - 文字缩进:控制块的缩进程度。
white-space -空白间距:在HTML中,空格是被省略的;在CSS中则使用属性(white-space)控制空格的输入。共有正常(normal)、保留(pre)和不换行(nowrap)等3种选择。
B
background 背景 border 边框
banner 页面上的一个横条 both 二者都是clear 属性的一个属性值
background-attachment - 附加:用于控制背景图像是否会随页面的滚动而一起滚动。有固定(fixd,文字滚动时,背景图像保质固定)和滚动(scroll,背景图像随文字内容一起滚动)两种选择。

常用css样式

常用css样式

常用css样式常用CSS样式CSS是一种用于网页设计的样式表语言,它可以为网页添加样式和布局,使其看起来更美观和易于导航。

以下是常用的CSS样式。

一、文本样式1.字体大小使用font-size属性可以设置文本的大小,单位可以是像素(px)、百分比(%)或em。

例如:p {font-size: 16px;}2.字体颜色使用color属性可以设置文本的颜色,可以使用颜色名称或十六进制值。

例如:p {color: red;}3.字体样式使用font-style属性可以设置文本的样式,包括normal(默认)、italic(斜体)和oblique(倾斜)。

例如:p {font-style: italic;}4.字体粗细使用font-weight属性可以设置文本的粗细程度,包括normal(默认)、bold(加粗)和lighter(细)。

例如:p {font-weight: bold;}5.行高使用line-height属性可以设置文本行与行之间的距离。

例如:p {line-height: 1.5;}二、背景样式1.背景颜色使用background-color属性可以设置元素的背景颜色,可以使用颜色名称或十六进制值。

例如:div {background-color: #f0f0f0;}2.背景图片使用background-image属性可以为元素添加背景图片,可以使用相对或绝对路径。

例如:div {background-image: url("bg.jpg");}3.背景重复使用background-repeat属性可以设置背景图片的重复方式,包括repeat(默认)、repeat-x、repeat-y和no-repeat。

例如:div {background-repeat: no-repeat;}4.背景位置使用background-position属性可以设置背景图片的位置,可以使用关键字(如top、bottom、left和right)或像素值。

第11讲 CSS常用属性

第11讲 CSS常用属性
• 在CSS代码中,使用font-family属性可以设置字体 族,设置语法如下:
font-family: 字体族1,字体族2,...,通用字体族 | inherit;
• font-family的各个取值含义如下表所示:
设置了多个字体族时,浏览器显示文本内容 时将按指定的字体的先后顺序选择其中一个 字体,即首先会检查浏览器是否支持第一个 字体,如果支持,则选择该字体,否则按书 写顺序检查第二个字体,依此类推。
line-height: normal|number|length|百分数| inherit;
• 语法说明:
✓ “normal”表示使用默认行高,为默认值。 ✓ “number”表示不带任何单位的某个数字。行间距等于
此数字与当前的字体尺寸相乘的结果。 ✓“length”表示以 px|em|pt 为单位的某个数值。 ✓ “百分数”表示相对于当前字体大小的百分数。100%
1. color属性
• 在CSS代码中,使用color属性设置文本颜色,设置语 法如下:
color:颜色英文单词|颜色的十六进制数|颜色的rgb值|inherit;
• 语法说明:
CSS3还可以设置 rgba值
✓ rgb使用:rgb(num,num,num)格式来表示颜色,其中r
代表红色,g代表绿色,b代表蓝色,小括号里的3个num分
3. font-size属性
• 在CSS代码中,使用font-size属性可以设置字体的大 小,设置语法如下:
font-size: medium | length | 百分数 | inherit;
• font-size的各个取值含义如下表所示:
em和%单位 具有可伸缩性, 1em=100%
4. font-family属性
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
在一个声明中设置所有字体属性。
1
font-family
字体名称
规定文本的字体系列。
1
font-size
最常用的是pt和px
规定文本的字体尺寸。
.s2 {font-size:12pt}
1
font-style
normal, italic
规定文本的字体样式。
1
font-variant
normal是缺省值。small-caps表示小的大写字体
span{display: block}
1
float
left元素向左浮动。
right元素向右浮动。
none默认值。元素不浮动,并会显示在其在文本中出现的位置。
规定框是否应该浮动。
1
position
absolute生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。
元素的位置通过"left", "top", "right"以及"bottom"属性进行规定。
在一个声明中设置所有的单边框属性。单边边框属性
上下左右四个边框不但可以统一设定,也可以分开设定。
1
outline
在一个声明中设置所有的轮廓属性。轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
2
outline-color
颜色值
设置轮廓的颜色。
2
outline-style
规定文本块首行的缩进。
1
text-transform
none默认。定义带有小写字母和大写字母的标准的文本。
capitalize文本中的每个单词以大写字母开头。
uppercase定义仅有大写字母。
lowercase定义无大写字母,仅有小写字母。
控制文本的大小写。
1
CSS字体属性(Font)
属性

描述
CSS
规定文本的字体样式。
1
font-weight
bold
规定字体的粗细。
1
CSS外边距属性(Margin)
属性

描述
CSS
margin
可以为上下左右边距设置相同的宽度。示例入下:
.d1 {margin:1cm}
也可以分别设置边距,顺序是上,右,下,左。示例如下:
.d1 {margin:1cm 2cm 3cm 4cm}
border-width:0 1px;
1
border-top, border-top-width, border-top-style, border-top-color。
border-bottom, border-bottom-width, border-bottom-style, border-bottom-color。
属性

描述
CSS
height
使用px、cm等单位定义
设置元素高度。
1
max-height
使用px、cm等单位定义
设置元素的最大高度。
2
max-width
使用px、cm等单位定义
设置元素的最大宽度。
2
min-height
使用px、cm等单位定义
设置元素的最小高度。
2
min-width
使用px、cm等单位定义
right (居右)
center (居中)
justify (两端对齐)
规定文本的水平对齐方式。
1
text-decoration
none (无,缺省值)
underline (下划线)
overline (上划线)
line-through (当中划线)
规定添加到文本的装饰效果。
1
text-indent
使用px、cm等单位定义
fixed生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过"left", "top", "right"以及"bottom"属性进行规定。
relative生成相对定位的元素,相对于其正常位置进行定位。
因此,"left:20"会向元素的LEFT位置添加20像素。
static默认值。没有定位,元素出现在正常的流中(忽略top, bottom, left, right或者z-index声明)。
scroll,fixed
设置背景图像是否固定或者随着页面的其余部分滚动。
1
background-color
颜色值
设置元素的背景颜色。背景属性都不能继承
1
background-image
url('URL')
设置元素的背景图像。
1
background-position
center,top,
bottom,right,left
circle (空心圆点)
square (小黑方块)
decimal (数字排序)
lower-roman (小写罗马字排序)
upper-roman (大写罗马字排序)
lower-alpha (小写字母排序)
upper-alpha (大写字母排序)
none (无列表项标记)
设置列表项标记的类型。
1
CSS尺寸属性(Dimension)
设置元素的下内边距。
1
padding-left
使用px、cm等单位定义
设置元素的左内边距。
1
padding-right
使用px、cm等单位定义
设置元素的右内边距。
1
padding-top
使用px、cm等单位定义
设置元素的上内边距。
1
CSS列表属性(List)
属性

描述
CSS
list-style
list-style:squareinside url('/i/arrow.gif');
在一个声明中设置所有外边距属性。顺序是上,右,下,左。
margin:10px 5px;
上外边距和下外边距是10px
右外边距和左外边距是5px
margin:0px auto是居中对齐
1
margin-bottom
使用px、cm等单位定义
设置元素的下外边距。
1
margin-left
使用px、cm等单位定义
inset定义3D凹边轮廓。此效果取决于outline-color值。
outset定义3D凸边轮廓。此效果取决于outline-color值。
inherit规定应该从父元素继承轮廓样式的设置。
设置轮廓的样式。
2
outline-width
使用px、cm等单位定义
设置轮廓的宽度。
2
CSS文本属性(Text)
img
{
float:left;
clear:both;
}
1
display
none此元素不会被显示。
block此元素将显示为块级元素,此元素前后会带有换行符。
inline默认。此元素会被显示为内联元素,元素前后没有换行符。
规定元素应该生成的框的类型。
p {display: inline}
li {display:inline}
设置元素的左外边距。
1
margin-right
使用px、cm等单位定义
设置元素的右外边距。
1
margin-top
使用px、cm等单位定义
设置元素的上外边距。
1
CSS内边距属性(Padding)
属性

描述
CSS
padding
可以为上下左右间隙设置相同的宽度。示例入下:
.d1 {padding:1cm}
none默认。定义无轮廓。
dotted定义点状的轮廓。
dashed定义虚线轮廓。
solid定义实线轮廓。
double定义双线轮廓。双线的宽度等同于outline-width的值。
groove定义3D凹槽轮廓。此效果取决于outline-color值。
ridge定义3D凸槽轮廓。此效果取决于outline-color值。
double (双线式边框)
groove (槽线式边框)
ridge(脊线式边框)
inset (内嵌效果的边框)
outset (突起效果的边框)
设置四条边框的样式。
1
border-color
颜色值
设置四条边框的颜色。
1
border-width
使用px、cm等单位定义
设置四条边框的宽度。
若设置两个数,则第一个数为上下,第二个数为左右。如:
在一个声明中设置所有的列表属性。
1
list-style-image
url("arrow.gif")
将图象设置为列表项标记。
1
list-style-position
outside (以列表项内容为准对齐)
inside (以列表项标记为准对齐)
设置列表项标记的放置位置。
1
list-style-type
disc (缺省值,黑圆点)
border-left, border-left-width, border-left-style, border-left-color。
border-right, border-right-width, border-right-style, border-right-color。
使用px、cm等单位定义
设置背景图像的开始位置。top、bottom、left、right和center。
相关文档
最新文档