CSS规则引入html文档的方式，CSS常用选择器

1. 实例演示css规则的三种引入到html文档中的方式

行内样式: 使用style属性，仅对于使用了这个属性的当前元素有效
```
<h3 style="color:red">行内样式，仅设置了本h3元素的颜色</h3>
```

内部样式: 使用 style 标签，仅对当前文档的元素有效

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>内部样式</title>
  <style>
      h3 {
          color: red;
      }
  </style>
</head>
<body>
  <h3>内部样式，设置了本文档中h3元素的颜色</h3>
  <h3>这个h3元素的颜色也同时被设置了</h3>
</body>

外部样式: 使用 link 标签，对所有引入这个css样式表的html文档有效

/* file:style.css */
h3 {
 color:red;
}

<!-- 外部样式1.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>外部样式1</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h3>外部样式，设置了本文档中h3元素的颜色</h3>
  <h3>这个h3元素的颜色也同时被设置了</h3>
</body>
</html>

<!-- 外部样式2.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>外部样式2</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h3>外部样式，同样也设置了这个文档中h3元素的颜色</h3>
  <h3>同样，这个h3元素的颜色也被设置了</h3>
</body>
</html>

对于一个网站来说,许多页面元素的样式是相同的,将这些相同样式剥离出来,形成独立的CSS文档，可以实现模块化，便于后期调整修改。

2. 实例演示选择器

演示html

<!-- demo2.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>选择器使用</title>
  <link rel="stylesheet" href="css/css_demo2.css">
</head>
<body>
  <ul id="idxz">
      <li class="classxz">PHP</li>
      <li class="classxz">JAVA</li>
      <li class="classxz1">C#</li>
      <li class="classxz">PYTHON</li>
  </ul>
</body>
</html>

标签选择器

/*标签选择器 返回一组此标签*/
li{
  border:1px soild red;
}

class选择器

/*类选择器 一组 使用方式 .类名*/
.classxz{
  color:red;
}

id选择器

/*id 选择器 浏览器不保证唯一性由开发者自定义 使用方式 #id*/
#idxz{
  background-color:blue;
}

上下文选择器

/* 后代选择器  所有层级*/
ul li{
  color:blue;
}
/*子元素选择器  仅父子层级*/
body>ul>li{
  background-color:red;
}
/*同级相邻选择器*/
.classxz1+li{
  background-color:bule;
}
/*同级所有选择器*/
classxz~li{
  color:yellow;
}

结构伪类选择器

/*伪类选择器*/
/* 匹配任意位置的元素:nth-of-type(an+b) */
/* an+b: an起点,b是偏移量, n = (0,1,2,3...) */
/* 匹配第3个li */
ul li:nth-of-type(0n+2) {
  background-color: violet;
}
/* 0乘以任何数都等于0,通常直接写偏移量就可以 */
ul li:nth-of-type(2) {
  background-color: violet;
}
/*  反向获取任意位置的元素: `nth-last-of-type(an+b)` */
/* 选择倒数2个 */
ul li:nth-last-of-type(-n+2) {
  background-color: violet;
}
/* 选择所有索引为偶数的子元素, */
ul li:nth-of-type(2n) {
  background-color: yellow ;
}

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

前端基础第一课作业（12.8）

2020-12-09 18:06:57