CSS学习笔记 | 云雀笔记

type

Post

status

Published

date

Oct 26, 2022

slug

css

summary

个人CSS的学习笔记记录

一、先准备一个html文件及简单设置

创建index.html，内容如下


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title>云雀的网页</title>
    </head>
    <body>
        <!-- 利用css设置字体颜色及大小 -->
        <div style="color:red; font-size:20px;">
            <h1>CSS学习</h1>
            <p>这是一个段落</p>
        </div>
    </body>
</html>

效果如下：CSS对div标签设置了字体大小和颜色

当内层CSS属性和外层CSS属性有重复时，内层属性会覆盖外层属性


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"></meta>
        <title>云雀的网页</title>
    </head>
    <body>
        <!-- 利用css设置字体颜色及大小 -->
        <div style="color:red; font-size:20px;">
            <h1 style="color:blue;">CSS学习</h1>
            <p>这是一个段落</p>
        </div>
    </body>
</html>

由于内部h1标签设置颜色为蓝色，覆盖了外部div的红色字体设置。

二、简单CSS属性

1、字体大小font-size

font-size的值可以为large、small这种绝对值，也可以是12px、80%、smaller这种像素、百分比和相对值。


<!-- CSS字体大小 -->
<p style="font-size:large;">这是大字体</p>
<p style="font-size:medium;">这是中等字体</p>
<p style="font-size:small;">这是小字体</p>
<p style="font-size:smaller;">这是较小字体</p>
<p style="font-size:12px;">这是12像素字体</p>
<p style="font-size:80%;">这是80%大小的字体</p>

2、颜色color

CSS中颜色值有四种表达方式

颜色名称，如：red、blue

颜色编码hex，如：#d3ee49

rgb的表示方法，如：rgb(211,238,73)

hsl的表示方法，如：hsl(70,83%,61%)

字体颜色和背景颜色

字体颜色color

背景颜色background-color


<!-- CSS颜色 -->
<p style="color:red;">这个字体是红色</p>
<p style="color:#ff0000;">这个字体是红色</p>
<p style="color:rgb(255,0,0);">这个字体是红色</p>
<p style="color:hsl(0,100%,50%);">这个字体是红色</p>
<p style="background-color:gray;">这个背景颜色是灰色</p>

3、边框border

边框属性需要具有三个值分别是大小、样式和颜色。


<!-- CSS边框 -->
<!-- CSS边框宽度1像素 样式为实线 颜色为蓝色 -->
<p style="border:1px solid blue;">这是一段文字</p>
<!-- CSS边框宽度5像素 样式为虚线 颜色为红色 -->
<p style="border:5px dashed rgb(255,0,0);">这是一段文字</p>

4、CSS宽度和高度width、height

使用width、height分别设置段落的宽度和高度，可以设置最大宽度，当文字超过设置的宽度时，段落会自动换行。


<!-- CSS宽度和高度 -->
<!-- 宽度 -->
<p style="border:1px solid blue; width:200px;">这是一段文字</p>
<!-- 高度 -->
<p style="border:5px dashed rgb(255,0,0); height:200px;">这是一段文字</p>
<!-- 最大宽度 -->
<p style="border:5px dashed rgb(255,0,0); max-width:200px;">这是一段文字这是一段文字这是一段文字</p>

5、CSS的空间控制

如图所示，这就是一个css的空间情况

padding（内部空间）


<!-- 内部空间上下左右各占5像素 -->
<div style="padding:5px; background-color:red; border:1px solid black;">
    我是一段文字占用1
</div>
<!-- 内部空间上部占5像素 -->
<div style="padding-top:5px ; background-color:green; border:1px solid black;">
    我是一段文字占用2
</div>
<!-- 内部空间上 右 下 左分别占用5 6 7 8像素 -->
<div style="padding:5px 6px 7px 8px ; background-color:green; border:1px solid black;">
    我是一段文字占用3
</div>

效果如下：

margin（外部空间）

margin可以设置为负数


<!-- 外部空间上下左右各占5像素 -->
<div style="margin:5px; background-color:yellow; border:1px solid black;">
    我是一段文字占用4
</div>
<!-- 外部空间下部占5像素 -->
<div style="margin-bottom:5px; background-color:yellow; border:1px solid black;">
    我是一段文字占用5
</div>
<!-- 外部空间上 右 下 左分别占用5 6 7 8像素 -->
<div style="margin:5px 6px 7px 8px; background-color:purple; border:1px solid black;">
    我是一段文字占用6
</div>

效果如下：

6、CSS排版控制

float


<div style="border:1px solid black;">
    <img src="https://cdn.jsdelivr.net/gh/FuKun0113/picture/brand/logo-yunque.svg" width="200px"/>
    <p>这是我的logo</p>
</div>
<hr/>
<!-- 利用float将img标签浮到p标签文字的左边 -->
<div style="border:1px solid black;">
    <img src="https://cdn.jsdelivr.net/gh/FuKun0113/picture/brand/logo-yunque.svg" width="200px" style="float:left; "/>
    <p>这是我的logo</p>
</div>

可以看出图片已经浮动到文字的左边了，并且div标签的边框只框选了p标签的位置，不受图片高度的影响。

display

inline表示内容占多少空间就占多少，block表示不管内容占多少空间占整行。


<div>
    <p>文字1</p>
    <p>文字2</p>
    <span>span1</span>
    <span>span2</span>
</div>
<hr/>
<!-- display的使用 -->
<div>
    <p style="display:inline; ">文字1</p>
    <p style="display:inline; ">文字2</p>
    <span style="display:block; ">span1</span>
    <span style="display:block; ">span2</span>
</div>

7、CSS定位 position

固定定位


<!-- 黄色色块漂浮在右下角距离底部和右边各20像素 红色色块上移 -->
<div style="position:fixed; bottom:20px; right:20px; background-color:yellow; width:100px; height:100px;"></div>
<div style="background-color:red; width:200px; height:200px;"></div>

相对定位


<!-- 蓝色色块距离原位置底部和右边各偏移20像素 紫色色块位置不变 -->
<div style="position:relative; bottom:20px; right:20px; background-color:blue; width:100px; height:100px;"></div>
<div style="background-color:purple; width:200px; height:200px;"></div>

绝对定位


<!-- 创建3个div标签,最里层为蓝色方块,第二层为内部空间30像素的边框,第三层也是 -->
<div style="padding:30px; border:3px solid red;">
    <div style="padding:30px; border:3px solid red;">
        <div style="background-color:blue; width:80px; height:80px;"></div>
    </div>
</div>
<hr/>
<!-- 最里层的蓝色方块独立出来了,第二三次相应的减少80像素的高度 -->
<div style="padding:30px; border:3px solid red;">
    <div style="padding:30px; border:3px solid red;">
        <div style="position:absolute; background-color:blue; width:80px; height:80px;"></div>
    </div>
</div>
<hr/>
<!-- 最里层的蓝色方块独立出来了,第二三次相应的减少80像素的高度 第二层设置了定位,top属性会根据最近一层的定位相应的改变-->
<div style="padding:30px; border:3px solid red;">
    <div style="position:relative; padding:30px; border:3px solid red;">
        <div style="position:absolute; top:0px; background-color:blue; width:80px; height:80px;"></div>
    </div>
</div>

8、CSS的透明度和圆角

透明度 opacity


<!-- 设置蓝色色块透明度0.5 -->
<p style="position:relative; top:70px; left:25px; ">你好</p>
<div style="opacity:0.5; background-color:blue; width:80px; height:80px;"></div>

圆角 border-radius


<!-- 设置蓝色色块各角的半径像素 50%为圆 -->
<p style="position:relative; top:70px; left:25px; ">你好</p>
<div style="border-radius:50%; background-color:blue; width:80px; height:80px;"></div>
<hr/>
<!-- 设置蓝色色块各角的半径像素为20 -->
<p style="position:relative; top:70px; left:25px; ">你好</p>
<div style="border-radius:20px; background-color:blue; width:80px; height:80px;"></div>
<hr/>
<!-- 设置蓝色色块四个角的半径像素分别为10 20 30 40 -->
<p style="position:relative; top:70px; left:25px; ">你好</p>
<div style="border-radius:10px 20px 30px 40px; background-color:blue; width:80px; height:80px;"></div>

9、style标签

在head标签中添加style标签可以对整个html文件中的某个标签统一设置css样式


<head>
    <meta charset="UTF-8"></meta>
    <title>云雀的网页</title>
    <style>
        P{
            color:green;
        }
    </style>
</head>

如图所示，在style标签中设置了p标签为绿色，所以html中除了单独设置p标签css的，均套用了head标签中style的样式。

10、导入外部CSS文件

创建一个style.css文件，文件内容为


P{
    color:green;
}

在html的head标签中添加link标签引入css文件


<head>
    <meta charset="UTF-8"></meta>
    <title>云雀的网页</title>
    <!-- 从外部引入css文件  -->
    <link rel="stylesheet" href="style.css"/>
</head>

效果和上面的style标签效果一样

11、class和id

class

class是对标签进行的分组，同一个标签可以有多个分组，同一个分组也可以有多个标签

如下面的：


<p class="food background-grey">肯德基</p>
<p class="food">麦当劳</p>
<p class="food">必胜客</p>
<p class="person">李白</p>
<p class="person">杜甫</p>
<p class="person">韩愈</p>

创建一个css文件，对不同的分组设置不同的样式


.food{
    color:red;
}

.person{
    color:green
}

.background-grey{
    background-color:gray
}

效果如下

与class不同的是同一个id只能出现一次，且同一个标签只能有一个


<h1 id="css-h1">分类和ID</h1>

创建一个css文件


#css-h1{
    color:yellow;
    border:1px solid red;
}

效果如下

12、CSS的套用

将css同时套用到多个标签上去


.food, #css-h1 {
    color:red;
}

效果如图

将css同时套用到所有标签上去


* {
    color:red;
}

效果如图

将css样式套用到ul标签里面的li标签


ul li {
    color:red;
}

效果如图

将CSS样式套用到标签的某一个属性上去


[type] {
    background-color:red;
}

效果如图

当鼠标滑过时才套用CSS样式


h1:hover {
    background-color:red;
}

更多CSS选择器的用法可以查看下面的网页

CSS 选择器

CSS 选择器用于"查找"（或选取）要设置样式的 HTML 元素。我们可以将 CSS 选择器分为五类：此页会讲解最基本的 CSS 选择器。元素选择器根据元素名称来选择 HTML 元素。在这里，页面上的所有元素都将居中对齐，并带有红色文本颜色： p { text-align: center; color: red; } id 选择器使用 HTML 元素的 id 属性来选择特定元素。元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。这条 CSS 规则将应用于 id="para1" 的 HTML 元素： #para1 { text-align: center; color: red;

https://www.w3school.com.cn/css/css_selectors.asp

13、flex的使用

创建3个区块并对区块套用样式


<div class="container">
    <div class="box-1">区块1</div>
    <div class="box-2">区块2</div>
    <div class="box-3">区块3</div>
</div>

CSS样式


.container div {
    border:1px solid grey;
    padding:10px;
    width:100px;
}

效果如下

使用CSS套用css时


.container {
    display:flex;
}

.container div {
    border:1px solid grey;
    padding:10px;
    width:100px;
}

效果如图

要使其占满整个页面并重新排列区块顺序时，应给各区块套用相应的plex属性


.container {
    display:flex;
}

.container div {
    border:1px solid grey;
    padding:10px;
    width:100px;
}

.box-1 {
    flex:1;
    order:2;
}

.box-2 {
    flex:1;
    order:1;
}

.box-3 {
    flex:1;
    order:3;
}

效果如下，根据flex属性，区块1、2、3个占一份空间，根据order属性，数字小的在前面

flex自动换行

flex默认是不会自动换行的，会挤压区块的宽度

下面时flex换行的css


.container {
    display:flex;
    flex-wrap: wrap;
}

.container div {
    border:1px solid grey;
    padding:10px;
    width:100px;
}

如图当页面宽度不满足每个区块100px时会自动换行

flex的显示默认是先从左到右再从上到下

将主轴改成从上到下（column从上到下、column-reverse从下到上、row从左到右、row-reverse从右到左。）


.container {
    display:flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.container div {
    border:1px solid grey;
    padding:10px;
    width:100px;
}

效果

将区块放到主轴的中间（center中间，flex-end主轴结束的位置，flex-start主轴开始的地方、space-around将主轴剩余的空间平均分配给区块的左边和右边、space-between将主轴剩余的空间平均分配给区块之间的区域，space-evenly将主轴剩余的空间平均分配给区块与区块、外框之间的区域）


.container {
    display:flex;
    flex-wrap: wrap;
    flex-direction:row;
    height: 300px;
    border: 1px solid red;
    justify-content: center;
}

.container div {
    border:1px solid grey;
    padding:10px;
    width:100px;
    height:20px;
}

效果如图

次轴置中align-items与justify-content用法一样


.container {
    display:flex;
    flex-wrap: wrap;
    flex-direction:row;
    height: 300px;
    border: 1px solid red;
    justify-content: center;
    align-items: center;
}

.container div {
    border:1px solid grey;
    padding:10px;
    width:100px;
    height:20px;
}

效果如下

多行次轴置中align-content


.container {
    display:flex;
    flex-wrap: wrap;
    flex-direction:row;
    height: 300px;
    border: 1px solid red;
    justify-content: center;
    align-content: center;
}

.container div {
    border:1px solid grey;
    padding:10px;
    width:100px;
    height:20px;
}

效果如下

14、CSS动画

先创建一个框

黑色的方块

html


<div class="box box-animation"></div>

css


.box {
    width:200px;
    height:200px;
    background-color: black;
}

先在css文件中创建一个动画并命名，动画名为change-color，动画效果背景颜色从红色转为蓝色


@keyframes change-color{
    form{background-color: red;}
    to{background-color: blue;}
}

给黑色方块赋予动画效果，animation-name表示要加载的动画名称，animation-duration表示动画持续时间，animation-iteration-count表示动画播放次数，animation-delay表示动画在页面载入多少秒后开始载入。


.box-animation {
    animation-name: change-color;
    animation-duration: 3s;
    animation-iteration-count: 3;
    animation-delay: 2s;
}

效果如图

也可以根据时间百分比设置动画效果。


@keyframes change-color{
    20%{background-color: red;}
    40%{background-color: orange;}
    60%{background-color: yellow;}
    80%{background-color: green;}
    100%{background-color: purple;}
}

如果让方块动起来


@keyframes change-color{
    20%{background-color: red; top:10px; left:10px;} 
    40%{background-color: orange;top:30px; left:30px;}
    60%{background-color: yellow;top:50px; left:50px;}
    80%{background-color: green;top:30px; left:30px;}
    100%{background-color: purple;top:10px; left:10px;}
}

.box {
    width:200px;
    height:200px;
    background-color: black;
    position: relative;
}

.box-animation {
    animation-name: change-color;
    animation-duration: 3s;
    animation-iteration-count: 3;
    animation-delay: 2s;
}

效果如下

三、教学视频

视频如下：

CSS基础教学视频

如果视频看不了，请看油管原视频

四、附件

本文的附件请通过下面的链接点击下载

CSS.zip

4.1KB