前端 - CSS基础知识

CSS文档

目录

CSS简介

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

CSS主要用于HTML页面中的：

  • 文本内容：字体、大小、对齐方式等。
  • 图片的外形：宽高、边框样式、边距等。
  • 版面的布局和外观显示样式。

HTML负责结构呈现，CSS负责样式。

CSS语法规范

CSS规则由两个主要部分构成：选择器和一条或多条声明。

<!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>
        /* selector: { key: value; ...} */
        p {
            color: red;
        }
        div {
            font-size: xx-large;
        }
    </style>
</head>
<body>
    <p>
        Test CSS.
    </p>
    <div>
        Hello.
    </div>
</body>
</html>
  • CSS可以写在<head>中的<style>标签内，块内注释使用/* */。
  • 选择器用来指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式。
  • 属性和属性值以键值对形式表示，用:分开，以;结尾。

CSS基础选择器

CSS选择器可以分为：

  • 基础选择器：由单个标签组成。
    • 标签选择器
    • 类选择器
    • id选择器
    • 通配符选择器
  • 复合选择器

标签选择器

把某一类标签全部选择出来，参考上面的代码。

类选择器

用来选择一个或多个标签，用.表示。

<head>
    <style>
        /* selector: { key: value; ...} */
        .content {
            color: red;
        }
        .intro {
            font-size: xx-large;
        }
    </style>
</head>
<body>
    <p class="content intro">
        Test CSS.
    </p>
    <div class="intro">
        Hello.
    </div>
</body>

注意：

  • 类名单词之间用-分割
  • 一个标签可以同时是多个类，多个类名之间用空格分割，例如class="video-desc report-wrap-module report-scroll-module"
  • 尽量使用纯英文命名类

使用类选择器画盒子

<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
        }
        .red-box {
            background-color: red;
        }
        .green-box {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box red-box"> </div>
    <div class="box green-box"> </div>
    <div class="box red-box"> </div>
</body>

id选择器

用来选择唯一的有特定id的HTML元素，用#表示。

  • 类选择器主要用来选择样式
  • id选择器用于选择页面上的唯一元素，经常搭配JS使用
<head>
    <style>
        #hello {
            font-size: xx-small;
            color: pink;
        }
    </style>
</head>
<body>
    <div id="hello"> Hello </div>
</body>

通配符选择器

CSS使用*表示选择页面中的所有元素，包括<html>, <body>等。

例如清除所有元素标签的内外边距：

<style>
    * {
        margin: 0;
        padding: 0;
    }
</style>

CSS设置字体

CSS font属性可以用来定义字体、大小、粗细和文本样式(斜体)等。

字体

属性font-family定义字体。注意：

  • 各种字体用,隔开
  • 如果字体有空格，需要加引号
<style>
    p {
        font-family: Arial, Helvetica, sans-serif, 'Microsoft YaHei';
    }
</style>

字体大小

属性font-size定义字体大小。注意：

  • px(像素)是最常用的单位
  • Chrome默认字体是16px，不同浏览器可能默认字体大小不一致，尽量写清字体的大小
  • 声明body的字体会改变整个页面文字的大小
    • <h1>等标题标签除外，需要单独设置
<style>
    /* selector: { key: value; ...} */
    body {
        font-size: 20px;
    }
    h1 {
        /* body中的字体大小设置对<h>标签无效，需要单独设置 */
        font-size: 20px;
    }
</style>

字体粗细

属性font-weight定义字体的粗细。font-weight参考

<style>
    body {
        font-weight: 900;
    }
</style>

默认值为normal，不加粗，bold加粗。也可使用100～900的数值，其中400等同于normal,700等同于bold。

字体样式(斜体)

属性font-style定义字体是否倾斜，normal为正常，italic为倾斜。

  • 在实际开发中很少使用italic，更经常使用normal用来给<em>标签的文字改为不倾斜。
<style>
    em {
        font-sytle: normal;
    }
    p {
        font-style: italic;
    }
</style>

字体复合属性

<style>
    p {
        /* font: font-style font-weight font-size/line-height font-family */
        font:italic 900 30px/10px Arial, Helvetica, sans-serif;
    }
</style>

注意：

  • 必须严格按照顺序写，各个属性之间用空格隔开
  • 可省略一些属性(取默认值)，但必须保留font-size和font-family属性，否则font属性不起作用

CSS文本属性

文本颜色

属性color定义文本的颜色。

<style>
    div {
        color: red;
    }
</style>
表示方式 属性值
预定义颜色值 color:red;
十六进制 color: #ff0000;
RGB color: rgb(255, 0, 0);或color: rgb(100%, 0%, 0%);

文本对齐

属性text-align设置元素内文本的水平对齐方式。默认左对齐left、右对齐right、居中对齐center。

<style>
    h1 {
        /* 本质是让h1盒子里的文字水平居中对齐 */
        /* h1标签盒子还是独占一行 */
        text-align: center;
    }
</style>

装饰文本

<style>
    a {
        /* 取消<a>标签默认的下划线 */
        text-decoration: none;
    }
</style>
属性值 描述
none 默认，没有装饰线(最常用)
underline 下划线，<a>标签自带下划线
overline 上划线(不常用)
line-through 删除线(不常用)

文本缩进

单位可以是像素px，也可以是相对大小em，即当前元素一个文字的大小。

<head>
    <style>
        p {
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <p>你好吗</p>
    <div>你好吗</div>
    <div>qweqwe</div>
</body>

行间距

一行文字分为上间距、文本高度、下间距，如果font-size和line-height设置如下，则上间距为5px、文字高度为16px、下间距为5px。

  • 如果font-size和line-height的值相同，则上间距与下间距的值为0
  • 想实现文字垂直居中的效果，可以让行间距和高度的值相等，即height和line-height相等
<style>
    div {
        font-size: 16px;
        line-height: 26px;
    }
</style>

CSS引入方式

行内样式表(内联式)

  • 在sytle属性中写CSS样式
  • 引号中的内容要符合CSS规范，即key: value;的格式
<div style="font-size: xx-large; color: greenyellow;">你好吗你好吗你好吗</div>
<div>qweqwe</div>

效果如下：

你好吗你好吗你好吗
qweqwe

内部样式表(嵌入式)

这是之前一直在用的方式，将CSS代码单独放到一个<style>标签中，写在HTML文件内部。

  • 理论上来说可以放在HTML文档的任何位置，但是一般放在<head>标签中

外部样式表

  1. 新建一个.css，把所有CSS代码放进去(不需要<styel>标签)
  2. 在HTML页面中使用<link>标签引入.css文件。
<link href="style/style.css" rel="sytlesheet">

CSS复合选择器

复合选择器就是由2个或以上的基础选择器，通过不同的方式组合而成的。

后代选择器

  • 空格隔开
  • 第二个元素可以是儿子，也可以是后代，例如下面的<a>标签是<ol>标签的孙子，仍然有效
  • 最后更改的是所选中的后代元素的样式
  • 两个元素可以是任意基础选择器
ol li {
    color: blue;
}

ol a {
    color: red;
}

<ol>
    <li>ol的li</li>
    <li>ol的li</li>
    <li><a href="#">test</a> ol的li</li>
</ol>

子选择器

  • 只能选择儿子元素
  • 使用>隔开
.nav>a {
    text-decoration: none;
    color: red;
}

<div class="nav">
    <a href="#"> son </a>
    <p><a href="#"> grandson </a></p>
</div>

此时只有son没有下划线且为红色。

并集选择器

选择多组标签，定义相同的样式。

  • 使用,隔开
  • 推荐竖着写
  • 可使用任何形式的选择器
ul>li, 
div a {
    color: royalblue;
}

<ul>
    <li>ul的li</li>
    <li>ul的li</li>
    <li>ul的li</li>
</ul>

<div class="nav">
    <a href="#"> son </a>
    <p><a href="#"> grandson </a></p>
</div>

伪类选择器

  • 使用:表示

链接伪类选择器

注意要按顺序写：

/* 未访问过的链接 */
a:link {
    color: #333;
    text-decoration: none;
}

/* 已经访问过的链接 */
a:visited {
    color: orange;
    text-decoration: underline;
}

/* 鼠标悬停的链接 */
a:hover {
    color: red;
    text-decoration: underline;
}

/* 鼠标正在按下没有松开的链接 */
a:active {
    color: green;
    text-decoration: underline;
}

focus伪类选择器

选择获得焦点(光标)的表单元素，一般来说，<input>标签才能获取光标。

input:focus {
    background-color: red;
    color: gray;
}

CSS元素显示模式

HTML元素可以分为块元素和行内元素。

块元素

<div>是最典型的块元素，常见的还有：<h1>~<h6>，<p>, <ul>, <ol>, <li>等。主要特点有：

  1. 独占一行
  2. 高度、宽度、外边距、内边距都可以控制
  3. 宽度默认是容器(父级宽度)的100%，例如<div>默认是整个页面的宽度，因为继承自<body>
  4. 是一个容器及盒子，里面可以块元素或行内元素

注意：

  • 文字类的元素不能放块级元素
    • 例如<p>和<h1>~<h6>里面不能放块级元素

行内(内联)元素

<span>是最典型的行内元素，常见的还有: <a>, <strong>, <b>, <em>, <ins>等。主要特点有：

  1. 一行可以显示多个，中间有一定空隙，例如两个 之间就会有一定空隙
  2. 直接设置宽和高是无效的
  3. 默认宽度就是本身内容的宽度
  4. 行内元素只能容纳文本或其它行内元素

注意：

  • <a>标签里面不能再放<a>标签
  • <a>标签里面可以放块级元素，但是给<a>标签转换一下块级模式更安全

特殊元素

有些特殊的元素，例如: <img>, <input>, <td>等，同时具有块元素和行内元素的特点，有些资料称他们为行内块元素。其主要特点有：

  1. 和相邻行内元素(或者行内块元素)在同一行上(行内元素特点)
  2. 默认宽度就是本身内容的宽度(行内元素特点)
  3. 高度、行高、外边距、内边距都可以控制(块级元素特点)

显示模式转换

使用场景：例如通过将<a>转换成块级元素，增加其触发范围。

  • 转换为块元素：display: block;
  • 转换为行内元素：display: inline;
  • 转换为行内块元素：display: inline-block;
<a href="https://www.baidu.com" class="search">百度</a>

.search {
    background-color:skyblue; 
    text-decoration: none; 
    display: inline-block;  /* 转换为行内块元素 */
    height: 30px; 
    width: 100px;
}

显示效果如下：

百度

CSS的背景

背景颜色

默认的background-color值是transparent，即透明的。

div {
    background-color: pink;
}

背景图片

background-image的特点是比<image>标签更方便控制位置，所以一般用于：

  • 装饰性的icon, logo等
  • 较大的背景图片
div {
    height: 300px;
    width: 300px;
    background-image: url(images/logo.png);
}

背景图片平铺

背景图片默认是平铺的，可以设置background-repeat的值为no-repeat, repeat, repeat-x, repeat-y，来使得背景图片不平铺、平铺、仅在水平方向平铺、仅在垂直方向平铺。

背景图片位置

修改图片在背景中的位置：

div {
    height: 300px;
    width: 300px;
    background-image: url(images/logo.png);
    background-position: 10px 10px;
}

参数表示：x坐标和y坐标，可以使用方位名词或者精确单位。

参数值 说明
方位名词 垂直方向有 top
精确单位 浮点数字+单位标志符 或 百分比

方位名词

如果是方位名词，则

  • 如果有两个方位名词，例如background-position: left top;，则两个值顺序无所谓，其效果和top left相同
  • 如果只有一个方位名词，例如background-position: left;，则默认第二个值为center

精确单位

如果是精确单位，则

  • 如果有两个数字，则一定是第一个x坐标，第二个y坐标
  • 如果只有一个数字，则一定是x坐标，y轴垂直居中

混合单位

如果是混合单位，则一定是第一个是x轴，第二个是y轴，例如background-position: center 10px;指水平居中，y轴方向偏移10像素。

背景图像固定

设置background-attachment的值为scroll或fixed来使背景图像随着页面滚动而滚动或固定。

background-attachment: fixed;

复合写法

背景的复合写法没有规定顺序，一般来说按照如下顺序来写：

.logo {
    height: 300px;
    width: 300px;
    background: pink url(images/logo.png) no-repeat scroll center left;
}
  • 实际开发中更推荐使用复合写法

CSS3背景颜色半透明效果

只对背景颜色有效。

background: rgba(1, 1, 1, 0.3)

最后一个参数是alpha透明度，1表示不透明。

CSS三大特性

层叠性

当相同选择器设置同一个属性时，会产生冲突，靠后的样式会覆盖其他样式。例如下面的代码，Test会显示粉色。

<div>Test</div>

div {
    color: skyblue;
}

div {
    color: pink;
}

继承性

子标签会继承父标签的某些样式：

  • 主要是文本相关的样式，例如(text-, font-, line- 开头的属性，以及color属性)

例如之前在<body>标签中设置字体样式，如果子标签没有设置相关样式，则直接继承<body>的样式。

行高的继承

  • 行高可以跟单位，也可以不跟单位(指倍数)
  • 当表示倍数的行高被继承后，子元素的行高为：当前子元素的font-size乘以行高倍数
<body>
    <p>I am p</p>
    <div>I am div</div>
    <ul>
        <li>I am li</li>
        <li>I am li</li>
        <li>I am li</li>
    </ul>
</body>

body {
    font: 14px/1.5 monospace;
}

div {
    font-size: 18px;
}

li {
    font-size: 20px;
}

此时<p>标签、<div>标签、<li>标签都继承了<body>标签的行高，而<p>标签行高为14px*1.5=21px，<div>标签行高为27px，<li>标签行高为30px。

优先级

当一个元素被多个选择器选择，会产生优先级。

  • 选择器相同，执行层叠性
  • 选择器不同，根据选择器权重执行
选择器 权重
继承或* (0, 0, 0, 0)
元素选择器 (0, 0, 0, 1)
类选择器、伪类选择器 (0, 0, 1, 0)
id选择器 (0, 1, 0, 0)
行内样式style="" (1, 0, 0, 0)
!important重要的 无穷大 
<body>
    <div>i am div</div>
    <p>I am p</p>
    <p class="test">I am p</p>
    <p class="test" id="demo">I am p</p>
    <p class="test" id="demo2" style="color: black;">I am p</p>
    <p class="test" id="demo3" style="color: black;">I am p</p>
</body>

body {
    color: red;
}

p {
    color: skyblue;
}

.test {
    color: yellow;
}

#demo3{
    color: pink!important;
}

#demo, #demo2, #demo3 {
    color: green;
}

标签颜色从上到下依次为：红、蓝、黄、绿、黑、粉。

优先级需要注意的问题

  1. 优先级的4位数字不会产生进位，可以理解为类选择器永远大于元素选择器
  2. 从左往右判断优先级，如果当前位数值相同，则继续判断下一位
  3. 不管父元素有多高的权重，子元素继承的权重为(0, 0, 0, 0)
  4. 由于浏览器有一些默认样式，例如<a>标签蓝色、下划线的样式，<h1>标签字体和加粗的样式，此时由于继承的权重为(0, 0, 0, 0)，是无法覆盖默认样式的，必须是权重(0, 0, 0, 1)以上的选择器

权重的叠加

复合选择器会产生权重的叠加，例如：

  • div ul li权重为(0, 0, 0, 1)
  • .nav ul li权重为(0, 0, 1, 2)
  • a:hover权重为(0, 0, 1, 1)
  • .nav a权重为(0, 0, 1, 1)
posted @ 2021-11-28 01:04  lv6laserlotus  阅读(101)  评论(0)    收藏  举报