浅学、理解CSS相关知识|青训营笔记

捉刀客
155 阅读9分钟

  这是我参与「第四届青训营 」笔记创作活动的的第二天，今天学习的是CSS相关知识。

理解CSS

一、什么是CSS？

  CSS，即层叠样式表，是一种用来为结构化文档添加样式，例如：字体、间距和颜色等的计算机语言，它的主要职能就是确定布局和元素的表现。
  CSS不能单独使用，必须与HTML或XML一起协同工作，为 HTML或 XML 起装饰作用。其中 HTML 负责确定网页中有哪些内容，CSS确定以何种外观(大小、粗细、颜色、对齐和位置)展现这些元素。

  CSS的作用——改变 HTML元素的样式。CSS可以用于设定页面布局、设定页面元素样式、设定适用于所有网页的全局样式。
  CSS基础代码如下：

ef380aaf0109059a0a850789ede383f.jpg

二、如何在页面中使用CSS？

1、外链式

  外链式，也称为链入式。是将所有的样式放在一个或多个以.css为拓展名的外部样式表文件中，通过<link/>标记将外部样式表文件链接到HTML文件中。基本语法如下：

<head>
   <link href="CSS文件的路径"> type="text/css" rel="stylesheet" />
   </head>

  该语法中，<link/>标记需要放在头部标记<head>中，并且必须指定<link/>标记的三个属性，具体如下：

  • href:定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
  • type:定义所链接文档的类型，在这里需要指定为text/css，表示链接的外部文件为CSS样式表。
  • rel:定义当前文档与被链接文档之间的关系，在这里需要指定为stylesheet，表示被链接的文档是一个样式表文件。

2、行内式

行内式，也称为内联式，使用过标记的style属性来设置元素的样式，其基本语法格式如下：

<标记名 style="属性1：属性值1；属性2：属性值2；属性3：属性值3;"> 内容 </标记名>

  该语法中style是标记的属性，实际上任何HTML标记都拥有style属性，用来设置行内式。其中，属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标记及嵌套在其中的子标记起作用。

3、内嵌式

  内嵌式是将CSS代码集中写在HTML文档的<head>头部标记中，并且用<style>标记定义，其基本语法格式如下：

<head>
<style type="text/css">
   选择器 {属性1：属性值1；属性2：属性值2；属性3：属性值3;}
   </style>
   </head>

  该语法中，<style>标记一般位于<head>标记中<title>标记之后，也可以把它放在HTMI文档的任何地方。但是，由于浏览器是从上到下解析代码的，把CSS代码放在头部便于提前被下载和解析，以避免网页内容下载后没有样式修饰带来的尴尬。同时**，必须设置type的属性值为text/css，这样浏览器才知道<style>标记包含的是CSS 代码。

推荐使用链入式

三、CSS如何工作？

image.png

四、CSS基础选择器

1、通配符选择器

  通配符选择器用" * "号表示，他是所有选择其中范围最广的，能匹配页面中所有的元素。其基本语法格式如下：

*{属性1：属性值1；属性2：属性值2；属性3：属性值3;}

2、标记选择器

  标记选择器是指用HTML标记名作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS样式。其基本语法格式如下：

标记名{属性1：属性值1；属性2：属性值2；属性3：属性值3;}

用标记选择器定义的样式对页面中该类型的所有标记都有效

3、类选择器

  类选择器使用“.”进行标识。其基本语法格式如下：

.类名{属性1：属性值1；属性2：属性值2；属性3：属性值3;}

类选择器最大的有事是可以为元素对象定义单独或相同的样式

4、id选择器

  id选择器使用“#”进行标识，后面紧跟id名。其基本语法格式如下：

#id名{属性1：属性值1；属性2：属性值2；属性3：属性值3;}

  id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

5、属性选择器

  属性选择器通过元素的属性或属性值选中元素。
例如：

image.png

  选择器优先级：在多个选择器匹配到同一个元素时，元素选择那个选择器中的样式。
  id选择器>类选择器>标签选择器

6、伪类

  1、状态性伪类：元素必须处于某种状态才会被选中，例如：链接。
例如： image.png

  2、结构性伪类：根据DOM节点出现在DOM树中的位置决定是否选中。
例如：

image.png
  其他组合方式：

image.png
  其他组合：

image.png

  7、选择器组：多个选择器设置相同标签时，用逗号隔开。

五、CSS文本相关样式

1、color:文本颜色

  • 十六进制：#红绿蓝（红绿蓝各占两个字符） 例如：#FF0000、#FF6600
  • RGB代码：rgb(红，绿，蓝)，这里的红绿蓝指的是三个颜色的数量。 例如：rgb(255,0,0)

rbg()中三个值得范围为0~255。

  • HSL:可以微调颜色。H代表色相，S代表饱和度，L代表亮度。
  • alpha:不透明度。

2、font-family字体

  常用字体有宋体、微软雅黑等，可以同时指定多个字体，用逗号隔开，最后加通用字体，表示如果浏览器不支持第一个，层层匹配，直到找到合适字体。其基本语法格式如下：

body{font-family:"华文彩云","宋体","黑体";}

3、font-size:字体大小

  该属性的值可以使用相对长度单位，也可以使用绝对长度单位。（px,em）
  使用百分数时，是相当于父元素字体的大小.

4、font-weight:字体粗细

  该属性用来定义字体的粗细,属性值有normal、bold、lighter、bolder、100-900(整数倍)。

5、line-height:行间距

  通常行间距等于字体高度。

6、空白格

  出现空白格，想要连续多个合并为一个

  • white-space
  • normal
  • norwarp:强制不换行
  • pre:保留所有的空格或换行
  • pre-wrap:保留空格，自动换行
  • pre-line:保留并合并空格

六、继承

  某些属性会自动继承其父元素的计算值，除非另指定一个值。

  • 文字相关的属性属性可继承。例如color。
  • 显式继承：盒模型不可继承。inherit可以强制性继承。   一个元素没有继承到属性值，也没有设置，它将会默认为初始值。CSS每个中每个属性都有初始值。

例如:

  • background-color 的初始值为 transparent
  • margin-left 的初始值为 0
  • 可以使用initial 关键字显式重置为初始值
  • background-color: initial

七、CSS求值

image.png

八、布局

1、布局是什么？

  • 确定内容的位置和大小的算法

2、布局相关技术

  • 常规流
  • 浮动
  • 绝对定位

3、padding:内边距

  padding区域是包含在背景颜色区域内的，也就是说背景颜色包含了padding和content。有四个方向。

百分数相对于容器宽度

4、border：边框

  即包裹在padding外的一层线，有四个方向。

  • border-width:边框的粗细，单位是px
  • border-style:边框的线型，solid为实线，dashed为虚线
  • 无边框：none

5、magin：外边距

  设置方法与padding一样，有四个方向。

6、overflow

  • 单行文本超出省略：text-overflow,他有两个值：clip、ellipsis
  • 多行文本超出省略

例如：

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

7、display属性

  块元素默认display属性值是block（块级盒子），行内元素默认属性值是inline（行级盒子），不能设置宽高，但可以设置padding和左右margin。

8、Flex-box

Flex Box 是什么?

  Flex意思为弹性布局，用来为盒模型提供最大的灵活性，任何一个容器都可以指定为Flex布局。它最显著的效果就是把原本从上到下排列的块状元素变成水平排列，具有非常强大的空间分布能力和对其能力设为flex布局后，子元素的float,clear，vertical-align属性将失效。
一种新的排版上下文它可以控制子级盒子的:

  • 摆放的流向 (→ ← ↑↓)摆放顺序
  • 盒子宽度和高度
  • 水平和垂直方向的对齐是否允许折行

调整水平方向的分布：justify-content，定义了项目在水平方向上的对齐方式,
调整垂直方向上的分布： align-items，定义项目在垂直方向上如何对齐。
特别注意，justify-content和align-items是容器的属性，设置在容器上

image.png

image.png

可以设置子项的弹性:当容器有剩余空间时，会伸展,容器空间不够时，会收缩。

  • flex-grow 有剩余空间时的伸展能力
  • flex-shrink 容器空间不足时收缩的能力
  • flex-basis 没有伸展或收缩时的基础长度

image.png

9、grid布局

  如果说Flex布局是单一的一维布局，那grid布局就相当于一个二维布局。

image.png

  • display:grid使元素生成一个块级的Grid容器。
  • 使用grid-template相关属性将容器划分为网格
  • grid:line网格线 例： image.png

10、Float:浮动

什么是元素的浮动？

  元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。基本语法如下：

选择器{float:属性;}

  常用的float属性值有三个：

  • left:元素向左浮动
  • right:元素向右浮动
  • none:元素不浮动

11、position:定位

  在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：

选择器{position:属性值;}

  position 属性：static、relative、absolute、fixed、sticky

①static：自动定位

  没有给元素设置position值时，则默认为static。

②relative：相对定位

  相对于其原文档流的位置进行定位。

  • 在常规流里面布局
  • 相对于自己本应该在的位置进行偏移
  • 使用 top、left、bottom、right 设置偏移长度
  • 流内其它元素当它没有偏移一样布局

③absolute：绝对定位

  相对于其上一个已经定位的父元素进行定位。

  • 脱离常规流
  • 相对于最近的非 static祖先定位
  • 不会对流内元素布局造成影响

④fixd:固定定位

  相对于浏览器窗口进行定位

avatar
文章
阅读
粉丝