理解CSS（上） | 青训营笔记

用户835936271820
70 阅读2分钟

理解CSS（上） | 青训营笔记

这是我参加【第四届青训营】笔记创作活动的第4天

对前端与html有了初步的了解之后，我们来了解一下css的知识。

一、了解CSS

（一）CSS是什么？

CSS是层叠样式表（Cascading Style Sheets）的缩写。因此，CSS是用来定义页面元素的样式，可以用来设置字体和颜色、设置位置和大小、添加动画效果等。

一条典型的css语句如下：

 h1 {
     color：pink；
     size：15em；
 }

其中h1为选择器seletor，color为选择器property，white为属性值value，font-size：14px；为声明declaration。

在页面中使用css的方式有三种，分别为外链、嵌入和内联。其中最常用的为外链。

d30cc37b4a12c9a563483851a661163.jpg

（二）CSS是如何工作的？

我们在打开一个网页的过程中，首先会加载HTML，然后解析HTML，在解析的同时加载并解析CSS，等HTML解析好并创建了DOM树之后，浏览器就会把CSS中的样式添加到对应的DOM树节点。具体的流程图就像这样：

ef197ed962563b650407f6dfa9ed8ce.jpg

(三)选择器

选择器，顾名思义就是选择页面中的元素，以便给他们设置样式。我们可以使用多种方式选择元素：按照标签名、类名或id、按照属性、按照DOM树中的位置等。

标签选择器 h1 {}
id选择器 #unique {}
类选择器 .box {}
通配选择器 * {}
伪类选择器 p:first-child {}
伪类元素选择器 p::first-line {}

这里要注意：伪类：不基于标签和属性定位元素

包括状态伪类和结构性伪类

选择器组

ec2925cbbe37e251c1956c4ca18b83e.jpg

f9fd86c50ba7c5bdff00be7e553211c.jpg

(四)颜色

基础颜色 color:red;
十六进制颜色

两个字母为一组，分别表示红色、绿色、蓝色 color:#ff0000;

RGB颜色/RGBA颜色

颜色指定：rgba(红，绿，蓝，alpha)alpha表示透明度，取值0-1

e.g. color:rgba(255,0,0,0.5);

HSL颜色/HSLA颜色

颜色指定：hsla(色调，饱和度，亮度，alpha)

e.g. color:hsla(0,100%,50%,1);

(五)字体

常用类型

  • font-family

    使用建议：字体列表最后写上通用字体族；英文字体放在中文额字体前面

  • font-size

    关键字：small、medium、large

    长度px、em

    百分数：相对于父元素字体大小

  • font-style

  • font-weight

  • line-height

  • text-align

  • letter-spacing

  • text-indent

  • text-decoration

  • white-space

    (六)调试CSS

右键点击页面，选择【检查】；使用快捷键：Ctrl+Shift+I (Windows);Cmd+Opt+I(Mac)

avatar
文章
阅读
粉丝