一、CSS基本用法

一. 简介：

　　为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。

二. CSS基本语法及页面引用：

　　练习1：外联式：通过link标签，链接到外部样式表到页面中。

<link rel="stylesheet" type="text/css" href="css/main.css">

　　1、创建html文件：css的引用.html；并输入内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
    
    <div>这是一个div标签</div>

</body>
</html>

　　2、创建css文件：main.css

div{
    font-size: 26px;    /*默认字体大小为16px*/
    color: red;
}

　　3、浏览器预览效果：

　　练习2：嵌入式：通过style标签，在网页上创建嵌入的样式表。

<style type="text/css">
    div{ width:100px; height:100px; color:red }
    ......
</style>

　　1、编辑html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <!-- 第1种插入样式的方式：外联式 -->
    <link rel="stylesheet" type="text/css" href="css/main.css">
    
    <!-- 第2种插入样式的方式：嵌入式 -->
    <style type="text/css">
        
        h1{
            font-size: 20px;
            color: gold;
        }

    </style>


</head>
<body>

    <div>这是一个div标签</div>

    <h1>页面标题</h1>

</body>
</html>

　　2、浏览器预览效果：

　　练习3：内联式：通过style标签，在网页上创建嵌入的样式表。

<div style="100px; height:100px; color:red ">......</div>

　　1、修改html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <!-- 第1种插入样式的方式：外联式 -->
    <link rel="stylesheet" type="text/css" href="css/main.css">
    
    <!-- 第2种插入样式的方式：嵌入式 -->
    <style type="text/css">
        
        h1{
            font-size: 20px;
            color: gold;
        }

    </style>


</head>
<body>

    <div>这是一个div标签</div>

    <h1>页面标题</h1>

    <!-- 第3种插入样式的方式：内联式==>直接在标签中写样式 -->
    <a href="http://www.baidu.com" style="font-size:20px;color:pink">链接到百度</a>    <!-- 链接 -->

</body>
</html>

　　2、浏览器预览效果：

二. CSS常用文本样式：

　　1、常用的应用文本的css样式：

color 设置文字的颜色，如： color:red;
font-size 设置文字的大小，如：font-size:12px;
font-family 设置文字的字体，如：font-family:'微软雅黑';
font-style 设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜
font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
line-height 设置文字的行高，设置行高相当于在每行文字的上下同时加间距，如：line-height:24px;

font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗字号/行高字体；如： font:normal 12px/36px '微软雅黑';
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px

text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中

　　2、练习:

　　（1）编辑html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用文本样式</title>

    <style type="text/css">
        div{
            font-size: 24px;                  /* 文字大小 */
            color: green;                     /* 文字颜色 */
            font-family: 'Microsoft Yahei';   /* 文字字体 */
            font-style: italic;               /* 文字倾斜 */
            line-height: 40px;                /* 文字行高 */
        }

        h1{
            font-weight: normal;              /* 文字是否加粗，此时normal不加粗，加粗使用bold */

        }
    </style>

</head>
<body>
    
    <h1>样式演示</h1>
    <div>
        为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。
    </div>

</body>
</html>

　　（2）浏览器预览效果：