了解CSS|青训笔记

桃乐茜
86 阅读9分钟

这是我参与 [第五届青训营] 笔记创作活动的第二天

了解CSS

CSS是用来定义页面元素样式的

使用CSS

选择器Selector{
    属性Property: 属性值Value;
}

在页面中使用CSS

在页面中使用css的方式有三种，分别为：外链、嵌入、内联

外链：将css文件放到单独文件里面，通过link标签引入到html中：

<link rel="stylesheet" href="./my.css">

嵌入：在HTML代码里通过style标签进行嵌入

<style>
    body{
        color: antiquewhite;
    }
</style>

内联：在标签中通过style属性使用css

<p style="margin:lem 0">11<?p>

CSS工作原理

QQ图片20230116141359.png

选择器Selector

作用：找出页面中的元素便于设计样式 方式：

  • 按标签名、类名或id
  • 按属性
  • 按DOM树中的位置

通配选择器是一种特殊的选择器，用来选择所有

*{
    //设置样式
}

标签选择器使用标签设置样式

id选择器使用#idName设置样式，id是一个唯一的值

类选择器对同一类型的标签设置样式时可以定义一个class类，使用.类名进行选择

属性选择器通过某一元素的属性或属性值来选择，使用[属性名/属性名="属性值"]来进行选择

伪类

定义：不基于标签和属性定位元素，分为状态伪类和结构性伪类

状态伪类 不是具体指某一个值时选中，而是当某一个值处于具体的某种状态时选中。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href=""></a>
    <label for="">
        用户名：
        <input type="text">
    </label>
</body>
<style>
/* a标签在默认状态下被选中 */
a:link{
    color: black;
}
/* a标签被访问过后被选中 */
a:visited{
    color: pink;
}
/* 鼠标移到a标签上时被选中 */
a:hover{
    color: aqua;
}
/* a标签在鼠标按下时被选中 */
a:active{
    color: blue;
}
/* 当输入框聚焦时被选中 */
:focus{
    outline: 2px solid pink;
}
</style>
</html>

结构伪类

根据dom节点在dom树中出现的位置来进行选择

例如根据子节点在父节点的相对位置进行下选择：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
</body>
<style>
/* 选中第一个li */
li:first-child{
    color: pink;
}
/* 选中最后一个li */
li:last-child{
    color: #090;
}
</style>
</html>

组合选择

名称语法说明示例
直接组合AB满足A的同时满足Binput:focus
后代组合AB如果B是A的子孙，则选中Bol li
亲子组合A>B选中B，如果它是A的子元素section>p
兄弟选择器A~B选中B，如果它在A后且同A同级h2~p
相邻选择器A+B选中B，如果它紧跟在A后面h2+p

选择器组

同时选择多个标签时使用选择器组，多个标签用逗号隔开

body,h1,h2,h3{
    margin:0;
    padding:0;
}

颜色

RGB，R表示red，G表示green，B表示blue，通过调节这三种元素的数值来设置颜色，取值范围为0-255 rgb(0,0,0)

HSL,H表示Hue色相，是色彩的基本属性，取值范围为0-360；S表示饱和度，指色彩的鲜艳程度，值越高色彩越鲜艳；取值范围为0-100%；L亮度，指色彩的明亮程度；数值越高颜色越亮。取值范围为0-100% hsl(100,50%,50%)

直接指定颜色例如pink,blue,green

alpha透明度当alpha值为1时不透明，为0时完全透明 使用：#ff0000ff rgba(255,0,0,1) hsla(0,100%,100%,0.5)

字体

字体类型 font-family

通用字体族：serif衬线体，Sans-Serif无衬线体，Cursive手写体，Monospace等宽字体，Fantasy

使用web Fonts：通过指定字体名字以及字体文件所在url

字体大小 font-size

  • 关键字：small、medium、large
  • 长度：px，em
  • 百分数：相对于父元素字体大小

字体效果 font-style

normal为默认效果，italic为斜体效果

字重 font-weight

表示字体粗细，通常用100-900的数值来表示，其中normal表示400，bold表示700

行高 line-height

表示两行文字基准线之间的高度，间距。

white-space

HTML默认将多个空格合并为一个，因此white-space用于控制文字之间的空格以及换行

属性：

  • normal:默认合并多个空格
  • nowrap：强制不换行
  • pre：表示保留所有空格和换行
  • pre-wrap：一行内显示不下时自动换行，保留空格
  • pre-line:合并空格，保留换行

深入CSS

当多个选择器选择到了同一元素时，根据选择器的特异度来选择某个选择器生效

选择器的特异度（Specificity）

优先级：id>类>标签，根据选择器中id，lei，标签的数量判断特异度

继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值，一般与文字相关的属性是可以继承的，与盒子模型的属性是不可以继承的。

显式继承

当想让不可继承的属性变为可继承时，可以使用显示继承inherit的方式。

方式：使用通配选择器将某个不可继承属性改为可继承属性。代码如下：

*{
    //将box-sizing 改为可继承
    box-sizing:inherit;
}

初始值

CSS中，每个属性都有一个初始值，可以使用initial关键字显式重置为初始值，例如： backgroung-color:initial

CSS求值过程

QQ图片20230116185919.png

QQ图片20230116190858.png

QQ图片20230116191019.png

Layout布局

作用：

  • 确定内容的大小和位置的算法
  • 依据元素、容器、兄弟节点和内容等信息来计算

布局相关技术：常规流、浮动、绝对定位

常规流中：行级、块级、表格布局、FlexBox、Grid布局

盒子模型

QQ图片20230116192331.png

width属性

  • 指定content box 的宽度
  • 取值为长度、百分数、auto
  • auto由浏览器根据它的属性来确定
  • 百分数相对于容器的content box 宽度

height属性

  • 指定content box 的高度
  • 取值为长度、百分数、auto
  • auto取值由内容计算得来
  • 百分数相对于容器的content box 高度
  • 容器有指定的高度时，百分数才生效

padding

  • 指定元素四个方向的内边距
  • 百分数相对于容器宽度

border

  • 指定容器边框样式、粗细和颜色
  • 三种属性：border-width，border-style，border-color
  • 四个方向：border-top，border-right，border-bottom，border-left
  • 属性和方向可以组合设置

margin

  • 指定元素四个方向的外边距
  • 取值可以是长度、百分数、auto
  • 百分数相对于容器宽度

技巧：使用margin:auto可以实现水平居中

margin-left:auto;
margin-right:auto;

margin collapse

margin在垂直方向上有一个边距的重叠，只会取两个盒子中设置的比较大的边距，而不是简单的加在一起

content-box和boder-box的区别

当box-sizing:content-box时，指定的宽度和高只包含content的宽高，不包含padding和border

当box-sizing:border-box时，指定的宽度和高度包含了padding和border的宽高

overflow

当盒子内的内容超过了盒子的空间时，可以使用overflow属性来控制内容的显示

  • overflow:visible：表示超出盒子的内容可见
  • overflow:hidden：表示超出盒子的内容隐藏，即不可见
  • overflow:scroll：表示超出盒子的内容需要显示滚动条进行滚动查看

块级布局和行级布局

块级（Block Level Box）：不和其他盒子并列摆放，适用于所有的盒模型属性

行级（Inline Level Box）：和其它行级盒子一起放在一行或拆开成多行，盒模型中的width、height不适用

块级元素：

  • 生成块级盒子
  • 有body``article``div``main``section``h1~6``p``ul``li等标签为块级元素
  • 代码：display:block

行级元素：

  • 生成行级盒子
  • 内容分散在多个行盒（line box）中
  • 有span``em``strong``cite``code等标签
  • 代码：display:inline

display属性

  • block 块级盒子
  • inline行级盒子
  • inline-block 行内块，本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
  • none 排版时完全被忽略

常规流Normal Flow

  • 根元素、浮动和绝对定位都会脱离常规流
  • 其它元素都在常规流之内（in-flow）
  • 常规流中的盒子，在某种排版上下文中参与布局

行级排版上下文（IFC）

只包含行级盒子的容器会创建一个IFC

IFC内排版规则：

  • 盒子在一行内水平摆放
  • 一行放不下时，换行显示
  • text-align决定一行内盒子的水平对齐
  • vertical-align决定一个盒子在行内的垂直对齐
  • 避开浮动（float）元素

块级排版上下文（BFC）

某些容器会创建一个BFC：

  • 根元素
  • 浮动、绝对定位、inline-block
  • Flex子项和Grid子项
  • overflow值不是visible的块盒
  • display:flow-root；

BFC内的排版规则：

  • 盒子从上到下摆放
  • 垂直margin合并
  • BFC内盒子的margin不会与外面的合并
  • BFC不会和浮动元素重叠

Flex Box

display:flex;是一种新的排版上下文，可以控制子级盒子的摆放流向、摆放顺序、盒子宽度和高度、水平和垂直方向的对齐、是否允许折行

主轴与侧轴： QQ图片20230116214140.png

主轴对齐方式：

通过justify-content属性来设置主轴对齐方式

属性值有：flex-start flex-end center space-between space-around space-evenly

QQ图片20230116214436.png

侧轴对齐方式：

通过align-items属性来设置侧轴对轴方式：

属性值有：flex-start flex-end center stretch baseline

QQ图片20230116215019.png

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

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

QQ图片20230116220301.png

Grid布局

当布局不是单一方向的流式布局时，使用Grid布局来实现二维的布局

  • display:grid使元素生成一个块级的Grid容器
  • 使用grid-template相关属性将容器划分为网格
  • 设置每一个子项占哪些行/列

划分网格：

QQ图片20230116220954.png

grid line网格线：

QQ图片20230116221232.png

通过grid-row-start:数值 gird-row-end:数值 grid-column-start:数值 grid-column-end:数值来设置元素所占网格

float浮动

可以用来实现图片文字环绕效果，加了float后可以脱离文档流

position属性

static：默认值，非定位元素

relative：相对自身原本位置偏移。不脱离文档流

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

absolute：绝对定位，相对非static祖先元素定位。通常在定位时遵循”子绝父相“原则

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

fixed：相对于视口绝对定位

  • 脱离了常规文档流
  • 总是相对于目前所见窗口（视口）进行定位
avatar
文章
阅读
粉丝