基础CSS|青训营笔记

这是我参与【第四届青训营-前端场】笔记创作活动的第2天

1.CSS是什么

Cascading Style Sheets 用来定义页面元素的样式，功能如下：

设置字体和颜色

设置位置和大小

添加动画效果

2.CSS使用格式

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

注：h1为选择器（selector）,color为选择器（Property）,white为属性值（Value），font-size:14px为声明（Declaration）

3.页面中使用CSS的方式：外链、嵌入与内联；开发中常用外链

QQ图片20220727170618.png 举个栗子：

QQ图片20220727171254.png

4.CSS工作原理

QQ图片20220727171550.png 先加载HTML，解析HTML的同时加载CSS，CSS成功加载后进行解析，再创建DOM树时将解析的CSS添加样式到DOM节点上，最后完整的展示出画面

5.各组件的解释

***选择器***（selector）

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

1. 通配选择器

QQ图片20220727173101.png 2.标签选择器

QQ图片20220727173245.png 3.id选择器

QQ图片20220727173451.png 4.类选择器

QQ图片20220727173534.png 5.属性选择器

***伪类（paseudo-classes）***

作用：不基于标签和属性定位元素

几种伪类： 1. 结构伪类 2. 结构性伪类

***组合（combinators）***

QQ图片20220727174504.png 举个栗子：

<article>
  <h1>拉森火山国家公园</h1>
  <p>拉森火山国家公园是位于...</p>
  <section>
    <h2>气候</h2>
    <p>因为拉森火山国家公园...</p>
    <p>高于这个高度，气候非常寒冷...</p>
  </section>
</article>

<style>
  article p {
    color: black;
  }

  article > p {
    color: blue;
  }

  h2 + p {
    color: red; 
  }
</style>

QQ图片20220727174801.png

6.常见样式

颜色-RGB

红绿蓝三原色合成#XXXXXX用六位的16进制码来描述颜色rgb（x，x，x）用三位256以内的十进制表示

颜色-HSL

Hue 色相：色彩的基本属性(0-360)

Saturation饱和度：色彩的鲜艳程度(0-100%)

Lightness 亮度：颜色的明亮程度(0~100%)

通过以上三种元素合成: hsl(x,X%,X%)用三种元素的值来描述颜色

alpha透明度

通常在#xxxxxx描述颜色的六位基础上加两位，或者rgba(x,x,x,x)与hsla(x,x%,x%)中再添加一位x且最大值为1

font-family字体

通用字体族：

Serif衬线体：Georgia、宋体
Sans-Serif无衬线体：Arial、Helvetica、黑体、微软雅黑
Cursive手写体：Caflisch Script、楷体
Fantasy：Comic Sans MS、Papyrus、Zapfino
Monospace等宽体：Consolas、Courier、中文字体

建议：

字体列表最后写上通用字体族
英文字体放在中文字体前面

使用Web Fonts

QQ图片20220727181034.png

QQ图片20220727181103.png

字体大小font-size

关键字：small、medium、large
长度：px、em
百分数：相对于父元素字体大小

位置（situation）

line-height：调整行间距
text-align：调整宽度格式（靠左、靠右或居中等）
spacing：通过letter-spacing和word-spacing来调整字符间距和单词间距
text-indent：调整首行缩进距离
text-decoration：文字修饰，如underline、line-through、overline

7.调试CSS

QQ图片20220727182019.png

8.自我小结

通过初步的基础CSS学习，让我明白了前端css的重要作用，如何根据设计图做出一个完美的网页，离不开css的构建，前端的路还很长，这只是渺小的一步

前端萌新的CSS基础学习