CSS学习笔记（一）

一叶扁舟归旧梦

已于 2022-04-26 15:12:26 修改

阅读量267

点赞数

分类专栏：前端学习文章标签： css

于 2022-04-26 15:06:17 首次发布

本文链接：https://blog.csdn.net/Without_error/article/details/124427487

版权

前端学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、CSS规则

二、CSS基础选择器

1.标签选择器：为页面中某一类标签指定统一的CSS样式

2.类选择器：差异化选择不同的标签

3.id选择器：只能选择1个标签

4.通配符选择器：选取页面中所有元素（标签）

3.text-decoration设置装饰线

4.text-indent设置文本首行的缩进距离

5.line-height设置行间距（行高）

一、CSS规则

书写位置：在<head>标签内，利用<style>标签（后面会学新的引入方式）
语法规则：选择器 {声明};

二、CSS基础选择器

1.标签选择器：为页面中某一类标签指定统一的CSS样式

标签名 {

属性1: 属性值1;

属性2: 属性值2;

}

2.类选择器：差异化选择不同的标签

/*样式点定义，结构类（class）调用*/

.类名 {

属性1: 属性值1;

属性2: 属性值2;

}

例子：

<!DOCTYPE html>
<html lang="zh-CN">

<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>利用类选择器画三个盒子</title>
    <style>
        .red {
            /* 背景颜色 */
            background-color:red;
        }
        .green {
            background-color:green;
        }
        .box {
            width: 150px;
            height: 150px;
            font-size: 35px;
        }
    </style>
</head>

<body>
    <!-- 多类名：各类名中间用空格隔开 -->
    <div class="red box">红色</div>
    <div class="green box">绿色</div>
    <div class="red box">红色</div>
</body>

</html>

3.id选择器：只能选择1个标签

/*样式#定义，结构id调用*/

#id名 {

属性1: 属性值1;

属性2: 属性值2;

}

4.通配符选择器：选取页面中所有元素（标签）

* {

属性1: 属性值1;

属性2: 属性值2;

}

三、CSS字体属性

1.font-family设置字体

font-family: ‘Microsoft YaHei’, Arial; /*优先使用第一种字体*/

2.font-size设置字体大小

属性值：

数字+px（如font-size: 16px;）

3.font-weight设置字体粗细

属性值：

normal（相当于number=400）
bold（相当于number=700）
bolder
lighter
number（实际开发中，更提倡用数字）

4.font-style设置文本的风格

属性值：

normal
italic（浏览器会显示斜体的字体样式）

5.font字体连写

/* font：font-style font-weight font-size/line-height font-family */
<style>
    body {
        font: italic 700 16px 'Microsoft YaHei';
    }
</style>
/* 不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性 */

四、CSS文本属性

1.color设置文本颜色

属性值表示：

预定义的颜色值：red，green，blue，…
十六进制：#FF0000，#FF6600，#29D724，…（常用）
RGB代码：rgb(255,0,0)，rgb(100%,0%,100%)，…

2.text-align设置水平对齐方式

属性值：

left（默认值，左对齐）
center（居中对齐）
right（右对齐）

3.text-decoration设置装饰线

属性值：

none（默认值，没有装饰线）
underline（下划线，链接a自带下划线）
overline（上划线）
line-through（删除线）

4.text-indent设置文本首行的缩进距离

属性值：

数字+px
数字+em（em是一个相对单位，就是当前元素1个文字的大小）

5.line-height设置行间距（行高）

属性值：

数字+px

五、CSS引入方式（三种样式表）

1.内部样式表（内嵌样式表）

在html页面内部写样式，将所有的CSS代码抽取出来，单独放到一个<style>标签中。

2.行内样式表（内联样式表）

在元素标签内部的style属性中设定CSS样式，适合修改简单样式。

3.外部样式表（外链式）

样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。

引入步骤：

新建.css文件，把所有CSS代码放入该文件（只有样式没有标签）
在HTML页面中，使用<link>标签引入这个文件

link属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
href	定义所链接外部样式表文件的URL。