了解CSS ｜ 青训营笔记

用户3085656993653
45 阅读4分钟

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

CSS入门

一、CSS是什么

在学习HTML时提到，要传达内容，而不是样式。

CSS(Cascading Style Sheets)是一种描述 HTML 文档样式的语言。

CSS 描述应该如何显示 HTML 元素。

二、使用CSS的三种方式

外链

链接一个外部样式表来修改网页的外观。

<link rel="stylesheet" type="text/css" href="style.css">

rel（relationship）定义文件与html文档的关系，href的值是该CSS文档的URL，type告知浏览器该文件为CSS文本。

注意：外部样式表的扩展名必须为 .css

外链方式是用的比较多的方式，可以方便地修改多个文件的样式，可以做到内容和样式的分离。

嵌入

嵌入样式是在 head 部分的 <style> 元素中进行定义。

实例：将文件中的所有一级标题显示为红色

<style>
h1 {
  color: red;
} 
</style>

内联

行内样式（也称内联样式）可用于为单个元素应用唯一的样式。

将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。

<h1 style="color:blue;">这是一个一级标题</h1>

内联方式使用的比较少，很显然，使用该方式会使代码太过复杂庞大，后期难以维护。

层叠顺序

内联 > 外链/嵌入 > 浏览器默认

外链和嵌入都在head标签中，层叠顺序取决于谁定义在前面。


现定义一个css文件：style.css

h1{
   color: blue;
}

以下的代码会使h1的颜色为红色

<head>
<link rel="stylesheet" type="text/css" href="style.css">

<style>
h1 {
  color: red;
} 
</style>
<head>

以下的代码会使h1的颜色为蓝色

<style>
h1 {
  color: red;
} 
</style>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<head>

三、选择器

选择器简单来说就是根据条件选择要设置样式的元素。

通配选择器

选择页面上的所有元素

* {
  color: blue;
}

标签选择器

根据标签设置样式

将h1标签设置为蓝色

h1 {
  color: blue;
}

id选择器

根据id设置样式

注意：id前要加上#

#1 {
  color: blue;
}

类选择器

根据特定 class 属性


.cls {
  text-align: center;
  color: blue;
}

分组选择器

当某些标签所设置的css样式相同时，可以对其进行分组，以最大程度减少代码


h1,h2,h3 {
  text-align: center;
  color: blue;
}

组合选择器

根据它们之间的特定关系来选取元素

后代选择器(空格将元素隔开)

匹配元素后代中的某一所有元素 例如：选择<p>标签中的<h1>元素

p h1 {
  text-align: center;
  color: blue;
}

子选择器(>将元素隔开)

匹配元素的某一子元素

跟后代选择器的区别：子选择器只选择儿子元素，不包括孙子元素及更后代的元素

p > h1 {
  text-align: center;
  color: blue;
}

相邻兄弟选择器(+将元素隔开)

兄弟：同级元素，拥有相同的父元素

相邻：紧挨着的元素

ul + ol {
  text-align: center;
  color: red;
}

通用兄弟选择器(~将元素隔开)

即匹配所有的兄弟元素

ul ~ ol {
  text-align: center;
  color: red;
}

分别为以下html元素设置如相邻兄弟选择器和通用兄弟选择器中的css样式


<ul>
    <li>无序列表项</li>
</ul>
<ol>
    <li>有序列表项</li>
</ol>
<ol>
    <li>有序列表项</li>
</ol>

相邻兄弟选择器

相邻兄弟选择器 通用兄弟选择器

图片.png

四、字体

在 CSS 中，有五个通用字体族：

  • 衬线字体（Serif）：在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
  • 无衬线字体（Sans-serif）： 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
  • 等宽字体（Monospace）： 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
  • 草书字体（Cursive）： 模仿了人类的笔迹。
  • 幻想字体（Fantasy）： 是装饰性/俏皮的字体。

在 CSS 中，我们使用 font-family 属性规定文本的字体。 font-family 属性应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性。

五、颜色

RGB

RGB即三原色(red,green,blue)做三个参数，每个参数的取值范围（强度）在[0~255]

图片.png

RGBA

RGBA值在RGB的基础上增加了一个参数——不透明度alpha，取值范围[0~1]

图片.png

HEX

可以理解为将三个参数以16进制来表示

图片.png

HSL

色相（hue）是色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色。

饱和度（saturation）是一个百分比值，0％ 表示灰色阴影，而 100％ 是全色。

亮度（lightness）也是百分比，0％ 是黑色，50％ 是既不明也不暗，100％是白色。

图片.png

学习建议

  • 保持好奇心，善用浏览器的开发者工具
  • 充分利用MDN和W3C CSS规范
  • 持续学习，CSS新特性还在不断出现
avatar
文章
阅读
粉丝