分析w3c架构:
一 架构分析
页面=>div的层级结构 =>具有采用哪些功能标签显示内容
结构层 > 位置层(布局层) > 内容层
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>架构分析</title>
</head>
<body>
<div class="wraper">
<div class="header"></div>
<div class="nav"></div>
<div class="mian">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</div>
<!-- box架构 -->
<!-- .box>(h2+p*2+h3) -->
<div class="box">
<h2></h2>
<p></p>
<p></p>
<h3></h3>
</div>
<!-- .img-box架构 -->
<div class="img-box">
<img src="" alt="">
<div class="text">
<h2></h2>
<p></p>
<p></p>
</div>
</div>
</body>
</html>
css三种引入:
三 三种引入"优先级"分析:
1. 没有优先级
2.不同的属性样式协同操作,相同的样式采用覆盖机制,悬着逻辑最下方的
3.行间式一定是逻辑最下方的
行间式: 简单直接,针对性强(js操作样式都是行间式)
<div style=" 100px;height: 110px">
</div>
内联式 :解耦合了,可读性强
<head>
<style>
选择器{
100px;
height:100px;
}
</style>
</head>
外联式: 适合团队高效率开发,耦合性低,复用性强
/* index.css */
选择器{
100px;
height:100px;
}
<!-- index.html -->
<link rel="stylesheet" href="./02.css">
举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css三种引入</title>
<!-- 内联式 -->
<style type="text/css">
/* css注释 */
/* 选择器 p|作用域{}|样式块 */
p{
150px;
height: 156px;
}
</style>
<!-- 外联式 -->
<!-- 要讲css文件与该html文件建立练习 =>link -->
<!-- 相对路径(目标文件相对于本文件的位置 ./当前路径 ../上一层路径)|绝对路径 -->
<link rel="stylesheet" href="./02.css">
</head>
<body>
<!-- css:层级样式表 完成页面布局 -->
<!-- 组成部分:选择器 作用域 样式块 -->
<!-- 1.行间式 -->
<div style="color: red">一段话,将要被css处理</div>
<!--
1.书写在标签的style全局属性中
2.样式格式为 => key: value(单位)
3.以;隔开多个样式
4.最后的;可以省略
-->
<!-- 宽 高 背景颜色 -->
<div style=" 200px; height: 200px;</div>
<!-- 2.内联式 -->
<!--
1.样式书写在head标签内的style标签中
2.样式格式为 => 选择器 { 样式块 }
3.样式块 => key : value(单位)
4.以;隔开多个样式
5.最后的;可以省略
-->
<p></p>
<!-- 3.外联式 -->
<!--
1. 样式书写在外部css文件中,不需要写任何标签
2.样式格式为 => 选择器 { 样式块 }
3.样式块 => key : value(单位)
4.以;隔开多个样式
5.最后的;可以省略
-->
<h3></h3>
</body>
</html>
三个基础选择器:
基础选择器:
/*优先级：id选择器 > 类选择器 > 标签选择器 > 通配选择器*/
标签:一般用于最内层样式修饰
类:使用范围最广,布局的主力军
id:唯一标识的布局,不能重复
举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<style type="text/css">
/*div => 标签名 => 标签选择器： 开发过程中尽可能少的运用，运用范围为最内层的显示层*/
/*dd => class名 => 类选择器： 布局的主力军*/
/* d => id 名 => id选择器： id一定是唯一的*/
/* * => 通配选择器 => html,body,body下所有用于显示内容的标签*/
/* *{
border: 1px solid black
}*/
/*三种选择器有优先级 */
div{
200px;
height: 200px;
background-color: red;
}
/*类选择器：.类名{}*/
.dd{
background-color: orange;
}
/*id 选择器： #id名{}*/
#d{
background-color: green;
}
/*优先级：id选择器 > 类选择器 > 标签选择器 > 通配选择器*/
/*作用范围越精确，优先级越高*/
</style>
<style type="text/css">
/*多类名:类名与类名之间不能拥有任何符号隔断*/
.div.red{
background-color: red;
}
</style>
</head>
<body>
<!-- ****** -->
<!-- 选择器：css选择html标签的一个工具 => 将css与html建立起来联系，那么css就可以控制html样式 -->
<!-- 选择器其实就是给html标签起名字 -->
<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>
长度单位与颜色:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>长度与颜色</title>
<style type="text/css">
.div{
/*px mm cm in em vw vh*/
110px;
height: 200px;
/*颜色单词|rgb()|rgba()|#六位十六位进制数*/
/*rgb(255,0,255) 颜色分布度 不带透明度的*/
/*rgba(255,0,255,0.5) 带透明度*/
/*#abc #abcdef*/
background-color: #fb0;
}
</style>
</head>
<body>
<div class="div"></div>
</body>
</html>
文本样式:
举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本样式操作</title>
<style type="text/css">
.box{
200px;
height: 200px;
background-color: orange;
}
/*字体样式*/
.box{
400px;
/*字族*/
/*STSong作为首选字体,微软雅黑作为备用字体*/
font-family: "STSong","微软雅黑"
}
.box.uu{
/*字体大小*/
font-size: 40px;
/*字重100~900 共九个*/
font-weight: 900;
/*风格 none清除系统字体风格*/
font-style: none;
/*行高:某段文本在自身行高中垂直居中显示=> 文本垂直居中*/
line-height: 200px;
/*字体整体设置*/
/*字重 风格 大小/行高 字族 (风格可以省略)*/
font:100 normal 60px/200px "STHeiti","微软雅黑";
}
i{
/*normal清除系统字体风格*/
font-style: normal;
}
</style>
<style type="text/css">
.wrap{
200px;
height: 100px;
background-color: yellow;
}
/*文本样式*/
.w1{
/*换行方式*/
word-break: break-all;
}
.w2{
500px;
/*水平居中:left|center|right*/
text-align: center;
/*字划线:overline|line-through|underline*/
text-decoration: overline;
/*字间距*/
letter-spacing: 2px;
/*词间距*/
word-spacing: 5px;
/*缩进*/
/*1em相当于一个字的宽度*/
text-indent: 2em;
}
</style>
</head>
<body>
<div class="box uu">普通文本</div>
<i>i的文本</i>
<hr>
<div class="wrap w1">一二三 一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三一二三</div>
<hr>
<div class="w2"> hello word hello world</div>
</body>
</html>
display:
<!-- 自定义标签display默认值为inline -->
<!-- inline:不支持宽高,宽高由内容撑开,只能嵌套inline标签,同行显示 -->
<!-- block:支持所有css样式,默认有宽高(自定义后取自定义值),能嵌套所有标签,换行显示 -->
<!-- inline-block:支持所有css样式,默认有宽高(自定义后取自定义值),能嵌套所有标签,换行显示 -->
<!-- 注: 具有inline显示方式的标签,当一行显示不下,会自动换行 -->
举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
80px;
height: 40px;
background-color: orange
}
.box{
/*block:块级标签,独占一行,支持所有css样式*/
/*display:block;*/
/*inline: 内联(行级)标签,同行显示,不支持宽高*/
/*display:inline;*/
/*inline-block: 内联块标签,同行显示,支持所有css样式*/
display: inline-block;
/*标签的嵌套规则*/
/*1. block可以嵌套所有显示类型标签,div|h1~h6|p
注释:hn和p属于文本类型标签,所以一般只嵌套inline标签*/
/*2.inline标签只能嵌套inline标签,span|i|b|sup|sub|ins*/
/*3.inline-block可以嵌套其他类型标签,但是不建议签约任意类型标签 img|input*/
}
.b1{
height: 110px;
}
.b2{
height: 50px;
}
.b3{
height: 200px;
}
.box{
/*文本线基线对齐*/
vertical-align: baseline;
}
</style>
</head>
<body>
<div class="box b1">1234</div>
<div class="box b2">456
<!-- 嵌套 -->
<span>783455</span>
</div>
<div class="box b3">895 124 789 345</div>
</body>
</html>