CSS（Cascade Style Sheet） --- 级联样式表（1）

<head>
	<style>
		选择器{
			属性名：属性值;
			属性名：属性值;
		}
	</style>
</head>

属性名：修饰对象的属性（样式）
属性值：样式的取值

1、书写CSS

行内样式：【不推荐使用】
页面样式：（内联样式）
外联样式：【推荐使用】

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css书写样式</title>

    <style>
        @import url();/* 在html中也可写入import,只不过外部必须添加style标签 */
    </style>

    <!-- 使用link标签，引入需要的css文件 -->
    <link rel="stylesheet" href="css/a.css">
    <!-- rel不可省略，类名必须为stylesheet，表示引入的为层叠样式表。href：路径 -->

</head>
<body>
    <div style="color:red;font-size: 20px;">这是一个div</div>
    <!-- 行内样式，优先级高，绑在标签上一般无法被覆盖。优点：该标签独一无二；缺点：批量修改较为麻烦 -->
    <!-- style：当前标签的样式. -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>

</body>
</html>

2、CSS选择器

（1）基本选择器

id选择器：通过标签的id名称来选择标签（# id）
类选择器：class选择器，选择一个类别（.classname）
标签选择器：tagname直接选择标签
逗号选择器：复合选择器
通配符（*）选择器：匹配所有标签

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css的基本选择器</title>
    <style>
        *{
            /* 通配符选择器（*）：匹配所有标签 */
            margin: 0;
            padding: 0;
            /* 向左无空格。适合通用设置，不适合独立设置 */
        }
        #box{
            width: 200px;
            height: 100px;
            border: 1px solid rgb(237, 20, 20);
        }
        .msg{
            width: 100px;
            height: 50px;
            border: 2px solid blue;
        }
        .msg-2{
            border: 3px solid rebeccapurple;
        }
        ul,ol{
            list-style: none;
        }
    </style>
</head>
<body>
    <h1>id选择器</h1>
    <div id="box"></div>
    <!-- 有时id不可复用，所以一般不可重复添加id，id一般适合页面中独一无二的，例如：搜索框 -->

    <h1>类选择器</h1>
    <div class="msg"></div>
    <div class="msg"></div>
    <div class="msg msg-2"></div>
    <!-- css是少数允许用中划线命名的技术（驼峰法） -->
    <div class="msg"></div>
    <!-- 类选择器：class选择器。允许重复；允许出现多个 -->

    <h1>标签选择器，逗号选择器</h1>
    <ul>
        <li>国内新闻1</li>
        <li>国内新闻2</li>
        <li>国内新闻3</li>
        <li>国内新闻4</li>
        <li>国内新闻5</li>
    </ul>

    <ol>
        <li>国外新闻1</li>
        <li>国外新闻2</li>
        <li>国外新闻3</li>
        <li>国外新闻4</li>
        <li>国外新闻5</li>
    </ol>

</body>
</html>

（2）包含选择器：

子代选择器：（>）父子关系
后代选择器：（空格）后代所有

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>包含选择器</title>
    <link rel="stylesheet" href="css/reset.css">
    <style>
        ul.news{
            /* 选择其中的ul */
            border: 1px solid red;
            width: 200px;
            min-height: 50px;
        }
        ul.news>li{
            /* 子代选择器 */
            height: 50px;
            width: 200px;
            border: 1px solid red;
        }
        ul.news li{
            /* 后代选择器 */
            height: 50px;
            width: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <ul class="news">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <ul>
            <li>wishing1</li>
            <li>wishing2</li>
            <li>wishing3</li>
        </ul>
    </ul>
    <!-- 一般常见复合元素出现在类选择器和复合选择器中。 -->
    <div class="news"></div>
</body>

</html>

@charset "utf-8";
html {
  background-color: #fff;
  color: #000;
  font-size: 12px
}

body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, figure, form, fieldset, legend, input, textarea, button, p, blockquote, th, td, pre, xmp {
  margin: 0;
  padding: 0
}

body, input, textarea, button, select, pre, xmp, tt, code, kbd, samp {
  line-height: 1.5;
  font-family: tahoma, arial, "Hiragino Sans GB", simsun, sans-serif
}

h1, h2, h3, h4, h5, h6, small, big, input, textarea, button, select {
  font-size: 100%
}

h1, h2, h3, h4, h5, h6 {
  font-family: tahoma, arial, "Hiragino Sans GB", "微软雅黑", simsun, sans-serif
}

h1, h2, h3, h4, h5, h6, b, strong {
  font-weight: normal
}

address, cite, dfn, em, i, optgroup, var {
  font-style: normal
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  text-align: left
}

caption, th {
  text-align: inherit
}

ul, ol, menu {
  list-style: none
}

fieldset, img {
  border: 0
}

img, object, input, textarea, button, select {
  vertical-align: middle
}

article, aside, footer, header, section, nav, figure, figcaption, hgroup, details, menu {
  display: block
}

audio, canvas, video {
  display: inline-block;
  *display: inline;
  *zoom: 1
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "\0020"
}

textarea {
  overflow: auto;
  resize: vertical
}

input, textarea, button, select, a {
  outline: 0 none;
  border: none;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  padding: 0;
  border: 0
}

mark {
  background-color: transparent
}

a, ins, s, u, del {
  text-decoration: none
}

sup, sub {
  vertical-align: baseline
}

html {
  overflow-x: hidden;
  height: 100%;
  font-size: 50px;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;
  color: #333;
  font-size: .28em;
  line-height: 1;
  -webkit-text-size-adjust: none;
}

hr {
  height: .02rem;
  margin: .1rem 0;
  border: medium none;
  border-top: .02rem solid #cacaca;
}

a {
  color: #25a4bb;
  text-decoration: none;
}

（3）属性选择器：根据元素的属性以及属性值来选择元素

书写方式：

[]
[属性]
[属性=“xxx”]
[属性*="xxx"]
[属性^="xxx"]
[属性$="xxx"]
......

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css属性选择器</title>
    <style>
        /* [title]{
            color: red;
        } */
        /* div [title]{
            color: red;
        } 
        仅筛选出含div标签的title属性
        */
        /* div[title=" this is a title"]{
            color: #FF0000;
        } 
        筛选出中title在div标签中为指定内容的标签
        */

        /* 前三个用的较多 */

        /* div[title^="12"]{
            color: aqua;
        } 
        筛选出title属性在div标签中以指定内容开头的标签
        */
        /* div[title$=67]{
            color: chocolate;
        }
        筛选出title属性在div标签中以指定内容结尾的标签 
        */

    </style>
</head>
<body>
    <div title=" this is a title">123456</div>
    <div title="1234567">123456</div>
    <div>123456</div>
    <div>123456</div>
    <div id="box">123456</div>

    <p title>有title</p>
    <p>无title</p>
</body>
</html>

（4）伪类选择器：添加选择器的特殊效果

（最先出现是为了装饰a标签诞生的）

anchor伪类

a:link {color:#FF0000;} /* 未访问的链接样式 */
a:visited {color:#00FF00;} /* 已访问的链接样式 */
a:hover {color:#FF00FF;} /* 鼠标划过链接样式 */
a:active {color:#0000FF;} /* 已选中的链接样式 */

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        .content{
            color:red;
        }
        a:link{
            color: aqua;
            text-decoration: none;
            /* 默认显示 */
        }
        a:hover{
            color: mediumaquamarine;
            text-decoration: underline;
            font-size: 21px;/* 不建议 */
            /* 光标移动到字符的显示 */
        }
        a:active{
            color: green;
            /* 光标点击字符未松开 */
        }
        a:visited{
            color: blueviolet;
            /* 光标点击字符后的显示 */
        }

        input:focus{
            background-color: brown;
        }

    </style>
</head>
<body>
    <div class="content">
        <p>AzureC2Relay：AzureC2Relay是一个Azure功能，它通过基于Cobalt Strike</p>
        <p>AzureC2Relay：AzureC2Relay是一个Azure功能，它通过基于Cobalt Strike</p>
        <p>AzureC2Relay：AzureC2Relay是一个Azure功能，它通过基于Cobalt Strike</p>
        <a href="#">链接1</a>
        <a href="#">链接2</a>
        <a href="#">链接3</a>
        <!-- a标签不会继承父类的样式，需单独设置样式 -->

    </div>

    <input type="text" name="" id="">

</body>
</html>

（5）兄弟选择器：+和~

+选择器：如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器
~选择器：查找某一个指定元素的后面的所有兄弟结点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <link rel="stylesheet" href="css/d.css">
</head>
<body>
    <h1>+选择器</h1>
    <div>
        <p>1234567</p>
        <p class="box">1234567</p>
        <!-- <div>1234567</div> -->
        <p>1234567</p>
        <p>1234567</p>
    </div>

    <h1>~选择器</h1>
    <div>
        <P>567890</P>
        <P class="bax">567890</P>
        <P>567890</P>
        <P>567890</P>
    </div>
</body>
</html>

p.box{
    color: saddlebrown;
}
.box + p{
    color: crimson;
    /* +表示与下一个p标签，当下一个是别的标签时，无法选中 */
}
.bax ~ p{
    color: darkmagenta;
    /* 表示.bax后面所有所有p标签都被选中 */
}

（6）伪元素选择器：（::）

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。

例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        p::first-letter{
            text-transform: uppercase;
        }
        p::first-line{
            color: brown;
        }
        ul.news>li:first-child{
            color: red;
            /* 第一个子元素，若第一个元素的类型不是li，则无法选中*/
        }
        ul.news>li:last-child{
            color: aqua;
        }
        ul.news>li:first-of-type{
            color: blueviolet;
            /* 第一个类型为li的子元素 */
        }
        .new>li:nth-child(1){
            color: #423232;
        }

        ::placeholder{
            color: coral;
        }
        /* :root{
            选择文档的根元素，默认为根标签。与html{}等价
        } */
        ::selection{
            /* 用于已选取的颜色部分 */
            color: mediumaquamarine;
        }
    </style>
</head>
<body>
    <p>this is a book
        <ul class="news">
            <p>第一个子元素</p>
            <li>12345</li>
            <li>12345</li>
            <li>12345</li>
            <li>12345</li>
        </ul>
    </p>

    <p>Cobalt Strike是一款超级好用的渗透测试工具，拥有多种协议主机上线方式，集成了提权，凭据导出，端口转发，socket代理，office攻击，文件捆绑，钓鱼等多种功能。同时，Cobalt Strike还可以调用Mimikatz等其他知名工具，因此广受技术大佬的喜爱。</p>

    <p>
        <input type="text" placeholder="输入用户名称" id="">
    </p>

    <p>
        <textarea placeholder="请输入建议或意见" id="" cols="30" rows="10"></textarea>
    </p>
</body>
</html>

例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪元素选择器</title>     
    <link rel="stylesheet" href="css/e.css">
</head>
<body>
    <div class="box"></div>
    <div></div>
    <div></div>
</body>
</html>

.box{
    width: 100px;
    height: 200px;
    border: 1px solid red;
}
.box::before{
    content: "1"; 
    /* 将行元素变成块元素 */
    display: block;/* block：块元素。inline：行内元素 */
    height: 200px;
    width: 50px;
    background-color: aqua;
    float: left;

    border-radius: 50%;
    /* 圆 */
}
.box::after{
    display: block;
    content: '2';
    background-color: blue;
    height: 200px;
    width: 50px;
    float: left;
    border-radius: 50%;
}