理解CSS | 青训营笔记

kecat
169 阅读7分钟

邂逅CSS

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

认识CSS

  • CSS表示层叠样式表（Cascading Style Sheet，简称：CSS，又称为又称串样式列表、级联样式表、串接样式表、阶层式样式表）是为网页添加样式的代码。

  • 声明（Declaration）一个单独的CSS规则，如 color: red; 用来指定添加的CSS样式。

    • 属性名（Property name）：要添加的css规则名称
    • 属性值（Property value）：要添加的css规则的值

  • CSS提供了三种方法，可以将CSS样式应用到元素上：

    • 内联样式（inline style）
    • 内部样式表（internal style sheet），文档样式表（document styl sheet），内嵌样式表（enbed style sheet）
    • 外部样式表（external style sheet）
    • 每一个都很重要，不同场景都会用到

内敛样式

  • 也成为行内样式
    • 内敛样式表存在于HTML元素的style属性之中
<div style="color: red; font-size: 20px;">我是div元素</div>
<p style="color: white; background: blue;">我是p元素</p>

内部样式表

  • 将css放在HTML文件<head>元素里的<style>元素之中。
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .title {
            margin: 20px 0;
            font-size: 24px;
            font-weight: 700;
        }

        .box {
            width:100px;
            height: 100px;
            background: red;
        }
    </style>
</head>

外部样式表

  • 使用外部样式表分为两个主要步骤
    • 第一步：将css样式在一个独立的css文件中编写（后缀名改为.css);
    • 第二部：通过<link>元素引入进来；
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./css/styles.css">
</head>

@import

  • 可以在style元素或者CSS文件中使用@import导入其他的CSS文件

CSS的注释

  • CSS的注释与HTML的注释是不一样的
  • /注释内容/
<style>
    /*div增加的样式*/
    div {
        /*设置div的字体大小
        font-size: 24px;
        /*设置div的宽度*/
        width: 200px;
    }
</style>

CSS属性-文本

text-decoration

  • text-decoration用于设置文字的装饰线
  • 常见取值
    • none：无任何装饰线
      • 可以去除a元素默认的下划线
    • underline：下划线
    • overline：上划线
    • line-through：中划线（删除线）

text-transform

  • text-transform用于设置文字的大小写转化
  • 常见取值
    • capitalize：（首字母大写）将每个单词的首字符变为大写
    • uppercase：（大写字母）将每个单词的所有字符变为大写
    • lowercase:（小写字母）将每个单词的所有字符变为小写
    • none：没有任何影响
  • 实际开发中js代码转化的更多

text-indent

  • text-indent用于设置第一行内容的缩进
    • text-indent: 2em;刚好是缩进2个文字

text-align

  • text-align：文本对齐样式
  • MDN：定义行内内容如何相对它的块级父元素对齐
  • 常见取值：
    • left：左对齐
    • right：右对齐
    • center：正中间对齐
    • justify：两端对齐

letter-spacing,word-spacing分别用于设置字母，单词之间的间距

  • 默认是0，可设为负数

CSS属性-字体

font-size

  • 决定文字大小
  • 常用的设置
    • 具体数值+单位
    • 比如100px
    • 也可以使用em单位（不推荐）：1em代表100%，2em代表200%，可取小数
    • 百分比
    • 基于父元素的font-size计算，比如50%表示等于父元素font-size的一半

font-family

  • font-family用于设置文字的字体名称
    • 可以设置1个或者多个字体名称
    • 浏览器会选择列表中的第一个该计算机上有安装的字体；
    • 或者是通过 @font-face 指定的可以直接下载的字体

font-weight

  • font-weight用于设置文字的粗细
  • 常见取值
    • 100|200|300|400|500|600|700|800|900：每个数字表示一个重量
    • normal：等于400
    • bold：等于700
  • strong，b，h1~h6等标签的font-weight默认就是bold

font-style

  • 用于设置文字的常规，斜体显示
    • normal：常规显示
    • italic：用字体的斜体显示
    • oblique：文本倾斜显示

em、i、cite、address、var、dfn等元素的font-style默认就是italic

font-variant

  • font-variant可以影响小写字母的显示形式
  • 可以设置如下值
    • normal：常规显示
    • small-caps：将小写字母替换为缩小过的大写字母

line-height

  • line-height用于设置文本的行高
    • 行高可以简单理解为一行文字所占的高度

184128.png

  • 行高的严格定义是：两行文字基线（baseline）之间的距离
  • 基线：与小写字母*最底部对齐的线

11111.png

  • 注意区分height和line-height的区别
    • height：元素的整体高度
    • line-height：元素中每一行文字所占据的高度

font

  • font是一个缩写属性
    • font属性可以用来作为font-style、font-weight、font-size、line-height和font-family属性的简写；
  • 规则：
    • 按font-style font-variant font-weight font-size/line-height font-family顺序
    • font-style、font-variant、font-wright可以随意调换顺序，也可以省略
    • /line-height可以省略，如果不省略，必须在font-size后面
    • font-size、font-family不可以调换顺序，不可以省略

CSS常见选择器

选择器种类繁多，大概可以按以下分类：

  • 通用选择器
  • 元素选择器
  • 类选择器
  • id选择器
  • 属性选择器
  • 组合
  • 伪类
  • 伪元素

通用选择器

  • 所有的元素都会被选中
  • 一般用来设置一些通用性的设置
    • 比如内边距、外边距
    • 比如重置一些内容
  • 效率比较低，尽量不要使用

简单选择器

  • 开发中最常用的选择器
    • 元素选择器，使用元素名称
    • 类选择器，使用.类名
    • id选择器，使用#id
  • 一个HTML文档里面的id是唯一的，不能重复

属性选择器

  • 拥有某一个属性
  • 属性等于某个值
[title] {
    color: blue;
}
[title=box] {
    colr: red;
}
  • 其他的用法：
    • [attr~=val]: 属性值包含val, 如果有其他值必须以空格和val分割;

后代选择器

  • 后代选择器一：所有的后代（直接/间接的后代）
    • 选择器之间以空格分割
<div class="box">
    <div>
        <span>哈哈哈</span>
    </div>
</div>
<div class="box">
    <span>呵呵呵</span>
</div>
···
···
.box span {
    color: red;
}
  • 效果：都显示为红色
  • 后代选择器二：直接子代选择器
    • 选择器之间 > 分割
.box > span {
    color: red;
}
  • 效果：只有“呵呵呵”是红色

兄弟选择器

  • 相邻兄弟选择器
    • 使用符号 + 连接
<div class="one">哈哈哈</div>
<div>呵呵呵</div>
<div>嘿嘿嘿</div>
<div>嘻嘻嘻</div>
···
···
.one + div {
    color: red;
}

  • 效果：只有呵呵呵是红色

  • 普通兄弟选择器

    • 使用符号 ~ 连接
.one ~ div {
    color: red;
}
  • 效果：“呵呵呵”，“嘿嘿嘿”，“嘻嘻嘻”都为红色

选择器组-交集选择器

  • 交集选择器: 需要同时符合两个选择器条件(两个选择器紧密连接)
    • 在开发中通常为了精准的选择某一个元素
<div class="one">哈哈哈</div>
<div>呵呵呵</div>
<p class="one">嘻嘻嘻</p>
···
···
div.one {
    color: red;
}

  • 效果：只有哈哈哈为红色

  • 并集选择器: 符合一个选择器条件即可(两个选择器以,号分割)

    • 在开发中通常为了给多个元素设置相同的样式
<div class="one">哈哈哈</div>
<p class="two">呵呵呵</p>
···
···
.one,.two {
    class: blue;
}
  • 效果：都为蓝色

认识伪类

  • 什么是伪类呢？

    • Presudo-classes
    • 是选择器的一种，用于选择特定状态的元素

  • 常见伪类

    • 1.动态伪类
      • :link :visited :hover :active :focus
    • 2.目标伪类
      • :target
    • 3.语言伪类
      • :lang()
    • 4.元素状态伪类
      • :enable :disabled :checked
    • 5.结构伪类
      • :nth-child() :nth-last-child() :nth-of-type :nth-last-of-type()
      • :first-child :last-child :first-of-type :last-of-type
      • :root :only-child :only-of-type :empty
    • 6.否定伪类
      • :not()

动态伪类

  • 使用举例

    • a:link 未访问的链接
    • a:visited 已访问的链接
    • a:hover 鼠标挪动到的链接上
    • a:active 激活的链接（鼠标在链接上长按住未放开）

  • 使用注意

    • :hover必须放在:link和visited后面才能完全生效
    • :active必须放在:hover后面才能完全生效
    • 除了a元素，:hover，:active还可以放在其他元素上

  • :focus

    • 拥有输入焦点的元素（能接收键盘输入）
      • 文本输入框焦距后
      • 也适用于a元素上

伪元素 ::before ::after

  • ::before和::after用来在一个元素的内容之前或之后插入其他内容
    • 常用content属性来为一个元素添加修饰性的内容
.box::before {
    content: "123";
    color: red;
}
.box::after {
    content: "321";
    color:blue;
}
avatar
文章
阅读
粉丝