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

时间:2023-03-08 16:33:57
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  当前选中的链接伪类选择器

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