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

基础

CSS是什么？

CSS（层叠样式表）英文全称为Cascading Style Sheets，不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化

CSS的功能？

主要是用来修饰网页、使网页具有美观性和实用性，提升用户的体验感。能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力

修饰网页

用来定义页面元素的样式
设置字体颜色
调整位置和大小
添加动画效果

网页排版

使用css能够对页面进行盒型的排版，可以自定义风格。

CSS的语法?

选择器指向您需要设置样式的 HTML 元素。
声明块包含一条或多条用分号分隔的声明。
每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
多条 CSS 声明用分号分隔，声明块用花括号括起来。

选择器{
        属性:属性值;
        属性:属性值;
}
//举例：
 h2 {
      color: block;
      text-align: center;
}

CSS的使用

再页面中如果要使用CSS，有三种方法。

外链式

通过一个link标签引入css文件

<link rel="stylesheet" type="text/css" herf="/CSS文件路径">

嵌入式

<style>
        p {
           color:red;
           border:blue 1px solid;
           }
       </style>

内联式

内部使用style属性

<div style="color: red; margin-top: 10px;border: 1px solid blue">行内样式</div>

CSS选择器

CSS 选择器用于“查找”（或定位选取）要设置样式的 HTML 元素。

简单选择器

通过属性、id、class来选取元素

id选择器

id命名不能以数字开头。举例： id="junjinId"

//通过id特定的html元素适用
#junjinId{
  color: red;
}

类选择器

类选择器选择有特定 class 属性的 HTML 元素。举例：class="myClass"

.myClass{
   color:black;
   }

通配选择器

     //适用于所有HTML元素
     *{
     color:balck;
     }

组合选择器

伪类选择器

伪类选择器对字母大小写不敏感，且可以和类选择器结合使用。

语法：

selector:pseudo-class {
  property: value;
}

举例：

a标签：
/* 未访问的链接 */
a:link {
  color: #000000;
}

/* 已访问的链接 */
a:visited {
  color: #FFFFFF;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

其他选择器

还有不常用的伪元素选择器和属性选择器。

颜色、透明度、亮度等调节···

颜色

颜色通过RGB/HSL(色相/鲜艳度/亮度)/alpha（透明度）调节。

字体

css拥有font-family，可以进行各种字体。font-size可以调节字体大小····

检查

我们可以在浏览器通过右键检查来调试、观看css等，能够快捷的调整自己网页的css。

总结

青训营CSS基础的讲解对我有着巩固性、启发性、查漏补缺性的知识补充。让我拾起了久违的前端以及对前端产生更加浓厚的兴趣。

CSS从基础到深入的一些理解 | 青训营笔记

基础