css入门
一、架构分析
页面 => div的层级结构 => 具有采用哪些功能标签显示内容
结构层 > 位置层(布局层) > 内容层
二、css引入
行间式
<div style=" 100px; height: 100px"> </div> <!-- 简单直接，针对性强 -->
内联式
<head> <style> 选择器 { width: 100px; height: 100px; } </style> </head> <!-- 解耦合了，可读性强 -->
外联式
/* index.css */
选择器 {
100px;
height: 100px;
}
/* 适合团队高效率开发，耦合性低，复用性强 */
<!-- index.html --> <link rel='stylesheet' type='text/css' href='./index.css'>
三、三种引入“优先级”分析
1.没有优先级
2.不同的属性样式协同操作，相同的样式采用覆盖机制，选择逻辑最下方的
3.行间式一定是逻辑最下方的样式
四、基础选择器
* | div | . | # 通配 < 标签 < 类 < id (优先级：同一标签同一属性) 标签：一般用于最内层样式修饰 类：使用返回最广，布局的主力军 id：唯一标识的布局，不能重复
五、文本样式
/*字体样式*/
.box {
/*字族*/
/*STSong作为首选字体, 微软雅黑作为备用字体*/
font-family: "STSong", "微软雅黑";
/*字体大小*/
font-size: 40px;
/*字重*/
font-weight: 900;
/*风格*/
font-style: italic;
/*行高: 某一段文本在自身行高中可以垂直居中显示 => 文本垂直居中*/
line-height: 200px;
/*字体整体设置*/
/*字重 风格 大小/行高 字族 (风格可以省略) ***** */
font: 100 normal 60px/200px "STSong", "微软雅黑";
}
i {
/*normal清除系统字体风格*/
font-style: normal;
}
.box {
/*水平居中: left | center | right ***** */
/*text-align: center;*/
/*字划线: overline | line-through | underline */
text-decoration: overline;
/*字间距*/
letter-spacing: 2px;
/*词间距*/
word-spacing: 5px;
/*缩进*/
/*1em相当于一个字的宽度*/
text-indent: 2em;
}
a {
/*取消划线*/
text-decoration: none;
}
六、display
.box {
/*block: 块级标签, 独占一行, 支持所有css样式*/
/*display: block;*/
/*inline: 内联(行级)标签, 同行显示, 不支持宽高*/
/*display: inline;*/
/*inline-block: 内联块标签, 同行显示, 支持所有css样式*/
display: inline-block;
/*标签的嵌套规则*/
/*①*/
/*block可以嵌套所有显示类型标签, div | h1~h6 | p*/
/*注: hn与p属于文本类型标签,所有一般只嵌套inline标签*/
/*②*/
/*inline标签只能嵌套inline标签, span | i | b | sup | sub | ins */
/*③*/
/*inline-block可以嵌套其他类型标签, 但不建议嵌套任意类型标签 img | input*/
}