HTML+CSS

前言：

 

网站和网页：

        网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合
        网页是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读。
        网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm 或.html后缀结尾的艾件，因此将其俗称为HTML文件。

Web标准的构成

        主要包括结构( Structure )、表现(Presentation )和行为（Behavior )三个方面。
        结构用于对网页元素进行整理和分类，现限段主要学的是HTML。
        表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
        行为是指网页模型的定义及交互的编写，现阶段主要学的是Javascript
        Web标准提出的最佳体验方案:结构、样式、行为相分离。
        简单理解︰结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中

一、HTML

1、<p></p>

        在网页中,要把文字有条理地显示出来,就需要将这些文字分段显示。在HTML标签中，<p>标签用于定义段
落,它可以将整个网页分为若千个段落。
        <p>我是一个段落标签</p>
        单词paragraph [' paeragraef]的缩写，意为段落。段落与段落之间有一定的垂直距离。
        标签语义:可以把HTML文档分割为若干段落。

2、段落和换行标签(重要)

        在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗[ ]的右端,然后才自动换行。如果希望
        某段文本强制换行显示,就需要使用换行标签<br/>.
        <br />
        单词break的缩写,为打断、换行。
        标签语义:强制换行。
        特点:
                1. <br/>是个单标签。
                2. <br />标签只是简单地开始新的- -行,跟段落不一样,段落之间会插入一-些垂直的间距。

 3、标题标签

        <h1></h1>.....<h6></h6>     随着数字的增大，标题逐渐变小。

4、文本格式化标签

        粗体:<strong></ strong>或者</ b>  

        倾斜:<em></ em>或者<i></ i>

        删除线：<del></ del>或者<s></ s>

        下划线：<ins></ ins>或者<u></ u>

        一律推荐使用前者，因为语气更强烈。

 5、<div>和<span>标签

        <div>和<span>是没有语义的,它们就是一一个盒子,用来装内容的。
        <div>这是头部</div>
        <span>今日价格</span>
        div是division的缩写,表示分割、分区。span 意为跨度、跨距。
        特点:
        1. <div>标签用来布局,但是现在一行只能放-个<div>，也就是说在该标签的内容都要独自占据行。大盒子
        2. <span>标签用来布局,一行上可以多个<span>。小盒子

 6、图片标签<img />

以下属性都可以写在<img />之中 但是必须写在img后面，/ 的前面，而且各个实属性之间是没有先后顺序的

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文字，当图片不能显式的时候显示该文字
title	文本	提示文字，当鼠标悬停在图片上的时候显示
width	像素	设置图片的宽度
height	像素	设置图像的高度
border	像素	设置图片的边框的粗细

        

<img src="头像.jpg" alt="我的生活照" tilte="一直下雨真烦的头像" height="300" width="500" border="30"/>

7、绝对路径和相对路径

相对路径∶以引用文件所在位置为参考基础，而建立出的目录路径。这里简单来说，图片相对于HTML页面的位置
相对路径分类：
        同一级路径：图像文件位于HTML文件同一级如<img src="baidu.gif" />
下一级路径：图像文件位于HTML文件下一级如<img src="images/baidu.gif"/>。
上—级路径：../   图像文件位于HTML文件上一级﹐如<img src="../baidu.gif" />。

举个栗子：

    <h2>相对路径</h2> 
    <h4>同一级路径下的图片的使用:直接使用名字</h4>
    <img src="头像.jpg"/>
    <h4>使用下一级目录中的图片：图片所在文件夹名/图片名</h4>
    <img src="picture/头像 copy.jpg" />
    <h4>使用“../”来进入上一级目录</h4>
    <h4>使用“/”来计入下一级目录</h4>

相对路径是从代码所在的这个文件出发，去寻找目标文件的，而我们这里所说的上一级、下一级和同一级就是图片相对于HTML页面的位置。

绝对路径：就是在我们的电脑中位置或者在网络中的位置。再举个栗子：

    <h4>在我们各自的电脑上的绝对路径</h4>
    <img src="D:\qq\1.jpg"/>
    <h4>在网路中的绝对路径 :随便找网上的一张图片，然后右键复制图片的地址就可以了</h4>
    <img src="https://i0.hdslb.com/bfs/feed-admin/113e86ed5d040d9e6adc3fe14a42ba0d23f7871a.png@.webp"/>

8、链接 <a > </a>

链接标签<a></a>，可以跳转到另外一个网页或者跳转到该网页的制定位置。

链接可以分为内部链接、外部链接、空链接、下载链接、网页元素链接和锚点链接。

target的作用是在新的网页打开（_self）还是在本网页打开(_blank)，默认的情况下是在本网页打开

1、外部链接：点击进入其他的网站或者网页，不是自己所写的网页,需要写http://，举个栗子：

<a href="http://www.qq.com、" target="_blank"><img src="头像.jpg" width="100"/></a>

 效果就是点击图片，然后就会进入http://www.qq.com、网站

2、内部链接：点击自己文件中含有的网页或者网站，不需要写http：//，会用到绝对路径和相对路径，可以进入另外一个html文件之中。

举个栗子：

<a href="图像标签.html">点击进入图像标签.html</a>

在网页显示的时候，“点击进入图片链接.html”字体是蓝色的（大概），并且子底下有下划线。

3、空链接：如果但是没有确定链接的内容是，就可以使用空链接 href=“#”

<a href="#">空连接:点了也没啥用，只是字体颜色不一样</a>

4、下载链接：如果href里面的地址是一个文件或者压缩包，点击就会下载。

<a href="关于举办大学生学习论坛的通知.zip">点击下载：关于举办大学生学习论坛的通知.zip</a>

5、网页元素链接：在网络中的各种元素，如文本、图像、表格、音频、音频、视频等都可以添加超链接。

6、锚点链接：点击链接，就可以快速定位到页面中的某个位置

        在链接文本的href属性中，设置属性值为"#名字”,然后找到目标位置标签，在里面添加一个id属性=设置的名字。        

        举个栗子，点击 “3 个人生活”就可以直接跳转到“3、个人习惯”的所在位置：

<h3><a href="#生活">3 个人生活</a></h3>
<h4 id="生活">3、个人生活</h4>

9、注释标签和特殊字符

       

注释标签	<! --注释内容-->
<	&lt
>	&gt

10、表格

table为表格的总框架，是用于定义表格的标签；然后tr为行；td为一个单元格，td之中存储数据

表头单元格th的使用，表头单元格的文字会变粗且居中显示,th--->table head的缩写

以下的标签都要写进table标签里面：

        align：left、center、right。设置表格相对周围元素的对齐方式

        border：1或"".设置表格是否拥有边框，默认是""（默认没有）

        cellpadding:设置单元边沿与其内容之间的空白，默认为一像素         

        cellspacing:规定单元格之间的空白，默认为2像素

        width和hight：设置高度和长度

合并单元格：   合位于一行的单元格：colspan="需要合并单元格的个数" 被合并的单元格不需要写出  

                         合并位于一列的单元格：rowspan="需要合并单元格的个数" 被合并的单元格不需要写出                                                                                                                                                                                                                                                                                                                  

    <h3>表格的使用</h3>
    <h3>table为表格的总框架，是用于定义表格的标签；然后tr为行；td为一个单元格，td之中存储数据</h3>
    <h4>举个栗子：</h4>
    <table>
        <tr> <td>姓名</td> <td> 年龄 </td> <td> 学号 </td> </tr>
        <tr> <td>喜羊羊</td> <td> 8</td> <td>001</td> </tr>
        <tr> <td>懒羊羊</td> <td> 7</td> <td>002</td> </tr>
    </table>
    <h3>表头单元格th的使用，表头单元格的文字会变粗且居中显示,th--->table head的缩写</h4>
    <h4>举个栗子：</h4>
    <table>
        <tr> <th>姓名</th> <th> 年龄 </th> <th> 学号 </th> </tr>
        <tr> <td>喜羊羊</td> <td> 8</td> <td>001</td> </tr>
        <tr> <td>懒羊羊</td> <td> 7</td> <td>002</td> </tr>
    </table>
    <h3>表格属性的设置</h3>
    <h3>align：left、center、right。设置表格相对周围元素的对齐方式</h3>
    <h4>举个栗子,让表格居中对齐：</h4>
    <table align="center">
        <tr> <th>姓名</th> <th> 年龄 </th> <th> 学号 </th> </tr>
        <tr> <td>喜羊羊</td> <td> 8</td> <td>001</td> </tr>
        <tr> <td>懒羊羊</td> <td> 7</td> <td>002</td> </tr>
    </table>
    <h3>border：1或"".设置表格是否拥有边框，默认是""（默认没有）</h3>
    <h4>举个栗子,让表格居中对齐：</h4>
    <table border="3">
        <tr> <th>姓名</th> <th> 年龄 </th> <th> 学号 </th> </tr>
        <tr> <td>喜羊羊</td> <td> 8</td> <td>001</td> </tr>
        <tr> <td>懒羊羊</td> <td> 7</td> <td>002</td> </tr>
    </table>
    <!--但是border的值会影响表格其他方面的东西就离谱-->
    <h4>举个栗子,让表格居中对齐：</h4>
    <table border="1">
        <tr> <th>姓名</th> <th> 年龄 </th> <th> 学号 </th> </tr>
        <tr> <td>喜羊羊</td> <td> 8</td> <td>001</td> </tr>
        <tr> <td>懒羊羊</td> <td> 7</td> <td>002</td> </tr>
    </table>
    <h3>cellpadding:设置单元边沿与其内容之间的空白，默认为一像素</h3>
    <h4>举个栗子,让表格居中对齐：</h4>
    <table cellpadding="10" border="1">
        <tr> <th>姓名</th> <th> 年龄 </th> <th> 学号 </th> </tr>
        <tr> <td>喜羊羊</td> <td> 8</td> <td>001</td> </tr>
        <tr> <td>懒羊羊</td> <td> 7</td> <td>002</td> </tr>
    </table>
    <h3>cellspacing:规定单元格之间的空白，默认为2像素</h3>
    <h4>举个栗子,让表格居中对齐：</h4>
    <table cellspacing="10" border="1">
        <tr> <th>姓名</th> <th> 年龄 </th> <th> 学号 </th> </tr>
        <tr> <td>喜羊羊</td> <td> 8</td> <td>001</td> </tr>
        <tr> <td>懒羊羊</td> <td> 7</td> <td>002</td> </tr>
    </table>
    <h3>通过width和hight设置高度和长度</h3>
    <h4>举个栗子,让表格居中对齐：</h4>
    <table cellspacing="10" border="1" width="50">
        <tr> <th>姓名</th> <th> 年龄 </th> <th> 学号 </th> </tr>
        <tr> <td>喜羊羊</td> <td> 8</td> <td>001</td> </tr>
        <tr> <td>懒羊羊</td> <td> 7</td> <td>002</td> </tr>
    </table>
    <table cellspacing="10" border="1" height="200">
        <tr> <th>姓名</th> <th> 年龄 </th> <th> 学号 </th> </tr>
        <tr> <td>喜羊羊</td> <td> 8</td> <td>001</td> </tr>
        <tr> <td>懒羊羊</td> <td> 7</td> <td>002</td> </tr>
    </table>
    <h3>表格结构标签：thead和tbody标签，使表格的结构更加清晰</h3>
    <t4>thead标签是头部标签，tbody是主体标签,可以收起</t4>
    <h4>举个栗子：</h4>
    <table cellspacing="10" border="1" height="200">
        <thead>
        <tr> <th>姓名</th> <th> 年龄 </th> <th> 学号 </th> </tr>
        </thead>
        <tbody>
        <tr> <td>喜羊羊</td> <td> 8</td> <td>001</td> </tr>
        <tr> <td>懒羊羊</td> <td> 7</td> <td>002</td> </tr>
        </tbody>
    </table>
    <h3>合并单元格</h3>
    <h4>先搞一个单元格的实例</h4>
    <table border="1" width="500" height="200">
        <tr> <td> </td> <td> </td> <td> </td> </tr>
        <tr> <td> </td> <td> </td> <td> </td> </tr>
        <tr> <td> </td> <td> </td> <td> </td> </tr>
        <tr> <td> </td> <td> </td> <td> </td> </tr>
    </table>
    <h4>合位于一行的单元格：colspan="需要合并单元格的个数" 被合并的单元格不需要写出</h4>
    <h4>我认为所谓合并可以理解为创建一个不一样的单元格，就比如我的例子。创建了一个宽度为正常单元格2倍的单元格，然</h4>
    <table border="1" width="500" height="200">
        <tr> <td colspan="2"> </td>  <td> </td> </tr>
        <tr> <td> </td> <td> </td> <td> </td> </tr>
        <tr> <td> </td> <td> </td> <td> </td> </tr>
        <tr> <td> </td> <td> </td> <td> </td> </tr>
    </table>
    <h4>合并位于一列的单元格：rowspan="需要合并单元格的个数" 被合并的单元格不需要写出</h4>
    <table border="1" width="500" height="200">
        <tr> <td rowspan="2"> </td> <td> </td> <td> </td> </tr>
        <tr>                  <td> </td> <td> </td> </tr>
        <tr> <td> </td> <td> </td> <td> </td> </tr>
        <tr> <td> </td> <td> </td> <td> </td> </tr>
    </table>

11、列表标签

<ul></ul>	无序标签	标签中只能包含<li></li>，但是l标签之中可以包含任何元素
<ol></ol>	有序标签	标签中只能包含<li></li>，但是l标签之中可以包含任何元素
<dl></dl>	自定义标签	里面只能包含<dt></dt>和<dd></dd>,这两种标签之中可以放任何东西

 <h3>列表：无序列表，有序列表以及自定义列表</h3>
    <h4>无序列表：ul标签中只可以方li标签，但是li标签中可以方任何东西，默认前面有一个小黑点</h4>
    <h4>举个栗子</h4>
    <ul>
        <li>大栗子</li>
        <li>小栗子</li>
        <!--<li><img src="头像.jpg"/></li>-->
    </ul>
    <h4>有序列表：ol标签中只可以方li标签，但是li标签中可以方任何东西，默认前面有序号</h4>
    <h4>举个栗子</h4>
    <ol>
        <li>大栗子</li>
        <li>小栗子</li>
    </ol>
    <h4>自定义列表：dl标签中只可以方dt和dd标签，但是dt和dl标签中可以方任何东西</h4>
    <h4>举个栗子</h4>
    <dl>
        <dt>名词</dt>
        <dd>名词解释1</dd>
        <dd>名词解释2</dd>
        <dd>名词解释3</dd>
    </dl>
    <h4>自定义列表效果如下（css修饰后）</h4>
    <img src="自定义列表.jpg"/>

     12、表单标签

       表单form：由表单域，提示信息，表单控件（表单元素）三部分组成。用于收集信息，然后将信息发送给服务器,通常用于注册页面       

 form标签

            1、定义表单域，以实现用户信息的手机和传递

            2、将表单域中的信息传递给服务器

            3、3个属性分别是： action(传递信息的目的地)、method(传递信息的方法)、name(表单域的名称，用于区别表单域)

表单元素input的使用,关于其属性type的值以及其中的元素的学习：

        text 文本框 用户可以在里面输入任何文字。 

        password 密码框 用户可以输入看不见的密码

        radio 单选按钮 可以实现多选一

        checkbox 复选框 可以实现多选

        submit 设置提交按钮,点击提交按钮之后就会将表单域中的信息提交

        reset 重置表单域中的信息，恢复默认值        

        button 设置一个按钮，一般后期与js搭配使用

        file 设置一个按钮，上传文件使用

        checked 在单选按钮和多选框的时候设置初始被选择的按钮

<h3>表单元素input的使用,关于其属性type的值的学习</h3>

        <h4>text 文本框 用户可以在里面输入任何文字</h4>
        用户名=<input type="text">

        <h4>password 密码框 用户可以输入看不见的密码</h4>
        密码=<input type="password">

        <h4>radio 单选按钮 可以实现多选一（这种写法可以多选）</h4>
        专业： 信息安全<input type="radio"> 数据科学与大数据技术<input type="radio">

        <h4>checkbox 复选框 可以实现多选</h4>
        科目： 高数<input type="checkbox"> 线性代数<input type="checkbox"> 英语<input type="checkbox">

        <h4>submit 设置提交按钮,点击提交按钮之后就会将表单域中的信息提交</h4>
        <input type="submit"><br/>
        <input type="submit" value="提交信息">

        <h4>reset 重置表单域中的信息，恢复默认值</h4>
        <input type="reset" value="重置信息" >

        <h4>button 设置一个按钮，一般后期与js搭配使用</h4>
        <input type="button" value="点击发送验证码">

        <h4>file 设置一个按钮，上传文件使用</h4>
        <input type="file" value="点击上传文件">

        <h4>checked 在单选按钮和多选框的时候设置初始被选择的按钮</h4>
        科目： 高数<input type="checkbox" value="高数" name="class" checked="checked"> 线性代数<input type="checkbox" value="线性代数" name="class"> 
        英语<input type="checkbox" value="英语" name="class"> <br /> 
        专业： 信息安全<input type="radio" checked="checked" name="major1"> 数据科学与大数据技术<input type="radio" name="major1">

 name 每个表单元素都应该有一个名字，以区分不同的表单元素,单选按钮和多选按钮都要有相同的name值

专业： 信息安全<input type="radio" name="major"> 数据科学与大数据技术<input type="radio" name="major">

 value 设置每个表单元素的值，以便后台人员使用.例如多选按钮和单选按钮，选择之后将value的值传递给后台

科目： 高数<input type="checkbox" value="高数" name="class"> 线性代数<input type="checkbox" value="线性代数" name="class"> 
        英语<input type="checkbox" value="英语" name="class"><br/>
        用户名=<input type="text" value="一直下雨真的好烦">

 maxlength 正整数，规定字段中的字符的最大的长度       

用户名=<input type="text" maxlength="6">

lable标签：使点击文字也可以选择 ,for中的值要与id中的值相等，input标签在他里面

 专业:
       <label for="m">
            <input type="radio" id="m" name="obj">
            xjaoijoias
        </label>
        <label for="a">
            <input type="radio" id="a" name="obj">计算机类
         </label>

  select:下拉列表，option中的selected可以设置默认值，否则默认值为第一个选择

<select>
            省份：
            <option>河南</option>
            <option>安徽</option>
            <option selected="selected">西藏</option>
            <option>江苏</option>
        </select>

 textarea:文本域，用于输入大量的文本信息，cols设置一行的字符数，rows设置行数

输入信息1
        <textarea  cols="30" rows="10">输入信息</textarea>

 二、CSS

1、基础选择器

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选择出所有的相同的标签	不能差异化选择	较多	p { color: red}
类选择器	可以选出一个或者多个标签	可以根据需求选择	非常多	.nav { color：red}
id选择器	一次只能选择一个标签	ID属性只能在每个HTML文档中出现一次	一般和jsd搭配	# nav {color: red}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	特殊情况使用	* {color: red}

<style>
    /* 
    选择器（选择符）就是通过不同需求把不同的标签选出来就是选择器的作用，简单来说就是选择标签用的
    选择器可以分为基础选择器和复合选择器
        基础选择器是由单个选择器组成的
        基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器
            1、标签选择器：用HTML标签名称作为选择器，按标签的名称分类，为页面的某一列标签指定统一的CSS格式，
            可以快速的为同类型的标签设置统一样式 ，但是不能设置单独的某个标签
            2、类选择器：自己通过“点+类名”的方法定义一个类，然后类中有一些属性，通过在某个标签使用“class=类名”的操作就
            可以使该标签拥有类中的属性
            3、id选择器：通过"#+名字"的方法定义，然后和类选择器相似，但是每个id选择器只能被调用一次，也就是在全局范围内只能使用一次，不能二次调用
            4、通配符选择器：通过“*”定义，使页面所有的标签都具有括号里面的属性
    */
   
    div { 
        color: red;
    }

    .red {
        color: red;
    }
    .bigger{
        width: 30px;
        height: 60px;
    }
    .color1 {
        background-color: red;; 
    }
    #name1 {
        background-color: red;
        width: 90px;
        height: 90px;
    }
     
    * {
        color: red;
    }
</style>
<body>
    <h3>标签选择器：用HTML标签名称作为选择器，按标签的名称分类，为页面的某一列标签指定统一的CSS格式，
        可以快速的为同类型的标签设置统一样式 ，但是不能设置单独的某个标签</h3>
    <div>我被选择，我是红色的</div>  
    <div>我也被选择，我也是红色的</div>  
    <span>我没有被选择，我是黑色的</span>

    <h3>类选择器：自己通过“点+类名”的方法定义一个类，然后类中有一些属性，通过在某个标签使用“class=类名”的操作就可以使该标签
        拥有类中的属性</h3>
    <ul>
        <li class="red">使用类</li>
        <li>不使用类</li>
    </ul>
    <ul class="red">
        <li>全部使用类</li>
        <li>全部使用类</li>
    </ul>
    <h4>一个标签可以使用多个类，需要用空格隔开就可以</h4>
    <div class="color1 bigger"></div>
    <h3>id选择器：通过"#+名字"的方法定义，然后和类选择器相似，但是每个id选择器只能被调用一次，也就是在全局范围内
        只能使用一次，不能二次调用</h3>
    <div id="name1"></div>
    <h4>???</h4>
    <div id="name1">不可以</div>
    <h4>???</h4>
    <div id="name1">不可以</div>
</body>

2、字体属性                                                                                            

        1、字体样式font-family：设置字体样式，可以有多个值，浏览器会优先使用靠前的字体

        2、文字大小font-size：设置文字的大小，如果通过是body标签设置文字大小，那么标题标签的文字需要单独设置,大小是数字

        3、字体粗细font-weight：设置字体的粗细，normal（或者400）为不加粗，bold(或者700)为加粗 100~900，实际开发中建议使用数字

        4、文字样式font-style:设置文字的倾斜与否，normal(不倾斜)，intalic(倾斜)很少使用，一般都是让倾斜的字体边的不倾斜

 字体属性
        1、字体样式font-family:设置字体样式，可以有多个值，浏览器会优先使用靠前的字体
        2、文字大小font-size:设置文字的大小，如果通过是body标签设置文字大小，那么标题标签的文字需要单独设置,大小是数字
        3、字体粗细font-weight：设置字体的粗细，normal（或者400）为不加粗，bold(或者700)为加粗 100~900，实际开发中
        建议使用数字
        4、文字样式font-style:设置文字的倾斜与否，normal(不倾斜)，intalic(倾斜)很少使用，一般都是让倾斜的字体边的不
        倾斜
<style>
    /* 设置段落中的文字的字体 */
    p {
        font-family: '宋体' , "微软雅黑";
    }
    /* 通过body标签设置文字的大小 */
    body {
        font-size: 20px;
    }
    h2 {
        font-size: 30px;
    }
    .jiacu {
        font-weight: bold;
    }
    .bianxi {
        font-weight: 200;
    }
    /* 通过font-style的设置使文字不倾斜 */
     em{
        font-style: normal;
    } 
</style>
<body>
    <h2>标题标签的文字需要单独设置</h2>
    <p>看看微软雅黑是什么样子</p>
    <div>搞一个对比</div>
    <ul>
        <li class="jiacu">字体加粗</li>
        <li>字体不加粗</li>
    </ul>
    <ul>
        <li class="bianxi ">字体变细</li>
        <li>字体不变细</li>
    </ul>
    <em>不知字体倾斜否</em>
</body>

5、 字体的复合属性：

         利用字体的复合属性可以节省代码，但是各个属性之间是有一定的顺序的，并且不能颠倒顺序（不起作用）

          除此以外，font-size font-family属性必须保留，否则不起作用：

          font: font-style font-weight  font-size/line-height font-family

</head>
<style>
    /* 字体的复合属性的设置：节省代码 */
    p {

        /*这种写法没有错误。但是就是代码太多
         font-size: 30px;
        font-family: '宋体';
        font-style: italic;
        font-weight: 800; */
        /* 利用字体的复合属性可以节省代码，但是各个属性之间是有一定的顺序的，并且不能颠倒顺序（不起作用）
        除此以外，font-size font-family属性必须保留，否则不起作用：
        font: font-style font-weight  font-size/line-height font-family */
        font: italic 800 30px '宋体';
    }
    div {
        font: 800 italic 30px '宋体';
    }
</style>
<body>
    <p>看看字体格式化 </p>
    <div>看看字体格式化</div>

</body>

3、文本属性

属性	表示	注意点
color	文本颜色	通常用十六进制表示
text-align	文本对齐	可以设定文字水平的对齐方式
text-indent	文本缩进	通常我们用于段落首行缩进两个字的距离 text-indentde: 2em
text-decoration	文本修饰	记住 添加下划线 underline  取消下划线 none
line-height	行高	控制行与行之间的距离

 1、文本颜色color

        文本颜色可以通过三种方式设置(实际开发中十六进制最常用)：

                        （1）、预定义的颜色值

                        （2）、十六进制

                        （3）、RGB代码

 /* 1、文本颜色可以通过三种方式设置(实际开发中十六进制最常用)：
                （1）、预定义的颜色值 
                （2）、十六进制
                （3）、RGB代码     */
        /* （1）、预定义的颜色值 */
        .colorTwo{
            color:red;
        }
        /* （2）、十六进制 */
        .colorThree{
            color: #0026ff;
        }
        /* （3）、RGB代码  */
        .colorOne{
            color:rgb(52, 131, 52);
        }

2、对齐文本text-align

        对齐文本 text-align：用于设置元素中的文本内容的水平对齐方式：left、right、center            

 /* 2、对齐文本 text-align：用于设置元素中的文本内容的水平对齐方式：left、right、center */
        .where {
            text-align: center;
        }

3、文本缩进text-indent   

        文本缩进text-indent:指定文本的第一行的缩进，通常是将段落的首行缩进

        此处涉及到了em和font-size，如果text-indent等于n(em)，那么就会缩进n的文字的大小,em默认值为font-size；

        如果font-size=2n(px),text-indent=4n(px)，那么就会缩进两个文字的大小，font-size默认为16px

.pOne {      
            font-size: 16px;
            text-indent: 32px;
        }
        .pTwo {      
            text-indent: 32px;
        }
        .pThree {      
            text-indent: 2em;
        }

4、文本修饰text-decoration

        装饰文本 text-decoration：设置下划线underline、删除线overline、上划线line-throught，或者什么都没有none  取消链接默认的下划线

a {
            text-decoration: none;
        }
        .decoration1 {
            text-decoration: none;
        }

 5、行高line-height

行高line-height：设置一行的高度，行间距等于行高减去font-size                                                         

 .lineHeight {
            line-height: 26;
        }

   总的代码：

<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>
        /* 1、文本颜色可以通过三种方式设置(实际开发中十六进制最常用)：
                （1）、预定义的颜色值 
                （2）、十六进制
                （3）、RGB代码     */
        /* （1）、预定义的颜色值 */
        .colorTwo{
            color:red;
        }
        /* （2）、十六进制 */
        .colorThree{
            color: #0026ff;
        }
        /* （3）、RGB代码  */
        .colorOne{
            color:rgb(52, 131, 52);
        }
        /* 2、对齐文本 text-align：用于设置元素中的文本内容的水平对齐方式：left、right、center */
        .where {
            text-align: center;
        }
        /* 3、装饰文本 text-decoration：设置下划线underline、删除线overline、上划线line-throught，或者什么都没有none*/
        /* 取消链接默认的下划线 */
        a {
            text-decoration: none;
        }
        .decoration1 {
            text-decoration: none;
        }
        /* 4、文本缩进text-indent:指定文本的第一行的缩进，通常是将段落的首行缩进 
        此处涉及到了em和font-size，如果text-indent等于n(em)，那么就会缩进n的文字的大小,em默认值为font-size；
        如果font-size=2n(px),text-indent=4n(px)，那么就会缩进两个文字的大小，font-size默认为16px*/
        .pOne {      
            font-size: 16px;
            text-indent: 32px;
        }
        .pTwo {      
            text-indent: 32px;
        }
        .pThree {      
            text-indent: 2em;
        }
        /* 5、行高line-height：设置一行的高度，行间距等于行高减去font-size*/
        .lineHeight {
            line-height: 26;
        }
    </style>
</head>
<body>
    <h4 class="colorTwo">文本颜色</h4>
    <h4 class="colorThree">文本颜色</h4>
    <h4 class="colorOne">文本颜色</h4>
    <!-- 标题可以看为一个盒子，它独自占一行 -->
    <h4 class="where">文本内容居中对齐</h4>
    <a href="http://www.qq.com" class="decoration1">腾讯</a>
    <p class="pOne">青春，对每个人来说都是那么梦幻，那么美好。对呀，青春好似一杯美酒，滋味甘醇，令人回味无穷
        ；又犹如一双音乐家的手，拨动音弦，弹唱出陶醉的音乐。当青春开出妖娆的花朵，青春的酸甜苦辣，青春的美好憧憬，
        都一幕幕地浮现在眼前。《青春之歌》带我们寻找最美的青春之花。</p>
    <p class="pTwo">青春，对每个人来说都是那么梦幻，那么美好。对呀，青春好似一杯美酒，滋味甘醇，令人回味无穷
        ；又犹如一双音乐家的手，拨动音弦，弹唱出陶醉的音乐。当青春开出妖娆的花朵，青春的酸甜苦辣，青春的美好憧憬，
        都一幕幕地浮现在眼前。《青春之歌》带我们寻找最美的青春之花。</p>
    <p class="pThree">青春，对每个人来说都是那么梦幻，那么美好。对呀，青春好似一杯美酒，滋味甘醇，令人回味无穷
        ；又犹如一双音乐家的手，拨动音弦，弹唱出陶醉的音乐。当青春开出妖娆的花朵，青春的酸甜苦辣，青春的美好憧憬，
        都一幕幕地浮现在眼前。《青春之歌》带我们寻找最美的青春之花。</p>
        <!-- ps:为啥嵌套了两个标签就会不一样？？？ -->
    <p class="pThree lineHeight">青春，对每个人来说都是那么梦幻，那么美好。对呀，青春好似一杯美酒，滋味甘醇，令人回味无穷
        ；又犹如一双音乐家的手，拨动音弦，弹唱出陶醉的音乐。当青春开出妖娆的花朵，青春的酸甜苦辣，青春的美好憧憬，
        都一幕幕地浮现在眼前。《青春之歌》带我们寻找最美的青春之花。</p>
</body>

  4、引入方式

样式表	优点	缺点	使用情况	控制范围
行内样式表	方便书写，权重高	结构样式混合	较少	控制一个标签
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面
外部样式表	完全实现结构和样式相分离	需要引入	最多	控制多个页面

1、行内样式表

 在 元素表签内部的style属性中设定CSS样式，适用于修改简单的样式。然后样式之间彼此用“；”隔开

h4 style="color:rgb(19, 35, 128); font-size: 18px">通过行内样式表改变文本颜色</h4>

2、内部样式表

a.写到HTML页面内部。将所有的CSS代码抽取出来，单独的放在一个<style>表签之中。

b.<style>标签理论上可以放在HTML文档的任何地方，但是一般都会放在文档的<head>标签之中

<style>
        .div {
            color: red;
        }
    </style>
</head>
<body>
    <div class="div">颜色设置，通过内部行式表</div>
<body>

3、外部样式表

实际开发都是外部样式表。适合样式比较多的情况。核心是：样式单独写到CSS文件中，之后把CSS文件引入HTML页面中使用。

1、首先需要创建一个后缀名为“.css”的文件，然后将CSS代码放在里面就可以了

 

 2、在HTML文件中使用<link>标签引入cssw文件

<link rel="stylesheet" href="css文件路径” >

属性	作用
rel	定义当前文档与被链接文档之间的关系，，在这里需要指定为“stylesheet”，表明被链接的文件是一个样式表文件
href	.......

 <link rel="stylesheet" href="引入1.css">

   5、Chrome调试工具

        点击键盘F12即可进行调试。

        主要操作：

                （1）Ctrl + 滚轮  可以放大缩小开发者代码大小

                （2）左边是HTML元素结构，右边是CSS样式

                （3）右边CSS样式可以改变数值，然后可以看改变后的效果，如果需要恢复到最开始的页面直接刷新一次就可以了

                （4）Ctrl + 0 恢复浏览器的大小

                （5）如果点击元素，发现右侧 没有样式引入，极有可能是类名或者样式引入错误

                （6）如果有样式，但是样式前有黄色感叹号提示，则是样式属性书写错误

6、emmet语法生成

1、快速生成HTML标签

        1. 生成标签直接输入标签名按tab键即可比如div 然后tab键，就可以生成<div> </div>
        2.如果想要生成多个相同标签加上*就可以了比如div*3 就可以快速生成3个div
        3.如果有父子级关系的标签,可以用>比如ul> |li就可以了
        4.如果有兄弟关系的标签，用+就可以了比如div+p
        5.如果生成带有类名或者id名字的，直接写.demo, 或者#two tab 键就可以了
        6.如果生成的div类名是有顺序的，可以用自增符号$
        7.如果想要在生成的标签内部写内容可以用{}表示

 <!-- div.demo$*4 -->
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div> 
   <!-- div{我想要睡觉}*5 -->
    <div>我想要睡觉</div>
    <div>我想要睡觉</div>
    <div>我想要睡觉</div>
    <div>我想要睡觉</div>
    <div>我想要睡觉</div>
    <!-- div{$}*4 -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>

 7、复合选择器

        什么是复合选择器
        在CSS中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上, 对基本选择器进行组合形成的。
        ●复合选择器可以更准确、 更高效的选择目标元素(标签)
        ●复合选择器是由两个或多 个基础选择器,通过不同的方式组合而成的
        ●常用的复合选择器包括 :后代选择器、子选择器、并集选择器、伪类选择器等等

1、后代选择器

        后代选择器又称为包含选择器，可以选择父元素里面的子元素，写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，当发生嵌套时，内层标签就是外层标签的后代

        当然每一层的选择器都必须是基础选择器

        如果发生了,在标签的更内层还有存在和我们的目标标签一样的标签，那么他一样会改变

        最外层标签 里层 更里层 ... 目标标签 {  样式  } 

<style>
    /* 后代选择器又称为包含选择器，可以选择父元素里面的子元素，写法就是把外层标签写在前面，
    内层标签写在后面，中间用空格分隔，当发生嵌套时，内层标签就是外层标签的后代,*/
    /* 只改变ul中的li标签 */
    ul li {
        color: red;
    }

    /* 改变li中的a标签的颜色 */
    ul li a {
        color: red;
    }

    /* 利用类选择器作为最外层标签 */
    .wode span {
        color: green;
    }
    /* 如果发生了,在标签的更内层还有存在和我们的目标标签一样的标签，那么他一样会改变 */
    div a {
        color: red;
    }

    /* 也就是说选择的时候需要从最外侧开始写，一层一层写出来，可以一直嵌套 */
</style>

<body>
    <ul>
        <li>只改变ul中的li标签</li>
        <li>只改变ul中的li标签</li>
        <li><a href="#">点击一个没用的标签</a></li>
    </ul>
    <ol>
        <li>不改变ol中的li标签</li>
        <li>不改变ol中的li标签</li>
    </ol>
    <div class="wode">
        <span>利用类选择器修改样式</span>
    </div>
    <div>
        <a href="#">测试而已1</a>
        <span>
            <ul><a href="#">测试而已2</a></ul>
        </span>
    </div>
</body>

 2、子选择器

              子元素选择器,只能选择作为某元素的最近一级的子元素，简单理解就是选亲儿子元素                      元素1>元素2 

               子选择器可以和后代选择器的嵌套使用 

<style>
    .nav>a {
        color: red;
    }

    /* 子选择器和后代选择器的嵌套使用 */
    .name div>a {
        color: green;
    }
</style>

<body>
    <div class="nav">
        <a href="#">一个链接变色</a>
        <span><a href="#">另一个链接不变色</a></span>
    </div>
    <div class="name">
        <div>
            <a href="#">测试而已1</a>
            <span>
                <ul><a href="#">测试而已2</a></ul>
            </span>
        </div>
    </div>
</body>

3、并集选择器

        并集选择器可以选择多组标签，同时为他们定义样式，通常为集体声明。

        并集选择器是各选择器通过英文逗号连接而成，任何形式的选择器都可以作为并集选择器的一部分 

<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>
        /* 同时为三个标签设置样式 */
        div,
        p,
        span {
            color: green;
            font-size: 19px;
        }
    </style>
</head>

<body>
    <div>大盒子</div>
    <span>小盒子</span>
    <p>段落</p>
</body>

     4、伪类选择器

        1、链接伪类选择器  

a:link	选择所有未被访问的链接
a:visited	选择所有已被访问的链接
a: hover	选择鼠标指针位于其上的链接
a: active	选择活动链接(鼠标按下未弹起的链接

因为链接标签在浏览器中具有默认样式，因此一般我们需要单独的为a标签设置样式。

 在实际开发中一般只需要设置a标签的样式还有鼠标经过时的a的样式（a:hover）就可以了

除此以外，伪链接选择器的 设置是有一定的顺序的，必须 link、visited、hover、active的顺序

<style>
    /* a:link 选择没有被访问过的链接  */
    a:link {
        color: red;
        font-size: 20px;
    }

    /* a:visited 选择所有已被访问的链接 */
    a:visited {
        color: green;
    }

    /* a:hover 选择指针位于其上的链接 哈哈哈 字体变大好搞笑 */
    a:hover {
        font-size: 50px;
        color: salmon;
    }

    a:active {
        font-size: 30px;
        color: slateblue;
    }
</style>

<body>
    <a href="引入.html">引入</a>
    <a href="选择器.html">选择器</a>
    <a href="11子选择器.html">子选择器</a>
    <a href="字体属性.html">字体属性</a>
</body>

2、伪类选择器

                伪类选择器：选择获得焦点的表单元素

                焦点就是光标，一般情况下input类表单元素才能获取，因此这个选择器也主要针对表单元素来说 

</head>
<style>
    input:focus {
        /* 改变背景颜色 */
        background-color: black;
        /* 改变文字的颜色 */
        color: white;
    }
</style>

<body>
    <input type="text"><br>
    <input type="text"><br>
    <input type="text"><br>

</body>

  8、元素的显示模式       

         元素的显示模式就是元素（标签）以什么方式进行显示，比如<div>单独占一行，但是一行可以放很多的<span>

        HTML元素一般分为块元素和行内元素   

1、块元素

        常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>是最典型的块元素。

        块元素的特点：

                ①自己独占一行 

                ②高度、宽度、外边距以及内边距都可以设置

                ③宽度默认是父容器的宽度

                ④是一个容器及盒子，里面可以放行内或者块级元素

        注意：（1）文字类的元素内不能使用块级元素

                   （2）<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别不能放<div>

                   （3）<h1>~<h6>等都是文字类块级元素，里面也不能放其他块级元素

     2、行内元素

        常见的行内元素有<a>、<strong>、 <b>、 <em>、 <i>、 <del>、 <S>. <ins>、 <u>、 <span>等,其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
        行内元素的特点:
                ①相邻行内元素在一行上, -行可以显示多个。
                ②高、宽直接设置是无效的。
                ③默认宽度就是它本身内容的宽度。
                ④行内元素只能容纳文本或其他行内元素。
        注意:
                ●链接里面不能再放链接
                ●特殊情况链接<a>里面可以放块级元素,但是给<a>转换一下块级模式最安全

3、行内块元素

        在行内元素中有几个特殊的标签一<img/>、 <input/>、 <td> ,它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。
        行内块元素的特点:
        ①和相邻行内元素(行内块)在- -行上 ,但是他们之间会有空白缝隙。-行可以显示多个(行内元素特点)。
        ②默认宽度就是它本身内容的宽度(行内元素特点)。
        ③高度,行高、外边距以及内边距都可以控制(块级元素特点)。

4、元素显示模式转换display

        看标题就知道了这是有关元素模式的转化，哈哈哈，又说了一句废话。

        转化为块元素： display: block;

        转化为行内元素：dispaly: inline；

        转化为行内块：display：inline-block;

   

<style>
    span {
        width: 300px;
        height: 20px;
        background-color: green;
        display: block;
    }

    div {
        width: 300px;
        height: 60px;
        background-color: grey;
        display: inline;
    }
</style>

<body>
    <span>行内元素转化为块元素</span>
    <span>行内元素转化为块元素</span>
    <div>将块元素转化为行内元素</div>
    <div>将块元素转化为行内元素</div>
    
</body>

9、 CSS背景background

        通过CSS背景，可以给页面元素添加背景样式

        背景属性可以设置背景、背景图片、背景平铺、背景图片为止、背景图像固定等。

1、背景颜色background-color

        background-color属性定义了元素的背景颜色

        background0color: 颜色值；

        默认属性是transparent（透明）

2、背景图片background-image

        background-image属性描述了元素的背景图像，实际开发中常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置。

        background-image: none |  url (url）

        参数为none就是没有背景图片，同时也是默认值。

        url为图片的相对地址或者绝对地址

           

background-image: url("../picture/头像.jpg");

 3、背景图片平铺background-repeat

        如果需要在HTML页面上对背景图片进行平铺，可以使用background-repeat

        该属性的参数值和作用如下

参数值	作用
repeat	背景图片在纵向和横向上平铺（默认值）
no-repeat	背景图片不平铺
repeat-x	背景图片在横向上平铺
repeat-y	背景图片在纵向上平铺

         1.参数是方位名词
                ●如果指定的两个值都是方位名词 ,则两个值前后顺序无关,比如left top和top left效果-致
                ●如果只指定了一一个方位名词,另-个值省略,则第二个值默认居中对挤
        2.参数是精确单位
                ●如果参数值是精确坐标,那么第一个肯定是x坐标, 第二个定是y坐标
                ●如果只指定一 一个数值,那该数值一定是x 坐标,另-个默认垂直居中

4、背景图片固定background-attachment

        background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。 背景-附件属性设置背景图像是否固定或者随着页面的其余部分滚动.
        background attachment后期可以制作视差滚动的效果。 背景附件后期可以制作视差滚动的效果。
        background - attachment : scroll | fixed 

参数	作用
scroll	背景图片是随对象内容滚动
fixed	背景图片固定

         

5、背景复合写法

        为了简化背景属性的代码,我们可以将这些属性合并简写在同一个属性background中。从而节约代码量
        当使用简写属性时,没有特定的书写顺序,-般习惯约定顺序为:
        background: 背景颜色 背景图片地址 背景平铺背景图像 滚动背景 图片位置;
        background: transparent url (image.jpg) repeat-y fixed top ;这是实际开发中,我们更提倡的写法。

6、背景半透明background: rgba

        CSS3为我们提供了背景颜色半透明的效果。
        background: rgba(0, 0，0，0.3) ;
        ●最后一个参数是alpha透明度,取值范围在0~1之间
        ●我们习惯把 0.3的0省略掉,为background:rgba(0,0, 0, .3);
        ●注意:背景半透明是指盒子背景半透明,舒里面的内容不受影响
        ●CSS3新增属性,是IE9+版本浏览器才支持的
        ●但是现在实际开发我们不太关注兼容性写法了,可以放心使用

10、CSS三大特性

        1、层叠性

        相同选择器设置相同的样式，此时一个样式就会覆盖（层叠）另外一个冲突的样式。层叠性主要解决样式冲突的问题。

        层叠性原则：        

                样式冲突、遵循的原则就是就近原则（我认为是最后读取的原则，就是以最后读取的代码的样式为实际样式）。

                样式不冲突，不会层叠（这样的话就会很便于修改）

<style>
    div {
        /* 被层叠 */
        background-color: green;
        /* 不被层叠 */
        font-size: 40px;
    }

    div {
        background-color: rgb(243, 16, 16);
    }
</style>


<body>
    <div>神魔颜色：红色</div>
</body>

2、继承性

        子标签会继承父标签的某些属性（text-,font-,line-这些元素开头的可以继承，还有color属性）          

<style>
    body {
        color: red;
        font-size: 20px;
    }
</style>

<body>
    <p>p标签继承了body标签的性质</p>
</body>

   行高的继承：

行高的继承性
        body {
                font: 12px/1.5 Microsoft YaHei ;
        }
        ●行高可以跟单位也可以不跟单位，意思就是行高是字体大小的多少倍。
        ●如果子元素没有设置行高,则会继承父元素的行高为1.5
        ●此时子元素的行高是:当前子元素的文字大小* 1.5
        ●body行高1.5这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

        子类如果没有指定行高，就会继承父类的行高，如果父类也没有行高，就会继续向上继承

<style>
    body {
        font: 14px/2 宋体;
    }

    div {
        font-size: 20px;
    }
</style>

<body>
    <div>行高为40px</div>
    <ol>
        <li>行高为28px</li>
    </ol>
</body>

3、优先级

选择器	选择器权重
继承或者*	0，0，0，0
元素选择器	0，0，0，1
类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式	1，0，0，0
!important	权重最大

 

<style>
    body {
        color: red;
    }

    p {
        color: grey;
    }

    .nav {
        color: hotpink !important;
    }

    #name {
        color: lawngreen;
    }
</style>

<body>
    <p class="nav" id="name" style="color:lemonchiffon">啥颜色</p>
</body>

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重

<style>
    /* 权重为0，0，0，0 */
    body {
        color: red;  
    }

    /* 权重为：0，0，0，1 + 0，0，0，1 = 0，0，0，2 */
    ul li {
        color: grey;
    }

    /* 权重为： 0,0,1,0 + 0,0,0,1 = 0，0，1，1 */
    .nav li {
        color: green;
    }
</style>

<body>
    <ul class="nav">
        <li>颜色</li>
    </ul>
</body>

 10、盒子模型

1、看透网页布局的本质

        网页布局过程:
                1.先准备好相关的网页元素,网页元素基本都是盒子Box。
                2.利用CSS设置好盒子样式,然后摆放到相应位置。
                3.往盒子里面装内容.
        网页布局的核心本质:就是利用CSS摆盒子。

2、 盒子模型的组成

        所谓盒子模型:就是把HTML页面中的布局元素看作是一一个矩形的盒子 ,也就是一个盛装内容的容器。
        CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:边框、外边距、内边距、和实际内容

3、边框border

       盒子的边框是在盒子外面的。举个栗子：一个宽高都为200px的盒子，设置了10px的边框，那么加上该盒子的实际大小为宽高都为220px 

        border可以设置元素的边框，边框有三部分组成：边框宽度border-width、边框样式border-style、边框颜色border-color

         语法：

属性	作用
border-width	定义边框粗细
border-style	边框的样式
border-color	边框颜色

边框样式的复合写法，样式之间没有顺序：

                border: dotted green 4px;

也可以为边框的某一侧单独的指定样式：

        border-top: 2px solid red;
        border-bottom: 4px dotted green;
        border-right: 8px dashed blue;
        border-left: 16px dashed pink;

<style>
    div {
        width: 200px;
        height: 300px;
        /* border-width设置边框的粗细 仅仅有边框的话边框也不会显示 */
        border-width: 4px;
        /* border-style 边框的样式：1、solid 实线边框
                                   2、dashed 虚线边框
                                   3、dotted 点线边框*/

        /* border-style: solid; */
        /* border-style: dashed; */
        border-style: dotted;
        /* border-color设置边框颜色 */
        border-color: green;

    }

    .nav {
        width: 200px;
        height: 200px;
        /* 边框样式的简写，样式之间没有顺序 */
        border: dotted green 4px;
    }

    .nav1 {
        width: 200px;
        height: 200px;
        /* 分别为边框的每一侧指定样式 */
        border-top: 2px solid red;
        border-bottom: 4px dotted green;
        border-right: 8px dashed blue;
        border-left: 16px dashed pink;
    }

    .nav2 {
        /* 为整个比边框指定样式 */
        border: blue dotted 13px;
        /* 为部分边框指定样式 */
        border-top: 2px solid red;
        width: 100px;
        height: 300px;
    }
</style>

<body>
    <div></div>
    <p class="nav"></p>
    <P class="nav1"></P>
    <P class="nav2"></P>
</body>

border-collapse控制相邻的单元格的边框

border-collapse： collapse

collapse单词是合并的意思

border-collapse：collapse; 表示相邻的边框合并在一起，可以使相邻的边框的宽度为一个边框的宽度，否则为两个边框的宽度。

<style>
    table {
        width: 200px;
        height: 200px;
    }

    table,
    td,
    th {
        /* 使相邻的边框合并但不使叠加 */
        border-collapse: collapse;
        /* 为边框设置样式 */
        border: 1px pink solid;
        /* 使文字居中 */
        text-align: center;
    }
</style>

<body>
    <table border="1" cellspacing=0>
        <tr>
            <th>姓名</th>
            <th>学号</th>
            <th>年级</th>
        </tr>
        <tr>
            <td>L</td>
            <td>20120800</td>
            <td>20</td>
        </tr>
        <tr>
            <td>L</td>
            <td>20120800</td>
            <td>20</td>
        </tr>
        <tr>
            <td>L</td>
            <td>20120800</td>
            <td>20</td>
        </tr>
    </table>
</body>

4、内边距padding

         padding定义元素边框与元素内容之间的空间，即上下左右的内边距

          内边距也会影响盒子的大小。举个栗子：一个宽高都为200px的盒子，设置了10px的内边距，那么加上该盒子的实际大小为宽高都为220px 

padding-top	上内边距
padding-right	右内边距
padding-bottom	下内边距
padding-left	左内边距

 

<style>
    /* padding用于设置内容与边框之间的距离  */
    div {
        height: 200px;
        width: 200px;
        background-color: red;
        /* 分别设置内边距 */
        padding-top: 30px;
        padding-right: 20px;
        padding-bottom: 10px;
        padding-left: 40px;
    }
</style>

<body>
    <div>我真的好想你 在每一个雨季，你选择遗忘的 是我最不舍的</div>
</body>

内边距的复合写法： 

值的个数	含义
padding: 5px	一个值，上下左右都有5像素的内边距
padding: 5px 10px	2个值，代表上下边距是5像素，左右内边距是10像素
padding: 5px  10px 20px	三个值，代表上内边距是5像素，左右内边距是10像素，下内边距是20像素
padding:5px 10px 20px  30px	四个值，上是5，右10，下20 左30（从最上面开始顺时针旋转）

5、margin外边距

        用于控制盒子与盒子之间的距离

        其复合写法与padding完全一样

如果没有指定宽度和高度，那么指定padding和margin值不会撑开盒子

6、实现水平居中对齐

实现块级元素的居中对齐：

        外边距可以让块级盒子水平居中,但是必须满足两个条件:
                ①盒子必须指定了宽度(width)。
                ②盒子左右的外边距都设置为 auto
                . header{ width: 960px; margin:0 auto; }
        常见的写法,以下三种都可以:
                ●margin-left: auto; margin-right: auto;
                ●margin: auto;
                ●margin: 0 auto;

行内元素或者行内块元素水平居中给斯元素添加text- align:center即可。

7、塌陷问题及解决方法

        塌陷就是说当父盒子有外边距，子盒子也有外边距的时候，父类盒子会移动父类和子类中最大的外边距，也就是说子盒子和父盒子是一起移动的。        

        比如以下代码，我想让父类盒子向下移动100px,然后让子盒子向下移动50px,然后让子父盒子的上边界不在一起。但是结果却不是我们所预期的那样。

预期效果：

 代码：

<style>
    .nav1 {
        width: 400px;
        height: 400px;
        background-color: red;
        margin-top: 100px;
    }

    .nav2 {
        width: 200px;
        height: 200px;
        background-color: blue;
        margin-top: 50px;
    }
</style>

<body>
    <div class="nav1">
        <div class="nav2"></div>
    </div>
</body>

 结果子父盒子的上边界还没有分开：

 解决方法：

        ①可以为父元素定义上边框。
        ②可以为父元素定义上内边距。
        ③可以为父元素添加overflow:hidden。

        /* 解决方法一：为盒子设置边框 */
        /* border: 1px transparent solid; */
        /* 解决方法二：设置内边距 */
        /* padding: 1px; */
        /* 解决方法三：添加overflow:hidden; */
        overflow: hidden;

8、清除内外边距

网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不-致。因此我们在布局前,首先要清除下网页元素的内外边距。

* {
    padding: 0;
    margin: 0;
}

注意:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。但是转换为块级和行内块元素就可以了

9、圆角边框

        在CSS3中,新增了圆角边框样式,这样我们的盒子就可以变圆角了
        border-radius属性用于设置元素的外边框圆角。
        语法:
                border- radius : length;
        ●参数值可以为数值或百分比的形式
        ●如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为50%
        ●如果是个矩形,设置为高度的一半就可以做
        ●该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角
        ●分开写: border-top-left-radius、border-top-right-radius、 border-bottom-right-radius 和border- bottom-left-radius

<style>
    .demo1 {
        width: 100px;
        height: 100px;
        background-color: black;
        border-radius: 20px;

    }

    .circle {
        width: 100px;
        height: 100px;
        background-color: blue;
        /* 1 两种写法 */
        /* border-radius: 50px; */
        border-radius: 50%;
    }

    .juxing {
        width: 200px;
        height: 100px;
        border-radius: 50px;
        background-color: brown;
    }

    .demo2 {
        width: 100px;
        height: 100px;
        border-radius: 10px 15px 20px 40px;
        background-color: cyan;
    }

    .demo3 {
        width: 100px;
        height: 100px;
        border-radius: 10px 40px;
        background-color: cyan;
    }

    .demo4 {
        width: 100px;
        height: 100px;
        border-radius: 10px 20px 40px;
        background-color: cyan;
    }
</style>

<body>
    <h3>圆角边框</h3>
    <div class="demo1"></div>
    <h3>1 一个圆形只要让半径等于正方形盒子边长的一半</h3>
    <div class="circle"></div>
    <h3>2 一个椭圆只要让半径等于矩形盒子高的一半</h3>
    <div class="juxing"></div>
    <h3>3 可以设置不同的圆角 从左上开始 顺时针</h3>
    <div class="demo2"></div>
    <h3>两个值</h3>
    <div class="demo3"></div>
    <h3>三个值</h3>
    <div class="demo4"></div>
</body>

10、盒子阴影

        box-shdow: h-shdow v-shdow blur spread color inset;

注意：

        1.默认的是外阴影(outset),但是不可以写这个单词，否则导致阴影无效
        2.盒子阴影不占用空间,不会影响其他盒子排列。

<style>
    div {
        height: 400px;
        width: 500px;
        background-color: cyan;
        margin: 100px auto;
    }

    /* 鼠标选中出现影子 */
    div:hover {
        /* 关于最后一个属性,默认是外部不用写,但是如果写了就会出错,可以改为inset. */
        box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .3);
    }
</style>

<body>
    <div class="shadow"></div>
</body>