注意：
- 这波是赶作业，所以看的速成视频。（从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再回车
扫一扫
7214
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
