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.行间式一定是逻辑最下方的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三种引入的优先级</title>
<!-- 三种可以同时存在,协同完成布局 -->
<!-- 三种之间没有优先级之说,谁在逻辑下方(后解释的)谁就起作用(样式覆盖机制) -->
<!-- 行间式一定是逻辑最下方的 -->
<!-- 内联 -->
<style type="text/css">
div{
width: 200px;
color: pink;
}
</style>
<!-- 外联 -->
<link rel="stylesheet" href="03.css">
</head>
<body>
<!-- 优先级:大家同时存在且操作同一对象同一属性,才会出现冲突,最终起作用的就是优先级高的 -->
<!-- 行间 -->
<div style="background-color: cyan; color: orange ">
你是个好人
</div>
</body>
</html>
四.选择器
一.基础选择器
* | div | . | #
<!-- 先建立一个用来试验选择器的 html 文件 -->
<!-- 04.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<link rel="stylesheet" href="./04.css">
</head>
<body>
<div></div>
<div class="dd"></div>
<div class="dd" id="d"></div>
<div class="div"></div>
<div class="div red r"></div>
<div class="div"></div>
</body>
</html>
<!-- ******* -->
<!-- 选择器: css 选择 html 标签的一个工具 => 将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 -->
<!-- 选择器就是给 html标签起名字 -->
1.通配选择器
/* * => 通配选择器 => html,body,body 下所有用于显示内容的标签 */
* {
border: 1px solid black;
}
2.标签选择器
/* div => 标签名 => 就是标签选择器 : 开发过程中尽可能少的运用,运用范围为最内层的显示层 */
div {
width: 200px;
height: 200px;
background-color: red;
}
匹配文档中所有与标签名匹配的标签: 如 div{}会匹配文档中全部 div,span{}会匹配文档中所有 span
3.类选择器
/* dd => class名 => 类选择器 : 布局的主力军 */
.dd{
background-color: orange;
}
匹配文档中所有拥有class属性且属性值为dd的标签:如<sup class="dd"></sup> <sub class="dd"></sub>均会被匹配
4.id 选择器:
/* d => id 名 => id 选择器 : id 一定要为唯一的*/
#d{
background-color: green;
}
匹配文档中所有拥有id属性且属性值为d的标签:如<div id="d"></div> <section id="d"></section>均会被匹配
五.文本样式
1.字体样式
- font-family: 字体族科, 多值用于备用, 以,隔开
font-family: "STSong", "Arial";
- font-size: 字体大小
- font-style: 字体风格 normal | italic | oblique
i {
/* 多用于normal清除系统字体风格 */
font-style: normal;
}
- font-weight: 字体重量 normal | bold | lighter | 100~900
- line-height: 行高
- font: 字重 风格 大小/行高 字族
2.文本样式
- color: 文本颜色
- text-align: 横向排列
left 居左 | center 居中 | right 居右
- vertical-align: 纵向排列
baseline: 将支持 valign 特性的对象的内容与基线对齐
sub: 垂直对齐文本的下标
super: 垂直对齐文本的上标
top: 将支持 valign 特性的对象的文本与对象顶端对齐
text-top: 将支持 valign 特性的对象的内容与对象顶端对齐
middle: 将支持 valign 特性的对象的文本与对象中部对齐
bottom: 将支持 valign 特性的对象内容与对象底端对齐
text-bottom:将支持 valign 特性的对象的文本与对象底端对齐
- text-indent: 字体缩进
- text-decoration: 字划线
a {
/*取消划线*/
text-decoration: none;
}
/* 多用于 a 标签去除下划线 */
- letter-spacing: 字间距
- word-spacing: 词间距
- word-break: 自动换行
normal: 默认换行规则
break-all: 允许在单词内换行
3.背景样式
- background-color: 颜色
- background-image: 图片
background-image: url(bg.png);
- background-repeat: 重复
repeat | no-repeat | repeat-x | repeat-y
- background-position: 定位
top | bottom | left | right | center
v_hint: 定位值可为方位词\百分比及固定值, 值个数默认为两位(水平/垂直), 一个值时垂直默认 center
- background-attachment: 滚动模式
scroll | fixed
v_eg: 父级设置属性, 子集内容超出父级范围
v_hint: 掌握基本属性
六. display
- block: 块级标签, 独占一行, 支持所有 css 样式
/* block可以嵌套所有显示类型标签, div | h1~h6 | p */
/* 注: hn 与 p 属于文本标签,所以一般只嵌套 inline 标签 */
box {
display: block;
}
- inline: 内联(行级)标签, 同行显示, 不支持宽高
/* inline标签只能嵌套 inline 标签, span | i| b | sup | sub | ins */
box {
display: inline;
}
- inline-block: 内联块标签, 同行显示
/* inline-block 可以嵌套其他类型标签,但不建议嵌套任意类型标签 img | input */
box {
display: inline-block;
}