html添加css——样式选择器

如何给html添加样式。两种方法：

一、新建立一个css样式表，与原html同目录，然后通过link标签链接。如：<link type="text/css" rel="stylesheet" href="lounge.css">（link标签是一个void元素，无结束标签。）

二、直接在html源码中使用style标签。如：<style>样式</style>，style标签嵌入head中。

html中插入style，则会涉及到五种样式选择器。

1、元素选择器,给某一元素添加样式

如下:p元素与h1元素内的文本应用大括号内的样式

<style>

p,h1{color:grey;

background-color:red;

font-family:sans-serif;}

</style>

 

2、类选择器，class属性

在 <style> 标签中创建一个名为 blue-text 的CSS类,然后将类应用于HTML元素。

如：

<style>

.blue-text{color:black;}

</style>

<p class="blue-text">

注意，在CSS样式元素中，类选择器应该添加.为前缀。而在HTML元素的类声明中，类属性不能添加.为前缀。

类选择器不一定只针对某一标签，只要元素应用了class标签，则就使用此css类。

 

3、id属性设置样式

与class类似，为元素定义一个id，给id创建一个声明。例：

<p id="important"></p>

<style>

#important{color:black;}

</style>

注意：与class不同的是，在css样式元素中，应添加#为前缀，html中没有前缀。一个id对应一个css属性。

 

4、属性选择器，选择某个元素应用样式

如：*[title]{color:red;}

所有包含title属性的元素都可应用以上样式。

 

5、后代选择器又称为包含选择器。后代选择器可以选择作为某元素后代的元素。

根据上下文选择元素

可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。

举例来说，如果希望只对 h1 元素中的 em 元素应用样式，可以这样写：

h1 em {color:red;}

上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中：

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

再比如说：一个div元素中 要对其中一个元素进行样式改变，比如h2，因为在前面有一个类已经定义了所有h1.h2的样式，而h2又有一部分留在div中，
所以不允许直接对上面的class类中的h1和h2进行样式改变。因而可以使用后代选择器：div h2{}

附：p>em{color；red；}表示紧挨着p的em元素使用此样式。
p+em{}与p元素紧邻的em元素使用此样式。
h1+p{}h1后面紧邻的p应用此样式。