前端复习大纲-CSS01

最新推荐文章于 2024-04-02 13:40:01 发布

原创最新推荐文章于 2024-04-02 13:40:01 发布 · 229 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #css3

前端学习专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了CSS的基础知识，包括CSS样式规则的构成、选择器的使用（如标签选择器、类选择器、id选择器和通配符选择器），以及一些基本样式属性，如颜色、字体、文本对齐和溢出处理。还探讨了类选择器和id选择器的区别，并通过实例展示了如何通过CSS实现元素的样式控制。此外，还提及了CSS单位的选择，以及文本和鼠标属性的设置。

CSS简介

标记语言
层叠样式表（Cascading Stytle Sheets）的简称, 也会称为CSS样式表或级联样式表
主要作用
- 设置HTML中的文本内容（字体、大小、对齐方式等）
- 图片的外形（宽高、边框样式、边距等）
- 版面的布局和外观显示样式

CSS样式规则

选择器 {样式}
给谁改样式 {改什么样式}
主要构成: 选择器以及一条或多条声明

选择器 { 属性名: 属性值; 属性名: 属性值; }

选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
属性和属性值以“键值对”的形式出现
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
如果一个属性有多个值的话，那么多个值用 空格 隔开
属性和属性值之间用英文 ： 分开
多个键值对之间用 ；进行区分

CSS注释

注释要写在<style>标签里面才算生效

/*
	注释
*/

CSS的一些简单属性

color:red; 字体颜色
font-size:40px; 字号大小, 单位必须加，不加不行
background-color: blue; 背景颜色
font-weight: bold; 加粗
font-weight: normal; 不加粗
font-style: italic; 斜体
font-style: normal; 不斜体
text-decoration: underline; 下划线
text-decoration: none; 没有下划线

CSS基础选择器

CSS选择器的作用：根据不同的需求将不同的标签选出来，简单地说，就是选择标签用的
在这里插入图片描述

标签选择器

用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式

标签名 {
    属性1：属性值1；
}

优点：能快速为页面中同类型的标签统一设置样式
缺点：不能设计差异化样式，只能选择全部的当前标签

类选择器

差异化选择不同的标签，单独选择一个或者某几个标签，可以使用类选择器

.类名{
    属性1：属性值1；
}

结构需要用class属性来调用class类

.red{
    color: red;
}

<div class='red'>变红</div>

类选择器-多类名

给一个标签指定多个类名，从而达到更多的选择目的，这些类名都可以选出这个标签

在标签class属性写多个类名, 多个类名之间用空格分开

<div class="red font20">孙尚香</div>

使用场景

方便统一修改
可以把一些标签元素相同的样式（公共部分）放到一个类里面
这些标签都可以调用这个公共的类，然后再单独调用自己独有的类
从而节省CSS代码，统一修改也非常方便

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
        }
        .red {
            background-color: red;
        }
        .green {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box red"></div>
    <div class="box green"></div>
    <div class="box red"></div>
</body>
</html>

id选择器

可以为标有特定id的HTML元素指定特定的样式
HTML元素以id属性来设置id选择器，CSS中id选择器以“#” 来定义
只能调用一次

#id名 {
    属性1：属性值1
}

id选择器和类选择器区别

类选择器（class) 好比人的名字，一个人可以有多个名字，同一个名字也可以被多个人使用
id选择器好比人的身份证号码，全中国是唯一的，不得重复
id选择器和类选择器最大的不同就是使用次数
类选择器在修改样式中使用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用

通配符选择器

使用“*” 定义，表示选取页面中所有元素（标签）

* {
    属性1：属性值1
}

通配符选择器不需要调用，自动就给所有元素使用样式
特殊情况下才使用，后面讲使用场景（以下是清除所有的元素的标签的内外边距）

* {
    margin: 0;
    padding: 0;
}

CSS单位

单位必须要写,因为它没有默认单位

绝对单位

1 in=2.54cm=25.4mm=72pt=6pc

相对单位

px：像素
em：印刷单位相当于12个点
%：百分比，相对周围的文字的大小

font字体属性

font-size: 50px; /字体大小/
line-height: 30px; /行高, 不是直接作用在文字上的, 而是作用在行上的, 行高可以用百分比，表示字号的百分之多少/
font-family: "Times New Roman","微软雅黑","宋体"; /字体类型：如果没有微软雅黑就显示宋体，没有宋体就显示默认/

中文我们一般使用：微软雅黑、宋体、黑体。英文使用：Arial、Times New Roman。
须将英语字体放在最前面，这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体

是否加粗属性以及上面这三个属性，可以连写, font属性连写至少要有字号和字体，否则连写是不生效

	font: 加粗 字号/行高/ 字体
    font: font-style font-weight font-size/line-height font family;

	font: 400 14px/24px "宋体";

font-style: italic; /italic表示斜体，normal表示不倾斜/
font-weight: bold; /粗体/

normal的值相当于400，bold的值相当于700, 更提倡使用数字表示加粗或者变细

font-variant: small-caps; /小写变大写/

在这里插入图片描述

文本居中对齐

单行文本
小技巧：如果一段文本只有一行，如果此时设置行高 = 盒子高，就可以保证单行文本垂直居中。

多行文本
如果想让多行文本垂直居中，还需要计算盒子的padding。计算方式如下：
在这里插入图片描述

`vertical-align: middle;` 属性

用于指定行内元素（inline）、行内块元素（inline-block）、表格的单元格（table-cell）的垂直对齐方式。主要是用于图片、表格、文本的对齐。

vertical-align: middle; /*指定行级元素的垂直对齐方式。*/

文本属性

letter-spacing: 0.5cm ; 单个字母之间的间距
word-spacing: 1cm; 单词之间的间距
text-decoration: none; 字体修饰
- none 去掉下划线
- underline 下划线
- line-through 中划线
- overline 上划线
text-transform: lowercase; 单词字体大小写。uppercase大写、lowercase小写
color:red; 字体颜色可使用预定义的颜色值/十六进制/RGB代码
text-align: center; 在当前容器中的水平对齐方式。属性值可以是：
- left
- right
- center（在当前容器的中间）
- justify
text-transform: lowercase; 单词的字体大小写。属性值可以是：
- uppercase（单词大写）
- lowercase（单词小写）
- capitalize（每个单词的首字母大写）
text-indent: 2em 文本的首行缩进，em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小
line-height，设置行间的距离，可以控制文字行与行之间的距离，文本高度是不变的