当样式仅需要在一个元素上应用一次时, 要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style属性可以包含任何属性。由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法
3、在元素标签内直接指定样式,内联样式
当单个文档需要特殊的样式时,就应该使用内部样式表。可以使用
2、自定义内部样式
标签在(文档的)头部:
标签链接到样式表。
当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用
1、引入外部样式
1.CSS参考手册 几个常用style属性: background 在一个声明中设置所有的背景属性。 background-color 设置元素的背景颜色 border 在一个声明中设置所有的边框属性 height 设置元素高度。 width 设置元素的宽度。 font 在一个声明中设置所有字体属性。 font-size 规定文本的字体尺寸。 margin 在一个声明中设置所有外边距属性 padding 在一个声明中设置所有内边距属性。 color 设置文本的颜色。 text-align 规定文本的水平对齐方式。 text-decoration规定添加到文本的装饰效果。 2.CSS选择器参考手册 1)CSS .class 选择器 选择并设置 class="intro" 的元素的样式: .intro { background-color:yellow; } 2)CSS #id 选择器 为 id="firstname" 的元素设置样式: #firstname { background-color:yellow; } 3)CSS * 选择器 选择所有元素,并设置它们的背景色: * { background-color:yellow; } 4)CSS element 选择器(元素选择器) 选择并设置所有元素的样式: p { background-color:yellow; } 5)CSS element,element 选择器(选择器分组) 选择并设置所有
元素的样式: h1,p { background-color:yellow; } 6)CSS element element 选择器(后代选择器) 选择并设置位于
元素内部的每个元素的样式: div p { background-color:yellow; } 7)CSS element>element 选择器(子元素选择器) 选取父元素是
元素的每个元素,并设置其背景色: div>p { background-color:yellow; } 8)CSS element+element 选择器(相邻兄弟选择器) 选择
元素之后紧跟的每个元素,并设置其背景色: div+p { background-color:yellow; } 9)CSS [attribute] 选择器(属性选择器) 为带有 target 属性的 元素设置样式: a[target] { background-color:yellow; } 10)CSS [attribute=value] 选择器 为 target="_blank" 的 元素设置样式: a[target=_blank] { background-color:yellow; } 11)CSS [attribute~=value] 选择器 选择 titile 属性包含单词 "flower" 的元素,并设置其样式: [title~=flower] { background-color:yellow; } 12)CSS [attribute|=value] 选择器 选择 lang 属性值以 "en" 开头的元素,并设置其样式: [lang|=en] { background-color:yellow; } 13)CSS3 element1~element2 选择器 为所有相同的父元素中位于 p 元素之后的所有 ul 元素设置背景: p~ul { background:#ff0000; } 14)CSS3 [attribute^=value] 选择器 设置 class 属性值以 "test" 开头的所有 div 元素的背景色: div[class^="test"] { background:#ffff00; } 15)CSS3 [attribute$=value] 选择器 设置 class 属性值以 "test" 结尾的所有 div 元素的背景色: div[class$="test"] { background:#ffff00; } 16)CSS3 [attribute*=value] 选择器 设置 class 属性值包含 "test" 的所有 div 元素的背景色: div[class*="test"] { background:#ffff00; } 17)CSS :hover 选择器 选择鼠标指针浮动在其上的元素,并设置其样式: a:hover { background-color:yellow; } ...
1.定义a标签,内联样式style="text-decoration:none;"(取消a标签的下划线):
被审计单位 2.编写外部css文件,ledgerMasterInfo.css /**鼠标指针浮动在a标签,其上的元素变色**/ a[class ^= "aTagHoverFontRed"]:hover{ background-color:#E7EAEE; color:red; font-size:16px; } 3.引入外部样式 测试:当鼠标移到a标签上时,a标签背景颜色改变,字体变为红色,字体大小为16px。鼠标移除后恢复。来源: http://www.2cto.com/kf/201706/647734.html