css3

css3比html5要难些，而且要记忆的也多

初识css

css导入的三种方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!-- ①内部样式：html文件中直接使用style标签可以编写css代码，每一个声明使用分号结尾 -->
    <style>
        h1{
            color: #e82fdd;
        }
    </style>

<!-- ②外部样式：css单独提出来写一个文件，再使用link标签引入   -->
    <link rel="stylesheet" href="style01.css">

</head>
<body>

<h1>我是内部样式</h1>

<h2>我是外部样式</h2>

<!-- ③行内样式：在标签元素中使用style属性编写样式 -->
<h3 style="color: blueviolet">我是行内样式</h3>

</body>
</html>
<!--
三种导入样式优先级：
就近原则，假如本程序中三种样式都作用于h3标签时，优先级为③ > ② > ①
-->
1
2
3
4
/*index中的样式，该css文件名为style01.css*/
h2{
    color: aqua;
}

image-20230202185854616

css的优势：

  1. 内容和表现分离
  2. 网页结构表现统一，可以实现复用
  3. 样式十分的丰富
  4. 建议使用独立于html的css文件
  5. 利于SEO，容易被搜索引擎收录！

基本选择器

作用：选择页面上某一个或者某一类元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
    
    <link rel="stylesheet" href="style01.css">
    
</head>
<body>

<p>标签选择器1</p>
<p>标签选择器2</p>

<h4 class="ruh">类选择器1</h4>
<h4 class="ruh">类选择器2</h4>

<h5 id="yun">id选择器1</h5>
<h5 id="ruu">id选择器2</h5>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*标签选择器*/
p{
    color: #e82fdd;
}
/*类选择器*/
.ruh{
    color: #25a209;
}
/*id选择器*/
#yun{
    color: #2e15ff;
}
#ruu{
    color: #d51708;
}

image-20230202190003292

基本选择器:

  1. 标签选择器:会选择到页面上所有的这个标签
  2. 类选择器:可以多个标签归类，是同一个class可以复用
  3. id选择器:必须保证全局唯一
  4. 不遵循就近原则，id > class > 标签

层次选择器

  1. 后代选择器:某个标签后所有元素
  2. 子选择器：某个标签后一代元素
  3. 相邻兄弟选择器：相邻向下取一个
  4. 通用选择器:相邻向下所有元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>

  <link rel="stylesheet" href="style02.css">
    
</head>
<body>
    
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
  <li>
      <p>p4</p>
  </li>
  <li>
      <p>p5</p>
  </li>
  <li>
      <p>p6</p>
  </li>
</ul>
<strong>hhhh1</strong>
<strong class="ss">hhhh2</strong>
<strong>hhhh3</strong>
<strong class="cc">hhhh4</strong>
<strong>hhhh5</strong>
<strong>hhhh6</strong>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*demo02中的样式*/
/*后代选择器,选择body元素中的ul元素中的p元素，即p4,p5,p6*/
body ul p{
    background: aqua;
}
/*子选择器，选择body标签中第一代p标签,即p1,p2,p3*/
body>p{
    background: #e82fdd;
}
/*相邻兄弟选择器，选择class为ss且向下一个的strong标签,即hhhh3*/
.ss + strong{
    background: #2e15ff;
}
/*通用选择器，选择class为cc后所有的strong标签,即hhhh5,hhhh6*/
.cc~strong{
    background: rgba(19,162,21,0.98);
}

image-20230202185609804

结构伪类选择器(了解，认识)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>

    <link rel="stylesheet" href="style03.css">
</head>
<body>

<h1>h1</h1>
<h1>h2</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<ul>
    <li>1</li>
    <li>2</li>
</ul>
<p>p5</p>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*demo03中的样式*/
/*body的第一个子元素加上背景,即h1*/
body h1:first-child{
    background: #e82fdd;
}
/*ul的最后一个子元素加上背景，即数字2*/
ul li:last-child{
    background: aqua;
}
/*body的第三个子标签*/
/*选中p元素的父级元素下的第三个元素，并且是当前元素才生效，即p1*/
p:nth-child(3){
    background: aquamarine;
}
/*body的第四个子标签*/
/*选中p元素的父级元素下的同类型的第二个元素，即p2*/
p:nth-of-type(2){
    background: #25a209;
}

image-20230202190332408

属性选择器(重点)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <link rel="stylesheet" href="style04.css">
</head>
<body>
<a href="../source/image/1.png" class="abc cd ha" id="kkk">111</a>
<a href="../source/image/1.png" class="abc cd" id="jjj">222</a>
<a href="../source/image/1.png" class="abc hg ha">333</a>
<a href="../source/image/1.png" class="abc hg ha">444</a>
<a href="https://www.ruheyun.cn" class="abc cd cd">555</a>
<a href="https://www.ruheyun.cn" class="abc cd cd">666</a>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*demo04中的样式*/
/*存在id属性的元素，加上背景，即111，222*/
a[id]{
    background: aqua;
}
/*id=jjj的元素加上背景色，即222*/
a[id=jjj]{
    background: #25a209;
}
/*class中有hg的元素，加上背景色，即333，444*/
a[class*=hg]{
    background: #d51708;
}
/*href中以http开头的元素加上背景色，即555，666*/
a[href^=http]{
    background: rgba(238,231,33,0.85);
}
/*
=  绝对等于
*=  包含
^=  以什么开头
$=  以什么结尾
正则表达式都通用
*/

image-20230202190713151

这里推荐两个可以查html和css的网站

w3school

菜鸟教程