走进前端技术栈-CSS|青训营笔记

白色小甜羊
212 阅读4分钟

这是我参与[第五届青训营]伴学笔记创作活动的第2天。

一、本堂课重点内容

  1. CSS代码构成
  2. CSS使用方法
  3. CSS流程之选择器组、文本渲染
  4. 调试CSS

二、详细知识点介绍

１.什么是CSS＆CSS代码构成

  • CSS全称为Cascading　Style　Sheets，它是用来定义页面元素的样式，比如设置字体和颜色、位置和大小等。
  • ⭐CSS代码由以下部分组成：选择器（Selector）——选中页面中的元素、属性（Properly）——为选中元素设置的样式属性、属性值（Value）——确定选中元素要展现的效果。
  • 一个属性与属性值是是一条声明，多个声明在一个大括号里边组成声明块。
  • 一个选择器加声明块组成一条样式规则。

２.CSS的使用方法

  • 外链（推荐使用）——把CSS代码放在一个文件里，使用［link］标签将其引入到当前页面。【内容与样式分离】。
  • 嵌入——把CSS代码嵌入HTML标签里。
  • 内联——不需要选择器。【具体样式与具体标签绑定】

３.CSS如何工作

浏览器加载HTML，解析HTML为DOM树，再加载CSS，解析CSS，将CSS样式添加到其对应的DOM节点上。

image.png

3.1 选择器如何选择元素

按照标签名、类名、id名；按照属性；按照DOM树中的位置。

  • 通配选择器——选择所有元素。
  • id选择器——在标签设置id属性，需注意id值最好唯一。
  • 类选择器（常用）——同一类型标签设计样式使用。
  • 属性选择器——选中标签中特定的属性值，如［input］标签的［disable］属性值，［input］标签含有这一属性值时可以渲染出我们指定的样式。
  • 用组合选中元素，如下所示:

image.png

  • 选择器组——多个选择器对应相同样式。
  • 状态的伪类——元素与用户交互时，根据用户不同动作所呈现的不同状态。
3.2 颜色设置
RGB
  • 表示红绿蓝三个通道；
  • RGB（０，０，０）表示黑色；
  • RGB（２５５，２５５，２５５）表示白色；
HSL
  • HSL应用于对元素颜色会发生改变的场景，如一个Button组件点击前后的颜色变化。HSL如下图所示：

image.png

alpha透明度
  • 数值为１时不透明。
  • 需要应用透明度时，一般可以直接在颜色属性直接添加alpha值，如RGB（255，0，0，0.5）。但在较老版本浏览器，需要在颜色属性后加上ａ，就添加上alpha属性通道了，如对RGB而言添加alpha属性即RGBA（255，0，0，0.5）。
3.3 字体设置
  • font-family：指定字体多个属性值，用逗号隔开。在其最后要加上通用字体族，通用字体族如下所示：

image.png

  • font-size：设置不同的HTML元素的字体大小。
  • font-weight：设置文本的粗细。
  • line-height：两行文字基准线之间的距离。
  • text-align：指定元素文本的水平对齐方式。
  • text-indent：规定文本块中首行文本的缩进。
  • text-decoration：规定添加到文本的修饰，下划线、上划线、删除线等。
  • white-space：指定元素内的空白怎样处理。

４.CSS调试

  • 右键点击页面，选择检查。
  • 选中元素，使用快捷键Ctrl+Shift+I（Windows）、Cmd+Opt+I（Mac）

三、实践练习例子

1. CSS嵌入使用

练习代码如下所示，为标签h1和p设置样式。

<head>
  <style>
    h1{
      color:orange;
      font-size:24px;
    }
    p{
      color:gray;
      font-size:14px;
      line-height:1.8;
    }
  </style>
</head>
<body>
  <h1>CSS基础训练</h1>
  <p>笔记打卡第二天</p>
</body>

运行结果：

image.png

2. CSS使用id选择器

练习代码如下所示

<h1 id="logo">CSS基础训练</h1>
<p id="text">笔记打卡第二天</p>

<style>
  #logo{
    font-size:60px;
    font-weight:200;
  }

  #text{
    color:purple;
  }
</style>

运行结果：

image.png

3. CSS使用类选择器

练习代码如下所示

<h1 class="logo">CSS基础训练</h1>
<ul>
  <li class="done">笔记打卡第一天</li>
  <li class="done">笔记打卡第二天</li>
  <li class="text">笔记打卡第三天</li>
  <li class="text">笔记打卡第四天</li>
  <li class="text">笔记打卡第五天</li>
</ul>
<style>
  .logo{
    font-size:60px;
    font-weight:200;
  }
  .done{
    color:gray;
    text-decoration:line-through;
  }
  .text{
    color:purple;
  }
</style>

运行结果：

image.png

4. CSS使用属性选择器

练习代码如下所示。

  • 对[input]元素里的属性[disable]设计样式，当元素[input]中用到[disable]时，[disable]样式渲染该元素。如下列例子对用户名框的渲染。
  • 当元素[input]的属性值等于某值（类型）时，渲染该[input]元素。如下列例子中对密码框的渲染。
<label>用户名</label>
<input value="白色小甜羊" disabled />

<label>密码</label>
<input value="123456" type="password" />

<style>
  [disabled]{
    background:#eee;
    color:#999;
  }
  input[type="password"]{
    border-color:purple;
    color:red;
  }
</style>

运行结果：

image.png

四、课后练习总结

  1. 通过此次学习，我了解了CSS对各个元素使用不同选择器的初步渲染；了解了常用属性的设置及其属性值。
  2. CSS对样式的设计有多种属性和方法的使用，及对一个元素，由用户不同行为产生的渲染变化容易混淆，都需要课下多加练习，才能真正掌握知识。
avatar
文章
阅读
粉丝