CSS学习记录 | 青训营

小谢Str
77 阅读5分钟

CSS学习记录 | 青训营

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

CSS(Cascading(Cascading StyleStyle Sheets)Sheets)层叠样式表。用来定义页面元素的样式。修饰HTML内容的表现形式，使得HTML显示的页面不再单一，赋予多彩的显示效果，好的CSS样式能够让使用者眼前一亮，增加探索欲。

基本的CSS样式由2部分组成。选择器selector和尖括号{}。尖括号{}中有像键值对的属性和属性值。
如下所示:

h1 {
 color: black;
 font-size: 14px;
}

使用CSS

一共有3种方式

  • 内联

在HTML的标签中使用style属性中使用。
在这种情况下就不需要写选择器和尖括号，只需要写出对应的声明(即"键值对")

<h1 style="color:red">
 你好，掘金
</h1>

image.png

内联一般用于简单修饰HTML标签，也可以用在UI组件上，如element-ui，
若属性太多，代码行显的臃肿。所以当需要着重修饰某个标签的时候，不推荐使用内联的方式。

  • 嵌入

在HTML页面中的<head>使用<style>标签将CSS嵌入。

<!DOCTYPE html>
<html>
  <head>
    <style>
	  h1 {
	    color: green;
	  }
	  p {
	    color: white;
		background-color: black;
		border: solid 1px red;
	  }
	</style>
  </head>
  <h1>
    你好，掘金
  </h1>
  <p>
    记笔记
  </p>
</html>

image.png

有时候会在HTML代码中插入CSS代码和JS代码。这种方式适合一些代码量中等的CSS代码，当CSS代码量过大时，不推荐使用这种方式。

  • 外链

在HTML的<head>标签中使用<link>标签导入外部的CSS文件。将CSS文件中使用的CSS应用于当前HTML页面。
<link rel="type" href="url or address">
其中rel指定当前文档与被链接文档的关系，href指定被链接文档的位置，可能是url或者本地地址。
引用CSS时候要指定rel为stylesheet，表示为外部样式表。
在外部样式表 *.css 文件中，不需要使用<style>标签，直接写要修改的样式即可。

那么假如说这3种都在同一个页面中，会显示哪一个呢?
使用如下代码进行测试:

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" href="test.css" />
 </head>
  <h1 style="color: red">
   你好，掘金
 </h1>
 <h1>
   你好，掘金
 </h1>
</html>

image.png 优先级情况为：内联>外链

再对比内联和嵌入

<!DOCTYPE html>
<html>
 <head>
   <style>
    h1 {
      color: green;
    }
   </style>
 </head>
 <h1 style="color: red">
   你好，掘金
 </h1>
 <h1>
   你好，掘金
 </h1>
</html>

image.png 优先级情况为：内联>嵌入

那么嵌入和外链优先级谁更高？
其实谁距离标签最近谁就最高，如果说<style>标签在<link>标签前面，那么显示的就是外链，否则就是嵌入。

选择器

选择器在CSS中有多种形式，可以按照标签名，类名，或者id名进行选择。
还有一些特殊的选择器，如*,它将匹配任意类型的HTML元素。

  • id选择器

id可以作为HTML中唯一识别的一种特殊的码，使用id选择器能够给指定的一个HTML标签做唯一的修饰。

通常用#+id名的形式表现在CSS中。

<!DOCTYPE html>
<html>
  <head>
    <style>
	  #halo {
	    color: green;
	  }
	</style>
  </head>
  <h1 id="halo">
    halo，掘金
  </h1>
  <h1 id="hi">
    hi，掘金
  </h1>
  <h1>
    你好，掘金
  </h1>
</html>

image.png

  • 类选择器

顾名思义，类选择器就是对某一类的选择，可以给HTML标签上类，当这一类有一个选择器修饰时，所有被打上这一类的HTML标签都会进行选择器中的修饰。
简单说，进行了一次群体修饰。

<!DOCTYPE html>
<html>
  <head>
    <style>
	  .halo {
	    color: green;
	  }
	</style>
  </head>
  <h1 class="halo">
    halo，掘金
  </h1>
  <h1 class="halo">
    hi，掘金
  </h1>
  <h1 class="hi">
    你好，掘金
  </h1>
  <h1 >
    你好，掘金?
  </h1>
</html>

image.png

  • 属性选择器

通过一个HTML标签的属性或者属性值选中这个元素。
如

<!DOCTYPE html>
<html>
  <head>
    <style>
	  [disabled] {
	    background-color #eee;
		color: #999;
	  }
	</style>
  </head>
  <input value="xxxxx" disabled>
</html>

image.png

当然，也可以选择特定的属性，采用下面的写法

<!DOCTYPE html>
<html>
  <head>
    <style>
	  input[type="password"] {
		color: red;
	  }
	</style>
  </head>
  <input value="xxxxx" type="password">
</html>

image.png

或者是属性值匹配
如：

<!DOCTYPE html>
<html>
  <head>
    <style>
	  a[href^="#"] {
		color: red;
	  }
	  a[href$=".jpg"] {
		color: green;
	  }
	</style>
  </head>
  <a href="#xxxx">xxx</a>
  <a href="x#xxx">xxx</a>
  <a href="xxxx.jpg">xxx</a>
</html>

image.png 其中，^代表匹配头部，$代表匹配尾部。

  • 伪类选择

分为状态性和结构性
什么是状态性？
当标签被激活时(鼠标在上面，也就是hover)，是一种状态，未被激活时(鼠标不在上面，link)也是一种状态，激活中(鼠标点击中)也是一种状态，激活后(触发了点击事件，visited)是一种状态。

<!DOCTYPE html>
<html>
  <head>
    <style>
	   a:link{
		color:black;
	   }
	   a:visited{
		color:gray;
	   }
	   a:hover{
	    color:orange;
	   }
	   a:active{
	    color:red;
	  }
	</style>
  </head>
  <a href="xxxx">xxx</a>
</html>

结构性

<!DOCTYPE html>
<html>
  <head>
    <style>
      li:first-child{
	color: red
      }
      li:last-child{
	color: green
      }
    </style>
  </head>
  <a href="xxxx">xxx</a>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</html>

其中first-child和last-child分别表示第一个和最后一个子节点。

image.png

选择器之间的组合

名称语法说明示例
直接组合ABAB情况都满足a:hover
后代组合A B满足选择了B，并且满足B是A的子孙元素nav a
亲子组合A>B满足选择B，并且满足B是A的子元素A>B
兄弟选择器A~B满足选择B，并且满足B在A后面并且与A同级A~B
相邻选择器A+B满足选择B，并且满足B紧跟A后面A+B

后代组合中，B可以隔着很多标签也能适用，但是亲子兄弟和相邻组合不能是隔着标签的。

选择器组

有时候需要给一类标签或者一些标签用相同的表现形式，那么可以使用选择器组。 比如说给h1-h6指定行高等表现形式。 如

<!DOCTYPE html>
<html>
  <head>
    <style>
	  h1,h2,h3,h4,h5,h6{
	    color: red
	  }
	</style>
  </head>
  <h1>aaa</h1>
  <h2>bbb</h2>
  <h3>ccc</h3>
  <h4>ddd</h4>
  <h5>eee</h5>
  <h6>fff</h6>
</html>

image.png

颜色

所有的颜色都可以通过红色、绿色、蓝色三种颜色得到。 RGB可以采取十六进制的方式表示，如#8fac87，每2位代表一个颜色。这三个部分分别表示红、绿、蓝的数量。
为了方便人们使用，可以把颜色分成三个部分：色相（Hue）、饱和度（Saturation）、亮度（Lightness），简称为HSL。

色相H是指基本色彩，取值范围是0~360。
饱和度S是指鲜艳程度，取值范围是0~100%。
亮度L是指明亮程度，取值范围是0~100%。

还能够设置透明度。使用RGBA(1,1,1,0.33)或者HSLA(1,30%,40%,0.33)

字体

字体的设置样式属性为font-family。
一般字体设置要设置多个，并且在最后的字体中设置一个通用的字体，因为不同的设备的字体库是不一样的，所以需要指定一个通用的字体。
通用的字体有:Serif、Sans-Serif、Cursive、Fantasy、Monospace。
字体大小的设置属性为font-size，赋值单位可以是px、em、%。
字体粗细的设置属性为font-weight。
字体状态的设置属性为font-style。
由于逐个查找有没有相应的字体，所以可以使用不同的中英文字体。只需要找一个只有中文的字体放在前面，英文字体放后面。就能够实现这个功能。
同时也能够使用互联网中的字体。
使用这种字体可能会降低性能。浏览器需要下载字体后才能显示。会占用一定的资源。或者说，也可以使用指定的web字体中的部分字从而降低资源消耗。
字体的行高可以使用line-height，一般使用1.x代表是字体大小的1.x倍，这种做法比较直观。
同时也能够使用text-align设置字体的排列方式。居中或者左对齐或者右对齐。

调试CSS

与HTML相同，可以打开控制台查看CSS并进行实时调试，在开发过程中往往十分受用。

结语

简单的CSS学习记录就到这里，后面也许还会记录布局和选择器的优先级。CSS内容有很多，简单的记录并不能完全记住，还需要平时多练习和使用。要知道，大佬不是一天练成的，还需要继续努力。

引用参考

MDN Web Docs (mozilla.org)

avatar
文章
阅读
粉丝