CSS3基础知识

Aliang1996
207 阅读8分钟

CSS全称Cascading Style Sheet 层叠样式表，层叠的概念和PS中的图层类似，样式表一层一层覆盖着，效果叠加在一起。

书写方式

CSS有三种书写方式，分别是内联样式（行内样式）、内部样式表，外部样式表。

内联样式是在指定标签内部通过style属性设置元素的样式，多个样式采用分号;分隔。一般不常用，因为这种方式只会对当前元素生效，无法对多个元素同时生效。并且不利于样式的维护。

<p style="color: green; font-size: 30px;">HelloWorld</p>

内部样式表是在<head>标签中插入一个<style>标签，书写元素的样式，可以对多个元素设置样式，方便维护。

<head>
    <style>
        p {
            color: green;
            font-size: 30px;
        }
    </style>
</head>

外部样式表是将CSS样式编写到一个外部的CSS后缀名的文件中，然后通过<link>标签引入。可以使用浏览器的缓存机制，从而加快网页的加载速度，提高用户体验。

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

样式继承

我们为一个元素设置的样式同时也会应用到它的后代元素上，继承的设计是为了方便我们的开发。但并不是所有的样式都会被继承，比如背景相关的、布局相关等样式都不会继承。

单位

长度单位分为像素和百分比以及em，rem。

  • 像素 屏幕（显示器）实际上是由一个一个的点构成的，像素点越小的屏幕显示的效果越清晰。

  • 百分比 可以设置子元素的长度属性值单位为相对于父元素属性的百分比。

<head>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: orange;
        }

        .box2 {
            width: 50%;
            height: 50%;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
  • em是相对于元素的字体大小计算的（1em = 1 * font-size），em会根据字体大小改变而改变，浏览器默认字体大小 16px，所以这里box3的宽高相当于160px。
.box3 {
    width: 10em;
    height: 10em;
    background-color: pink;
}
  • rem 是相对于根元素（html）的字体大小计算。

颜色单位有RGB、RGBA、16进制和HSL，或者直接用颜色名表示。

  • 用颜色名设置各种颜色，比如red green blue（不常用）。
div {
    color: red;
}
  • 用RGB(red green blue)值的不同浓度表示不同的颜色，基于光的三原色。颜色浓度范围可以用 0 - 255表示,也可以用百分比（0% - 100%）表示。
div {
    color: rgb(255, 0 ,0);
}

div {
    color: rgb(100%, 0 ,0);
}
  • RGBA 在RGB的基础上增加了一个A(alpha)表示不透明度。A的取值范围是（1 - 0），1表示完全不透明，0表示完全透明，0.5表示半透明。
div {
    color: rgba(255, 0 ,0, .5);
}
  • 用16进制设置颜色，#00-ff，本质上依旧是用RGB方式表示。
div {
    color: #fffff;
}
  • HSL H 色相 0 - 360 | S 饱和度 0% - 100% | L 亮度 0% - 100%

浏览器的默认样式

通常情况下，浏览器会为元素设置一些默认样式，默认样式会影响页面的布局，所以通常情况下需要去除浏览器的默认样式。

行内块元素和行内元素换行/空格都有文本分隔符问题， 比如多个图片之间有间隙，多个a标签之间也有间隙。

  • 去除换行
<img src="./img/1.jpg" alt=""
><img src="./img/1.jpg" alt=""
><img src="./img/1.jpg" alt=""
><img src="./img/1.jpg" alt="">

当子元素没设置宽度，则会继承父元素的宽度，该状态下若给子元素添加padding，盒子大小不会发生改变，而是通过减少content的大小达到平衡。

常用的CSS属性

轮廓线阴影圆角

outline 用来设置元素的轮廓线，用法和边框一样，区别在于不会影响可见框的大小。

box-shadow 用来设置元素的阴影效果，不会影响页面布局，它有四个值需要设定。

.box1 {
    width: 200px;
    height: 200px;
    background-color: #bfa;
    box-shadow: 10px 10px 50px orange;
}
  • 第一个值 水平偏移量 设置阴影的水平位置，正值向右移动，负值向左移动。
  • 第二个值 垂直偏移量 设置阴影的垂直位置，正值向下移动，负值向上移动。
  • 第三个值 阴影的模糊半径
  • 第四个值 阴影的颜色。

字体

font-size属性 字体框是字体存在的格子，设置font-size实际上就是在设置字体框的高度。宽度是自动缩放的，默认字体大小 16px。

font-family属性 用于设置字体风格（字体的格式），可以同时指定多个字体，多个字体间使用逗号,隔开，字体生效时优先使用第一个，第一个无法使用则使用第二个，以此类推。注意有空格的字体标识/中文字体标识需要加引号""。

还有有三种不同的兜底字体，兜底字体用于之前定义的其它字体都无法使用时所采用的备用字体。

  • serif 衬线字体
  • sans-serif 非衬线字体
  • monospace 等宽字体
p {
    color: red;
    font-size: 40px;
    font-family: tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif;
}

@font-face属性 可以将服务器中的字体直接提供给用户去使用，加载速度较慢，还会涉及版权问题。

@font-face {
    /* 指定字体的名字 */
    font-family: 'myfont';
    /* 服务器中字体的路径 */
    src: url('');
}

iconfont（图标字体），在网页中经常需要使用一些图标，可以通过图片引入图标，但是图片相对于字体文件而言是比较大的，非常不灵活。所以使用图标时可以将图标直接设置为字体，通过font-face属性对字体进行引入。

可以去fontAwesome网站下载图标字体，使用方法有三种，通过类/伪元素/实体字符设置。

通过类设置图标字体， 比如fas是固定的类名，后面的fa-bell是根据需求选择不同的类名。

<i class="fas fa-bell"></i>

通过伪元素设置图标字体

  1. 找到要设置图标的元素通过before和after选中
  2. 在content中设置字体的编码
  3. 通过font-family设置字体的样式
li::before {
    content: "\f1b0";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

<li>HelloWorld!</li>
<li>HelloWorld!</li>
<li>HelloWorld!</li>

通过实体字符使用

<span class="fas">&#xf0f3;</span>

line-height属性 可以通过设置行高，行高指的是单行文字占有的实际高度。

  • 默认行高是字体大小的1.33倍。
  • 行高可以直接指定一个大小，单位是px或em。
  • 行高也可以设置为一个整数，表示当前字体大小的指定倍数。

行高会在字体框的上下平均分配，所以可以将行高设置为高度一样的值，使单行文字在一个元素中垂直居中。

行间距 = 行高 - 字体大小

line-height.png

font属性 字体简写，通过font属性设置字体的所有属性，字体大小和字体组是必写项。

  • font: font-weight font-style font-size/line-height font-family;
  • 行高可以不写，如果不写则使用默认值。

font-weight属性 设置字重

font-style属性 字体风格 是否斜体

文本

text-align属性 设置文本的水平对齐

  • left
  • right
  • center
  • justify 两端对齐

vertical-align属性 设置文本的垂直对齐

  • baseline 默认值 基线对齐
  • top 顶部对齐
  • bottom 底部对齐
  • middle 居中对齐
  • 指定数值

容器内多行文本居中，以下方法是根据表格设置vertical-align具有特性，所有内容都会居中。

  • 将容器的display设置成table
  • 将容器内的文本的display设置为table-cell(表格单元格属性)
  • 将容器内的文本的vertical-align设置为middle
        div {
            display: table;
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }

        span {
            display: table-cell;
            vertical-align: middle;
        }

图片的垂直方向会有个距离，这个距离是图片的基线，图片默认对齐方式是基线对齐。取消这个距离的方法就是给图片的vertical-align设置其它值。

text-indent属性 设置缩进，默认1em = 16px

text-decoration 文本修饰属性，和border有点类似，设置类型、样式（solid、dotted等）和颜色，类型可以设置以下值：

  • none
  • underline 下划线
  • line-through 删除线
  • overline 上划线

white-space属性 设置网页如何处理空白， 可以设置以下值：

  • normal 正常
  • nowrap 不换行
  • pre 保留

text-overflow属性 设置网页文本溢出，以下代码可以做出单行文本溢出省略号的效果

        div {
            width: 200px;
            height: 22px;
            border: 1px solid #000;
            white-space: nowrap; /* 不换行 */
            overflow: hidden;   /* 溢出隐藏 */
            text-overflow: ellipsis; /* 隐藏部分加省略号 */
        }

表格

border-collapse属性 设置单元格边框是否合并

  • separate （默认值）边框独立
  • collapse 相邻边框合并

border-spacing属性 设置边框之间的距离

table-layout属性 设置单元格宽度

  • fixed 基于表格宽度固定单元格宽度
  • auto 基于单元格内容自动设置宽度

text-align 单元格内容对齐方式

书写顺序

显示属性

  • display position float clear

自身属性

  • width height margin padding border background

文本属性

  • color font text-align vertical align whitespace
avatar
文章
阅读
粉丝