web前端2

CSS

---

css基本结构

     选择器{

            属性名： 属性值；

            属性名： 属性值；

}

css的三种引入方式

外部样式、内部样式和行内样式

推荐使用外部样式，不推荐使用行内样式

外部样式使用.css的形式并使用href来导入

外部样式eg：

<link rel="stylesheet" href="./14-样式.css">

内部样式eg：

    <style>

 .box1 {

            width: 300px;

            height: 300px;

            background-color: pink;

        }

    </style>

行内样式

<div style="width: 300px; height: 300px; background-color: green;"></div>

选择器

---

基本选择器

标签选择器，id选择器，类选择器，通配符选择器

eg：

        /* 标签选择器  选中所有的p标签*/

        p {

            color: aqua;

        }

        /* id选择器 */

        #box1 {

            color: pink;

        }

        /* 类选择器 */

        .box2 {

            color: blueviolet;

        }

        /* 通配符选择器

        *{           

        }

        */

包含选择器

子代选择器：选中亲身儿子

eg：

        .a>li {

            background-color: pink;

        }

后代选择器：找到后代所有要找的元素

eg：

        .a li {

            color: blueviolet;

        }

复合选择器

可以将多个选择器组合

eg：

        /* div {

            color: pink;

        }

        p {

            color: pink;

        }

        span {

            color: pink;

        } */

        div,

        p,

        span {

            color: red;

        }

属性选择器

type^="te"      以te开头

type$="l"        以l结尾

type*="e"       type值里边包含e

首行缩进

font-size   设置字体大小

text-indent   定义一个块元素首行文本内容之前的缩进量