css入门
一.架构分析
页面 => div的层级结构 => 具有采用哪些功能标签显示内容
结构层 > 位置层(布局层) > 内容层
二.css引入
- 行间式
<div style="width: 100px; height: 100px">
</div>
<!-- 简单直接,针对性强 -->
- 内联式
<head>
<style>
选择器 {
width: 100px;
height: 100px;
}
</style>
</head>
<!-- 解耦合了,可读性强 -->
- 外联式
/* index.css */
选择器 {
width: 100px;
height: 100px;
}
/* 适合团队高效率开发, 耦合性低, 复用性强 */
<!-- index.html -->
<link rel='stylesheet' type='text/css' href='./index.css'>
三.三种引入"优先级"分析
1.没有优先级
2.不同的属性样式协同操作,相同的样式采用覆盖机制,选择逻辑最下方的
3.行间式一定是逻辑最下方的样式
四.文本样式
/*字体样式*/
.box {
/*字族*/ font-family: "STSong", "微软雅黑";
/*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;
/*缩进*/text-indent: 2em;
/*1em相当于一个字的宽度*/
}
a {
/*取消划线*/
text-decoration: none;
}
长度单位:px|em|rem|cm|mm|vw|vh|in
颜色:rgb(0,255,189)|rgb(0,255,189,0.5)|red|#000000~#FFFFFF
五.基础选择器
选择器:css连接html标签的桥梁,建立连接后就可以控制标签样式
* | div | . | #
标签: 一般用于最内层样式修饰
类:使用范围最广,布局的主力军
id:唯一标识的布局,不能重复
优先级:!important> id >类[属性] >标签> 通配 (优先级:同一标签同一属性)
<style>span{font-size:20px!important;}</style>(尽量不要使用!important)
组合选择器 权重(同类型个数比较)
伪类选择器
六.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*/
}
