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

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

CSS能做什么？

• 用来定义页面元素的样式

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

CSS的引用方式

0. 外链式

   0. 结构：<link rel="stylesheet" href="style.css">

1. 嵌入式

   0. 结构：<style></style>

2. 内联式

   0. 结构：<h1 style="font-size:18px;"></h1> []()<a name="eNKhx"></a>

CSS工作原理

CSS选择方式

在前端中，可以通过很多种方法实现给HTML标签添加样式

通过标签名进行选择

通配选择器

ID选择器

类选择器

属性选择器

在属性选择器中可以通过^与$符号获取以某字符开头与结尾的属性 ^ 获取以某字符开头的属性对应标签 $ 获取以某字符结尾的属性对于标签

伪类选择器与伪类元素

0. 伪类选择器

   0. a:hover { } 当鼠标悬浮在该标签上时，执行样式
   1. a:link a标签的默认样式 只适用a标签
   2. a:visited a标签被点击过后展示的样式 只适用a标签
   3. a:active a标签被按下时展示的样式 只适用a标签

1. 伪元素 常用于清除浮动

   0. div:before 基于div标签 的伪类元素
   1. div:after 基于div标签 的伪类元素

其他选择器

选择器	示例
类型选择器	h1 { }
通配选择器	* { }
类选择器	.box { }
ID 选择器	#unique { }
标签属性选择器	a[title] { }
伪类选择器	p:first-child { }
伪元素选择器	p::first-line { }
后代选择器	article p
子代选择器	article > p
相邻兄弟选择器	h1 + p
通用兄弟选择器	h1 ~ p

链接内容转载于：MDN

选择器组

在为标签添加样式时，可以为多个相同类型的选择器设置相同样式

RGB与HSL

0. rgb 三原色红绿蓝

   0. r：red

   1. g：green

   2. b：blue

   3. 使用方式：

      0. 通过数字形式 rgb(100,99,88)
      1. 通过16进制的形式 #aabbcc 简写为#abc
      2. 通过颜色对应的英文单词

1. HSL

   0. H：hue 透明度
   1. S ：饱和度
   2. L：亮度

在rgb与hsl中还存在一个透明度，设置方式为 rgba(255,255,255,0.5) 透明度的取值为0~1，hsl与之相同

文本样式

font-family

• 结构：font-family: Optima, Georgia, serif;
• 常用字体

注意：在使用时，需把中文字体放到后面，不然会导致英文字体无效

• 通过@font-face引入字体

@font-face{
    font-family:Hello-World;
    src:url("https://xxxx.com/xxx.woff2") format("woff2")
}

font-size

• 关键字

  • small、medium、large

• 长度

  • px、em

• 百分数

  • 相对于父元素字体尺寸的百分比

• 使用方式：font-size:100%;

line-height

设置行高既两行文文本之间的距离，使用方式：line-height:15px; 在使用时，为了让文本在标签内垂直居中，常设置值为标签高度的一半

font

将上面所有文本样式综合到一起，使用方式font：style weight size/height family

text-align

实现文本中标签中水平居中，使用方式：text-align:center; 属性值：left，center，right

letter-spacing

控制两个文字或字母之间的距离，使用方式：letter-spacing:10px;

word-spacing

控制两个文字或单词之间的距离，使用方式：word-spacing:10px;

text-indent

设置文本首行缩进，使用方式：text-indent:10px/2em；

text-decoration

设置文本下换线，a标签下滑线就是由此产生的 属性值：none，underline，line-through，overline

white-space

设置文本是否换行 属性值：normal，nowrap

总结

善用css中的文本样式来对html中的内容进行整理以达到最优的效果展示，对不同的标签内容选用不同的样式，既展现了内容也加强了视觉效果。