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

CSS

CSS 即 Cascading Style Sheets(层叠样式表)，作为学习前端的第二步，CSS 的主要功能是对网页中的各种元素进行修饰和编排。通过编写 CSS 文档，我们能够对 HTML 元素赋予各种样式，以使其在网页中表现出各种效果。

CSS的工作方式

页面在加载解析 HTML 代码后，创建 DOM 树并加载解析 CSS 代码，为所创建的 DOM 树中的 DOM 节点添加设定好的样式，从而创建出我们设计好的页面效果。

CSS的工作方式.png

CSS的使用方式

CSS 有三种使用方式，分别是嵌入式、外链式以及内联式。

嵌入式是直接将 CSS 的代码嵌入到 HTML 的 style 标签里面，外链式是使用 link 标签引入外部 CSS 文件进行加载解析实现 CSS 效果，内联是利用 HTML 标签中的 style 属性，将 CSS 样式直接写入到标签的属性内实现效果。

我们一般推荐使用外链式引入 CSS 文件，以将 HTML 与 CSS 区分开来，即内容与样式的分离。

<!-- 外链 -->
<link rel="stylesheet" href="style.css">

<!-- 嵌入 -->
<style>
     li {
        margin: 0;
        list-style: none;
     }      
</style>

<!-- 内联 -->
<li style="margin: 0">Example</li>

CSS的代码构成

选择器

CSS 中有着许多的选择器，用于对指定的元素进行样式的赋予。

id选择器

id 选择器可以为具有特定 id 的 HTML 元素赋予样式，使用时需以 # 开头，一般 id 的设置都是唯一的，重复的 id 可能会导致样式的错乱。

<style>
#exa {
   color: red;
}
</style>

<body>
      <div id="exa">Example</div>
</body>

标签选择器

标签选择器可以直接对一类标签进行选择，页面的所有同类型标签共享选择器赋予的样式，一般用于一些基本样式的初始化。

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

<body>
      <div id="exa">Example</div>
</body>

类选择器

类选择器通过 HTML 元素中的 class 属性进行选择，class 属性可以在多个元素中使用，使用类属性选择器需要在以 . 开头。

<style>
.exam {
   color: red;
}
</style>

<body>
      <div class="exam">Example</div>
</body>

属性选择器

属性选择器对具有特定属性的 HTML 元素进行选择，例如对具有 disabled 的属性进行选择，则所有具有这一属性的 HTML 元素都将被赋予指定的样式。

属性选择器.png

组合选择符

组合选择符说明了两个选择器之间的关系，CSS 中有着多种组合方式，例如后代选择器（以空格分隔）、子元素选择器(以大于 > 号分隔）、相邻兄弟选择器（以加号 + 分隔）、普通兄弟选择器（以波浪号～分隔）。

组合选择符.png

一些基本样式

选择完元素之后，我们需要对元素赋予各种样式，以此来实现我们想要的效果。比如背景颜色，文字的大小、字体、颜色等，元素的宽高、类型、边框等。

div {
    display: block; /* 元素类型 */
    width: 100px;   /* 宽度 */
    height: 30px;   /* 高度 */
    font-size: 14px;/* 字体大小 */
    color: red;     /* 字体颜色 */
    background-color: #fff;/* 背景颜色 */
    border:2px solid #000;/* 边框设定为宽2px，黑色 */
}

继承

在 HTML 的元素中存在 CSS 样式的继承，即子元素会自动继承父级元素的部分样式。如在以下的例子中，span 元素将会继承 div 元素的 color: blue 属性。

<div style="color: blue">
       <span></span>
</div>

当 HTML 的结构变得复杂一些时，样式的继承遵循就近原则，子元素将继承最近的父级元素的样式。如以下示例中 <p>将会继承 <span> 中的color: blue 属性。

<div style="color: red;">
        <span style="color: blue;">
            <p></p>
        </span>
</div>

优先级

CSS 中由于一个元素可能被重复赋予同一个样式，因此 CSS 中存在优先级的概念。在我们刚刚讲过的继承中就表现出了优先级的不同，可以看出相邻父级元素比其他祖级元素的优先级要高，因此元素会表现出相邻父级元素的样式。同时直接样式的优先级会比继承样式的优先级要高，如以下例子中<span>元素将会表现出color: red效果。

<div style="color: blue">
       <span style="color: red"></span>
</div>

而选择器之间也存在优先级的区别
第一级：内联样式
第二级：id选择器
第三级：类选择器属性选择器伪类选择器
第四级：标签选择器伪元素选择器

而选择器的优先级还具有叠加的效果，依次计算选择符中第二级、第三级、第四级选择器的数量进行比较，大的优先级就高，相同则比较下一级的选择器数量，如果都相等，则遵循就近原则。

块和内联元素

块元素单一元素便占用了全部的宽度，即一行只显示一个块元素，如：<h1> <p> <div>,内联元素可以在一行内显示多个，不强制换行，如：<span> <a>。我们可以通过改变元素的 display属性改变元素的类型。

span {
    display: block;/* 将 span 转化为块元素 */
}

浮动

我们可以对 HTML 元素添加浮动属性，使其可以向左或向右移动，添加浮动后其周围的元素将会重新排列，我们可以给元素设定浮动的方向，并通过设定外边距来实现控制距离的效果。

span {
    float: left;/* 向左浮动 */
    width: 100px;
    height: 30px;
    maegin-left: 10px;/* 设定外边距 */
}

定位

定位在 CSS 中是非常重要的一个属性，通过设定定位，我们能够精准地设定 HTML 元素在页面的坐标位置。基本的定位有固定定位 flexd：元素的位置相对于浏览器窗口固定，不会随窗口的滚动而移动；相对定位 relative：定位相对于其正常位置；绝对定位 absolute ：定位相对于最近的已定位的父级元素，如果没有，则相对于 HTML 页面。

nav {
   position；flexd；/* 固定定位 */
}
div {
   position: relative;/* 相对定位 */
span {
   position: absolute;/* 绝对定位 */
}

层叠样式表CSS | 青训营笔记

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

CSS