CSS 指层叠样式表 (Cascading Style Sheets) 和选择器

您所在的位置:网站首页 css选择器规则 CSS 指层叠样式表 (Cascading Style Sheets) 和选择器

CSS 指层叠样式表 (Cascading Style Sheets) 和选择器

2023-06-06 23:40| 来源: 网络整理| 查看: 265

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 selector

class 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 Selector

Attribute 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