理解CSS | 青训营笔记

枫eng
133 阅读7分钟

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

前言

HTML被设计为用于定义文档内容，通过<h1><p><a>这样的标签传达信息。为了满足页面设计者的要求，HTML添加了越来越多的功能。然而随着功能的增加，HTML页面越来越臃肿，也慢慢已经不能满足网页设计者对美感的追求。于是为了解决这个问题，CSS(Cascading Style Sheets)便诞生了。CSS用来定义页面元素的样式，如：设置字体和颜色、设置位置和大小、添加动画效果等。

主要内容

一、选择器

1.基本选择器

  • 元素(标签)选择器
    • 作用：选中对应元素/标签里的内容
    • 语法：标签名{}
  • id选择器
    • 作用：选中对应id属性的元素
    • 语法：#id属性值{}
  • 类选择器
    • 作用：选中对应class属性值的元素
    • 语法：.class属性值{}
  • 通配选择器
    • 作用：选中页面中所有元素
    • 语法：*{}
  • 群组选择器
    • 作用：同时选中多个选择器匹配的元素
    • 语法：例如h1,#class,.id{}
  • 属性选择器
    • 作用：选中对应属性的元素
    • 语法：[属性名]{} 或 [属性名="属性值"]{}
    • 特例：[href^='#]匹配以'#'开头的元素 [href$=".jpg"]匹配以.jpg结尾的元素 [href*="abc"] 匹配包含abc的元素

2.层次选择器

选择器类型功能描述示例
A B后代组合选中B，如果它是A的子孙nav a
A>B亲子组合选中B，如果它是A的子元素section>p
A~B兄弟选择器选中B，如果它在A后且和A同级h2~p
A+B相邻选择器选中B，如果它紧跟在A后面h2+p

3.伪类选择器

伪类即不存在的类，不基于标签和属性定位元素，表示一种元素状态。
伪类分为：状态性伪类和结构性伪类。

状态性伪类:
  • a(链接)的四种伪类
    • a:link{} 默认状态下的状态
    • a:visited{} 访问(点击)后的状态
    • a:hover{} 鼠标覆盖后的状态
    • a:active{} 鼠标按下去后的状态
  • :focus{} 被点击后的状态(文本框，链接等)
结构性伪类：
  • :first-child 第一个子元素
  • :last-child 最后一个子元素
  • :nth-child 选中第n个元素

4.选择器的优先级算法：

每个规则对应一个初始"四位数"：0、0、0、0
若是 行内选择符，则加1、0、0、0
若是 ID选择符，则加0、1、0、0
若是 类选择符或伪类选择符，则分别加0、0、1、0
若是 元素选择符，则分别加0、0、0、1
从左到右进行比较，大的优先级越高。

二、属性

1.颜色 - RGB

三种表示方法(后者增加了透明度)：

  1. #88ac87 #ff000014 (十六进制)
  2. rgb(143,172,135) rgba(255,0,0,0.8)
  3. hsl(121,90%,84%) hsla(0,100%,50%,0.8)
    PS: HSL(Hue色相 Saturation饱和度 Lightness亮度)

2.字体

  • font-size: 字号(px)
  • font-style:字体风格
  • font-weight:字体粗细
  • font-family:字体族
    • 常用字体为宋体，微软雅黑，黑体等
    • 常用的字体族为sans-serif (无衬线体)、serif (衬线体)、monospace (等宽体)、cursive (手写体)和fantasy (幻想体)
    • 最后一定要加上一个通用字体族

3.文本

  • line-height 设置行高，后跟的数字表示倍数，1.6即表示原行高的1.6倍
  • text-align 设置元素中的文本对齐方式,属性值:center justify left right(只对文本有效，对图片等元素无效)
  • letter-spacing 定义字间距
  • word-spacing 定义英文字母间距
  • text-decoration 设置上划线(overline)、下划线(underline)、删除线(line-through)
  • text-indent 设置文本的首行缩进，一般使用em为单位，2em为缩进两个字符，-2em为向前移动两个字符
  • white-space 空白处理，属性值有：
    • normal 默认值，连续空白和换行符会被浏览器忽略
    • pre 一般用来包裹源代码
    • nowrap 不换行
    • pre-wrap 连续空白和换行符被保留
    • pre-line 只有换行符被保留
    • inherit 继承父元素的属性值

三、布局(Layout）

布局相关技术有三种：常规流、浮动、绝对定位
在此之前，我们先说说最基础的盒模型，如图所示：

image.png 图片选自于《字节内部课》

  • content：内容框，其中width和height是指定content-box的宽/高度，取值为长度、百分数(容器有指定的高/宽度时，百分数才生效)、auto.

  • padding：内边距，有三种设置方式(百分数相对于容器宽度) image.png 图片选自于《字节内部课》

  • border：边框线

    • 三种属性border-width border-style border-color
      (border-style属性值：solid、dotted、dashed、double、none)
    • 四个方向border-top border-right border-bottom border-left
      属性可与方向配合使用，例如：border-left-width:3px;

  • margin：外边距，取值为长度、百分数、auto.
    使用margin:auto水平居中：margin-left:auto; margin-right:auto;

box-sizing:border-box：定义接下来的尺寸是border-box的尺寸。
如果没有这句，width和height将默认定义为content-box的尺寸。

overflow 内容溢出时的处理，属性值visible、hidden、scroll、auto.

常规流(Normal Flow)

常规流的五种布局规则：行级、块级、表格布局、FlexBox、Grid布局

1.行级和块级

区别块级行级
摆列方式不和其它盒子并列摆放，生成块级盒子和其它行级盒子一起放在一行或拆开成多行，分散在多个行盒里
代表标签body、article、div、main、section、h1、p、ul、li等span、em、strong、code等
显示方法display:blockdisplay:inline display:inline-block

  • 行级排版上下文(Inline formatting Context)

    • 只包含行级盒子的容器会创建一个IFC
    • IFC内摆放规则：
      1.盒子在一行内水平摆放
      2.一行放不下时换行显示
      3.text-align决定一行内盒子的水平对齐
      4.vertical-align决定一个盒子在行内的垂直对齐
      5.避开浮动元素

  • 块级排版上下文(Block formatting Context)

    • 某些容器会创建一个BFC：
      1.根元素
      2.浮动、绝对定位、inline-block
      3.Flex子项和Grid子项
      4.overflow值不是visible的块盒
      5.display:flow-root;

    • BFC内的排版规则：
      1.盒子从上到下摆放
      2.垂直margin合并
      3.BFC内的盒子的margin不会与外面的合并
      4.BFC不会和浮动的元素重叠

2.Flex Box

只用块级和行级排版并不能满足页面设计者的需求，于是有了更方便的Flex Box.

  • 定义：display:flex 定义一个flex容器(flex为块状元素，inline-flex为行内元素)
  • 属性：
    • justify-content 定义了flex沿主轴(横轴)方向的对齐方式
    • align-items 定义了flex沿侧轴(纵轴)方向的对齐方式
    • flex-grow 有剩余空间时的伸展能力
    • flex-shrink 容器空间不足时收缩的能力
    • flex-basis 没有伸展或收缩时的基础长度
      举个例子，假如我们希望，输入框占领当前行的一切剩余宽度，只需指定输入框的flex-grow属性为1。input{ flex-grow:1; }

3.Grid布局

  • 定义：display:grid 使元素生成一个块级的Grid容器。
  • 方法一：使用grid-template相关属性将容器划分为网格：grid-template-columns和grid-template-rows
    -方法二：使用grid line网格线划分：grid-row-start grid-column-start grid-row-end grid-column-end 或简单写法 grid-area:1/1/3/3

3.float浮动

  • 主要用于实现图片与文字的环绕效果
  • 属性：float ， 属性值：left、right等
  • 定义：float:left

4.绝对定位

  • 属性：position
  • 属性值：static、relative(相对自身偏移，不脱离文档流)、absolute(相对非static祖先元素绝对定位)、fixed(相对于视口绝对定位)

四、调用CSS

1.链接式：<link rel="stylesheet" href="css文件路径" type="text/css" />
2.导入式：

<style type="text/css">
@import url(CSS文件路径地址);
</style>

两者区别：当 HTML 文件被加载时，link 引用的文件会同时被加载，而 @import 引用的文件则会等页面全部下载完毕再被加载。

五、总结

整理学习笔记Day2，这么多东西确实花了不少时间。便于自己复习，也供大家学习。

avatar
文章
阅读
粉丝