CSS:1.导入方式；2.选择器；3.美化网页元素。

1.导入方式

<1>内部样式

<2>外部样式

"stylesheet" href="css/style.css">

<3>行内样式

"color: pink">标题

三种样式的选择符合就近原则。

2.选择器

<1>基本选择器
(1)标签选择器

h1 {
    color: pink;
   }

(2)类选择器

.test {
       color: orange;
      }

(3)id选择器

#test {
       color: pink;
      }

<2>层次选择器
(1)后代选择器

body p {
            color: pink;
        }

(2)子选择器

body > p {
            color: aqua;
        }

(3)相邻选择器

        /*同级，向下*/
        .active + p {
            color: aquamarine;
        }

(4)通用选择器

        /*同级，向下所有的*/
        .active ~ p {
            color: aquamarine;
        }

<3>结构伪类选择器

ul li:first-child {
            color: aquamarine;
        }

<4>属性选择器

        /*=:绝对等于*/
        a[id=first] {
            color: pink;
            background: red;
        }

        /**=：包含*/
        a[class*="links"] {
            background: cornflowerblue;
        }

        /*^=:开头*/
        a[href^=https] {
            background: yellow;
        }

        /*$=:结尾*/
        a[href^=cn] {
            background: yellow;
        }

3.美化网页元素

<1>span标签

#test {
            font-size: 30px;
        }

<p>
    <span id="test">君不见，span>黄河之水天上来，奔流到海不复回。
p>

显示效果为：

<2>字体样式

#test {
            /*字体大小*/
            font-size: 30px;
            /*字体格式*/
            font-family: 宋体;
            /*字体粗细*/
            font-weight: bold;
            /*字体颜色*/
            color: pink;
            /*首行缩进*/
            text-indent: 2em;
        }
        /*下划线*/
        .l1 {
            text-decoration: underline;
        }

        /*中划线*/
        .l2 {
            text-decoration: line-through;
        }

        /*上划线*/
        .l3 {
            text-decoration: overline;
        }

<3>文本样式

p {
            /*文本对齐方式*/
            text-align: center;
        }
img, span {
            /*垂直对齐方式*/
            vertical-align: middle;
        }

<4>超链接伪类

/*鼠标未做操作时的状态*/
        a {
            text-decoration: none;
            color: blue;
        }

        /*鼠标悬浮时的状态*/
        a:hover {
            color: pink;
            font-size: 20px;
        }

        /*鼠标按住未释放时的状态*/
        a:active {
            color: aqua;
        }

        /*访问过后的状态*/
        a:visited {
            color: cadetblue;
        }

<5>列表

ul li {
    height: 30px;
    list-style: none;
    /*文本缩进*/
    text-indent: 1em;
    background: url(../images/1.jpg) 220px 10px no-repeat;
}

<6>背景

div {
            width: -moz-max-content;
            height: 500px;
            border: 1px solid red;
            background-image: url(images/1.jpg);
        }

        .div1 {
            /*水平方向重复*/
            background-repeat: repeat-x;
        }

        .div2 {
            /*垂直方向重复*/
            background-repeat: repeat-y;
        }

        .div3 {
            /*不重复*/
            background-repeat: no-repeat;
        }

<7>渐变

body {
            background: #52ACFF linear-gradient(180deg, #52ACFF 25%, #FFE32C 100%);
        }