前端与 CSS | 青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 2 天初遇CSS CSS 作为前端技术

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

初遇CSS

CSS 作为前端技术栈中关键一环，对页面元素及样式呈现起到了直接作用

CSS引入方式

如果想要让我们的页面使用到我们写的css样式，首先要引入

外链

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

嵌入

<style>
    div { width: 50px; height: 50px;}
    p {font-size: 12px;}
</style>

内联

<p style="margin : 2em 0">Hello World!</p>

CSS选择器

1. 基础选择器

如下面代码中，style标签内从上往下依次按顺序为通配符选择器；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>
    <style>
        * {
            margin:0;
            padding:0;
         }
         
        #container {
            width: 50px;
            height: 20px;
            background-color: pink;
        }

        .content {
            font-size: 12px;
            font-weight: 100;
        }
        
        span {
            font-size: 12px;
            color: purple;
        }
        
        a[href]{ 
            color:red; 
        }
    </style>
</head>

<body>
    <div id="container">
        <p class="content">你好哇，李银河</p>
        <p class="content">再见了</p>
        <span>我最爱前端啦</span>
        <div style="width : 20px"></div>
        <a herf="./demo.html"></a>
    </div>
</body>

</html>

2.组合选择器

2.1 后代选择器
2.2 子元素选择器
2.3 相邻兄弟选择器
2.4 通用兄弟选择器
2.5 交集选择器
2.6 并集选择器

3.伪类和伪元素选择器

3.1 标记状态的伪类
3.2 筛选功能的伪类
3.3 伪元素选择器
具体学习可见参考：MDN链接

选择器优先级

内联 > ID选择器 > 类选择器 > 标签选择器。

《CSS REFACTORING》中提到了浏览器的算法过程。

A specificity is determined by plugging numbers into (a, b, c, d):

If the styles are applied via the style attribute, a=1; otherwise, a=0.

b is equal to the number of ID selectors present.

c is equal to the number of class selectors, attribute selectors, and pseudoclasses present.

d is equal to the number of type selectors and pseudoelements present.

写在结尾

本篇主要是对CSS进行一个初步的讲解与记录，希望在今后的学习中有更加深刻的理解，在展示给大家！