HTML+CSS标签属性大全
HTML CSS标签属性大全 a卷标, 属性名称, 简介 批注 1、跑马灯 普通卷动 滑动 预设卷动 来回卷动 向下卷动 向上卷动 向右卷动 向左卷动 卷动次数 设定宽度 设定高度 设定背景颜色 设定卷动距离 设定卷动时间 2、字体效果
…
标题字(最大)
…
标题字(最小)
…粗体字
…粗体字(强调)
…斜体字
…斜体字(强调)
…斜体字(表示定义)
…底线
…底线(表示插入文字)
…横线
…删除线
…删除线(表示删除)
…键盘文字
… 打字体
<![CDATA[…]]>固定宽度字体(在文件中空白、换行、定位功能有效)
<![CDATA[…</plaintext>固定宽度字体(不执行标记符号) <listing>…</listing> 固定宽度小字体 <font color=00ff00>…</font>字体颜色 <font size=1>…</font>最小字体 <font style =font-size:100 px>…</font>无限增大 3、区断标记 <hr>水平线 <hr size=9>水平线(设定大小) <hr width=80%>水平线(设定宽度) <hr color=ff0000>水平线(设定颜色) <br>(换行) <nobr>…</nobr>水域(不换行)</p><h2>CSS选择器笔记</h2><p>CSS选择器笔记 阮一峰整理 参考网址：456 Berea Street 一、基本选择器 实例： * { margin:0; padding:0; } p { font-size:2em; } .info { background:#ff0; } https://www.360docs.net/doc/e116506533.html, { background:#ff0; } https://www.360docs.net/doc/e116506533.html,.error { color:#900; font-weight:bold; } #info { background:#ff0; } p#info { background:#ff0; } 二、多元素的组合选择器</p><p>实例： div p { color:#f00; } #nav li { display:inline; } #nav a { font-weight:bold; } div > strong { color:#f00; } p + p { color:#f00; } 三、CSS 2.1 属性选择器 实例： p[title] { color:#f00; } div[class=error] { color:#f00; }</p><p>td[headers~=col1] { color:#f00; } p[lang|=en] { color:#f00; } blockquote[class=quote][cite] { color:#f00; } 四、CSS 2.1中的伪类 实例： p:first-child { font-style:italic; } input[type=text]:focus { color:#000; background:#ffe; } input[type=text]:focus:hover { background:#fff; } q:lang(sv) { quotes: "\201D" "\201D" "\2019" "\2019"; } 五、 CSS 2.1中的伪元素</p><h2>CSS属性代码大全</h2><p>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; /*实心圆形符号*/</p><h2>CSS选择器</h2><p>CSS选择器 1.常用选择器 常用的选择器有类型选择器和后代选择器。 1.1类型选择器 类型选择器用来选择特定类型的元素。可以根据三种类型来选择。 1）ID选择器，根据元素ID来选择元素。 前面以”#”号来标志，在样式里面可以这样定义： #demoDiv{ color:#FF0000; } 这里代表id为demoDiv的元素的设置它的字体颜色为红色。 我们在页面上定义一个元素把它的ID定义为demoDiv，如： <div id="demoDiv"> 这个区域字体颜色为红色 </div> 用浏览器浏览，我们可以看到因为区域内的颜色变成了红色 再定义一个区域 <div> 这个区域没有定义颜色 </div> 用浏览器浏览，与预期的一样，区域没有应用样式，所以区域中的字体颜色还是默认的颜色黑色。 2）类选择器根据类名来选择 前面以”.”来标志，如： .demoDiv{ color:#FF0000; } 在HTML中，元素可以定义一个class的属性。 如： <div class="demo"> 这个区域字体颜色为红色 </div> 同时，我们可以再定义一个元素： <p class="demo"> 这个段落字体颜色为红色</p><p>最后，用浏览器浏览，我们可以发现所有class为demo的元素都应用了这个样式。包括了页面中的div元素和p元素。 上例我们给两个元素都定义了class，但如果有很多个元素都会应用这个元素，那个一个个的定义元素，就会造成页面重复的代码太多，这种现象称为“多类症”。 我们可以改成这样来定义。 <div class="demo"> <div> 这个区域字体颜色为红色 </div> 同时，我们可以再定义一个元素： 这个段落字体颜色为红色 </div> 这样，我们就只是定义了一个类，同时把样式应用到了所有的元素当中。 3）标签选择器根据标签选择 用标签选择指根据标签名来应用样式，定义时，直接用标签名。如： div{ color:#FF0000; } 我们再定义一个元素。 <div> 这个区域字体颜色为红色 </div> <div> 这个区域字体颜色也为红色 </div> 用浏览器浏览，我们发现两个DIV元素都被应用了样式，这里不用定义id，也无需要定义class属性。 示例参见：根据标签来选择元素.html 这种选择方式非常的有用，比如你觉得锚链接的下划线不太美观，想把所有的锚链接的样式都设成无下划线形式，颜色为鲜艳的蓝色。可以这样定义。 a{ text-decoration:none; color:#00CCCC; } 1.2 后代选择器 后代选择器也称为包含选择器，用来选择特定元素或元素组的后代，后代选择器用两个常用选择器，中间加一个空格表示。其中前面的常用选择器选择父元素，后面的常用选择器选择子元素，样式最终会应用于子元素中。</p><h2>css样式大全(精华版)</h2><p>字体属性：(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;(不换行)</p><h2>CSS选择器的声明与嵌套</h2><p>CSS选择器的声明与嵌套 使用CSS选择器控制HTML标记的时候，每个选择器的属性可以一次声明多个，选择器本身也可以同时声明多个。 并且，任何形式的选择器，都是合法的，标记选择器，class选择器和ID选择器都可以集体声明。 集体声明 在声明CSS选择器时，如果某些选择器的风格是完全相同的，或者部分相同，这时便可以使用集体声明的方式，将风格相同的选择器同时声明。 [html]view plain copy print? 1.<span style="font-size:24px;"><html> 2.<head> 3.<title> 4.集体声明 5.</title> 6.<style type="text/css"> 7. 16.</style></p><p>17.</head> 18. 19.<body> 20.<h1>集体声明h1</h1> 21.<h2class="special">集体声明h2</h2> 22.<h3>集体声明h3</h3> 23.<h4>集体声明h4</h4> 24.<h5>集体声明h5</h5> 25.集体声明p1 26.<p class="special">集体声明p2 27.<p id="one">集体声明p3 28.</body> 29.</html> 30.</span> 全局声明 对于实际网站中，如果希望页面中所有的标记都使用同一种CSS样式，但是，又不希望逐个来集体声明，这是可以使用全局声明符号*来声明。 [html]view plain copy print? 1.<span style="font-size:24px;"><html> 2.<head> 3.<title> 4.集体声明 5.</title> 6.<style type="text/css"> 7. <!-- 8. *{ 9. color:purple; 10. font-size:15px; 11. } 12. h2.special,.special,#one{ 13. text-decoration:underline; 14. }</p><h2>CSS3常用属性大全</h2><p>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 //在一个声明中设置所有的背景属性。 background-attachment //设置背景图像是否固定或者随着页面的其余部分滚动。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 //设置下边框的样式。 border-bottom-width //设置下边框的宽度。</p><h2>CSS中的各属性意思</h2><p>1、字体属性 这是最基本的属性，您经常都会用到。它主要包括以下这些属性： 2、颜色和背景属性 下面我们就讲一下CSS的颜色和背景属性。先来看一下CSS下的颜色和背景都有哪些属性吧（如下表）： 3、文本属性 ※定义间距 前面说了如何用CSS定义字体、颜色和背景属性，那么定义好的文本我们怎么对它进行排版呢？ 下面我们讲述一下CSS的文本属性，还是先来看一下文本属性的详细列表：</p><p>※装饰超链接 网页默认的链接方式是这样的：未访问过的链接是蓝色文字并带蓝色的下划线，访问过的超级链接是深紫色的文字并带深紫色的下划线。如果您所有的网页都是这种样式，是不是很单调呢？ 4、“容器”属性 ※边距属性 听起来是不是很有趣，什么叫“容器”属性呢？CSS的容器属性包括边距、填充距、边框和宽度、高度、浮动、清除等属性。 您想，网页中的内容肯定是都需要“装”进这个“容器”里。“容器”属性是CSS中非常重要的一种属性，我们将分类进行学习。 先来看一下边距属性的详细列表： ※填充距属性 本节我将向您介绍填充距属性。我们先来看一下填充距的属性列表： ※边框属性 本节我们来看一下种类繁多的边框属性，先来看一下属性列表：</p><p>※图文混排 我们在来看看“容器”属性还有什么其他的属性，请看属性列表： 5、分级属性 如果您使用过Word，那您一定知道Word中有一个“项目符号和编号”的功能。 在html中，您无需使用前面提到的一些字体、颜色、容器属性来对字体、颜色和边距、填充距等进行初始化。因为在CSS中，已经提供了进行分级的专用分级属性。 分级属性包括了“list-style”（列表样式）、“list-item”（列表项）等多种属性，我们先来看一下分级属性的详细列表： 6、鼠标属性</p><h2>CSS属性大全完整版</h2><p>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; (闪烁) 常用字体</p><p>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; (居中) 缩进</p><h2>css3选择器 伪类伪元素</h2><p>CSS3选择器 在css3中新增了很多选择器，大部分浏览器都支持了，但是要知道坑爹的IE还在拖后腿，希望不久的将来IE能赶上来。下面就介绍一下css3中都增加了哪些选择器。 1.属性选择器 E[attr] →有attr属性的E元素。 E[attr^=’value’] →寻找属性值以value开头的元素。 E[attr$=’value’] →寻找以属性值value结束的元素。 E[attr*=’value’] →寻找属性值包含value的元素。 灵活运用，可以组合使用，例如： a[href^=’http://’][href*=’/folder2/’][href$=’.pdf’]{ } E ~ F { } 相邻兄弟连接符，选择的是文档树的同一层级中，紧邻元素E之后的任意元素F。 E + F { } 普通兄弟连接符，选择的是文档树的同一层级中，位于元素E之后的任意元素F，不管它是否直接相邻。 以上选择器大部分浏览器都支持，包括坑爹的IE。 2.伪类 E：first-child{ } //在css2引入，css3中增加11个新的结构伪类。 E：nth-child(n/2n/3n-1/odd/even){ } E：nth-of-type(n/2n/3n-1/odd/even){ } E：nth-last-child( ){ }和E：nth-last-of-type( ){ }与上面参数相同，但是元素要从最后一个算。 first-child{ }和:first-of-type{ } //选择其父元素的第一个子元素和其父元素的某种指定类型的第一个子元素。 last-child{ }和:last-of-type{ } //选择父元素的最后一个子元素和属于某种类型的最后一个子元素。 only-child和only-of-type，选择的是该元素有一个父元素，但没有任何的兄弟元素或者没有相同类型的兄弟元素。 例：p:only-of-type{ } p:only-child{ } 3.其它伪类 target伪类，指向网页内部特定元素的链接。例： <h4 id=”my_id”>Lorem ipsum</h4> <a href=”https://www.360docs.net/doc/e116506533.html,/page.html#my_id”>Lorem</a> Target伪类能够在涉及的URI被使用的时候，把样式应用到元素上。 #my_id:target{ } 其它例子.comment:target{ } empty伪类，选择没有子元素（包括文本节点）的元素。 例： <td>我</td><td></td><td>是</td> td:empty{ } //只会应用到第二个td元素，因为其它两个包含有文本节点 root伪类，选择文档树中的第一个元素，它的唯一真正作用就是发生在为XML文档添</p><h2>css常用的属性大全</h2><p>CSS常用属性大全 2011-04-22 12:51 字体属性：(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;(闪烁) 字体投影效果：filter:dropshadow(color=#FFFFFF, offx=1, offy=1, positive=1); 背景属性： (background) 色彩background-color: #FFFFFF; 图片background-image: url(); 重复background-repeat: repeat; no-repeat; repeat-x; repeat-y;滚动background-attachment: fixed;(固定) scroll;(滚动) 位置background-position: left(水平) top(垂直);bottom; right; center; 简写方法 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;(不换行)</p><h2>css的选择器描述</h2><p>css的选择器描述 选择器：选择器（selector）是CSS中重要的概念，所有的HTML标记都在通过不同的CSS选择器进行控制的，用户只需要通过选择器对不同的HTML标签进行控制，并赋予各种样式声明即可，即可实现各种效果。今天我们来看：css如何引入HTML文件进行了介绍。 1.标签选择器 一个HTML页面中很多不同的标记组成，在css标记选择器就是声明哪些标记采用哪种CSS样式，例如段落的p标签选择器，就是用于声明页面中所有的标签的样式风格。同样可以通过h1选择器来声明页面中所有的<h1>标记的CSS 风格。 代码和语法如下： P{ color: red ;} 每个CSS选择器都包含选择器本身、属性和值，其中属性和值可以设置多个，从而实现对同一个标记，声明多种样式风格。 CSS语言对所有属性和值都有相对严格的要求，如果声明的属性在CSS规范中没有，或者某个属性的值不符合该属性的要求，都不能使该CSS语句生效。 2.Id选择器 Id选择器只能在HTML页面中使用一次，因此其针对性更强，在HTML标记中只需要用id属性，就可以直接调用CSS的ID选择器 代码和语法如下： #d1{ width:100px; height:100px; color：red; } <div id=”d1”></dv> class选择器可以用于多个标记，但这里需要指出的是，将ID选择器用于多个标记是错误的，因为每个标记定义的id不只是css可以调用，JavaScript等其他脚本也可以调用，如果一个HTML中有两个相同的id的标记，将会导致JavaScript在查找id时出错，例如JavaScript中的函数getElementById()；正因为JavaScript等脚本也可以调用HTML中设置的id，因此id选择器一直被广泛应用，网站建设者在编写CSS代码时，应该养成良好的习惯，一个id最多只能赋予一个HTML标记，而且在CSS中，id选择器不支持像class选择器那样多风格同时使用，类似id=“one two”是完全错误的语法。 3.类选择器</p><h2>css属性列表 和 属性值含义</h2><p>css属性列表和属性值含义css属性列表 属性名称 字体属性（Font） font-family font-style font-variant font-weight font-size 颜色和背景属性 Color Background-color Background-image Background-repeat Background-attachment Background-position 文本属性 Word-spacing Letter-spacing Text-decoration Vertical-align Text-transform Text-align Text-indent Line-height 边距属性 Margin-top Margin-right Margin-bottom Margin-left Margin 属性含义 使用什么字体 字体是否斜体 是否用小体大 写 字体的粗细 字体的大小 定义前景色 定义背景色 定义背景图案 重复方式 设置滚动 初始位置 单词之间的间 距 字母之间的间 距 文字的装饰样 式 垂直方向的位 置 文本转换 对齐方式 首行的缩进方 式 文本的行高 分别设置上右 下左，一个值 属性值 所有的字体 Normal、italic、oblique Normal、small-caps Normal、bold、bolder、lithter等 Absolute-size、relative-size、length、 percentage等 颜色 颜色 路径 Repeat-x、repeat-y、no-repeat Scroll、Fixed Percentage、length、top、left、 right、bottom等 Normal <length> 同上 None|underline|overline|line- through|blink Baseline|sub|super|top|text-top|middl e|bottom|text-bottom| Capitalize|uppercase| lowercase|none Left|right|center|justify <length>|<percentage> Normal|<number>|<length>| <percentage> Length|percentage|auto 同上 同上 同上</p><h2>css属性(功能分类)</h2><p>css属性(功能分类)</p><p>CSS3 动画属性（Animation） 属性描述CSS @keyframes规定动画。 3 animation所有动画属性的简写属性，除了 animation-play-state 3 属性。 animation-name规定 @keyframes 动画的名称。 3 animation-duration规定动画完成一个周期所花费的秒或毫秒。 3 animation-timing-function规定动画的速度曲线。 3 animation-delay规定动画何时开始。 3 animation-iteration-count规定动画被播放的次数。 3 animation-direction规定动画是否在下一周期逆向地播放。 3 animation-play-state规定动画是否正在运行或暂停。 3 animation-fill-mode规定对象动画时间之外的状态。 3 CSS 背景属性（Background） 属性描述CSS background在一个声明中设置所有的背景属性。 1 background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。 1 background-color设置元素的背景颜色。 1 background-image设置元素的背景图像。 1 background-position设置背景图像的开始位置。 1 background-repeat设置是否及如何重复背景图像。 1 background-clip规定背景的绘制区域。 3 background-origin规定背景图片的定位区域。 3 background-size规定背景图片的尺寸。 3 CSS 边框属性（Border 和Outline） 属性描述CSS border在一个声明中设置所有的边框属性。 1 border-bottom在一个声明中设置所有的下边框属性。 1 border-bottom-color设置下边框的颜色。 2</p><h2>css属性大全</h2><p>字体属性：(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;</p><h2>CSS中的基本选择器</h2><p>海文国际https://www.360docs.net/doc/e116506533.html, CSS中的基本选择器 使用简单且频率高的一些选择器归类为基本选择器。 1.通用选择器 * { border: 1px solid red; } 解释：“*”号选择器是通用选择器，功能是匹配所有html 元素的选择器包括<html>和<body>标签。可以使用如下元素标记测试效果：段落 <b>加粗</b> <span>无</span> 通用选择器会将所有元素匹配并配置样式，这是把双刃剑，好处就是非常方便，坏处就是将不必要的元素也配置了。目前为止，还不存在所有元素都必须配置的样式，所以，一般来说，不常用。 2.元素选择器 p { color: red; } 段落</p><p>海文国际https://www.360docs.net/doc/e116506533.html, 解释：直接使用元素名称作为选择器名即可。 3.ID 选择器 #abc { font-size: 20px; } <p id="abc">段落 解释：通过对元素设置全局属性id，然后使用#id 值来选择页面唯一元素。 4.类选择器 .abc { border: 1px solid red; } <b class="abc">加粗</b> <span class="abc">无</span> 解释：通过对元素设置全局属性class，然后使用.class 值选择页面一个或多个元素。 b.abc { border: 1px solid red; } 解释：也可以使用“元素.class 值”的形式，限定某种类型的元素。<span class="abcedf">无</span></p><p>海文国际https://www.360docs.net/doc/e116506533.html, 解释：类选择器还可以调用多个样式，中间用空格隔开进行层叠。 5.属性选择器 //所需CSS2 版本 [href] { color: orange; } 解释：属性选择器，直接通过两个中括号里面包含属性名即可。当然，还有更多扩展的属性选择器。 //所需CSS2 版本 [type="password"] { border: 1px solid red; } 解释：匹配属性值的属性选择器。 //所需版本CSS3 [href^="http"] { color: orange; } 解释：属性值开头匹配的属性选择器。 //所需版本CSS3 [href$=".com"] { color: orange;</p><h2>HTML中CSS样式标签大全及用法</h2><p>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)</p></div>
<div class="rtopicdocs">
<div class="coltitle">相关主题</div>
<div class="relatedtopic">
<div id="tabs-section" class="tabs">
<ul class="tab-head">
<li id="22745585"><a href="/topic/22745585/" target="_blank">css选择器</a></li>
<li id="12818138"><a href="/topic/12818138/" target="_blank">css属性列表</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="rightcol" class="viewcol">
<div class="coltitle">相关文档</div>
<ul class="lista">
<li><a href="/doc/cc306510.html" target="_blank">HTML5开发培训CSS选择器及文字段落属性和背景属性和列表属性(上)(DOC)</a></li>
<li><a href="/doc/f88829707.html" target="_blank">CSS基本选择器</a></li>
<li><a href="/doc/116689066.html" target="_blank">CSS选择器</a></li>
<li><a href="/doc/5814935905.html" target="_blank">CSS页面选择器.ppt</a></li>
<li><a href="/doc/a51696265.html" target="_blank">css常用选择器命名</a></li>
<li><a href="/doc/c718782450.html" target="_blank">css基础知识--四种样式表及六种选择器</a></li>
<li><a href="/doc/364442578.html" target="_blank">CSS链接伪类选择器</a></li>
<li><a href="/doc/6415396476.html" target="_blank">HTML第13章 CSS3的选择器</a></li>
<li><a href="/doc/b51733100.html" target="_blank">CSS选择器的权重与优先规则</a></li>
<li><a href="/doc/e515695874.html" target="_blank">CSS3学习之常见的4种伪元素选择器</a></li>
<li><a href="/doc/0111732215.html" target="_blank">CSS选择器笔记</a></li>
<li><a href="/doc/5e4012460.html" target="_blank">css的选择器描述</a></li>
<li><a href="/doc/8a19126816.html" target="_blank">CSS复合选择器使用方法</a></li>
<li><a href="/doc/c616463932.html" target="_blank">CSS3选择器</a></li>
<li><a href="/doc/3f841902.html" target="_blank">Selenium Webdriver CSS 选择器定位</a></li>
<li><a href="/doc/6515054307.html" target="_blank">CSS中的基本选择器</a></li>
<li><a href="/doc/ab14207172.html" target="_blank">实验14 CSS选择器</a></li>
<li><a href="/doc/eb13462876.html" target="_blank">CSS所有的选择器类型总结</a></li>
<li><a href="/doc/093447294.html" target="_blank">HTML5+CSS3网页设计实例教程 第8章 CSS3选择器</a></li>
<li><a href="/doc/3017239294.html" target="_blank">【CSS】CSS-三种样式+样式选择器+属性</a></li>
</ul>
<div class="coltitle">最新文档</div>
<ul class="lista">
<li><a href="/doc/0f19509601.html" target="_blank">幼儿园小班科学《小动物过冬》PPT课件教案</a></li>
<li><a href="/doc/0119509602.html" target="_blank">2021年春新青岛版(五四制)科学四年级下册 20.《露和霜》教学课件</a></li>
<li><a href="/doc/9b19184372.html" target="_blank">自然教育课件</a></li>
<li><a href="/doc/3019258759.html" target="_blank">小学语文优质课火烧云教材分析及课件</a></li>
<li><a href="/doc/d819211938.html" target="_blank">(超详)高中语文知识点归纳汇总</a></li>
<li><a href="/doc/a419240639.html" target="_blank">高中语文基础知识点总结(5篇)</a></li>
<li><a href="/doc/9d19184371.html" target="_blank">高中语文基础知识点总结(最新)</a></li>
<li><a href="/doc/8a19195909.html" target="_blank">高中语文知识点整理总结</a></li>
<li><a href="/doc/8519195910.html" target="_blank">高中语文知识点归纳</a></li>
<li><a href="/doc/7f19336998.html" target="_blank">高中语文基础知识点总结大全</a></li>
<li><a href="/doc/7119336999.html" target="_blank">超详细的高中语文知识点归纳</a></li>
<li><a href="/doc/6619035160.html" target="_blank">高考语文知识点总结高中</a></li>
<li><a href="/doc/6719035161.html" target="_blank">高中语文知识点总结归纳</a></li>
<li><a href="/doc/4a19232289.html" target="_blank">高中语文知识点整理总结</a></li>
<li><a href="/doc/3b19258758.html" target="_blank">高中语文知识点归纳</a></li>
<li><a href="/doc/2619396978.html" target="_blank">高中语文知识点归纳(大全)</a></li>
<li><a href="/doc/2b19396979.html" target="_blank">高中语文知识点总结归纳(汇总8篇)</a></li>
<li><a href="/doc/1419338136.html" target="_blank">高中语文基础知识点整理</a></li>
<li><a href="/doc/ed19066069.html" target="_blank">化工厂应急预案</a></li>
<li><a href="/doc/bd19159069.html" target="_blank">化工消防应急预案(精选8篇)</a></li>
</ul>
</div>
</div>
<script>
var sdocid = "ede4791c581b6bd97f19ea21";
</script>
<div class="clearfloat"></div>
<div id="footer">
<div class="ft_info">
<a href="https://beian.miit.gov.cn">闽ICP备16038512号-3</a> <a href="/tousu.html" target="_blank">侵权投诉</a> ©2013-2023 360文档中心,www.360docs.net | <a target="_blank" href="/sitemap.html">站点地图</a><br />
本站资源均为网友上传分享，本站仅负责收集和整理，有任何问题请在对应网页下方投诉通道反馈
</div>
<script type="text/javascript">foot()</script>
</div>
</body>
</html>]]></plaintext></div></div>
