CSS学习笔记1

④@font-face
可将服务器中的字体直接提供给用户去使用
@font-face{
   font-family：‘自己起名‘；
   src：url（‘字体路径’） format（“truetype”），
   url（’字体路径‘）；
}
format一般可以不写，默认truetype。
问题：加载速度、版权、字体格式

2、字体大小（font-size）

eg.
p {font-size： 20px}

单位：

①px(像素)
不要默认浏览器大小，最好给个明确值
标题标签比较特殊，需要单独指定文字大小
可以给body指定整个页面文字的大小
②em
相当于当前元素的一个font-size
③rem
相当于根元素的一个font-size

3、字体粗细（font-weight）

可选值：
bold加粗（等价于700 ）
normal默认值（等价于400）
font-weight: 700;
后面用数字的话不加px

4、文字样式（font-style）

italic斜体 normal正常

5、复合属性

格式
div{font: font-style font-weight font-size/line-height font-family}
顺序不能换（style和weight可换），不要可以省但是size和family必须有
行高可以省，不写使用默认值
eg.
div{font: italic bold 16px/2 'Microsoft yahei';}

6、图标字体（iconfont）

使用图标时，我们还可以将图标直接设置为字体，然后通过font-face形式来对字体进行引入

Ⅰ、图标字体库（font awesome）使用方法：

①下载字体库
②解压
③css、webfonts文件移动到项目中（在同一级中）
④将all.css引入网页<link rel="stylesheet" href="路径">
⑤使用图标字体
直接通过类名来使用图标字体class=“fas（有的是fab）图标名字”
改大小颜色就和字体一样

Ⅱ、其他使用方式

通过伪元素设置图标字体
①找到要设置图标的元素通过before/after选中
②在content中设置字体编码（加\）
③设置字体样式
fab
font-family:'Font Awesome 5 Brands';
fas
font-family:'Font Awesome 5 Free';
font-weight:900;

eg.
li::before{
   content:'\f1b0';（查表，图标的代码，记得加\）
   font-family:'Font Awesome 5 Free';（在all.css里找.fas或.fab设置的font-family粘过来）
   font-weight:900;（有的会需要）
}

或者用实体&#x编码;
eg.
<span class="fas"></span>

Ⅲ、iconfont使用方法

①加至购物车
②加项目里
③下载出来
④除了html文件其他都放vscode
⑤把iconfont.css引入网页<link rel="stylesheet" href="xxxx.css">
⑥类名class=“iconfont 图标名”
伪元素
p::before{
   content:'\e625';（查表，图标的代码，记得加\）
   font-family:'iconfont';
   font-size：100px；
}
实体&#x编码;
eg.
<i class="iconfont"></i>

Ⅳ、字体图标追加

打开selection.json，追加新图标，重新下载替换

五、文本

1、文本的颜色（color）

div {color: red;}
预定义颜色值（pink）、十六进制（#ff0000）、RGB代码（rgb（200，0，0）红绿蓝）

2、对齐文本（text-align）

①水平对齐（text-align）
可选值：
left左对齐（默认值）right右对齐 center居中 justify两端对齐
②垂直对齐（vertical-align）
可选值：
baseline默认值基线对齐（子元素和父元素基线对齐）
top顶部对齐（子元素和父元素顶部对齐）
bottom底部对齐（子元素和父元素底部对齐）
middle居中对齐（子元素中线和x中线对齐，并不是严格意义上的居中）
指定值（上移正下移负）

【图片对齐问题，默认基线对齐会留一条缝，解决该问题用vertical-align，写top或bottom】

3、装饰文本（text-decoration）

可给文本添加下划线、删除线、上划线等。
div {text-decoration: underline red dotted}（有的支持有的不支持）

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

4、文本缩进（text-indent）

指定文本的第一行的缩进，通常是将段落首行缩进
div {text-indent: 20px}
p {text-indent: 2em}
负值往左走,em是相对单位，1em=当前元素一个文字的大小

5、行高（line-height）

①行高是文字占有的实际高度
②可直接指定大小，也可设置一个整数，如果是整数行高是字体的指定倍数（默认1.33）
③行高也可用来设置文字行间距，行间距=行高-字体大小

④字体框
字体存在的格子，设置font-size实际上是在设置字体框的高度

⑤行高会在字体框上下平均分配

⑥行间距包括上间距，文本高度，下间距

6、单行文字垂直居中原理

文字行高（line-height）等于盒子高度（height）

7、设置网页如何处理空白（white-space）

可选值：
normal 正常
nowrap 不换行
pre 保留空白（你怎么写它怎么显示）

省略号出现方式
text-overflow：ellipsis;

eg.
.box2 {
   width:200px;
   white-space:nowrap;
   overfloe:hidden;
   text-overflow:ellipsis;
}

六、元素显示模式

1、块元素

<h1>~<h6><ol><li><p><div><ul>等，<div>是最典型的

特点：
①独占一行
②可设置高度宽度内外边距
③宽度默认是父级宽度的100%
④是一个容器，盒子，里面可放行内或块级元素

注意：
文字类元素（h、p）内不能放块级元素

2、行内元素（内联元素）

<a><strong><b><i><span>等和文字有关，<span>是最典型的

特点：
①相邻行元素在一行上，一行可显示多个
②高宽度直接设置是无效的
③默认宽度是它本身内容的宽度
④行内元素只能容纳文本或其他行内元素
⑤可设置padding，border，margin，但垂直方向不影响布局

注意：
链接里不能放链接
<a>里面可以放块级元素，但是给它转换一下块级模式最安全

3、行内块元素

<img/><input/><td>同时具有块元素和行内元素

特点：
①和相邻行内元素在一行上但之间有空隙，一行可显示多个
②默认宽度是他本身内容的宽度
③高度行高内外边距都可控制

七、元素显示模式转换

一个模式需要另一个模式的特性

1、display用来设置元素显示的类型

display：block转换为块级元素、显示元素
display：inline转换为行内元素
display：inline-block转换为行内块元素
display：table转换为表格
display：none元素不在页面中显示且不占位置

2、visibility用来设置元素的显示状态

visible 默认值，元素在页面中正常显示
hidden元素在页面中隐藏不显示但依然占位

3、overflow溢出处理

overflow-x，overflow-y，处理单方向
可选值：
visible 默认值子元素会从父元素中溢出，在父元素外部位置显示
hidden 溢出内容将会被裁剪不会显示（对文字不友好）
scroll 生成两个滚动条，通过滚动条查看完整内容
auto 根据需要生成滚动条
有定位的盒子慎用，会隐藏多余部分

八、背景

1、背景颜色

background-color：颜色值；
默认值transparent（透明）

2、背景图片

background-image: none/url(url);
便于控制位置，一般logo，装饰性小图片，超大图片用背景图
背景颜色和图片都可存在，背景颜色在最底层

3、背景平铺

background-repeat: repeat(平铺)/no-repeat(不平铺)/repeat-x(沿x轴平铺)/repeat-y(沿y轴平铺)
默认平铺

4、背景图片位置

background-position: x y;
可使用方位名词或精确单位

①方位名词：
position：top（y）/center（y）/bottom（y）/left（x）/center(x)/right(x)
注意：
如果指定两个方位名词，两个值前后顺序无关left top=top left
如果指定一个方位名词，另一个值省略，则第二个值默认居中对齐

②精确单位：（x，y）
length百分数，由浮点数字和单位标识符组成的长度值
如果只写一个参数，参数一定是x，y默认垂直居中

③混合单位（x,y）

5、背景图像固定

background-attachment设置背景图像是否固定或随页面其余部分滚动（可做视差滚动效果）
background-attachment： scroll（默认，背景图像随对象内容滚动）/fixed（背景图像固定）

6、背景复合写法

可把上五个属性合并简写在同一属性background里。
没有特定顺序，一般顺序为
background：背景颜色背景图片地址背景平铺背景图像滚动背景图片位置
background：transparent url（image.jpg） repeat-y fixed top;

7、背景色半透明

background： rgba(0,0,0,0.3);
最后一个参数alpha透明度，0~1选，习惯把0省略0.3写.3
盒子背景半透明，能看到下面的内容

九、ps切图

图片格式：
jpeg（jpg）：支持颜色较丰富，不支持透明效果，不支持动图
gif：支持颜色较少，支持简单透明，支持动图
png：支持颜色丰富，支持复杂透明，不支持动图
webp：谷歌新推出专门用来表示网页图片的一种格式，具备其他格式优点，文件还小（缺点，兼容性不好）
base64：将图片用base64编码，可将图片转化为字符，通过字符形式引入图片（用于和网页一起加载时用）

切图方式：图层切图、切片切图、ps插件切图等