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

1.CSS

1.1 什么是css?

css(Cascading Style Sheets)层叠样式表是用来定义HTML页面元素样式的计算机语言,基本功能如：

设置字体和颜色
设置位置和大小
添加动画效果

css基本格式如：

选择器 {属性：值;}

/*设置h1标签的字体颜色为white, 字体大小为14px*/
h1 {
    color: white;
    font-size:14px;
}

在页面中使用css 一般分为三种形式：外链，嵌入，内联

<!--外链 -->
<link rel="stylesheet" href="../style.css" />

<!-- 嵌入-->
<style>
    li {
        margin:0;
        list-style:none;
    }
</style>

<!-- 内联 -->
<p style="margin:1em 0">Example Content</p>

不推荐使用内联,这样会使得代码耦合过高，难以维护

1.2 选择器

选择器用于选择指定的页面元素，用于给其添加指定样式,选择器分为：通配选择器，ID选择器，类选择器，属性选择器，选择器之间还可以组合使用,以达到特定的选择效果

通配选择器

 * {
     margin:0;
     padding: 0;
 }

设置所有元素外边距(margin)为0, 内边距（padding）为0

ID选择器

#box {
    color: red;
}

设置id为box的元素字体颜色为red

类选择器

.box {
    color: red;
}

设置class为box的元素字体颜色为red

属性选择器

[name="pwd"]{
    outline:none;
}

选择name=pwd的元素,将轮廓变为空

组合使用选择器

名称	语法	说明	示例
直接组合	AB	满足A同时满足B	input:focus
后代组合	A B	选中B,如果它是A的子孙	nav a
亲子组合	A>B	选中B,如果它是A的子元素	section > p
兄弟选择器	A~B	选中B,如果它在A后且跟A同级	h2~p
相邻选择器	A+B	选中B,如果他紧跟在A后面	h2+p

1.3 颜色

RGB(Red,Green,Blue): 通设置如RGB(143, 172, 135)来指定想要的颜色
HSL(Hue,Saturation,Lightness):通过指定(色相，饱和度，亮度)来指定颜色如hsl(211,66%,50%)
alpha(透明度):值在0~1之间越小越透明例：设置透明度为0.1的红色 rgba(255,0,0,1)

1.4 字体

通过font-family属性可以指定字体

    h1 {
        font-family: Optima, Georgia,serif;
    }

浏览器会选择列表中第一个该计算机上有安装的字体,如果没有就往后推

当然我们也可以通过网络直接获取网络上的字体资源

 @font-face {
     font-family: "Megrim";
     src: url(字体资源的网络地址)format("woff2");
 }
 
 h1 {
     font-family:Megrim,Cursive;
 }

通过font-weight属性设置字体粗细

/*100~900越大字体越粗*/
font-weight:400;

通过line-height 设置字体行高,行高等于字体大小 + 上下间距

p {
    line-height: 40px;
  }

white-space控制换行

1.5 选择器的优先级

一般情况下：

同级按定义的先后顺序，后定义的覆盖前定义的

元素选择器 < 类选择器 < id选择器 < 行内样式 < !important

当选择器组合使用时会有权重叠加问题

权重叠加

我们可以假设选择器用数值来代替

选择器	值
元素选择器	1
类选择器	10
id选择器	100
行内样式	1000
!important	无限大

当我们使用组合使用选择器时就可以用他们的值进行相加，所得数值大的选择器就优先级越高

例如:

    <style>
    /*该优先级=10 + 10 = 20  该选择器生效*/
      .title .txt {
        color: blue;
      }
      /*10+1=11*/
      .title span {
        color: red;
      }
    </style>
  <body>
    <article>
      <h1 class="title"><span class="txt">拉森火山国家公园</span></h1>
    </article>
  </body>

最终字体就会显示蓝色

1.6 继承

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

有些属性是不可以继承，例如box-sizing，我们可以如下指定让他可以能够被继承

/*将所有元素的box-sizing设置为inherit 继承父元素, 然后设置html的box-sizing为border-box，这样html下的所有子元素都会继承html元素的box-sizing值*/
* {
    box-sizing:inherit;
}
html {
    box-sizing: border-box;
}

inherit:该属性值让元素继承其父元素的值

1.7 布局

布局分为三种大的模式分别为常规流，浮动,绝对定位

其中常规流中又有行级，块级,表格布局,flexBox,grid布局

一个盒子div,分为margin(外边距),padding(内边距),border(边框),content(内容),每个属性都有(top,left,right,buttom)四个方向的设置

QQ截图20230116210451.png

通过margin设置一个水平居中的盒子:

    <style>
      .box-child {
        width: 50px;
        height: 50px;
        background-color: gray;
        margin: 0 auto;
      }
    </style>
  <body>
    <div class="box">
      <div class="box-child"></div>
    </div>
  </body>

效果如下：

QQ截图20230116211150.png auto设置左右外边距为自动, 自动就是浏览器会自动计算盒子左右两边的剩余间距然后将其平均分布在盒子的两边，所以就能实现居中效果

通过margin:auto设置导航栏

 <style>
      * {
        padding: 0;
        margin: 0;
      }
      ul,
      li {
        list-style: none;
      }
      ul {
        display: flex;
        background-color: gray;
      }
      li {
        height: 42px;
        width: 64px;
        line-height: 42px;
        text-align: center;
      }
      .right {
        margin-left: auto;
      }
    </style>
  <body>
    <ul>
      <li>导航1</li>
      <li>导航2</li>
      <li>导航3</li>
      <li class="right">用户名</li>
      <li>头像</li>
    </ul>
  </body>

效果如下:

QQ截图20230116212034.png

box-sizing

box-sizing用于指定盒子模型,默认为box-sizing:content-box;内容模型，该模式下设置盒子的宽高不包括盒子的内外边距，和边框,所以在该模式下，我们设置内外边距和边框时可能会撑大盒子,从而影响布局,box-sizing:border-box设置该属性值可以我们盒子无论怎么设置都不会超过我们设置的盒子宽高

块级和行级

块级：不和其他盒子并排
行级：和其他行级盒子放在一行或拆开成多行

我们可以通过设置dispaly属性：black块级, inline行级，进行切换

常见的块级元素有：body, article, div, main,section, h1-h6, p , ul, li等

常见的行级元素有：span,em,strong,cite,code等

行级元素的排版规则为：

盒子在一行内水平摆放
一行放不下时,换行显示
text-align决定一行盒子的水平对齐
vertical-align决定一个盒子在行内的垂直对齐
避开浮动（float)元素

块级元素的排版规则为：

盒子从上到下摆放
垂直margin合并
块级（BFC)内盒子的margin不会和外面的合并
块级（BFC)不会＆浮动元素重叠

flex布局

flex布局是一种新的上下文排版方式通过设置display:flex来实现，在flex布局中通过

flex-direction:控制主轴方向
justify-content:控制主轴对齐模式
flex-wrap: 设置子元素是否换行
align-content: 设置侧轴上的子元素的排列方式（多行）
align-items: 设置侧轴上的子元素排列方式（单行）
flex-flow: 复合属性，相当于同时设置了flex-direction 和flex-wrap
aligin-self:align-self控制子项目自己在侧轴的排列方式（单独一个盒子）
order:子元素排列顺序，数值越小，排列越靠前，默认为0

grid布局 grid（网格布局）是一种二维的上下文排版方式,使用grid-template将属性容器划分为网格设置每一个子项占用那些行

设置一个三行两列的网格

    <style>
      .box {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 100px 100px;
      }
      .child {
        width: 100px;
        height: 100px;
        background-color: antiquewhite;
        border: 1px solid black;
      }
    </style>
  <body>
    <div class="box">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </body>

效果如下：

QQ截图20230116221110.png

浮动和定位

浮动设置float为左浮动left或右浮动right,浮动的元素脱离原文档流

定位设置position:绝对定位absolute, 相对定位relative

相对定位
- 在常规文档流里
- 相对于自己本身的位置进行偏移
- 使用top,left, bottom, right 设置偏移长度
- 流内其他元素当他没有偏移一样布局
绝对定位
- 脱离常规文档流
- 相对于最近的非static祖先定位
- 不会对流内元素布局造成影响

1.8 学习css建议

充分利用号MDN和w3c CSS 规范
保持保持好奇心，善用浏览器的开发工具
持续学习，css新特性还在不断的出现

css | 青训营笔记