【web前端基础 | CSS】CSS简介

思维导图

一：html的局限性

很早的时候，世界上的网站虽然很多，但是他们都有一个共同的特点：丑。
虽然 HTML 可以做简单的样式，但是带来的是无尽的臃肿和繁琐……

二：css的介绍

CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。有时我们也会称之为 CSS 样式表或级联样式表。 CSS 是也是一种标记语言
CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、 边距等）以及版面的布局和外观显示样式。

• HTML 主要做结构,显示元素内容.
• CSS 美化 HTML ,布局网页.
• CSS 最大价值: 由 HTML 专注去做结构呈现，样式交给 CSS，即 结构 ( HTML ) 与样式( CSS ) 相分离。

三：css的语法规范

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

• 选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
• 属性和属性值以“键值对”的形式出现
• 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
• 属性和属性值之间用英文“:”分开
• 多个“键值对”之间用英文“;”进行区分

<style>
   .way_01 {
            font-size: larger;
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
            background-color: rgb(235, 93, 93);
        }

四：css的代码风格

1：样式的格式书写

• 紧凑格式

h3 { color: deeppink;font-size: 20px;}

• 展开格式（推荐使用）

 h3 { 
    color: pink; 
    font-size: 20px;     
 }

【叽叽歪歪】推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外
，属性值前面，冒号后面，保留一个空格 ，选择器（标签）和大括号中间保留空格

• 注释样式和html的不一样

<!-- 这是html的注释样式 -->

/* 这是css的注释样式 */