理解CSS | 青训营笔记这是我参与# 「第四届青训营」笔记创作活动的的第2天 css是什么前端定义页面元素的样式。

这是我参与「第四届青训营」笔记创作活动的的第2天

css是什么

前端定义页面元素的样式。定义了如何显示html元素，就像html中的字体标签，颜色属性所起的作用一样，样式通常保存在外部的.css文件中。我们只需要编辑一个简单的css文档就可以改变所有使用该css文件的布局和外观，确实是html的利器。

css的使用

css语法规则集由[选择器]和声明块组成。选择器指的就是您要设置样式的html元素。如标签名（body ，h1,p,div...）就是一个选择器。分为3种方式外联是，嵌入式，内联式

嵌入式 
<style> div{ width:100px } </style>

css中的选择

主要有

通配选择器
标签选择器
ID选择器
类选择器
属性选择器
伪类选择器

布局

table布局

<!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>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .A {
      width: 600px;
      height: 600px;
      border: 1px solid #000;
      display: table;
    }
    .left {
      width: 200px;
      background-color: pink;
      display: table-cell;
    }
    .right {
      display: table-cell;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="A">
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>
</html>

对css属性继承的理解

定义: css继承指的是父元素设置的属性样式等, 子元素同时拥有该属性和样式可继承属性: 字体：font、font-family、font-size、font-style、font-variant、font-weight 字母间距：letter-spacing 文字展示：line-height、text-align、text-indext、text-transform 字间距：word-spacing 可见性: visibility

css提高页面性能

属性设置使用简写(例：margin值)
- 目的：减小生产包体积
用css替换图片
- 目的：减少http请求节约带宽
删除不必要的零和单位
- 目的：减小生产包体积
用css精灵图代替单个文件加载
- 目的：减少http请求节约带宽

理解CSS | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第2天