【CSS学习笔记一】CSS入门基本知识、四类基础选择器、设置字体属性、设置文本属性

waski

已于 2023-10-25 09:55:13 修改

阅读量213

点赞数

分类专栏：前端之路文章标签： css 前端笔记

于 2023-10-21 20:56:57 首次发布

本文链接：https://blog.csdn.net/waski/article/details/133966123

版权

前端之路专栏收录该内容

19 篇文章 1 订阅

订阅专栏

1. CSS入门

1.1 CSS简介

CSS是层叠样式表( Cascading Style Sheets )，也为CSS样式表或级联样式表，是一种标记语言

html主要做结构，css主要做样式，美化html网页布局，使得结构与样式相分离

1.2 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>
    p {
        color: red;
        font-size: 24px;
    }
    </style>
</head>
<body>
    <p>
        有点意思
    </p>
</body>
</html>

CSS写在<head></head>中间，由<style></style>声明。
CSS规则由一个选择器和一组声明组成

选择器：选择给谁修改属性（指定对应的HTML标签）

声明：说明具体的样式（①一个声明就是一个键值对，由冒号分开；②声明与声明之间由;分开；③最后一个声明后面还是有一个;）

1.3 CSS的代码写作风格

展开式（更直观）

p {
        color: red;
        font-size: 24px;
    }

小写
在p后面，冒号后面，都需要留一个空格。

2. SCC基础选择器

<div>我是div</div>
<div>我的div</div>
<ul>
    <li>
        我是ul中的小li
    </li>
</ul>
<ol>
    <li>
        我是ol中的小li
    </li>
</ol>

我们对选择器的需求：

能够选择第2个<div>
能够选择出ol中的li

选择器分为"基础选择器"和"复合选择器"两个大类：

基础选择器由单个选择器组成
基础选择器又包括：标签选择器，类选择器，id选择器，通配符选择器

2.1 标签选择器 `p{}`

标签选择器（元素选择器）：使用HTML标签名称作为选择器

<!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>
    p{
        color: red;
        font-size: 24px;
    }
    </style>
</head>
<body>
    <p>我是p1</p>
    <p>我的p2</p>
</body>
</html>

选择p作为选择器

优点：可以一次性修改html文档中所有的p标签

缺点：不能差异化选择，不能修改部分的p

2.2 类选择器 `.red{}`

可以差异化选择

<!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>
    p{
        color: red;
        font-size: 24px;
    }
    .red    定义类选择器
    {
        color: yellow;
    }
    .star-sing    定义类选择器
    {
        color: blue;
    }
    </style>
</head>
<body>
    <ul>
        <li class="red">冰雨</li>    调用类
        <li>来生缘</li>
        <li class="star-sing">李香兰</li>    调用类
        <li>生僻字</li>
    </ul>
</body>
</html>

步骤一：类选择器的定义：

.red 
    {
        color: yellow;
    }

步骤二：在样式中声明一个类，然后在HTML结构中就可以调用这个类：

 <li class="red"> 冰雨 </li>

注意：

类选择器的命名必须以.开始
类选择器的命名必须使用英文，不能全部为数字或中文
长名字可以使用-来分割
命名需要有意义，要别人一样就可以看懂
类选择器在所有选择器中使用的最频繁
在调用这个类选择器时，不再需要加上.

案例：

<!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>
    .red 
    {
        width: 100px;
        height: 100px;
        background-color: red;
    }
    .green 
    {
        height: 100px;
        width: 100px;
        background-color: green;
    }
    </style>
</head>
<body>
    <div class="red">红色</div>
    <div class="green">绿色</div>
    <div class="red">红色</div>
</body>
</html>

定义一个red类，这个类用来定义盒子：盒子高宽，背景颜色：background-color

在下面的<div></div>就可以调用。修改div盒子的高宽，背景颜色，最后的效果：

**类选择器的多类名：**一个标签调用多个类名，空格分开

案例：

<!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>
    .box
    {
        width: 200px;
        height: 200px;
    }
    .red 
    {
        background-color: red;
    }
    .green 
    {
        background-color: green;
    }
    </style>
</head>
<body>
    <div class="red box">红色</div>
    <div class="green box">绿色</div>
    <div class="red box">红色</div>
</body>
</html>

多类名的优点：

这些标签都可以调用这个公共的类,然后再调用自己独有的类。
节省CSS代码,统一修改也非常方便。
这个就是**面向对象**的概念

2.3 id选择器 `#yellow{}`

id选择器以“#" 来定义，被特定唯一id的HTML元素调用

<!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>
    .box
    {
        width: 200px;
        height: 200px;
    }
    .red 
    {
        background-color: red;
    }
    .green 
    {
        background-color: green;
    }
    #yellow
    {
        color: rgb(84, 24, 226);
    }
    </style>
</head>
<body>
    <div class="red box">红色</div>
    <div class="green box">绿色</div>
    <div class="red box">红色</div>
    <div id="yellow">黄色</div>
</body>
</html>

使用#进行声明，在调用的使用使用id=" "进行调用

与类选择器的不同：

类选择器可以被多次调用，但是id选择器只能被调用一次，id选择器经常用于定义页面唯一性元素上。

2.4 通配符选择器 `*{}`

修改html代码中所有标签的样式，相当于全选，使用*定义，无需调用

语法：

* {
属性：属性值
margin:0;  清除所有的元素标签的内外边距
padding:0;
}

2.5 小结

基础选择器的总结：
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3. 设置字体属性

3.1 设置字体 `font-family`

使用font-family修改字体样式。

<style>
	p {
		font-family: "宋体";
	}
</style>

font-family: "Microsoft YaHei";

font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

设置一串字体样式时：系统会首先将字体设置为：‘Franklin Gothic Medium’样式，当这个字体在系统中不存在时，会将字体设置为’Arial Narrow’，依次类推。当所有字体都不存在时，就会设置为系统默认字体：微软雅黑。

最常见的几个字体: body {font-family: ‘Microsoft YaHei’,tahoma,arial,‘Hiragino Sans GB’; }

（一般直接给body标签整体加字体属性，更方便，不用去style了）

3.2 修改文字大小 `font-size`

使用font-size可以修改文字大小。

font-size：16px     谷歌浏览器默认的文字大小为16px

这里的px为像素大小，在修改文字大小时，不要忘了px。

<style>
	body  对除标题外的全部文字进行修改
	{
		font-size: 18px;
	}
    h2   对标题文字修改
    {
    	font-size: 20px;
    }
</style>

3.3 修改粗细 `font-weight`

使用font-weight:mormal;可以进行粗细的修改。

normal为正常大小，400
lighter为更细
bold为加粗，700
bolder为更粗
或者直接指定粗细的数字

font-weight: 400;

正常normal的大小为400，字体的粗细大小可以在100到900的范围内变化。

因为标题标签会将字体变大和变粗，但是有时候我们不想标签变粗，就可以给标题声明一下字体粗细。

<head>
    <style>
        .bold{
            font-weight: 700;             或者：font-weight: bold;
        }
        h2
        {
            font-weight: 500;
        }
    </style>
</head>
<body>
    <h2>打招呼</h2>
    <p class=“bold”>你好</p>
</body>

3.4 字体倾斜 `font-style`

可以使用font-style将字体倾斜或不倾斜

font-style: italic;       字体变倾斜

font-style: normal;       字体变正常

<style>
    em{
        font-style: normal;
    }
</style>

我们在实际开发中很少将字体变为倾斜状态，较多将倾斜的字体变为正常状态。

3.5 复合属性 `{font: normal 400 24px/20px "微软雅黑"}`

设计一个字体样式，可能需要多个属性叠加：

div{
    font-style: italic;
    font-weight: 400;
    font-size: 24px;
    font-family: '微软雅黑';
}

我们可以使用"复合属性"简化代码：

div {
    font: italic 700 24px/20px "微软雅黑"
}

顺序必须为：font-style,font-weight,font-size/line-height,font-family

最后两个font-size和font-family不可忽略的，前面的两个值可以忽略

3.6 小结

4. 设置文本属性

4.1 文本颜色 `color`

方式一：预定义的颜色值

div {
        color: blue;
    }

方式二：十六进制

div {
        /* color: blue; */
        color: #FF0000;
    }

方式三：RGB值

div {
        color: rgb(84, 24, 226);
    }

鼠标停留在颜色属性值上，就能够跳出一个颜色选择框。

开发中最常用的是十六进制。

4.2 文本对齐 `text-align`

文本对齐通过：text-align方式进行对齐。

text-align: center/left/right;

文本对齐只是行对齐，没有纵向的对齐。

4.3 装饰文本 `text-decoration`

使用text-decoration属性，可以给文本加上/去掉下划线，删除线，上划线

其中：

下划线：text-decoration:underline
删除线：text-decoration:line-through
上划线：text-decoration:overline
没有线：text-decoration:none

给链接去掉下划线：（链接一般会自带一个下划线，不好看）

<!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>
    a 
    {
        text-decoration: none;
    }
    p 
    {
        text-decoration: underline;
    }
    </style> 
</head>
<body>
    <p>我是用来测试下划线的</p>
    <a href="#">淘宝</a>
</body>
</html>

4.4 文本缩进 `text-indent`

首行缩进是通过text-indent实现。

两种实现方法：

使用具体像素值：text-indent: 20px;这样首行就可以缩进20像素
使用相对大小：text-indent: 2em;、

em是一个相对单位，1em表示一个当前字符大小。使用2em，就可以让段落永远首行缩进2个字符大小，无论字体变大变小。

4.5 行间距 `line-height`

行高是通过：line-height进行设置的，例：

p {
    text-indent: 2em;
    text-decoration: underline;
    line-height: 36px;
}

行高=上间距+文本高度+下间距，如果文本高度为16，那么此时上间距和下间距都为10px。

块元素中，line-height行高和块的height相等，可以实现文字块居中效果

p {
    font: 12px/1.5 "微软雅黑";  
}

1.5指行高为字体大小12px的1.5倍

4.6 小结

waski

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
【CSS学习笔记一】CSS入门基本知识、四类基础选择器、设置字体属性、设置文本属性

【CSS学习笔记一】CSS入门基本知识、四类基础选择器、设置字体属性、设置文本属性
复制链接

扫一扫

专栏目录

【CSS学习笔记一】CSS入门基本知识、四类基础选择器、设置字体属性、设置文本属性

文章目录

1. CSS入门

1.1 CSS简介

1.2 CSS基础语法规范

1.3 CSS的代码写作风格

2. SCC基础选择器

2.1 标签选择器 p{}

2.2 类选择器 .red{}

2.3 id选择器 #yellow{}

2.4 通配符选择器 *{}

2.5 小结

3. 设置字体属性

3.1 设置字体 font-family

3.2 修改文字大小 font-size

3.3 修改粗细 font-weight

3.4 字体倾斜 font-style

3.5 复合属性 {font: normal 400 24px/20px "微软雅黑"}