• 前端学习第三天-css基础

    1. CSS简介

    从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。

    那么如何实现结构和样式的完全分离呢？

    1.1 什么是CSS

    简单来说，层叠样式表（Cascading Style Sheet）是一种专门用来控制界面外观风格的文档。 主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

    CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

    1.2 CSS发展历史

    1. 1996年 CSS 1.0 规范面世，其中加入了字体、样色等相关属性。

    2. 1998年 CSS 2.0 规范推出，这个版本的 CSS 也是最广为人知的一个版本。

    3. 2004年 CSS 2.1 规范推出，对 CSS 2.0 进行了一些小范围的修改，删除了一些浏览器支持不成熟的属性。

    4. 2010年 CSS 3.0 规范推出，将 CSS3 分成了不同的模块，例如盒子模型、背景和边框、文字特效等模块。

    2. CSS使用方式(4种)

    2.1 行内样式

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.     <head>
    4.         <title>This is title</title>
    5.     </head>
    6.     <body>
    7.         <p style="font-size: 16px; color: red;">大家好</p>
    8.     </body>
    9. </html>

    行内样式需要写到标签的 style 属性值中。

    2.2 内部样式表

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.     <head>
    4.         <title>This is title</title>
    5.         <style>
    6.             p {
    7.                 font-size: 16px;
    8.                 color: red;
    9.             }
    10.         </style>
    11.     </head>
    12.     <body>
    13.         <p>Hello everyone</p>
    14.     </body>
    15. </html>

    内部样式需要写到