CSS标签属性大全
音视频标签,CSS选择器属性

⾳视频标签,CSS选择器属性1.⾳视频标签 <!-- 视频⾳频 controls显⽰控制台 loop循环播放 autoplay⾃动播放--> <audio src="⾳频路径" controls="controls" autoplay loop>浏览器不⽀持时显⽰此⽂段</audio> <!--引⼊多个格式⾳频--> <audio controls> <source src="" type=""> <source src="" type=""> </audio> <!-- 视频 autoplay⾃动播放 muted静⾳视频⽂件在添加静⾳后才可以⾃动播放--> <video src="" controls autoplay muted></video> <!-- 字符实体 --> <p>阿斯顿⼭东 ⼭东</p> <!--空格--> <p>啊⾃⾏车<vs>晚饭</p><!--<⼩于号,>⼤于号-->2.css选择器 <!--外部引⼊样式,推荐使⽤--> <link rel="stylesheet" href="common.css"> <!--⾏内样式--> <div style="color:red;"> hello,world</div> 内部样式选择器在head中写style内添加属性 2.1选择器 ID选择器⽤#ID名来选择 class选择器⽤.class来选择 元素选择器直接⽤标签名 内联> ID选择器 >类选择器 >元素选择器 2.2属性 background-image:url(),url(); /*添加图⽚多张图⽚⽤逗号隔开*/ background-repeat:no-repeat; /*背景图⽚不平铺,默认是repeat平铺*/ background-position:50px 50px; /*图⽚位置*/ background-attachment:fixed; /* 添加fixed属性图⽚跟主页⾯滚动,不添加默认不滚动 */ background-size: contain;/*图⽚尺⼨ contain扩展到最⼤,cover全覆盖*/。
常用CSS代码大全(工作必备)

常用CSS代码大全(工作必备)用html+css可以很方便的进行网页的排版布局,但不是每一种属性或者代码我们都铭记于心,最近我把CSS中的常用代码进行了归纳总结,方便自己以后查看,同时也分享给大家,希望对你们有用。
一.文本设置1、font-size: 字号参数2、font-style: 字体格式3、font-weight: 字体粗细4、颜色属性 color:参数注意使用网页安全色二、超链接设置text-decoration: 参数主要目的是在浏览器显示文本链接时更改下划线。
参数取值范围:underline:为文字加下划线overline:为文字加上划线line-through:为文字加删除线blink:使文字闪烁none:不显示上述任何效果三、背景1、背景颜色 padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); font-size: 16px; border-left: 1px solid rgb(128, 128, 128); background: rgb(238, 238, 238); box-shadow: rgba(7, 17, 27, 0.05) 0px 4px 8px 0px; box-sizing: border-box; border-radius: 8px; font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, Tahoma, Arial, sans-serif;">2、背景图片background-image: url(URL)URL就是背景图片的存放路径,none表示无。
3、背景图片重复 background-repeat: 参数参数取值范围:no-repeat:不重复平铺背景图片repeat-x:使图片只在水平方向上平铺repeat-y:使图片只在垂直方向上平铺如果不指定背景图像重复属性,浏览器默认水平和垂直平铺背景图像。
CSS——八大属性

CSS——⼋⼤属性⼀、颜⾊有三种表⽰颜⾊的⽅法:英⽂单词、⼆进制颜⾊代表码、rgb,⼆、字体font-size:15px;设置字体⼤⼩,常⽤像素指定字体⼤⼩,指定长度的字号,不会随着浏览器的变化⽽变化font-family:宋体;设置字体类型font-weight:lighter、bold、bolder,设置字体粗细,常⽤的三种效果选择font-style:oblique;设置字体倾斜font-variant:small-caps;将⼩写字母转成⼤写字母;color:设置字体颜⾊<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>exercise4</title><style>#color_en{color:blue}#color_bin{color:#F0F;}#color_rgb{color:rgb(255,0,255)}#color_pellucidity{color:rgba(255,0,255,0.2)}#ablout_font{background-color:rgba(0,255,255,0.2);}#font_size{background-color:rgba(0,255,255,0.2);font-size:15px;}#font_family{background-color:rgba(0,255,255,0.2);font-family:YouYuan;}#font_lighter{background-color:rgba(0,255,255,0.2);font-weight:lighter;}#font_bold{background-color:rgba(0,255,255,0.2);font-weight:bold;}#font_bolder{background-color:rgba(0,255,255,0.2);font-weight:bolder;}#font_style{background-color:rgba(0,255,255,0.2);font-style:oblique;}</style></head><body><p>练习属性property</p><p id="ablout_font">⼆、关于字体</p><p id="font_size">font-size设置字体⼤⼩,如:15px</p><p id="font_family">font-family设置字体类型如:YouYuan</p><p id="font_weight"><a id="font_bolder">bolder</a></p><p id="font_style">font-style设置字体倾斜</p><p id="color_en">⼀、关于颜⾊</p><p id="color_bin">除了使⽤英⽂单词,还可以使⽤⼗六进制颜⾊对应表(如下图,#FFFF00表⽰黄⾊,还可简写成#FF0)<table border="0"><tbody><tr><td height="30" width="95" bgcolor="#ffffff">#FFFFFF</td><td height="30" width="95" bgcolor="#dddddd">#DDDDDD</td><td height="30" width="95" bgcolor="#aaaaaa">#AAAAAA</td><td height="30" width="95" bgcolor="#888888">#888888</td><td height="30" width="95" bgcolor="#666666">#666666</td><td height="30" width="95" bgcolor="#444444">#444444</td><td height="30" width="95" bgcolor="#000000">#000000</td></tr><tr><td height="30" width="95" bgcolor="#ffb7dd">#FFB7DD</td><td height="30" width="95" bgcolor="#ff88c2">#FF88C2</td><td height="30" width="95" bgcolor="#ff44aa">#FF44AA </td><td height="30" width="95" bgcolor="#ff0088">#FF0088 </td><td height="30" width="95" bgcolor="#c10066">#C10066 </td><td height="30" width="95" bgcolor="#a20055">#A20055 </td><td height="30" width="95" bgcolor="#8c0044">#8C0044 </td></tr><tr><td height="30" width="95" bgcolor="#ffcccc">#FFCCCC</td><td height="30" width="95" bgcolor="#ff8888">#FF8888</td><td height="30" width="95" bgcolor="#ff3333">#FF3333 </td><td height="30" width="95" bgcolor="#ff0000">#FF0000 </td><td height="30" width="95" bgcolor="#cc0000">#CC0000 </td><td height="30" width="95" bgcolor="#aa0000">#AA0000 </td><td height="30" width="95" bgcolor="#880000">#880000 </td></tr><tr><td height="30" width="95" bgcolor="#ffc8b4">#FFC8B4</td><td height="30" width="95" bgcolor="#ffa488">#FFA488</td><td height="30" width="95" bgcolor="#ff7744">#FF7744 </td><td height="30" width="95" bgcolor="#ff5511">#FF5511 </td><td height="30" width="95" bgcolor="#e63f00">#E63F00 </td><td height="30" width="95" bgcolor="#c63300">#C63300 </td><td height="30" width="95" bgcolor="#a42d00">#A42D00 </td></tr><tr><td height="30" width="95" bgcolor="#ffddaa">#FFDDAA</td><td height="30" width="95" bgcolor="#ffbb66">#FFBB66</td><td height="30" width="95" bgcolor="#ffaa33">#FFAA33</td><td height="30" width="95" bgcolor="#ff8800">#FF8800 </td><td height="30" width="95" bgcolor="#ee7700">#EE7700 </td><td height="30" width="95" bgcolor="#cc6600">#CC6600 </td><td height="30" width="95" bgcolor="#bb5500">#BB5500 </td></tr><tr><td height="30" width="95" bgcolor="#ffee99">#FFEE99</td><td height="30" width="95" bgcolor="#ffdd55">#FFDD55</td><td height="30" width="95" bgcolor="#ffcc22">#FFCC22</td><td height="30" width="95" bgcolor="#ffbb00">#FFBB00 </td><td height="30" width="95" bgcolor="#ddaa00">#DDAA00 </td><td height="30" width="95" bgcolor="#aa7700">#AA7700 </td><td height="30" width="95" bgcolor="#886600">#886600 </td></tr><tr><td height="30" width="95" bgcolor="#ffffbb">#FFFFBB</td><td height="30" width="95" bgcolor="#ffff77">#FFFF77</td><td height="30" width="95" bgcolor="#ffff33">#FFFF33</td><td height="30" width="95" bgcolor="#ffff00">#FFFF00</td><td height="30" width="95" bgcolor="#eeee00">#EEEE00</td><td height="30" width="95" bgcolor="#bbbb00">#BBBB00</td><td height="30" width="95" bgcolor="#888800">#888800</td></tr><tr><td height="30" width="95" bgcolor="#eeffbb">#EEFFBB</td><td height="30" width="95" bgcolor="#ddff77">#DDFF77</td><td height="30" width="95" bgcolor="#ccff33">#CCFF33</td><td height="30" width="95" bgcolor="#bbff00">#BBFF00</td><td height="30" width="95" bgcolor="#99dd00">#99DD00</td><td height="30" width="95" bgcolor="#88aa00">#88AA00</td><td height="30" width="95" bgcolor="#ccff99">#CCFF99</td><td height="30" width="95" bgcolor="#bbff66">#BBFF66</td><td height="30" width="95" bgcolor="#99ff33">#99FF33</td><td height="30" width="95" bgcolor="#77ff00">#77FF00</td><td height="30" width="95" bgcolor="#66dd00">#66DD00</td><td height="30" width="95" bgcolor="#55aa00">#55AA00</td><td height="30" width="95" bgcolor="#227700">#227700</td></tr><tr><td height="30" width="95" bgcolor="#99ff99">#99FF99</td><td height="30" width="95" bgcolor="#66ff66">#66FF66</td><td height="30" width="95" bgcolor="#33ff33">#33FF33</td><td height="30" width="95" bgcolor="#00ff00">#00FF00</td><td height="30" width="95" bgcolor="#00dd00">#00DD00</td><td height="30" width="95" bgcolor="#00aa00">#00AA00</td><td height="30" width="95" bgcolor="#008800">#008800</td></tr><tr><td height="30" width="95" bgcolor="#bbffee">#BBFFEE</td><td height="30" width="95" bgcolor="#77ffcc">#77FFCC</td><td height="30" width="95" bgcolor="#33ffaa">#33FFAA</td><td height="30" width="95" bgcolor="#00ff99">#00FF99</td><td height="30" width="95" bgcolor="#00dd77">#00DD77</td><td height="30" width="95" bgcolor="#00aa55">#00AA55</td><td height="30" width="95" bgcolor="#008844">#008844</td></tr><tr><td height="30" width="95" bgcolor="#aaffee">#AAFFEE</td><td height="30" width="95" bgcolor="#77ffee">#77FFEE</td><td height="30" width="95" bgcolor="#33ffdd">#33FFDD</td><td height="30" width="95" bgcolor="#00ffcc">#00FFCC</td><td height="30" width="95" bgcolor="#00ddaa">#00DDAA</td><td height="30" width="95" bgcolor="#00aa88">#00AA88</td><td height="30" width="95" bgcolor="#008866">#008866</td></tr><tr><td height="30" width="95" bgcolor="#99ffff">#99FFFF</td><td height="30" width="95" bgcolor="#66ffff">#66FFFF</td><td height="30" width="95" bgcolor="#33ffff">#33FFFF</td><td height="30" width="95" bgcolor="#00ffff">#00FFFF</td><td height="30" width="95" bgcolor="#00dddd">#00DDDD</td><td height="30" width="95" bgcolor="#00aaaa">#00AAAA</td><td height="30" width="95" bgcolor="#008888">#008888</td></tr><tr><td height="30" width="95" bgcolor="#cceeff">#CCEEFF</td><td height="30" width="95" bgcolor="#77ddff">#77DDFF</td><td height="30" width="95" bgcolor="#33ccff">#33CCFF</td><td height="30" width="95" bgcolor="#00bbff">#00BBFF</td><td height="30" width="95" bgcolor="#009fcc">#009FCC</td><td height="30" width="95" bgcolor="#0088a8">#0088A8</td><td height="30" width="95" bgcolor="#007799">#007799</td></tr><tr><td height="30" width="95" bgcolor="#ccddff">#CCDDFF</td><td height="30" width="95" bgcolor="#99bbff">#99BBFF</td><td height="30" width="95" bgcolor="#5599ff">#5599FF</td><td height="30" width="95" bgcolor="#0066ff">#0066FF </td> <td height="30" width="95" bgcolor="#0044bb">#0044BB </td> <td height="30" width="95" bgcolor="#003c9d">#003C9D </td> <td height="30" width="95" bgcolor="#003377">#003377 </td> </tr><tr><td height="30" width="95" bgcolor="#ccccff">#CCCCFF</td><td height="30" width="95" bgcolor="#9999ff">#9999FF</td><td height="30" width="95" bgcolor="#5555ff">#5555FF </td> <td height="30" width="95" bgcolor="#0000ff">#0000FF </td> <td height="30" width="95" bgcolor="#0000cc">#0000CC </td> <td height="30" width="95" bgcolor="#0000aa">#0000AA </td> <td height="30" width="95" bgcolor="#000088">#000088 </td> </tr><tr><td height="30" width="95" bgcolor="#ccbbff">#CCBBFF</td><td height="30" width="95" bgcolor="#9f88ff">#9F88FF</td><td height="30" width="95" bgcolor="#7744ff">#7744FF </td> <td height="30" width="95" bgcolor="#5500ff">#5500FF </td> <td height="30" width="95" bgcolor="#4400cc">#4400CC </td> <td height="30" width="95" bgcolor="#2200aa">#2200AA </td> <td height="30" width="95" bgcolor="#220088">#220088 </td> </tr><tr><td height="30" width="95" bgcolor="#7700ff">#7700FF </td><td height="30" width="95" bgcolor="#5500dd">#5500DD </td><td height="30" width="95" bgcolor="#4400b3">#4400B3 </td><td height="30" width="95" bgcolor="#3a0088">#3A0088 </td></tr><tr><td height="30" width="95" bgcolor="#e8ccff">#E8CCFF</td><td height="30" width="95" bgcolor="#d28eff">#D28EFF</td><td height="30" width="95" bgcolor="#b94fff">#B94FFF </td><td height="30" width="95" bgcolor="#9900ff">#9900FF </td><td height="30" width="95" bgcolor="#7700bb">#7700BB </td><td height="30" width="95" bgcolor="#66009d">#66009D </td><td height="30" width="95" bgcolor="#550088">#550088 </td></tr><tr><td height="30" width="95" bgcolor="#f0bbff">#F0BBFF</td><td height="30" width="95" bgcolor="#e377ff">#E38EFF</td><td height="30" width="95" bgcolor="#d93eff">#E93EFF </td><td height="30" width="95" bgcolor="#cc00ff">#CC00FF </td><td height="30" width="95" bgcolor="#a500cc">#A500CC </td><td height="30" width="95" bgcolor="#7a0099">#7A0099 </td><td height="30" width="95" bgcolor="#660077">#660077 </td></tr><tr><td height="30" width="95" bgcolor="#ffb3ff">#FFB3FF</td><td height="30" width="95" bgcolor="#ff77ff">#FF77FF</td><td height="30" width="95" bgcolor="#ff3eff">#FF3EFF </td><td height="30" width="95" bgcolor="#ff00ff">#FF0 0FF </td><td height="30" width="95" bgcolor="#cc00cc">#CC00CC </td><td height="30" width="95" bgcolor="#990099">#990099 </td><td height="30" width="95" bgcolor="#770077">#770077 </td></tr></tbody></table></p><p id="color_rgb">颜⾊还可以使⽤rgb(255,0,255)的⽅式</p><p id="color_pellucidity">使⽤rgba(255,0,255,0.6)最后⼀位设置透明度,取值0-1,</p></body></html>View Code注意:可使⽤复合属性font,设置字体相关属性值,不同属性值之间使⽤空格隔开。
CSS标签大全(最终整理版)

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; /*左边框留空白*/三、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属性大全中文对照表

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_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(层叠样式表)是一种用于描述网页上的元素布局和样式的语言,它能够使网页更加美观和易于阅读。
本文将介绍一些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 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 设置字型属性,取值可以是任何字型名称,缺省为浏览器内定字型,可以设多个以逗号(,)分开,有空格的英文字型可用单引号或双引号括起来。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
c s s样式大全(整理版)字体属性:(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, "TimesNew Roman", Times, serif, Arial, Helvetica, sans-serif, V e r d a n a背景属性:(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-tabletable-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题) /*display 属性的了解很模糊*/方框属性: (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表单运用:文字方块按钮复选框选择钮多行文字方块下拉式菜单选项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|sup er}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}。