前端之 CSS

前言

昨天学习了标记式语言，也就是无逻辑语言。了解了网页的骨架是什么构成的，了解了常用标签，两个指令以及转义字符；其中标签可以分为两大类：

一类是根据标签内容可以分类单双标签，单标签指的是不需要字内容，标签就可以代表所有功能；双标签：主内容可以包含文本，也可以包含子标签（具有作用域）；
另一类是根据标签显示的效果可以分为行块标签，块标签会换行显示；行标签会同行显示。

今天学习 CSS，被称之为网页的化妆师。

什么是 CSS

CSS 全称为级联样式表（Cascading Style Sheet），主要负责页面的风格设计，样式、美观。通常以.css 后缀结尾。

标记语言

和 html 一样是非编程语言，不具备语言的程序逻辑。
css 为前端页面的样式，由选择器、作用域与样式块组成。

选择器：由标签、类、id 单独或组合出现；

作用域：一组大括号包含的区域；

样式块：满足 css 连接语法的众多样式。
css 发展史代表版本

① 1990年，Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年，Web真正走出实验室。
② 1994年哈坤·利提出了CSS的最初建议。而当时伯特·波斯（Bert Bos）正在设计一个名为Argo的浏览器，于是他们决定一起设计CSS。
③ 哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议，1995年的www网络会议上CSS又一次被提出，博斯演示了Argo浏览器支持CSS的例子，哈肯也展示了支持CSS的Arena浏览器。
④ 1997年初，W3C组织负责CSS的工作组开始讨论第一版中没有涉及到的问题。其讨论结果组成了1998年5月出版的CSS规范第二版。
⑤ CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

CSS 书写语法

css 由三部分组成：选择器、作用域与样式块。

选择器 {
    样式1: 值1;
    样式2: 值2;
}
h3 {
    width: 100px;
    height: 100px;
    background-color: yellowgreen
}

CSS 的三种引入方式

第一种引入方式：行间式

特点：

书写在标签的 style全局属性中；
样式格式为=》key：value（单位）；
以分号隔开多个样式；
最后的分号可以省略

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css 三种引入第一种引入</title>
</head>
<body>
    <!-- 默认有宽 高为0 背景颜色默认为透明 -->
    <p style="width: 200px; height: 200px; background-color: green">css 第一种引入行间式</p>
</body>
</html>

第二种引入方式：内联式

特点：

样式书写在 head 标签内的 style 属性内；
样式格式为 => 选择器：p|作用域 {}|样式块；
以分号隔开多个样式；
最后的分号可以省略

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <title>css 三种引入第二种引入</title>
        <!-- 内联式 -->
        <style type='text/css'>
            p {
                width: 150px;
                height: 150px;
                background-color: red
            }
        </style>
    </head>
    <body>
        <p>
            css 第二种引入内联式引入
        </p>
    </body>
</html>

第三种引入方式：外联式

特点：

书写在外部的 css文件中，不需要书写任何标签；
其他同上

/*css 文件书写 css 语法*/
/*外部 css 文件 00.css*/
h3 {
    width: 100px;
    height: 100px;
    background-color: yellowgreen
}

<!DOCTYPE html>
<html>
   <head>
    <meta charset='utf-8'/>
    <title>第三种引入外联式引入</title>
    <link rel='stylesheet' href='./00.css'>
       <h3>
           第三种引入外联式引入
       </h3>
</head> 
</html>

CSS 三种引入方式的优先级

三种可以同时存在并协同完整布局，三种引入方式之间没有优先级之说，哪种引入方式在逻辑下方（后解释的）谁就起作用（样式覆盖）。并且行间式一定是逻辑最下方的。

当三种引入方式同时存在且操作同一对象的同一属性时，才会出现冲突，最终起作用的就是优先级高的。

/*o4.css*/
div {
    height: 200px;
    color: brown;
}

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>三种引入的优先级</title>
    <!-- 三种可以同时存在，协同完整布局 -->
    <!-- 三种之间没有优先级之说 谁在逻辑下方（后解释的）谁就起作用（样式覆盖） -->
    <!-- 行间式一定是逻辑最下方的 -->
    <!-- 内联 -->
    <style type="text/css">
        div {
            width: 200px;
            color: pink;
            /*height: 200px;*/
        }
    </style>
    <!-- 外联 -->
    <link rel="stylesheet" href="./04.css">
</head>
<body>
    <!-- 优先级：大家同时存在且操作统一对象同一属性，才会出现冲突，最终起作用的就是优先级高的 -->
    <!-- 行间 -->
    <div style="background-color: cyan; color: orange">你是个好人</div>
</body>
</html>

基础选择器

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>
    <style type="text/css">
        /* div => 标签名 =》 标签选择器：开发过程中尽可能少的运用，运用范围为最内层的显示层 */
        /* dd => class 名 =》 类选择器：布局的主力军 */
        /* d => id名 =》 id 选择器：一定唯一的 */
        /* * => 通配选择器 =》控制 html,body,body 下所有用于显示内容的标签（head 不参与显示）*/
        * {
            border: 1px solid black;
        }
        /* 三种选择器有优先级*/
        div {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        /* 类选择器： .类名{} */
        .dd {
            background-color: orange;
        }
        /* id 选择器： #id名 {}*/
        #d {
            background-color: green;
        }
        /* 优先级：id 选择器 > 类选择器 > 标签选择器 > 通配选择器*/
        /* 作用范围越精确，优先级越高*/
    </style>
    <style type="text/css">
    .div {
        width: 100px;
        height: 100px;
        background-color: orange
    }
    /* 多类名：类名与类名之间不能拥有任何符号隔断 */
    .red.div{
    }
    .div.red {
        background-color: red;
    }
    </style>
</head>
<body>
    <!-- ***** -->
    <!-- 选择器：css 选择 html 标签的一个工具 =》将 html 与 css 建立起联系，那么 css 就可以控制 html样式 -->
    <!-- 选择器就是给 html 标签起名字 -->
    <div></div>
    <div class="dd"></div>
    <div class="dd" id="d"></div>
    <div class="div red"></div>
    <div class="div"></div>
</body>
</html>

长度单位与颜色

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>长度单位与颜色</title>
    <style type="text/css">
        .div {
            /*px mm cm in em vw vh*/
            width: 200px;
            height: 200px;
            /*颜色单词 | rgb() 0~255 | rgba | #六个十六进制数*/
            background-color:  rgba(255,0,255,0.5);
            /* #abc == #AABBCC*/
            background-color: #00FFFF
        }
    </style>
</head>
<body>
    <div class="div"></div>
</body>
</html>

文本样式操作

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文本样式操作</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            background-color: orange
        }
        /*字体样式*/
        .box {
            width: 400px;
            /*字族*/
            /* STSong 作为首选字体，微软雅黑作为备用字体*/
            font-family: 'STSong','微软雅黑';
        }
        .box.uu {
            /* 字体大小*/
            font-size: 40px;
            /*字重*/
            font-weight: 100;
            /*风格*/
            /*none清除系统字体风格*/
            /*font-style: none;*/
            font-style: italic;
            /*行高：某一段文本在自身行高中可以垂直居中显示=》文本垂直居中*/
            line-height: 200px;
            /*字体整体设置*/
            /*字重 风格 大小/行高 字族 （风格可以省略）*/
            font: 100 normal 60px/200px 'STSong';
        /*}
        i {
            Normal 清除系统字体风格
            font-style: normal;
        }*/
    </style>
    <style type="text/css">
        .wrap {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        .w1 {
            /*换行方式*/
            word-break: break-all;
        }
        .w2 {
            width: 400px;
            /*水平居中：left|center|right*/
            /*text-align: center;*/
            /*字划线 中下上划线*/
            text-decoration: line-through;
            text-decoration: underline;
            text-decoration: overline;
            /*字间距*/
            letter-spacing: 5px;
            /*词间距*/
            word-spacing: 5px;
            /*缩进*/
            /*1em 相当于一个字的宽度*/
            text-indent: 2em;
        }
        a {
            /*取消划线*/
            text-decoration: none
        }
    </style>
</head>
<body>
    <div class="box uu">[普通文本]</div>
    <i>i的文本</i>
    <div class="wrap"> 一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五</div>
    <hr>
    <div class="wrap w1"> 一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二</div>
    <hr>
    <div class="wrap w2">hello world hello world</div>
    <a href="sfjsflj">aaa</a>
</body>
</html>

display

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>display</title>
    <style>
        .box {
            width: 80px;
            height: 40px;
            background-color: orange
        }
        .box {
            /*block: 块级标签，独占一行，支持所有 css 样式*/
            /*display: block;*/
            /*inline：内联（行级）标签，同行显示，不支持宽高*/
            /*display: inline;*/
            /*inline-block：内联块标签，同行显示，支持所有 css 样式*/
            display: inline-block;
            /*标签的嵌套规则*/
             /*block 可以嵌套所有显示类型标签，div|h1~h6|p，*/
            /*注：hn 与 p 属于文本类型标签，所以一般只嵌套inline 标签*/
            /* inline 标签只能嵌套 inline 标签，span|i|b|sub|sup|ins|
            /*inline-block 可以嵌套其他类型标签，但不建议嵌套任意类型标签 img|input*/
        }
        .b1 {
            height: 100px;
        }
        .b2 {
            height: 80px;
        }
        .b3 {
            height: 120px;
        }
        .box {
            /*文本基线对齐*/
            vertical-align: baseline;
        }
    </style>
</head>
<body>
    <div class="box b1">123</div>
    <div class="box b2">456</div>
    <div class="box b3">789</div>
</body>
</html>