CSS基础知识，css布局模型，常用属性以及选择器介绍

1.什么是CSS

css（层叠样式表）和HTML一样，它不是一种编程语言也不是标记语言，它是一种样式表语言，用来有选择的设置HTML的样式的工具。

2.CSS规则解析

（1）以一段简单的css代码加以说明

<!-- 将样式内嵌到html中-->
<style>
    /*body标签中样式*/
    body{
    /*文本颜色是该颜色*/
        color: #817381;
    }
  <style/>

规则集： css的内容在style中进行设置，从"body"到"{}"结束整个部分我们叫做css的规则集。
选择器：“body"是规则集的开头，它定义了我们要设置样式的元素，所以把它叫做选择器。
属性：选择我们要定义的样式，如代码中的"color”,我们要设置的就是body的颜色。
属性值：我们明确属性，再确定属性值，也就是代码中"color："后的部分，根据自己的需求设置。
（2）css语法需要注意的地方：

• 每个规则集必须用完整的"{}"括起来
• 每个属性后面必须有":"
• 每个声明之间必须要有";"隔开

3.CSS常用属性

• 文本颜色：color
• 字体的大小：font-size
• 字体的粗细：font-weight
• 边框：broder（上边框broder-top 下边框broder-bottom 左边框broder-left 右边框broder-right）
• 边框样式：broder-style
• 边框颜色：broder-color
• 宽度：width
• 高度：height
• 文本对齐方式：text-align
• 边框合并：broder-collapse
• 文本装饰：text-decroration
• 内边距：padding
  简单的css代码：

<style>
    h1 {
        /* 诗人热力榜字体的粗细 */
        font-weight: 500;
        /* 诗人热力榜字体的大小是13px */
        font-size: 13px;
        /* 诗人热力榜字体的颜色 */
        color: #717171;
    }

    table {
        /* 表格边框的宽度是2px */
        border-width: 2px;
        /* 表格边框的样式是实线 */
        border-style: solid;
        /* 边框的颜色 */
        border-color: #e8e8e8;
        /* 表格的宽度 */
        width: 20%;
        /* 表格的高度 */
        height: 500px;
        /* 表格的颜色 */
        color: #2e3e4e;
        /* 合并边框 */
        border-collapse: collapse;
    }

    td {
        /* 单元格边框的颜色 */
        border-color: #e8e8e8;
        /* 单元格边框宽度 */
        border-width: 2px;
        /* 单元格边框样式是实线 */
        border-style: solid;
    }
</style>

4.CSS布局模型

css的主要布局是盒模型，如下图所示：

margin：外界外部周围的空间
border：边框，也就是填充在外面的实线
padding：内容和边框之间的部分

5.选择器的类型

选择器名称	定义	举例
标签选择器	指定所有类型的HTML元素	p；hr；ul；ol等
ID选择器	页面上指定ID的元素，在HTML页面上，给定的ID值应该是唯一的	选择< p id=ls-id >等
类选择器	页面上指定类的元素，同一个类可以出现在多个元素上面	< ul class=jiayou >;< ol class=jiayouya >等
属性选择器	页面上具有指定属性的元素	img[src]选择< img src=“111111.png” > 而不是< img >
伪类选择器	指定元素但仅限于指定状态时的元素	a:hover选择< a >，但仅当鼠标停在链接上的时候