说到HTML，就不得不提到CSS样式，接下来我们就会讲解CSS在HTML语言中的使用。具体要讲解的内容有:

  CSS简介

  CSS基础选择器

  CSS字体属性

  CSS文本属性

  CSS的引入方式

  Chrome调试工具


CSS的主要使用场景就是美化网页，调整页面布局的。这里就不得不提下HTML的局限性。HTML,只关注内容的语义，主要做结构，显示元素内容。比如<h1>表明这是一个大标题，<p>表明这是一个段落，<img>表明这有一张图片，<a>表明这有一个链接。纯HTML网页都有一个特点，就是页面很丑~~~ 虽然HTML可以做简单的样式调整，但是带来的是无尽的代码臃肿和繁琐。

CSS是网页的美容师:

css是层叠样式表，Cascading Style Sheets的简称，有时候也称为CSS样式表或级联样式表。css也是一种标记语言，语法比较简单。css主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)，以及版面的布局外观显示样式。css可以美化HTML,使HTML更漂亮，让页面布局更简单。

【测试开发全栈--CSS」(1) css样式一探究竟_html

CSS的最大价值: 让HTML专注去做结构呈现，样式交给css,即结构HTML和样式CSS相分离。


接着说下CSS的语法规范: 

css规则由两个主要的部分构成，选择器以及一条或者多条声明。


【测试开发全栈--CSS」(1) css样式一探究竟_html_02

来看个实例

【测试开发全栈--CSS」(1) css样式一探究竟_全栈化_03

相当于使用css中的<style>标签属性讲段落<p>里的文字内容设置为红色

来看看对应的代码:

<!DOCTYPE html>

<html lang="en">

<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>体验CSS语法规范</title>

    <style>

        p {

            color: red;

            font: size 12px; 

        }

    </style>


</head>

<body>

    <p>标个段落</p>

</body>

</html>


选择器是用于指定CSS样式的HTML标签，花括号里是对该对象设置的具体样式。属性和属性值以键值对的形式出现。属性是对指定的对象设置的样式属性，例如 字体大小，文本颜色等。属性和属性之间，使用英文 冒号 ":" 分开

属性结尾需要使用英文分号来表示 ";"


说下css的代码风格:

  1. 样式格式书写
    1.紧凑格式，如 h3 {color:green; font-size:20px;}
    2.展开格式, 如
    h3 {
    color:green;
    font-size:20px;

    }

    2.样式大小书写风格

         h3 {

                    color:red;

              }

         强烈推荐属性名、属性值等关键字全部使用小写字母(特殊情况除外)

    3.样式空格风格

       h3 {

                    color: pink

            }

       属性值前面，冒号后面，保留一个空格

       选择器(标签)和大括号中间保留空格


好的，今天就先到这里了