[前端与 CSS | 青训营笔记]

Linxx林同学
73 阅读7分钟

这是我参与「第五届青训营 」笔记创作活动的第1天，第一天以复习与巩固html与css为主，将整合自己参与课堂学到的新老理论知识与运用的示例相结合，更好地记住css的知识以及实际应用，巩固好自己的地基。

本笔记重点内容：

  • css的基本语法
  • CSS的使用方式
  • CSS在html页面的工作流程
  • CSS的选择器大全，记录了最常用的所有选择器以及使用规则
  • 常用的样式以及常用的一些元素属性名，比如font

CSS的入门基础笔记，字数为2387，预计阅读时间在10分钟。

css

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

  • 设置字体和颜色
  • 设置位置和大小
  • 添加动画效果

基本语法

选择器 声明块 属性值

选择器：通过选择器可以选中页面的指定元素，比如p就是选中网页所有p元素

声明块：通过声明块来指定要为元素设置的样式，声明块由一个一个的声明组成。

声明是一个名值对结构，一个样式名对应一个样式值。

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

p就是选择器Selector，而后面的color:red则是声明块，color是属性名Property, red是属性值value

CSS使用

  1. 外链。将样式写在单独的css文件里，然后通过link标签引入到页面里。
<link rel="stylesheet" href="/style.css">
  1. 嵌入. 将样式直接嵌入html里。
<style>
    li {
        margin: 0;
    }
</style>
  1. 内联. html的所有的标签有个属性style, 将样式写入该属性内。
<p style="margin:1em 0">
    Example
</p>

推荐外链

内容和样式的分离，各负其责，html负责内容，而css则是主要负责样式，功能上有明确的分工。

开发范式上，比较流行推崇组件式开发，也会采用嵌入，比如vue的单文件组件，将html、css、js都写在一个单文件组件内，也能够解决内容和样式分离，最重要的是做到了关注点分离，把一个组件相关的所有内容放一块维护。

不推荐内联：特殊情况下会使用，比如UI组件库，由于已经内置好样式，而需要额外地给某个组件嵌入不一样的样式，那么可以通过内联来实现。

CSS工作流程

1673795754262.png

选择器大全

选择器：找出页面中的元素，以便给元素设置样式。

标签选择器

语法: 标签名{}

例子: p{} h1{} div{}

通配选择器

作用：选中页面的所有元素

语法：*

例子：*{}

id选择器

作用：根据元素的id属性值选中一个元素

语法：#id属性值

例子：#box{}

类选择器

作用：根据元素的class属性值选中一组元素

语法：.class属性值

例子：.blue{}

属性选择器

作用:

  1. 属性里特定的值来选定元素，比如选定input里密码部分
  2. 标签内设置特定属性名

语法：[属性名]

[属性名=属性值]

[属性名^=属性值] 选择属性值以指定值开头的元素

[属性名*=属性值] 选择属性值含有指定值的元素

[属性名$=属性值] 选择属性值以指定值结尾的元素

例子:

  1. a标签里href开头为#的所有元素: a[href^="#"] { color: red}
  1. a标签里结尾为jpg的所有元素: a[href$=".jpg"]
  1. 标签内设置特定属性名

css: [disable] { color: red}

交集选择器

作用：选中同时复合多个条件的元素

语法：选择器1或选择器2

例子：div.red{}

选择器分组(并集选择器)

作用：同时选择多个选择器对应的元素

语法：只需要用逗号就能。选择器1，选择器2，选择器3{}

例子：.a1, #red, span{}

后代元素：直接或间接被祖先元素包含的元素叫做后代元素，子元素也是后代元素

兄弟元素

拥有相同父元素的元素都是兄弟元素

子元素选择器

作用：选中指定父元素的指定子元素

语法：父元素 > 子元素

例子：div > p{ color: red}

<div class="box"><p> </p></div>
<style>
    div.box > p{
        color:red
    }
</style>

后代元素选择器

作用：选中指定元素内的指定后代元素

语法：祖先 后代

例子：div span{}

兄弟选择器

作用：选择下一个兄弟

语法：前一个 + 后一个

例子： p + span{} 选择p的下一个span

作用：选择下边所有的兄弟

语法：前一个 ~ 随便元素

例子：p ~ span

组合

名称语法说明示例
直接组合AB满足A同时满足Binput:focus
后代组合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

例子：

<article>
    <p>
        第一行
    </p>
    <section>
        <h2>
            二级标题
        </h2>
        <p>
            第二行
        </p>
    </section>
</article>
<style>
    article p {
        color: black;
    }
    article >p {
        color:blue;
    }
    h2+p {
        color: red;
    }
</style>

article下的所有p标签内容都是黑字体。

第一行是蓝色，因为子元素，而第二行不是子元素。

第二行是红色，因为紧跟h2后边的p标签。

伪类选择器

伪类选择器

image.png

  • 不基于标签和属性定位元素

  • 伪类：

    • 状态伪类
    • 结构性伪类

状态伪类：

不是具体指某个元素，而是该元素处于特定的状态下被选中，描述一个元素的特殊状态。比如a标签访问过的链接或者默认状态下的。

a:link {color:black}、a:visited {color:grey}

结构伪类

会根据dom节点在dom树上出现的位置决定是否选中该元素，比如想给ol里第一个li加样式。li:first-child {}

  • :first-child 第一个子元素

    :last-child 最后一个

    :nth-child() 选中第n个子元素，比如 全选中 :nth-child(n)

    特殊值：

    n 第n个 n的范围0到正无穷

        2n/even 表示选中偶数位的元素

    2n+1/odd 表示选中奇数位的元素

    从1开始，第二位就是偶数。第一个就是奇数。

    :first-of-type

    :last-of-type

    :nth-of-type()

    这几个伪类的功能和上述的类似，不通点是他们是在同类型元素中进行排序。比如在li里的第一个

    :not() 否定伪类

    将符合条件的元素从选择器中去除

选择器的权重

!important最重要，可以直接改变成最高优先级。比如，在div{color: purple !important}

  1. 内联样式 1,0,0,0 <div style=""
  2. id选择器 0,1,0,0
  3. 类和伪类选择器 0,0,1,0
  4. 元素选择器 0,0,0,1
  5. 继承的样式 没有优先级，比如子元素，在*{}里设置，则优先,以下的span即是

当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生样式的冲突。

比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示。但是由于二进制的限制，十个类也无法超过一个id选择器

如果优先级计算后相同，则优先使用靠下的样式

<div id="box1" class="red">
    我是div<span>我是span</span>
</div>
<style>
    *{
        color:green;
    }
    #box1{
        color: orange;
    }
    div#box1{
        color:yellow;
    }
    .red{
        color:red;
    }
    /*会显示yellow，因为会将所有的选择器的优先级进行相加计算，最后优先级越高，越优先。span则是绿色*/
</style>

常用样式及元素

颜色-RGB

HSL

三个参数：

  • Hue色相，色彩的基本属性，从红到黄的范围，范围：0-360
  • Saturation饱和度，色彩的鲜艳程度，取值范围0-100%
  • Lightness亮度，颜色的明亮程度，越高越亮，取值范围0-100%
  • alpha透明度，0-1

字体

font-family

由于不同浏览器支持不同的字体，并不是所有浏览器都能浏览一种字体，因此有优先级。

比如font-family:Optima, Georgia, serif;

那么Optima的优先级最高，若浏览器不支持则采用Georgia。而往往最后的是通用字体，用以什么字体都不支持的最基本的字体。

font-size

  • 关键字

    • small、medium、large

  • 长度

    • px、em

  • 百分数

    • 相对于父元素字体大小

font-weight

粗度，从100-900，但是不一定每个字体都有。

line-height

用法：行高，两段字体之间的距离。

例子：比如字体为20px，而设置行高为1.6，那么两行字体之间便是1.6*20 = 32px

空白格white-space

在html里，多个空白格会被认定为一个。

那么可以使用white-space来设置。

  • normal，不保留空格。
  • nowrap不换行，不会因为超出容器宽度而发生换行。
  • pre保留所有，几个空格就显示几个，换行就换行。
  • pre-wrap与pre一致，但是超出容器宽度时，会发生换行。
  • pre-line。保留换行，但是不保留空格。
avatar
文章
阅读
粉丝