这是我参与「第五届青训营」伴学笔记创作活动的第2天
青训营课程笔记

一、CSS是什么

CSS（Cascading Style Sheets）,用来定义页面元素的样式：设置字体和颜色，设置位置和大小，添加动画效果

二、CSS代码语法

1、基础代码

h1{
color:white;
font-size:13px;
}

h1:选择器Selector
color/font-size:选择器属性Propetry
white/13px:属性值
属性：属性值；作为一个声明，声明之间用分号；隔开
选择器{声明}作为一个规则

2、在页面中使用CSS

（1）外链

将CSS样式单独写入一个文件，通过link标签href="文件路径"引入

<link rel="stylesheet" href="/assets/style.css">

（2）嵌入

直接把样式代码嵌入html标签里

<style>
h1{
color:white;
font-size:13px;
}
</style>

（3）内联

html标签都有一个style属性，在style属性赋值相关CSS属性及属性值

<p style="margin:lem 0"></p>

3、CSS工作过程 4、选择器Selector

作用：找出页面的元素，以便给他们设置样式
类型：

按照标签名、类名或id
按照属性
按照DOM树中的位置
通配选择器：*{}匹配所有

标签选择器
  h1 {
      color: aqua;
      text-align: center;
    }
        
类名选择器
.info{
    color: aqua;
    text-align: center;
}

ID选择器（用id引用css样式）
#indo{
    color: aqua;
    text-align: center;
}

通配选择器
 * {
    text-align: center;
    font-size: 18px;
    color: green;
 }
 
 属性选择器
 <input value="zhao" type="password"/>
 <style>
    input[type="password"]{
     background:#eee;
     color:#999;
  }
  </style>

三、CSS 继承与布局

1、继承

某些属性会自动继承其他元素的计算值，除非显示指定一个值

显示继承

*{
  box-sizing:inherit;
}
html{
  box-sizing:border-box;
}
.some-wideget{
   box-sizing:content-box;
 }

2、布局

什么是布局？

布局是确定内容大小和位置的算法，依据元素、容器、兄弟节点和内容等信息来计算

布局相关的技术

常规流-行级、块级、表格布局、FileBox、Grid布局
浮动
绝对定位

行级&块级

块级元素

生成块级盒子
body、article、div、main、p、ul、li

行级元素

生成行级盒子
内容分散在多个行盒中
span、em、strong、code、cite

四、学习体会

通过理解CSS这三节课程，我深入了解了CSS及相关属性用法，体会了各种CSS样式，受益匪浅

理解CSS|青训营笔记