从基础复习前端html--4.css选择器

一、css的选择器。

1.id选择器。

id选择器可以为标有特定id的HTML元素指定特定的样式，id选择器以#来定义。

2.class选择器。

类选择器以点号显示。

3.属性选择器。

[title]{color:red}表示为带有title属性的所有元素设置样式。

[title=W3School]{}表示为title=“W3School”的所有元素设置样式。

[title~=hello]{}表示为包含指定值的title属性的所有元素设置样式，适用于由空格分隔的属性值。

[lang|=en]{}表示为带有包含指定值的lang属性的所有元素设置样式，适用于由连字符分隔的属性值。

设置表单的样式，属性选择器在为不带有class或id的表单设置样式时特别有用。

input[type="text]{},input[type="button"]{}。

4.派生选择器。

通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。

li strong{}表示li元素下的strong元素的样式。

二、如何创建css。

当读到一个样式表时，浏览器会根据它来格式化HTML文档。插入样式表的方法有三种：

1.外部样式表。

当样式需要应用于很多页面时，首选外部样式表。可以挺过改变一个文件来改变整个站点的外观，每个页面使用<link>标签连接到样式表。<link>标签在（文档的）头部。

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

2.内部样式表。

当单个文档需要特殊的样式时，就应该使用内部样式表。用<style>标签在文档头部定义内部样式表。

3.内敛样式。

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。