HTML和CSS笔记05

HTML和CSS笔记05

大局浮动，细节位置
1.字体

//字体
p{
	color:black;
	font-size:12px;
	font-weight:bold;//不用数字
	font-style:italic;//斜体
	font-famliy:monospace,'Microsoft YaHei';
}

//从服务器中字体提供用户使用
@font-face{
	font-family:'myfont';
	src:url('./font/xxx');
}
font-famliy:monospace,'myfont';
//简写font:字体大小/行高 字体样式（不行行高，则默认值）
font:bold italic 12px/2 monospace,'Microsoft YaHei';
//一般行高写在后面

02.图标字体
将图标设置为字体，通过font-face字体引用，这样就可以通过使用字体的形式使用图标。
阿里图标库；font Awesome
后者使用：
将css和webfonts移到项目文件中

<link rel="stylesheet" href="./fa/all.css">;

//使用图标(fab或fas在前面类)
<i class="fas fa-bell font-size:50px;" color:black;></i>
<i class="fab fa-accessible-icon"></i>

//通过伪元素在设置
//fas
li::before{
	content:'/f1b0';
	font-family:'Font Awesome 5 Free';//字体的样式
	font-weight:900;
	color:blue;
}
//fab
li::before{
	content:'/f1b0';//字体编码
	font-family:'Font Awesome 5 Brands';//字体的样式
	color:green;
}

//通过实体创建&#x
<i class="fas">&#xf0f3</i>

前者使用
选择图标-加入项目-下载到本地-加载到项目

<link rel="stylesheet" href="./fa/fonticon.css">;

03.行高

font-size:12px;
//整数
line-height:1.33//默认值
//px
line-height:20px;
//行高在字体上平均分配，当行高=块高时，垂直居中 
//行距用这个设置，字间距=2倍


//水平居中
/*text-align在块中
*left,right:向左向右对齐
*center:居中
*justify:两端对齐（两边不留空格）
*/
text-align:left;

//垂直居中
/*vertical-align在块中
*baseline:基线对齐（子元素与父元素基线对齐）默认值
*top bpttom:顶部，底部对齐
*middle:居中对齐
*/
<div><span></span><div>
span{vertical-align:10px;}

//文本修饰
/*text-decoration
*none:什么都不加，去除超链接的下划线
*underline，overline：下，上划线
*line-through:删除线
*/
text-decoration:underline;

//处理空白
/*white-space:
*normal:正常
*nowrap:不换行（滚动条）
*preL保留空白（保留文本格式，换行有用）
*/
.box1{
	width:200px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

04背景
简写：没有顺序要求
注意：position/size；origin前 clip后

div{
	background-image:url("./xx");
	//图片小，重复，大，无法完全显示
	background-color:#bfa;
	background-repeat:repeat-x;//repeat;no-repeat
	background-position:center;//九宫格，其它提示指定两个值，默认center
	background-position:10px 10px;
	background-clip:border-box;//背景范围，默认值
	background-origin:padding-box;//背景图片起点，默认值
	/*border-box：背景（背景图片）从边框开始
	*content-box：背景从内边距开始
	*padding-box：背景从内容区开始
	*/
	background-size:cover;
	/*cover:铺满但不完整
	*contain：完整但瀑不满
	*数字：100%
	*/
	background-attachment:scroll;
	//背景图片跟随滚动，fixed：不动

//线性渐变
	background-image:linear-gradient(to right,red 25px,yellow 50px);//默认向下
	background-image:linear-gradient(45deg,red,orange,yellow);

//射形渐变（大小(宽 高) at 位置，颜色 位置……）
background-image:radial-gradient(100px 100px,red,yellow);
}

雪碧图
解决图片闪烁问题
将不同状态的小图转换为一个大图，通过background-position调整位置显示。CSS-Sprite
1.测量图标大小，创建对象
2.确定位置，调整显示