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

会会会
93 阅读4分钟

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

CSS基本结构

对于CSS基本结构，之前都是处于会用的状态，还是应该了解一下基础

选择器选择页面元素，例如h1 image.png

CSS工作原理

image.png

选择器

选中元素的方式

image.png 按照标签名、类名或id的方式选中元素再熟悉不过了，但是按照属性，以及按照DOM树中的位置确实没怎么用过。

属性选择器

通过元素的属性或属性值匹配元素

语法

  • [attr] 表示带有以 attr 命名的属性的元素
  • [attr=value] 表示带有以 attr 命名的属性，且属性值为 value 的元素。
  • [attr~=value] 表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。
  • [attr|=value] 表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"-"为连字符，Unicode 编码为 U+002D）开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）。 [attr^=value] 表示带有以 attr 命名的属性，且属性值是以 *value *开头的元素。 [attr$=value] 表示带有以 attr 命名的属性，且属性值是以 *value *结尾的元素。 [attr*=value] 表示带有以 attr 命名的属性，且属性值至少包含一个 *value *值的元素。 [attr operator value i] 在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写（支持 ASCII 字符范围之内的字母）。
/* 选中所有有disabled属性的元素 */
[disabled]{
    background-color: silver;
}
/* 属性是类型或者其他是特点的值 */
input[type='password']{
    background-color: silver;
}
/* 以 "#" 开头的页面本地链接 */
a[href^="#"] {
  background-color: gold;
}

/* 包含 "example" 的链接 */
a[href*="example"] {
  background-color: silver;
}

/* 包含 "insensitive" 的链接，不区分大小写 */
a[href*="insensitive" i] {
  color: cyan;
}

/* 包含 "cAsE" 的链接，区分大小写 */
a[href*="cAsE" s] {
  color: pink;
}

/* 以 ".org" 结尾的链接 */
a[href$=".org"] {
  color: red;
}

伪类

伪类是添加到选择器的关键字，用于指定所选元素的特殊状态。例如，伪类 :hover可以用于选择一个按钮，当用户的指针悬停在按钮上时，设置此按钮的样式。

image.png

状态伪类

a:link{
    color:gray;
}
a:hover{
    color:orange;
}
a:active{
    color:black;
}

结构伪类

通过DOM元素在DOM树的位置获取元素，一看到写的样例，就知道自己以前用过，但是不知道它叫结构伪类。

p:first-child {
  color: lime;
}

组合选择器

/* 仅当是input标签且有.error的CSS样式，才能触发（直接组合） */
input.error{
    border-color:red;
}

组合方式

image.png

颜色

不要再继续死用rgb或者#xxxxxx了，可以使用rgba或者hsla

rgba

rgba在原来的基础上添加使用透明度,取值 0~1 之间，取值越大，代表透明度越大。

#p1 {background-color:rgba(255,0,0,0.3);} /* 红 */ 
#p2 {background-color:rgba(0,255,0,0.3);} /* 绿 */ 
#p3 {background-color:rgba(0,0,255,0.3);} /* 蓝 */

hsla

HSLA 即色相、饱和度、亮度、透明度（英语：Hue, Saturation, Lightness, Alpha ）。

色相（H） 是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。

饱和度（S） 是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取 0-100% 的数值。

亮度（L）  取 0-100%，增加亮度，颜色会向白色变化；减少亮度，颜色会向黑色变化。

透明度（A）  取值 0~1 之间， 代表透明度。

#p1 {background-color:hsl(120,100%,50%,0.3);} /* 绿色 */ 
#p2 {background-color:hsl(120,100%,75%,0.3);} /* 浅绿 */ 
#p3 {background-color:hsl(120,100%,25%,0.3);} /* 暗绿 */ 
#p4 {background-color:hsl(120,60%,70%,0.3);} /* 柔和的绿色 */

字体 Font-Family

设置字体时，防止字体没有时，导致界面展示出入比较大，所以在最后要加上常用字体 Serif 或者 Sans-Serif

在线字体 WebFont

@font-face { font-family: "Bitstream Vera Serif Bold"; 
src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf"); }

字体大小

px比较常用，但是em没用过 em是一个相对单位

/* 对于下面这段代码，h1的字体大小为 40px */
section{
    font-size: 20px;
}
section h1{
    font-size: 2em;
}

字符间距

letter-spacing 属性用于指定文本中字符之间的间距。

h1 {
  letter-spacing: 3px;
}
h2 {
  letter-spacing: -3px;
}

字间距

word-spacing 属性用于指定文本中单词之间的间距。

h1 {
  word-spacing: 10px;
}
h2 {
  word-spacing: -5px;
}

文章缩进

text-indent 属性用于指定文本第一行的缩进

p {
  text-indent: 50px;
}

空白处理

定元素内部空白的处理方式

normal : 连续的空白符会被合并，换行符会被当作空白符来处理

nowrap : 和 normal 一样，连续的空白符会被合并。但文本内的换行无效，也就是强制换行。

pre : 连续的空白符会被保留。在遇到换行符或者[<br>]元素时才会换行。

pre-wrap : 连续的空白符会被保留。在遇到换行符或者[<br>]元素，或者需要为了填充行框盒子 line boxes时才会换行。

pre-line : 连续的空白符会被合并。在遇到换行符或者[<br>]元素，或者需要为了填充行框盒子 line boxes时会换行。

p {
  white-space: nowrap;
}
avatar
文章
阅读
粉丝