CSS 指层叠样式表 (Cascading Style Sheets) 和选择器 |
您所在的位置:网站首页 › css选择器规则 › CSS 指层叠样式表 (Cascading Style Sheets) 和选择器 |
CSS 指层叠样式表 (Cascading Style Sheets)
内联样式(行内样式)
在开始标记中通过style属性(attribute)来设置元素的样式。注意,这里的 property 指的是 CSS 属性(property) 购物清单 商品名 数量 价格(元) 牙刷 2 10.5 毛巾 4 24 衣架 20 16.8 牙刷 2 10.5 内嵌样式(内部样式)在 HTML 文档中通过 style 元素插入CSS样式。通常将 内嵌样式(内部样式) 添加到 head 区域内。 DOCTYPE html> Document caption{ font-size: 20px; color: darkblue; } th{ background-color: cornflowerblue; } 购物清单 商品名 数量 价格(元) 牙刷 2 10.5 毛巾 4 24 衣架 20 16.8 牙刷 2 10.5其中内嵌样式的 style元素 实在head元素中的。 caption{ font-size: 20px; color: darkblue; } th{ background-color: cornflowerblue; } 选择器 Type Selector最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。 如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身: html{ color: rgb(191, 121, 248); } caption{ font-size: 20px; color: darkblue; } th{ background-color: cornflowerblue; }Type Selector也称作 tag name selector,国内资料上通常称作 标签选择器 Type Selector是根据元素类型(即标签名称)来选择页面上的元素。 type selector在 W3C 标准中,元素选择器又称为类型选择器(type selector)。 “类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。” h1 {font-family: sans-serif;} class selectorclass selector允许以一种独立于文档元素的方式来指定样式。 该选择器可以单独使用,也可以与其他元素结合使用。所有元素的 calss 属性值中都可以包含多个 class-name (它们之间使用空格隔开即可) /* 选择页面上显式书写了class属性(attribute)且该属性值中包含`odd`一词的元素 */ /*[class~=odd] { */ .odd{ background-color: #dfdfdf; } /* 选择页面上显式书写了class属性(attribute)且该属性值中包含`even`一词的元素 */ .even { background-color: #ffff00; } .yuan-fang { border: 1px solid blue; } ID selector首先,ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。 #seventh { border: 1px solid green; }并且要保证元素中的 id属性 是唯一的。 第一个 老二 小三 老四 小五 小六汤包 每一天 Attribute SelectorAttribute Selector被翻译为属性选择器。[attribute]用于选择显式定义了指定属性的元素。 [attribute~=word]用于选择显式定义了指定属性并且该属性值中包含指定单词的元素。[attrivute=value]用于选择显式定义了指定属性并且该属性值等于给定值的元素。 [id] { color: blue; border: 1px solid green; } /* 选择页面上显式书写了 class 属性(attribute)的元素 */ [class] { text-align: right; border: 1px solid green; } /* 选择页面上显式书写了class属性(attribute)且该属性值中包含`odd`一词的元素 */ [class~=odd] { background-color: #dfdfdf; } /* 选择页面上显式书写了id属性(attribute)且该属性值等于给定值的元素 */ [id=seventh] { background-color: #ff0; } structural pseudo-classes超链接 本例演示如何向文档中的超链接添加不同的颜色。 超链接 2 本例演示如何向超链接添加其他样式。 超链接 - :focus 的使用 本例演示如何对超链接应用 :focus 伪类(无法在 IE 中工作)。 :first-child(首个子对象) 本例演示 :first-child 伪类的用法。 : lang(语言) 本例演示 : lang 伪类的用法。 /* Universal Selector */ * { margin: 50px; border: 1px solid blue; } /* structural pseudo-classes */ :root { border-color: red; } :empty { height: 20px; background-color: #dfdfdf; } |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |