CSS常用文本属性
- 格式:doc
- 大小:41.00 KB
- 文档页数:4
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定义字体、颜⾊、背景等属性•字体属性•字体font-family:"字体1","字体2",... 例:font-family:“宋体”;•字号font-size:⼤⼩的取值例:font-size:16px; 注意:xx-small:绝对字体尺⼨,最⼩。
x-small:绝对字体尺⼨,较⼩。
medium:绝对字体尺⼨,正常默认值。
对应还有large、x-large、xx-large等。
larger:相对字体尺⼨,相对于⽗对象中字体尺⼨进⾏相对增⼤。
smaller:相对字体尺⼨,相对于⽗对象中字体尺⼨进⾏相对减⼩。
length:可采⽤百分⽐或长度值,不可为负值,其百分⽐取值是基于⽗对象中字体的尺⼨。
•字体风格font-style:样式的取值例:font-style:normal .normal是默认的正常字体;italic以斜体显⽰⽂字;oblique属于中间状态,以偏斜体显⽰。
•加粗字体font-weight:字体粗细值例:font-weight:normal. 其中normal表⽰正常粗细;bold表⽰粗体;bolder表⽰特粗体;lighter表⽰特细体;number不是真正的取值,其范围是100~900,⼀般情况下都是整百的数字,如200、300等。
•⼩写字母转化为⼤写font-variant:取值例:font-variant:small-caps;能将⼩写的英⽂字母转化为⼤写字母且字体较⼩。
另⼀个normal,表⽰正常显⽰。
•CSS中可采⽤复合样式,来简化代码,如:.h{font-family:"宋体"; font-weight:bold; font-style:italic;}•颜⾊和背景属性•颜⾊属性color:颜⾊取值例:color:red。
color可以⽤关键字或者⼀个⼗六进制的RGB值。
color:#ff0000 表⽰红⾊ color:#ffff00 表⽰黄⾊ color:#000099 表⽰蓝⾊关键字就是颜⾊的英⽂名称,如red,green,blue,分别表⽰红、绿、蓝。
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文字属性: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:在样式中加上滤镜特效。
CSS 网页样式大全字体属性:(font)大小font-size: x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD样式font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)行高line-height: normal;(正常) 单位:PX、PD、EM粗细font-weight: bold;(粗体) lighter;(细体) normal;(正常)变体font-variant: small-caps;(小型大写字母) normal;(正常)大小写text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)修饰text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁) 常用字体:(font-family)"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana背景属性:(background)色彩background-color: #FFFFFF;图片background-image: url();重复background-repeat: no-repeat;滚动background-attachment: fixed;(固定) scroll;(滚动)位置background-position: left(水平) top(垂直);简写方法background:#000 url(..) repeat fixed left top;区块属性:(Block)字间距letter-spacing: normal; 数值对齐text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中)缩进text-indent: 数值px;垂直对齐vertical-align: baseline;(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;词间距word-spacing: normal; 数值空格white-space: pre;(保留) nowrap;(不换行)显示display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题)方框属性:(Box)width:; height:; float:; clear:both; margin:; padding:; 顺序:上右下左边框属性:(Border)border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;border-width:; 边框宽度border-color:#;简写方法border:width style color;列表属性:(List-style)类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;位置list-style-position: outside;(外) inside; 图像list-style-image: url(..);定位属性:(Position)Position: absolute; relative; static; visibility: inherit; visible; hidden; overflow: visible; hidden; scroll; auto; clip: rect(12px,auto,12px,auto) (裁切)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;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; background-repeat : repeat-y;指定背景位置background-position : 90% 90%; background-position : top; background-position : buttom; background-position : left; background-position : right; background-position : center;五、CSS连接属性:aa:linka:visiteda:activea: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 : #369border-top-width :1pxborder-top-style : solid其他框线样式soliddotteddoublegrooveridgeinsetoutset七、CSS表单运用:文字方块按钮复选框选择钮多行文字方块下拉式菜单选项1选项2八、CSS边界样式:margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px;CSS 属性:字体样式(Font Style)序号中文说明标记语法1 字体样式{font:font-style font-variant font-weight font-size font-family}2 字体类型{font-family:"字体1","字体2","字体3",...}3 字体大小{font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}4 字体风格{font-style:inherit|italic|normal|oblique}5 字体粗细{font-weight:100-900|bold|bolder|lighter|normal;}6 字体颜色{color:数值;}7 阴影颜色{text-shadow:16位色值}8 字体行高{line-height:数值|inherit|normal;}9 字间距{letter-spacing:数值|inherit|normal}10 单词间距{word-spacing:数值|inherit|normal}11 字体变形{font-variant:inherit|normal|small-cps }12 英文转换{text-transform:inherit|none|capitalize|uppercase|lowercase}13 字体变形{font-size-adjust:inherit|none}14 字体{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal|semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}文本样式(Text Style)序号中文说明标记语法1 行间距{line-height:数值|inherit|normal;}2 文本修饰{text-decoration:inherit|none|underline|overline|line-through|blink}3 段首空格{text-indent:数值|inherit}4 水平对齐{text-align:left|right|center|justify}5 垂直对齐{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}6 书写方式{writing-mode:lr-tb|tb-rl}背景样式序号中文说明标记语法1 背景颜色{background-color:数值}2 背景图片{background-image: url(URL)|none}3 背景重复{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4 背景固定{background-attachment:fixed|scroll}5 背景定位{background-position:数值|top|bottom|left|right|center}6 背影样式{background:背景颜色|背景图象|背景重复|背景附件|背景位置}框架样式(Box Style)序号中文说明标记语法1 边界留白{margin:margin-top margin-right margin-bottom margin-left}2 补白{padding:padding-top padding-right padding-bottom padding-left}3 边框宽度{border-width:border-top-width border-right-width border-bottom-width border-left-width}宽度值:thin|medium|thick|数值4 边框颜色{border-color:数值数值数值数值}数值:分别代表top、right、bottom、left 颜色值5 边框风格{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}6 边框{border:border-width border-style color}上边框{border-top:border-top-width border-style color}右边框{border-right:border-right-width border-style color}下边框{border-bottom:border-bottom-width border-style color}左边框{border-left:border-left-width border-style color}7 宽度{width:长度|百分比| auto}8 高度{height:数值|auto}9 漂浮{float:left|right|none}10 清除{clear:none|left|right|both}分类列表序号中文说明标记语法1 控制显示{display:none|block|inline|list-item}2 控制空白{white-space:normal|pre|nowarp}3 符号列表{list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}4 图形列表{list-style-image:URL}5 位置列表{list-style-position:inside|outside}6 目录列表{list-style:目录样式类型|目录样式位置|url}7 鼠标形状{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}。
CSS 网页样式大全如下:字体属性:(font)大小font-size: x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD样式font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)行高line-height: normal;(正常) 单位:PX、PD、EM粗细font-weight: bold;(粗体) lighter;(细体) normal;(正常)变体font-variant: small-caps;(小型大写字母) normal;(正常)大小写text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)修饰text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)常用字体:(font-family)"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana背景属性:(background)色彩background-color: #FFFFFF;图片background-image: url();重复background-repeat: no-repeat;滚动background-attachment: fixed;(固定) scroll;(滚动)位置background-position: left(水平) top(垂直);简写方法background:#000 url(..) repeat fixed left top;区块属性:(Block)字间距letter-spacing: normal; 数值对齐text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中)缩进text-indent: 数值px;垂直对齐vertical-align: baseline;(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;词间距word-spacing: normal; 数值空格white-space: pre;(保留) nowrap;(不换行)显示display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group;table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题)方框属性:(Box)width:; height:; float:; clear:both; margin:; padding:; 顺序:上右下左边框属性:(Border)border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;border-width:; 边框宽度border-color:#;简写方法border:width style color;列表属性:(List-style)类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;位置list-style-position: outside;(外) inside;图像list-style-image: url(..);定位属性:(Position)Position: absolute; relative; static;visibility: inherit; visible; hidden;overflow: visible; hidden; scroll; auto;clip: rect(12px,auto,12px,auto) (裁切)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;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; background-repeat : repeat-y;指定背景位置background-position : 90% 90%; background-position : top; background-position : buttom; background-position : left; background-position : right; background-position : center;五、CSS连接属性:aa:linka:visiteda:activea: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 : #369border-top-width :1pxborder-top-style : solid其他框线样式soliddotteddoublegrooveridgeinsetoutset七、CSS表单运用:文字方块按钮复选框选择钮多行文字方块下拉式菜单选项1选项2八、CSS边界样式如下:margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px;CSS 属性:字体样式(Font Style)序号中文说明标记语法1 字体样式{font:font-style font-variant font-weight font-size font-family}2 字体类型{font-family:"字体1","字体2","字体3",...}3 字体大小{font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}4 字体风格{font-style:inherit|italic|normal|oblique}5 字体粗细{font-weight:100-900|bold|bolder|lighter|normal;}6 字体颜色{color:数值;}7 阴影颜色{text-shadow:16位色值}8 字体行高{line-height:数值|inherit|normal;}9 字间距{letter-spacing:数值|inherit|normal}10 单词间距{word-spacing:数值|inherit|normal}11 字体变形{font-variant:inherit|normal|small-cps }12 英文转换{text-transform:inherit|none|capitalize|uppercase|lowercase}13 字体变形{font-size-adjust:inherit|none}14 字体{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|no rmal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}文本样式(Text Style)序号中文说明标记语法1 行间距{line-height:数值|inherit|normal;}2 文本修饰{text-decoration:inherit|none|underline|overline|line-through|blink}3 段首空格{text-indent:数值|inherit}4 水平对齐{text-align:left|right|center|justify}5 垂直对齐{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}6 书写方式{writing-mode:lr-tb|tb-rl}背景样式序号中文说明标记语法1 背景颜色{background-color:数值}2 背景图片{background-image: url(URL)|none}3 背景重复{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4 背景固定{background-attachment:fixed|scroll}5 背景定位{background-position:数值|top|bottom|left|right|center}6 背影样式{background:背景颜色|背景图象|背景重复|背景附件|背景位置}框架样式(Box Style)序号中文说明标记语法1 边界留白{margin:margin-top margin-right margin-bottom margin-left}2 补白{padding:padding-top padding-right padding-bottom padding-left}3 边框宽度{border-width:border-top-width border-right-widthborder-bottom-width border-left-width}宽度值:thin|medium|thick|数值4 边框颜色{border-color:数值数值数值数值}数值:分别代表top、right、bottom、left颜色值5 边框风格{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}6 边框{border:border-width border-style color}上边框{border-top:border-top-width border-style color}右边框{border-right:border-right-width border-style color}下边框{border-bottom:border-bottom-width border-style color}左边框{border-left:border-left-width border-style color}7 宽度{width:长度|百分比| auto}8 高度{height:数值|auto}9 漂浮{float:left|right|none}10 清除{clear:none|left|right|both}分类列表序号中文说明标记语法1 控制显示{display:none|block|inline|list-item}2 控制空白{white-space:normal|pre|nowarp}3 符号列表{list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|uppe r-alpha|none}4 图形列表{list-style-image:URL}5 位置列表{list-style-position:inside|outside}6 目录列表{list-style:目录样式类型|目录样式位置|url}7 鼠标形状{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resiz e|sw-resize}。
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(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 字体属性属性描述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 将图象设置为列表项标志。
前端学习(7)~css学习(⼀):字体属性和⽂本属性本⽂重要内容CSS的单位字体属性⽂本属性定位属性:position、float、overflow等CSS的单位html中的单位只有⼀种,那就是像素px,所以单位是可以省略的,但是在CSS中不⼀样。
CSS中的单位是必须要写的,因为它没有默认单位。
绝对单位1 in=2.54cm=25.4mm=72pt=6pc。
各种单位的含义:in:英⼨Inches (1 英⼨ = 2.54 厘⽶)cm:厘⽶Centimetersmm:毫⽶Millimeterspt:点Points,或者叫英镑 (1点 = 1/72英⼨)pc:⽪卡Picas (1 ⽪卡 = 12 点)相对单位px:像素em:印刷单位相当于12个点%:百分⽐,相对周围的⽂字的⼤⼩为什么说像素px是⼀个相对单位呢,这也很好理解。
⽐如说,电脑屏幕的的尺⼨是不变的,但是我们可以让其显⽰不同的分辨率,在不同的分辨率下,单个像素的长度肯定是不⼀样的啦。
font 字体属性CSS中,有很多⾮布局样式(与布局⽆关),包括:字体、⾏⾼、颜⾊、⼤⼩、背景、边框、滚动、换⾏、装饰性属性(粗体、斜体、下划线)等。
这⼀段,我们先来讲⼀下字体属性。
css样式中,常见的字体属性有以下⼏种:p{font-size: 50px; /*字体⼤⼩*/line-height: 30px; /*⾏⾼*/font-family: 幼圆,⿊体; /*字体类型:如果没有幼圆就显⽰⿊体,没有⿊体就显⽰默认*/font-style: italic ; /*italic表⽰斜体,normal表⽰不倾斜*/font-weight: bold; /*粗体*/font-variant: small-caps; /*⼩写变⼤写*/}⾏⾼CSS中,所有的⾏,都有⾏⾼。
盒⼦模型的padding,绝对不是直接作⽤在⽂字上的,⽽是作⽤在“⾏”上的。
为了严格保证字在⾏⾥⾯居中,我们的⼯程师有⼀个约定:⾏⾼、字号,⼀般都是偶数。
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种选择。
C S S标签大全(总4页) -CAL-FENGHAI.-(YICAI)-Company One1-CAL-本页仅作为文档封面,使用请直接删除字体属性:(font)大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)行高 line-height: normal;(正常) 单位:PX、PD、EM粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常)变体 font-variant: small-caps;(小型大写字母) normal;(正常)大小写 text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)修饰 text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)常用字体:(font-family)"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana背景属性:(background)色彩background-color: #FFFFFF; 图片background-image: url();重复background-repeat: no-repeat; 滚动background-attachment: fixed;(固定) scroll;(滚动)位置background-position: left(水平) top(垂直); 简写方法 background:#000 url(..) repeat fixed left top;区块属性: (Block)字间距letter-spacing: normal; 数值对刘text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中)缩进text-indent: 数值px;垂直对齐vertical-align: baseline;(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;词间距word-spacing: normal; 数值空格white-space: pre;(保留) nowrap;(不换行)显示display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题)方框属性:(Box)width:; height:; float:; clear:both; margin:; padding:; 顺序:上右下左边框属性: (Border)border-style: dotted(点线); dashed(虚线); solid(实线); double(双线); groove(槽线);ridge;(脊状) inset;(凹陷) outset;border-width:; 边框宽度 border-color:#;边框颜色简写方法border:width style color;列表属性: (List-style)类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;位置list-style-position: outside;(外) inside; 图像list-style-image: url(..);定位属性: (Position)Position: absolute; relative; static; visibility: inherit; visible; hidden; overflow: visible; hidden; scroll; auto; clip: rect(12px,auto,12px,auto) (裁切) 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表单运用:八、CSS边界样式:margin-top:10px; /*上边界*/ margin-right:10px; /*右边界值*/margin-bottom:10px; /*下边界值*/ margin-left:10px; /*左边界值*/CSS 属性:字体样式(Font Style)序号中文说明标记语法1 字体样式 {font:font-style font-variant font-weight font-size font-family}2 字体类型 {font-family:"字体1","字体2","字体3",...}3 字体大小 {font-size:数值|inherit| medium| large| larger| x-large| xx-large| small|smaller| x-small| xx-small}4 字体风格 {font-style:inherit|italic|normal|oblique}5 字体粗细 {font-weight:100-900|bold|bolder|lighter|normal;}6 字体颜色 {color:数值;}7 阴影颜色 {text-shadow:16位色值}8 字体行高 {line-height:数值|inherit|normal;}9 字间距 {letter-spacing:数值|inherit|normal}10 单词间距 {word-spacing:数值|inherit|normal}11 字体变形 {font-variant:inherit|normal|small-cps }12 英文转换 {text-transform:inherit|none|capitalize|uppercase|lowercase}13 字体变形 {font-size-adjust:inherit|none}14 字体 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}文本样式(Text Style)序号中文说明标记语法1 行间距 {line-height:数值|inherit|normal;}2 文本修饰 {text-decoration:inherit|none|underline|overline|line-through|blink}3 段首空格 {text-indent:数值|inherit}4 水平对齐 {text-align:left|right|center|justify}5 垂直对齐 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}6 书写方式 {writing-mode:lr-tb|tb-rl}背景样式序号中文说明标记语法1 背景颜色 {background-color:数值}2 背景图片 {background-image: url(URL)|none}3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4 背景固定 {background-attachment:fixed|scroll}5 背景定位 {background-position:数值|top|bottom|left|right|center}6 背影样式 {background:背景颜色|背景图象|背景重复|背景附件|背景位置}框架样式(Box Style)序号中文说明标记语法1 边界留白 {margin:margin-top margin-right margin-bottom margin-left}2 补白 {padding:padding-top padding-right padding-bottom padding-left}3 边框宽度 {border-width:border-top-width border-right-width border-bottom-width border-left-width}宽度值: thin|medium|thick|数值4 边框颜色 {border-color:数值数值数值数值} 数值:分别代表top、right、bottom、left颜色值5 边框风格 {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}6 边框 {border:border-width border-style color}上边框 {border-top:border-top-width border-style color}右边框 {border-right:border-right-width border-style color}下边框 {border-bottom:border-bottom-width border-style color}左边框 {border-left:border-left-width border-style color}7 宽度 {width:长度|百分比| auto}8 高度 {height:数值|auto}9 漂浮 {float:left|right|none}10 清除 {clear:none|left|right|both}分类列表序号中文说明标记语法1 控制显示 {display:none|block|inline|list-item}2 控制空白 {white-space:normal|pre|nowarp}3 符号列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}4 图形列表 {list-style-image:URL}5 位置列表 {list-style-position:inside|outside}6 目录列表 {list-style:目录样式类型|目录样式位置|url}7 鼠标形状 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}word-wrap是控制换行的。
常用的CSS标签标记属性翻译注释这里收藏一些编写网页的常用属性,便于以后编写网页查询。
" "这里收藏一些编写网页的常用属性,便于以后编写网页查询。
1、字体属性(type)font-family(使用什么字体)font-style(字体的样式,是否斜体):normal/italic/obliquefont-variant(字体大小写):normal/small-capsfont-weight(字体的粗细):normal/bold/bolder/lithterfont-size(字体的大小):absolute-size/relative-size/length/percentage2、颜色和背景属性(backgroud)color(定义前景色,例如:p{color:red})background-color(定义背景色)background-image(定义背景图片)background-repeat(背景图案重复方式):repeat-x/repeat-y/no-repeatbackground-attachment(设置滚动):scroll(滚动)/fixe(固定的)background-position(背景图案的初始位置):percentage/length/top/left/right/bottom3、文本属性:(block)定义间距:word-spacing(单词之间的距离)letter-spacing(字母之间的距离)text-decoration(定义文字的装饰):nore/underline/overline/line-through/blinkvertical-align(元素在垂直方向的位置):baseline(基线)/sub/super/top/text-top/middle/bottom/text-bottomtext-transform(使文本转换为其它方式):capitalize(大写)/uppercase(首字母大写)/lowercase(小写)/nonetext-align(文字的对齐):left/right/center/justifytext-indent(文本的首行缩进)length/percentageline-height(文本的行高):normal/numbet/lenggth/percentage(百分比)定义超链接:a:link {color:green;text-decoration:nore}(未访问过的状态)a:visited {color:ren;text-decoration:underline;16pt}(访问过的状态)a:hover {color:blue;text-decoration:underline;16pt}(鼠标激活的状态)4、块属性(block)边距属性:margin-top(设置顶边距)margin-right(设置右边距)margin-bottom(设置底边距)margin-left(设置左边距)填充距属性:padding-top设置顶端真充距)padding-right设置顶端真充距)padding-bottom设置顶端真充距)padding-left设置顶端真充距)5、边框属性(border)border-top-width(顶端边框宽度)border-right-width(右端边框宽度)border-bottom-width(底端边框宽度)border-left-width(d左边框宽度)border-width(一次定义边框宽度)border-color(设置边框颜色)border-style(设置边框样式)border-top(一次定义顶端各种属性)border-right(一次定义右端各种属性)border-bottom(一次定义底端各种属性)border-left(一次定义左端各种属性)图文混排:width(定义宽度属性)height(定义高度属性)float(文字环绕在一个元素的四周)clear(定义某一边是否有环绕)6、项目符号和编号(list)display(定义是否显示)white-space(怎样处理空白部分):normal/pre/nowraplist-style-type(在列表前加项目符号)disc(圆点)/circle(圈)/square(方形)/decimal(阿拉伯数字)/lower-roman(小写罗马数字)/upper-roman(大写罗马数字)/lower-alpha(小写英文字母)/upper-alpha(大写英文字母)/norelist-style-tyle(在列表前加图案):<url>/nonelist-style-position(决定列表项中第二行的起邕位置)list-style(一次性定义所有属性)7、定位(positioning)即层属性Type:设定对象的定位方式。
常用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)或像素值。
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(/; /*图片式符号*/list-style-position: outside; /*凸排*/ list-style-position:inside; /*缩进*/四、CSS 背景样式: background-color:#F5E2EC; /*背景颜色*/ background:transparent; /*透视背景*/ background-image : url(/image/; /*背景图片*/ background-attachment : fixed; /*浮水印固定背景*/ repeat; /*重复排列-网页默认*/ no-repeat; /*不重复排列*/ repeat-x; /*在x 轴重复排列*/ repeat-y; /*在y 轴重复排列*/90% 90%; /*背景图片x 与y 轴的位置*/top; /*向上对齐*/ buttom; /*向下对齐*/ left; /*向左对齐*/ right; /*向右对齐*/ center; /*居中对齐*/ 五、CSS 连接属性: a /*所有超链接*/a:link /*超链接文字格式*/background-repeat background-repeatbackground-repeatbackground-repeat指定背景位置background-position background-position background-position background-positionbackground-positionbackground-positiona: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属性:字体样式(Font Style)序号中文说明标记语法1 字体样式 {font:font-style font-variant font-weight font-size font-family)2字体类型{font-family:〃字体1〃,〃字体2〃,〃字体3〃,...)3字体大小 {font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small)4字体风格 {font-style:inherit|italic|normal|oblique)5字体粗细{font-weight:100-900|bold (粗体)|bolder (特粗)|lighter (细体)|normal (正常);)6字体颜色{color:数值;)7阴影颜色{text-shadow:16位色值)8字体行高 {line-height:数值|inherit|normal;)9字间距 {letter-spacing:数值|inherit|normal)10单词间距 {word-spacing:数值|inherit|normal)11字体变形 {font-variant:inherit|normal|small-cps )12英文转换{text-transform:inherit|none|capitalize|uppercase|lowercase}13字体变形 {font-size-adjust:inherit|none)14字体 {font-stretch:condensed|expanded|extra-condensed|extra- expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra- condensed|ultra-expanded|wider)文本样式(Text Style)序号中文说明标记语法1行间距 {line-height:数值|inherit|normal;}2文本修饰 {text-decoration:inherit|none|underline|overline|line- through|blink)3段首空格{text-indent:数值1inherit}4水平对齐 {text-align:left|right|center|justify}5垂直对齐 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}6书写方式 {writing-mode:lr-tb|tb-rl}背景样式序号中文说明标记语法1背景颜色{background-color:数值}2背景图片 {background-image: url(URL)|none}3背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4背景固定 {background-attachment:fixed|scroll}5背景定位 {background-position:数值|top|bottom|left|right|center}6背影样式{background:背景颜色|背景图象|背景重复|背景附件|背景位置}框架样式(Box Style)序号中文说明标记语法1边界留白{margin:margin-top margin-right margin-bottom margin-left} 2补白 {padding:padding-top padding-right padding-bottom padding-left}3边框宽度{border-width:border-top-width border-right-width border-bottom-width border-left-width)宽度值:thin|medium|thick|数值4边框颜色{border-color:数值数值数值数值) 数值:分别代表top、right、bottom、left颜色值5边框风格{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groo ve)6 边框{border:border-width border-style color)上边框{border-top:border-top-width border-style color)右边框{border-right:border-right-width border-style color)下边框{border-bottom:border-bottom-width border-style color)左边框{border-left:border-left-width border-style color)7宽度{width:长度|百分比| auto)8高度{height:数值|auto)9漂浮{float:left|right|none)10清除{clear:none|left|right|both)分类列表序号中文说明标记语法11制显示{display:none|block|inline|list-item)2控制空白{white-space:normal|pre|nowarp)3符号列表{list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none)4图形列表{list-style-image:URL)5位置列表{list-style-position:inside|outside)6目录列表{list-style:目录样式类型|目录样式位置|url)7 鼠标形状{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize)CSS属性大全[背景]属性共有六项:「背景颜色」(background-color),设置背景颜色。
CSS 设置文本属性文本表示的是页面所包含的内容,文本的放置与效果的显示会直接影响到页面的布局及风格。
CSS 样式表提供了文本属性来实现对页面中文本的控制,本节将对几种重要的文本属性进行介绍。
1、text-indent 属性在网页设计中,最重要效果之一就是段落首行的缩进。
CSS 的text-indent 属性就是用来设定文本块中首行的缩进。
text-indent 属性可以定义两种缩进方式,一种是直接定义缩进的长度,另一种是定义缩进百分比。
使用该属性,任何标记都可以让首行以给定的长度或百分比缩进。
该属性具有继承性,即父标记定义了text-indent 属性,那么子标记默认使用父标记所定义的text-indent 属性值。
2、text-align 属性text-align 属性用来设置文本的水平对齐方式。
CSS 提供了4种对齐方式:left 、center 、right 和justify 。
left 表示向左对齐;center 表示文本居中;right 表示向右对齐;justify 则表示两端对齐。
该属性默认值是left 。
一般情况下,居中对齐适用于标题类文本,其他对齐方式可以根据页面布局来选择使用。
text-align 属性设置的对齐方式,不仅可以使标记中的文本内容按照指定的方式对齐,还可以在标记中的文本及图像应用对齐方式。
text-align 属性只能用于文本块,而不能直接应用到图像标记<img>。
如果要使图像同文本一样应用对齐方式,那么就必须将图像包含在文本块中。
3、white-space 属性white-space 属性就是空白属性,该属性对文本的显示有着重要的影响。
在标记上应用white-space 属性可以影响浏览器对字符串或文本间空白的处理方式。
缩进长度单位可以使用绝对长度单位,如cm 、mm 等,也可以使用相对长度单位,如em 、px 。
CSS 只能定义两端对齐方式,并按要求显示,但对于具体的两端对齐文本如何分配字体空间以实现文本左右两边均对齐,CSS 并不规定。
ASP CSS常用属性上节简要介绍了CSS的基本语法,主要对如何定义样式表和引入样式表进行讲解。
从其语法中可以看出,属性是CSS非常重要的部分。
掌握了CSS的各种属性是编辑页面样式表的前提条件,因此本节将介绍一些常用的CSS属性。
1.字体属性字体属性是使用最多,也是最基本的属性,表6-1列出了它的主要属性。
表6-1 字体属性下面使用表6-1中的字体属性定义一种字体样式“.FontStyle”,样式字体类型为中文使用“宋体”,英文使用“MS Serif”,并且是斜体、小型大写字母、粗体、36除了上面介绍的字体样式属性外,还可以用样式表控制字体的颜色和背景属性,使字体不再是单纯的黑白显示。
控制字体颜色及背景的CSS属性见表6-2所示:表6-2 颜色和背景属性下面以一个示例来演示如何使用颜色和背景属性样式,如图6-5所示是示例效果。
图6-5 颜色及背景属性为了达到上述效果,可在字体属性的示例中添加如下代码所示的颜色和背景图像属性。
通过本示例,读者要明白使用样式表可以实现比使用HTML的Font标记实现更多的控制,当然也可以使用HTML标记background指定背景属性。
3.排版属性前面介绍了如何用CSS定义字体、颜色和背景属性,那么接下来将为定义好的文本进行排版。
表6-3列出CSS中用于控件文本的排版的属性:表6-3 颜色和背景属性行与行之间行高,对齐方式变成两端齐,并且段首还进行处缩进。
显示效果如图6-6所示:图6-6 排版属性样式利用CSS的文本属性可以很方便地对页面中的文本进行排版。
如下代码所示是实现该显示效果的示例代码:CSS的容器属性包括边距、填充距、边框和宽度、高度、浮动、清除等属性。
在网页中的内容必须“装”进这个“容器”中。
“容器”属性是CSS中非常重要的一种属性。
下面将对“容器”属性进行分类介绍。
首先介绍边距属性,表6-4列出了容器属性中常用的边距属性。
表6-4 边距属性定义了边距后的页面,无论怎么改变窗口的大小,都会按照定义好的边距样式显示。
CSS常用文本属性
文本对齐属性(text-align)
这个属性用来设定文本的对齐方式。
有以下值:
∙left (居左,缺省值)
∙right (居右)
∙center (居中)
∙justify (两端对齐)
示例代码如下:
.p2 {text-align:right}
演示示例
文本修饰属性(text-decoration)
这个属性主要设定文本划线的属性。
有以下值:
∙none (无,缺省值)
∙underline (下划线)
∙overline (上划线)
∙line-through (当中划线)
示例代码如下:
.p2 {text-decoration: underline}
演示示例
文本缩进属性(text-indent)
这个属性设定文本首行缩进。
其值有以下设定方法:
∙length (长度,可以用绝对单位(cm, mm, in, pt, pc)或者相对单位(em, ex, px))
∙percentage (百分比,相当于父对象宽度的百分比)
示例代码如下:
.p1 {text-indent: 8mm}
演示示例
行高属性(line-height)
这个属性设定每行之间的距离。
其值有以下设定方法:
∙normal (缺省值)
∙length (长度,可以用绝对单位(cm, mm, in, pt,pc)或者相对单位(em, ex, px)) ∙percentage (百分比,相当于父对象高度的百分比)
示例代码如下:
.p1 {line-height:1cm}
演示示例
字间距属性(letter-spacing)
这个属性用来设定字符之间的距离。
∙normal (缺省值)
∙length (长度,可以用绝对单位(cm, mm, in, pt, pc)或者相对单位(em, ex, px))
示例代码如下:
.p1 {letter-spacing: 3mm}
颜色属性(color)
用颜色属性(color)可以改变文本的字体颜色。
字体颜色代码请参见HTML颜色参考(HTML Color Reference)。
示例代码如下:
.p1{color:gray}
演示示例
CSS背景属性
背景颜色属性(background-color)
这个属性为HTML元素设定背景颜色,相当于HTML中bgcolor属性。
body {background-color:#99FF00;}
上面的代码表示Body这个HTML元素的背景颜色是翠绿色的。
演示示例
背景图片属性(background-image)
这个属性为HTML元素设定背景图片,相当于HTML中background属性。
<body
style="background-image:url(../images/css_tutorials/background.jpg)">
上面的代码为Body这个HTML元素设定了一个背景图片。
演示示例
背景重复属性(background-repeat)
这个属性和background-image属性连在一起使用,决定背景图片是否重复。
如果只设置background-image属性,没设置background-repeat属性,在缺省状态下,图片既横向重复,又竖向重复。
∙repeat-x 背景图片横向重复
∙repeat-y 背景图片竖向重复
∙no-repeat 背景图片不重复
body {background-image:url(../images/css_tutorials/background.jpg);
background-repeat:repeat-y}
上面的代码表示图片竖向重复。
演示示例
背景附着属性(background-attachment)
这个属性和background-image属性连在一起使用,决定图片是跟随内容滚动,还是固定不动。
这个属性有两个值,一个是scroll,一个是fixed。
缺省值是scroll。
body {background-image:url(../images/css_tutorials/background.jpg);
background-repeat:no-repeat; background-attachment:fixed}
上面的代码表示图片固定不动,不随内容滚动而动。
演示示例
背景位置属性(background-position)
这个属性和background-image属性连在一起使用,决定了背景图片的最初位置。
body
{background-image:url(../images/css_tutorials/background.jpg);background -repeat:no-repeat; background-position:20px 60px}
上面的代码表示背景图片的初始位置距离网页最左面20px,距离网页最上面60px。
背景属性(background)
这个属性是设置背景相关属性的一种快捷的综合写法,包括background-color, background-image, background-repeat, backgroundattachment, background-position。
body {background:#99FF00 url(../images/css_tutorials/background.jpg) no-repeat fixed 40px 100px}
上面的代码表示,网页的背景颜色是翠绿色,背景图片是background.jpg图片,背景图片不重复显示,背景图片不随内容滚动而动,背景图片距离网页最左面40px,距离网页最上面100px。
CSS边框属性
边框风格属性(border-style)
这个属性用来设定上下左右边框的风格,它的值如下:
∙none (没有边框,无论边框宽度设为多大)
∙dotted (点线式边框)
∙dashed (破折线式边框)
∙solid (直线式边框)
∙double (双线式边框)
∙groove (槽线式边框)
∙ridge(脊线式边框)
∙inset (内嵌效果的边框)
∙outset (突起效果的边框)
演示示例:分别使用none,dotted, dashed, solid, double, groove, ridge, inset, outset的CSS边框风格属性示例
边框宽度属性(border-width)
这个属性用来设定上下左右边框的宽度,它的值如下:
∙medium (是缺省值)
∙thin (比medium细)
∙thick (比medium粗)
∙用长度单位定值。
可以用绝对长度单位(cm, mm, in, pt, pc)或者用相对长度单位(em, ex, px)。
演示示例:分别用medium, thin, thick和长度单位定制的CSS边框宽度属性示例
边框颜色属性(border-color)
这个属性用来设定上下左右边框的颜色。
例句如下:
.d5 {border-color:gray;border-style:solid;}
演示示例
边框属性(border)
这个属性是边框属性的一个快捷的综合写法,它包含border-width, border-style和border-color。
例句如下:
.d1 {border:5px solid gray;}
演示示例
单边边框属性
上下左右四个边框不但可以统一设定,也可以分开设定。
设定上边框属性,你可以使用border-top, border-top-width, border-top-style, border-top-color。
设定下边框属性,你可以使用border-bottom, border-bottom-width, border-bottom-style, border-bottom-color。
设定左边框属性,你可以使用border-left, border-left-width, border-left-style, border-left-color。
设定上边框属性,你可以使用border-right, border-right-width, border-right-style, border-right-color。
演示示例:设置单边边框属性的示例。