HTML+CSS(2)

01选择器续

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        /*子孙后代选择器*/
      /*  body div div p{
            color: red;
        }*/
        /*子元素选择器*/
        body>div>p{
            color: red;
        }
        /*伪类选择器*/
        a:link{color: red}/*未访问*/
        a:visited{color: green}/*访问过*/
        a:hover{color: yellow}/*悬停*/
        a:active{color: blue}
    style>
head>
<body>
<a href="http://www.tedu.cn">超链接1a>
<a href="http://www.baidu.com">超链接2a>
<a href="http://www.youku.com">超链接3a>
<p>p1p>
<div>
    <p>p2p>
    <div><p>p3p>div>
    <div>
        <p>p4p>
        <div><p>p5p>div>
    div>
div>
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
25
26
27
28
29
30
31
32
33
34
35
36

2.选择器练习

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        #gy{color: green}
        .c1{color: yellow}
        input[type='text'],body>p{background-color: red}
        /*子元素选择器*/
        body>div>div>p{color: pink}
        a:link{color: green}
        a:visited{color: red}
        a:hover{color: yellow}
        a:active{color: pink}
    style>
head>
<body>
<ul>
    <li>刘备li><li id="gy">关羽li><li class="c1">张飞li>
ul>
<p>香蕉p><p class="c1">苹果p>
<input type="text">
<input type="password">
<div>
    <p>p1p>
    <div><p>p2p>div>
    <div><div><p>p3p>div>div>
div>
<a href="http://www.qq.com">腾讯官网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
25
26
27
28
29
30
31
32

3.颜色赋值

三原色RGB RedGreenBlue , 每种颜色的取值范围0-255
五种赋值方式:
- 颜色单词赋值: red/green/blue/yellow/pink…
- 6位16进制: #ff 00 00
- 3位16进制: #f00
- 3位10进制: rgb(255,0,0)
- 4位10进制: rgba(255,0,0,0-1) a=alpha 透明度值越小越透明

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        h1{
            color: red;
            color: #00ff00;
            color: #00f;
            color: rgb(255,255,0);
            color: rgba(255,0,0,0.2);
        }
        #d1{
            width: 200px;
            height: 200px;
            background-color: purple;
            /*设置背景图片*/
            background-image: url("../imgs/a.jpg");
            /*设置背景图片的尺寸:宽 高*/
            background-size: 100px 100px;
            /*禁止重复*/
            background-repeat: no-repeat;
            /*控制位置:横向x 纵向y 通过像素偏移值*/
            background-position: 20px 50px;
            /*控制位置:横向x 纵向y 、通过百分比*/
            background-position: 80% 80%;
        }
        #d2{
            width: 611px;
            height: 376px;
            background-color: #e8e8e8;
            background-image: url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img1.png");
            background-repeat: no-repeat;
            background-size: 318px 319px;/*这个是设置图片的宽高*/
            background-position: 90% 80%;

        }

    style>
head>
<body>
<div id="d2">div>
<div id="d1">背景测试div>
<h1>颜色测试h1>
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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

4.文本和字体

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        div{
            width: 200px;
            height: 40px;
            /*文本水平对齐方式*/
            text-align: center;
            /*文本修饰overline上划线,
            underline下划线,line-through删除线，none去掉文本修饰*/
            text-decoration: line-through;
            /*行高,控制行间距，如果只有单行文本可以实现垂直居中*/
            line-height: 40px;
            /*文本阴影:颜色 x偏移值 y偏移值 模糊度(值越小越清晰)*/
            text-shadow: green 5px 5px 5px;
            /*字体大小*/
            font-size: 20px;
            /*加粗*/
            font-weight: bold;
            font: 30px cursive;
        }
        a{text-decoration: none}
        h1{
            font-weight: normal;/*去掉加粗*/
            /*斜体*/
            font-style: italic;
            /*设置字体*/
            font-family: cursive;
        }
    style>
head>
<body>
<h1>这是h1h1>
<a href="">超链接a>
<div>文本和字体div>
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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

5.文本和字体练习

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        #d1{
            width: 100px;
            height: 30px;
            background-color: green;
            color: red;
            text-align: center;
            line-height: 30px;
        }
        span{
            font-size: 25px;
            font-style: italic;
        }
        #bx{
            font-weight: normal;
            text-shadow: blue -5px 5px 3px;
        }
        #xyj{
            text-decoration: underline;
        }
        a{
            text-decoration: none;
            font-weight: bold;
            font-size: 20px;
        }
    style>
head>
<body>
<div id="d1">刘德华div><div>张学友div>
<span>香蕉span>
<span>苹果span>
<h1 id="bx">冰箱h1>
<h1 id="xyj">洗衣机h1>
<a href="http://www.baidu.com">百度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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

6.显示方式

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        /*块级元素 独占一行 可以修改宽高*/
        div{
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        span{
            /*行内元素 共占一行 不能修改宽高*/
            border: 1px solid blue;
            width: 100px;
            height: 100px;
        }
        img{
            /*行内块元素 共占一行 可以修改宽高*/
            width: 100px;
            height: 100px;
        }
        a{
            background-color: #0aa1ed;
            width: 132px;
            height: 40px;
            /*如果行内元素需要修改宽高，必须将显示方式改成block或inline-block*/
            display: block;
            text-align: center;
            line-height: 40px;
            color: white;
            text-decoration: none;
            font-size: 20px;
            border-radius: 3px;/*设置圆角,值越大越圆*/
        }
    style>
head>
<body>
<a href="">查看详情a>
<img src="../imgs/a.jpg" alt="">
<img src="../imgs/a.jpg" alt="">
<img src="../imgs/a.jpg" alt="">
<div>div1div>
<div>div2div>
<div>div3div>
<span>span1span>
<span>span2span>
<span>span3span>
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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

7.外边距

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        #d1{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /*单独某个方向添加外边距*/
            /*margin-right:100px*/
            /*margin-top:50px*/
            /*四个方向添加外边距*/
            margin: 50px;
            /*上下和左右添加外边距*/
            margin: 100px 50px;
            /*上下左右 顺时针赋值*/
            margin: 10px 20px 30px 40px;
        }
        #d2{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /*上下相邻两个元素彼此添加外边距,取最大值*/
            margin-top: 50px;
        }
        #s1{
            /*行内元素上下边距 无效*/
            margin-right: 50px;
        }
        #s2{
            /*左右相邻彼此添加外边距 两者相加*/
            margin-left: 30px;
        }
        #big{
            width: 200px;
            height: 200px;
            background-color: green;
            /*解决粘连问题*/
            overflow: hidden;
        }
        #big>div{
            width: 50px;
            height: 50px;
            background-color: blue;
            margin-left: 50px;
            /*当元素的上边缘和上级元素的上边缘重叠时，给元素添加上外边距会出现
            粘连问题,给上级元素添加overflow:hidden解决*/
            margin-top: 50px;
        }
        body{
            margin: 0;
        }
    style>
head>
<body>
<h1>这是h1h1>
<p>这是pp>
<ul>
    <li>aaali>
    <li>bbbli>
    <li>cccli>
ul>
<div id="big">
    <div>div>
div>
<span id="s1">span1span><span id="s2">span2span>
<div id="d1">div>
<div id="d2">div>
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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

8.边框和内边距

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
  <style>
    #d1{
      width: 400px;
      height: 200px;
      border: 20px solid red;
      /*设置圆角,值越大越圆, 超过宽高一半为正圆(前提是正方形)*/
      border-radius: 200px;
    }
    #d2{
        width: 50px;
        height: 50px;
        border:1px solid red;
        /*给元素添加内边距会影响元素的显示宽高*/
        padding-left: 50px;
        padding-top: 50px;
    }
  style>
head>
<body>
<ul>
    <li>aaali>
    <li>bbbli>
    <li>cccli>
ul>
<div id="d2">内边距div>

<div id="d1">边框测试div>
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
25
26
27
28
29
30
31
32
33
34

9.盒子模型练习

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        #d1{
            width: 100px;
            height: 100px;
            background-color: red;
            overflow: hidden;

        }
        #d1>div{
            width: 50px;
            height: 50px;
            background-color: blue;
            margin: 25px 0 0 25px;

        }
        #d2{
            width: 50px;
            height: 50px;
            border: 5px solid green;
            border-radius: 5px;
            margin-left: 100px;
            padding-left: 125px;
            padding: 50px 0 0 50px;
            /*添加此样式后给元素添加边框和内边距则不再影响元素的宽高*/
            box-sizing: border-box;
        }
    style>
head>
<body>
<div id="d1">
    <div>div>
div>
<div id="d2">哈喽div>
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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

10.CSS三大特性

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
  <style>
    body{
      /*通过继承可以将全局样式写在body里面,整个页面所有标签全部继承*/
      font-family: cursive;
    }
    #d1{
      color: red;
    }
    div{
      color: green !important;
    }
    p{color: blue;}
  style>
head>
<body>
<div id="d1">
  <p>这是p标签p>
  <span>这是spanspan>
  <a href="">超链接a>
div>
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
25
26
27

相关阅读:
what is gopls
CRDB-事务层知识点
 Flutter快学快用07 状态管理：Flutter 状态管理及对比选型
 第十八章使用工作队列管理器（一）
求数组最大连续子数组乘积（轮询）
CIFAR-10数据集简介
 JKPacket权威指南——学习建议
 准备熬夜加班？curl&libcurl 高危漏洞明日公布
 FP为什么更适合做独立站？自己掌握话语权才是王道
 Kubernetes控制平面组件：Scheduler调度器
原文地址：https://blog.csdn.net/longgetaotao_06/article/details/126510930