CSS快速学习（2021.2.7-15）

注意：

这波是赶作业，所以看的速成视频。（从win32到electron到html和css，假期过大半东西还没做出来555）
仍旧是众所周知的学习网站：b站，找到了DasAutoooo老师的视频。
学的是如何用CSS给HTML套样式，用的是vs code
写这个的主要目的是怕自己之后忘了，方便捡起来
好好学习：https://developer.mozilla.org/en-US/docs/Learn/CSS
俺有粉丝了555，俺不是大佬但是俺会努力的！
这一次的代码也放在之前的github下了，Demo7
https://github.com/Junko-Zhou/learning-Electron

--学习内容：CSS赶作业

一、CSS是啥？

Cascasing Stylesheets层叠样式表（不是一种语言），用于为网页制定样式、布局（所以通常与html\xml等标记性语言一起工作（希望没听错...）

二、用CSS设置样式

示例：
在html文件中写了一段话
<p>宝塔镇河妖</p>
此时再在css中写一句
p{
    color:blueviolet;
}
其中

p{} 是选择器（Selector）

p 是选择的对象（也就是html中“宝塔镇河妖”这句话）

color 是属性（property）即这个对象p需要修改的属性

blueviolet 是值（value）即指定对象p需修改属性color的新值

实际操作：

step1：新建一个html，随便在body里写点文字（用到h和p组件）
然后open with Live Server就可以用浏览器打开

*:Live Server是一个插件，具体下载步骤在后面小总结里补充

step2：为html添加样式的三种方式

外部样式表（常用）
新建一个.css文件，再在html的head里用link组件引用
内部样式表
在html的head中创建一个<style>
内联样式
html中每个组件设置

法1.
新建.css文件（我这里按照视频放在新建的css文件夹下，其实没必要）
在html的head里:rel是link的内容stylesheet样式表，href是src

<link rel="stylesheet" href="css/style.css">

对于以下这段文字，

<p class="paragraph" id="p01">555都一个月了为啥我还在Hello world呀555</p>

在css中选择方法（选择器写法）有三种：

p{color: aquamarine;}//组件类型
.paragraph{color:blue}//类名，可以有很多组件共用同一个类名
#p01{color:crimson}//id，有点像标识符的概念，唯一指向一个组件

（要用的时候把注释删掉喔）

法2.（放在head里）

<style>
        h1{color:darkorange}
        p{color:darkorchid}
    </style>

法3.（直接在组件上逐个修改）

<h1 style="color:darkorange;">Hello World!</h1>
<p style="color: darkorchid;">555都一个月了为啥我还在Hello world呀555</p>

效果如图

step3:用一个小盒子把它括起来
html中创建一个盒子组件，可以改class里的内容（比如改成box1）其实就是名称

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

然后把刚才的文字组件放进去，就会出现如下效果：

对box的设置

.box1{
    background-color: black;
    color: red;
    margin:auto;
    width:80%
}

文字顶格实在太丑了，所以

.paragraph{
    margin-left: 10px;
}
h1{
    margin-left: 10px;
}

*:如果是box1中的h1，可以通过选择

.box1 h1

颜色：

RGB颜色和RGBA颜色（a其实就是不透明度，取值为0~1，0代表完全透明，1是完全不透明）
HSL*和HSLA（H:色相hue，S:饱和度saturation，L:亮度lightness）hsl转rgb网站：https://serennu.com/colour/hsltorgb.php

H：色相，0°是红色，120°是绿色，240°是蓝色
S：饱和度，0%是灰色
L：亮度，0%是黑色，100%是白色
16进制颜色，顺便给推荐一首rgb16进制转换网站：https://www.sioe.cn/yingyong/yanse-rgb-16/
关键词：black、red之类的，官网上有很多:https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value

字体：

font-family:字体名称,是否衬线体;
示例：font-family:Arial,sans-serif（不要衬线）; "Times New Roman",serif（衬线体）; "Andale Mono",monospace（等宽）;
一些网站：
更多字体学习：https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals

windows,mac上各种字体的占有率（就是一般大家都电脑上都有哪些字体）：https://www.cssfontstack.com

字体选用平台（可以从这里搞到字体）：https://fonts.google.com
字体排印（？）：thetype.com 字谈字畅
*：衬线是啥我也不太清楚。但是衬线体就会有点古典的味道
这种就是衬线体
这种就不是
*：所谓等宽就是每个字符宽度都相等（o和i）代码编辑器中多用

字体颜色：color属性

#555555深灰色。挺好看，比较适合正文。不会特别黑，但是也足够清楚。

字体大小：font-size

一般都是16px

字重：加粗或减细（bold, bolder, light, 默认是normal）

搞了一大堆：

font-family: 'Courier New', Courier, monospace;
font-size: 50px;
font-weight: bolder;

效果如下：

其他：

font-style:Italic;//斜体
text-decoration: underline;//下划线
text-spacing: 1em;//字间距
word-spacing: 2em;//词间距
line-height: 2em;//行间距

*：上面所有其实一句就行（就图片效果）（没成功，不知为何）

font: boleder,50px,'Courier New', Courier, monospace;

盒子（box）模型：

content: 内容将会填满这里面（文字、图片）
padding: 内边距
border: 边框
margin：外边距

外边距塌陷：当两个盒子在一起的时候，两者的border之间只会有一份外边距，而且是保留较大的外边距

x √

外边距设置：margin属性

p{
margin-top: 5px;
margin-bottom: 5px;
margin-left: 10px;
margin-right: 10px;
}

三种简写：

p{ margin: 5px 10px 5px 10px; }//法一，从左到右依次表示top,right,bottom,left(顺时针)空格隔开，最后加上分号
p{ margin: 5px 10px; }//法二，上下一致，左右相同
p{ margin: 5px 10px 5px;}//法三，上，左右，下

*：如果四边边距相同p{ margin: 5px;}//

边框：border设置

总体设置（顺序好像无所谓）：

border: 5px blue solid;//5像素宽蓝色的实线边框

分别设置：

border-right: 3px red dotted;//右侧改为3像素红色点状边框

进一步细化可以具体设置，比如：

border-right-style: dashed;//右侧边框设置为点划线

其他：

border-radius: 15px;//比如边框圆角

内边框：padding设置

与margin同理。就是内部边框而已。

*检查方法：

在自己的网页上右键，在弹出菜单中找到“检查”
然后会出现这个。随意点选相应组件，可以在styles中右下两个框里直接修改大小和样式！

列表（list）：在列表中添加ul

在html中添加：

<div class="list">
            <ul>
                <li>L1</li>
                <li>L2</li>
                <li>L3</li>
                <li>L4</li>
                <li>L5</li>
            </ul>
</div>

完了长这样

可以把前面的小圆点改成
1.其他形状：

.list{
    list-style: square;//比如方块（又一次没有成功？）
}

2.你想要的图案：

.list{
    list-style-image: url('../image/01.jpg');
}

这里是新建了一个image文件夹，并且放了一张图片进去

一些高级玩法：特殊的选择方式

奇、偶行选择（id为l2的list中，li为元素，选择其中的奇数行修改背景）
括号里odd表奇数，even表偶数。也可以写一个数字指定第几个
```
#l2 li:nth-child(odd){
    background-color: wheat;
}
```

选择第一行

#l2 li:first-child{
    background-color: violet;
}

内容（content）

居中：在css中设置
```
text-align: center;
```

按钮：

样式：直接在css里改就是了

交互：可以按照鼠标与其状态分别设置

button:hover{ //鼠标停留
    background-color: red;
}
button:active{ //鼠标按下
    background-color: teal;
}

超链接：<a>组件

将List中的每一项搞成链接

<li><a href="a">L1</a></li>

改变样式

a{
    text-decoration: none;
    color: black;
}

可以去除下划线，并且把字体颜色改回黑色。
此外可以设置鼠标悬停变化（和button一样，这里设置的是变绿）以及有一个特殊的属性：visited，访问过的链接设置（这里设置的是变灰（没成功？））。

a:hover{
    color:chartreuse;
}
a:visited{
    color:darkgray;
}

浮动float：使组件并排

创建了三个block组件，分别设置了不同的背景色。然后发现三个竖着排列。

然后加上了这个（left是指三个并排后整体居左）

.block{
    float:left;
    width: 33.3%;    
}

就会变成这样
但是如果要加上边框，就得告诉它：这是一个有边框的盒子，边框要算在33.3%里。否则就会被挤到下一行去

border: 2px solid pink;
box-sizing: border-box;

使用结束之后:清除float

首先在html中要用float的组件下面建一个div，这里取得类名为clearfix。
然后在css中

.clearfix{
    clear:both;
}

如果不清除，下面的内容就会挤到上一行的空隙里来（比如这个样子）

定位

种类：

static 静态（默认）
relative 相对
相对于原来位置位移多少。原来的位置仍旧保留
absolute 绝对
相对于父节点*位移多少。原来的位置不保留
*：这个名字我乱起的）比如在一个box里，并且box设置了relative，那父节点就是box的左上角。如果没有设置就是页面的左上角
fixed 固定：相对于视窗定位（比如始终固定在浏览器左下角的按钮）
```
#fixed-button{
    position:fixed;
    right:0;
    bottom:0;
}
```
sticky：比如某些页面的目录栏，滚动页面时会一直保持在左侧不动（？？？和上面有啥区别）

奇奇怪怪的小总结又出现了！
1.新建一个html文件后，输入!就可以直接建好一个h5的模板！

2.<p></p>是段落，里面可以填写一段文字。h类主要是标题

3.在p组件里输入Lorem100它会自动给你填充100个单词

4.下载Live Server插件

我这里以为已经下载了所以是Disable，没有下载的话这里是install，点就是了

5.html里创建一个盒子模型
直接输入.box，一回车就会出现这个
<div class="box"></div>
后来发现好像div组件都是直接.+类名就能快速创建
类名自己取就行

6.css里的属性应该是一层层继承的。如果同时设定，最内层的优先级别最高，后面的更优先

7.想同时生成五个li: li*5再回车