HTML5 -入门 (---css样式-------------（css基础与css选择器）---------------------—）

---恢复内容开始---

一css基础入门与css选择器

CSS英文全拼：cascading style sheet 层叠样式表。

在html中使用：要在head中写style标签，所有样式放在style标签中。

<style>

      color: red;  设置文本颜色

font-size: 30px; 设置文本大小

设置背景颜色

background-color: blue;

font-weight: bold; 设置文本粗体

font-style: italic; 设置文本斜体

注意：凡是font开头的想要设置默认的样式则使用normal

text-decoration: underline; 设置文本下滑线，如果去除下滑线则用none这个属性

</style>

1标签选择器

 eg：

   <h1></h1>

   h1{...}

代码中h1、p、li、span都是标签选择器。只要在当前页面中出现的h1、p、li、span标签都会被修改样式。

2 id选择器

id选择器，它选择的标签更专一，就是唯一的。Id不可以重复，在同一页面中只允许有一个id名字。

Id的命名规则：只能有数字、字母、下划线组成。只能以字母开头，并且id名字不可以和标签重名。

eg:

<div id="div"></div>

#div{...}

3 类选择器

eg：

<p class="hong ">我们</p>

.hong{...}

类选择器，首先需要我们为标签设置class名字。通过class写类样式。

1、Class在页面中可以重复

2、一个class样式可以同时为多个标签提供使用

3、一个标签可以设置多个类样式

我们可以将公用的样式抽取出来，作为公共类样式使用。

4后代选择器

eg: <div class="one">

      <ul>

        <li></li>

      </ul>

   </div>

.one ul li{

color: red;

font-size: 30px;

}

上面使用的就是后代选择器，首先由名字为One的class找到后代ul然后再找到后代li。

也就是说li是ul的后代ul是one的后代！

4交集选择器

div ul li.first{

text-decoration: underline;

}

li.first它就是交集选择器，他就是在一起，没有空格也没有任何符号。

交集选择器选择方式：它既符合是li标签，又符合是.First类，取交集。

一般交集只写两个。

5并集选择器

eg:

.first,.second{

text-decoration: underline;

}

这是并集选择器，并集选择器是使用逗号分隔开。

最好不要经常使用它，应为效率不高

6通用选择器

*{} ：它就是通用选择器，所有的标签都可以用它的样式

7子代选择器

div>p：使用“>”来写子代选择器，它只能选择div的子代，不能选择子代的子代

8序选择器

div ul li p:first-child 这个是选择的第一个p标签

div ul li p:last-child 这个是选择的最后一个p标签

9伪类选择器

a:hover 鼠标悬停时候会触发使用的选择器

a:link 未访问过得链接伪类选择器

a:visited 访问过得链接伪类选择器

a:active  当前选中的链接伪类选择器

---恢复内容结束---