CSS概述及选择器

最新推荐文章于 2024-01-20 13:55:48 发布

_Alice

最新推荐文章于 2024-01-20 13:55:48 发布

阅读量424

点赞数

分类专栏：自动化测试文章标签： css html

本文链接：https://blog.csdn.net/BEEKSTAR/article/details/78910651

版权

自动化测试专栏收录该内容

13 篇文章 3 订阅

订阅专栏

一、 CSS概述
层叠样式表，样式定义如何显示HTML元素，为了解决内容与表现分离的问题，外部样式表可抵达提高工作效率。
分类：
样式
1）可以规定在单个的 HTML 元素中，在 HTML 页的头元素中；
2）在一个外部的 CSS 文件中；
3）甚至可以在同一个 HTML 文档内部引用多个外部样式表。
优先级：

浏览器缺省设置
外部样式表
每个页面使用 <link> 标签链接到样式表。标签在（文档的）头部：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

内部样式表（位于标签内部）
使用 <style> 标签在文档头部定义内部样式表，就像这样:

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

内联样式（在 HTML 元素内部）【最高】
在相关的标签内使用样式（style）属性。

<p style="color: sienna; margin-left: 20px">

二、语法
1、CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明（最后一条声明后分好可有可无，建议加上，减少从现有的规则中增减声明时，出错的可能性）。

selector {declaration1; declaration2; ... declarationN }

选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。

selector {property: value}

如：

h1 {color:red; font-size:14px;}

【注】CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的
2、选择器分组

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

三、选择器分类
1、派生选择器
后代选择器（包含选择器），子元素选择器，相邻兄弟选择器
通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。
1）后代选择器：两个元素之间的层次间隔可以是无限的

li strong {
    font-style: italic;
    font-weight: normal;
  }

此选择器只会识别 li 下的strong元素
2）子元素选择器：只能选择作为某元素子元素的元素
只作为 h1 元素子元素的 strong 元素：

h1 > strong {color:red;}

3）可选择紧接在另一元素后的元素，且二者有相同父元素。
增加紧接在 h1 元素后出现的段落的上边距

h1 + p {margin-top:50px;}

只加粗后两个
这里写图片描述

2、id选择器
为标有特定 id 的 HTML 元素指定特定的样式。以“#”来定义
【注】id 属性只能在每个 HTML 文档中出现一次

下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：

#red {color:red;}
#green {color:green;}

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

3、类选择器
以 . 表示

.center {text-align: center}

<h1 class="center">
This heading will be center-aligned
</h1>

4、属性选择器
为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
1）为带有 title 属性的所有元素设置样式：

[title]
{
color:red;
}

2）为 title=”W3School” 的所有元素设置样式：

[title=W3School]
{
border:5px solid blue;
}

3）为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：

[title~=hello] { color:red; }

4）为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：

[lang|=en] { color:red; }

选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute\|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。