HTML5语法基础学习笔记
1.行间样式
给单独的标签添加样式.
<div style="width:100px; height:100px; background-color:red;"></div>
优点：比较方便可以即时的添加属性。
缺点：修改属性非常麻烦、需要一个个去修改。
2.内联样式表
<style>
div{ <!--选择器跟{}符号 属性写在里面-->
}
</style>
优点：针对当前HTML文件有效。
缺点：多页面修改时繁琐困难。
3.外联样式表
<head>
<link rel="stylesheet" href="xx.css"/>
</head>
边框：
<style>
div{
width:400px;
height:400px;
border:1px solid red;
}
</style>
<!--
边框组成：
1、边框的粗细 1px;
2、边框的样式 solid(实线); dashed（虚线）;
3、边框的颜色 red;
边框的方向:
top right bottom left
上右下左 可以单独设置边框方向和属性
改变某一个方向边框的做法：
border-top-color:red;
border-top-style:
border-top-width:
边框的形状：非矩形
边框画三角形实例：
首先设置边框宽度，背景色跟背景一致(假如背景为白色)。
border:20px solid white
然后设置边框某一方向样式（设置TOP为向下三角形）颜色，为三角形颜色。
border-top-color:red;
以上为红色三角形。
设置某一方向样式颜色会生成方向相反的三角形。
-->
<body>
<div></div>
</body>
边框练习的步骤及需求.
1.先分析设计图的结构.
2.根据所分析的结构,进行结构编码.
3.根据所书写的结构,进行CSS编码.
4.利用PS工具,对设计图上的模块进行测量以及颜色的拾取.
5.样式添加.
background 背景
background-color 背景颜色
颜色英文关键字
RGB
十六进制
background-image 背景图
背景图默认铺满整个容器大小
background-repeat
背景是否重复
no-repeat
不重复
repeat-x;
X轴方向横向平铺
repeat-y;
Y轴方向纵向平铺
repeat；
X\Y都重复
background-position:X Y;
背景图位置
具体数值：
X轴：left right center
Y轴：top bottom center
当第二个Y轴属性值没有填写，默认居中。
background-attachment: fixed;
背景图是否滚蛋
fixed 固定在浏览器可视区域
scroll 跟随滚动条滚动
background
不分属性书写顺序的
颜色相关 图片相关
<!--内容：
<img src="url">这样的图片链接样式会撑开容器宽高
背景不会占用容器宽高 -->
切图：
1、头部区域（第一个块）切一张完整的图片
2、内容区域里的每一个小块需要有ICO并且还有背景颜色
文字样式：
font-weight 文字加粗
bold 加粗
normal 正常
font-style 文字倾斜
italic斜体
font-size 文字大小
font-family 字体
line-height 行高 文字在一行里面所占用的位置
height:400px;
line-height:400px;
当行高的值与容器高度一致时 文字会垂直居中显示
多行文字测量行高的方法：
1、确认文字大小
2、确认两行文字之间的空隙大小
3、空隙大小除以2，得出来的值就是每行文字的上下的空隙大小。
3.1当行高为奇数时，那么文字的上方要比下方少一个像素。
3.2当行高为偶数时，文字上下的空隙一致。
4.通过辅助线测量多行文字的行高。
文字的复合样式：
font:bold italic 26px/30px "微软雅黑";
font复合样式需要注意书写顺序
font: font-style | font-weight | font-size/line-height | font-family
文本设置：
color
文字颜色
text-align
文本对齐（显示）方式
left（默认值）
right（右边）
center（中间）
text-indent
首行缩进
em 是根据字体大小来计算的 不管文字怎么变
1em = 等于始终缩进当前文字的大小
text-decoration 文本修饰
underline 下划线
letter-spacing 10PX 文本间距10个像素
word-spacing 单词的间距（以空格判断文字是否为单词）
white-spacing 强制不换行
nowrap 不换行
normal 正常
测量文字大小时、最好是使用从上到下的方式去测量。（左右会有缝隙）
一个空格有多大？
宋体字体下文字大小的一半
1.模块的文字、单词间距、文字行高要与设计图统一
2.思考题：每一行的前方粉色带三角的区域如何实现
padding内距填充
边距样式
padding 内边距
padding-top 上边内边距
padding-right 右边内边距
padding-bottom 下边内边距
padding-left 右边内边距
padding 内填充
注意：设置padding后回撑大容器的大小
padding填充可以上右下左分别设置（按照顺时针方向）
四个方向顺序 top right bottom left
padding复合写法：
只有一个属性值时：4个方向都是一个值
设置两个属性值时： 第一个属性值设置的是上下两个方向
第二个属性值设置的是左右两个方向。
设置三个属性值时： 第一个属性值设置的是上边一个方向。
第二个属性值设置是左右两个方向。
第三个属性值设置的是下边一个方向。
margin 外边距
标签与标签之间的间隔（距离）
margin复合写法：
只有一个属性值时：4个方向都是一个值
设置两个属性值时： 第一个属性值设置的上下两个方向
第二个属性值设置的左右两个方向
设置三个属性值时： 第一个属性值设置的是上边一个方向
第二个属性值设置的是左右两个方向
第三个属性值设置的是下边一个方向
margin遗留的问题：
1.margin-top传递的问题
2.margin上下叠压
1.还使用margin,可以将某一个元素方向设置成预想的值。取最大margin值。
盒模型
盒子大小=border+padding+width/height
盒子宽度=左border+左padding+右padding+右border
盒子高度=上border+上padding+下padding+下border 盒模型的大小：
border（左右）+padding（左右）+width/height
margin不占盒子里大小
CSS常用标签
a 超链接
伪类 给元素添加特殊的效果
:link 未访问过的链接初始颜色
:visited 访问过后的链接颜色
:hover 鼠标移入（悬停）
:active 鼠标按下时链接的颜色
设置顺序 L、V、H、A
span标签区分样式
<header>（页眉）
主要用于页面头部的信息介绍，可用于板块头部
</header>
<nav>
导航 包含链接的一个列表
<nav><a href="#">链接</a><a href="#">链接</a></nav>
</nav>
<footer>
页脚 页面的底部和模块的底部
<footer>
<section>
页面的板块 用于划分页面上的不同区域或者划分文章里不同的节
<section>
<article>
用来在页面中表示一套结构完整且独立的内容部分
</article>
<aside>
元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组。以及
</aside>
<time>
用来表现时间或日期
</time>
常用标签
<h1>Logo</h1> 最大 权重最高
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6>标题</h6> 一层层走下来
<p>段落</p>
<strong>强调加粗</strong>
<em>强调斜体</em>
<ul>·无序列表</ul>
<ol>1.有序列表</ol>
<ul>
<li>ul的子集下一级标签只能是li</li>
</ul>
<ol>
<li>ol的子集下一级标签只能是li</li>
</ol>
<dl>自定义列表</dl>
<dl>
<dt>自定义列表title</dt>（DL标签对只允许有一个）
<dd>自定义列表的列表项（信息）</dd>（可以有多个）
</dl>
<mark>标记</mark>
特殊的单标签img
img 图片
img src="xx/xx.jpg"路径
标签样式初始化
css reset 原则
但凡是浏览器默认的样式，都不要使用
因为每个浏览器下标签的默认样式可能会不一致的情况（兼容性）。
人为的将所有样式全部统一（清楚），再根据实际情况（设计稿）进行设置
那些样式是需要重置的？？？
与盒模型相关的样式
border
margin
padding
标签特有的样式
ul>li
ol>li
h1,h2,h3,h4,h5,p,ul{
style...
}
群组选择器
书写原则：
用到什么标签就清楚所用标签的默认样式。
建议不要直接将所有标签全部加上。
不要将所有标签全部统一设置一致的reset,需根据标签默认样式特征来分类设置。
id选择器： 当前页面唯一使用的标识、类似身份证，不要写多个。
<div id="box"></div>
<style>
#box{}
</style>
类选择器：.id名称 可以是分段class姓名加在同一个
<div class="box bgc"></div>
<style>
.（box）class name{}
.bgc{}
</style>
标签选择器：当前页面上所有标签名为XXX的元素
div{}
群组选择器：用逗号分隔，被逗号分隔的元素（选择器）全部套用统一的样
式。
p,h1,div{}
包含选择器：我想找到box子级的div 目标父级元素 目标元素 空格-代表下一级（语法）
<style>
.box div{}
</style>
<div class="box">div1
<div>div2</div>
</div>
*通配符： 找到页面上符合规则的所有元素
body *{}
!!!不建议使用通配符
优先级 代码执行生效的顺序
选择器优先级:
style>id>class>类型选择>*
行间样式>id选择器>类选择器>标签选择器
行间样式 ￥1000
id选择器 ￥100
类选择器 ￥10
标签选择器 ￥1
价格越高权重越高
块元素：
1、默认独占一行
2、没有宽度时、默认撑满一行
3、支持所有CSS命令。
内嵌（内联、行内）元素的特征：
1、同排可以继续跟同类的标签
2、内容撑开宽度
3、不支持宽高
4、不支持上下的margin
5、代码换行被解析
块元素和内联元素转换
display:inline 显示为内联
使行块属性标签具备内联元素的特性
display:block 显示为块
使内联元素具备块属性标签的特性
display只是将标签转换为页面中显示的类型
display不会改变标签的本质（伪娘本体还是男性、只是暂时具备女性特征同理）
选择器的集体声明：
一次性选择多个标签，不同的标签之间用“，”分开。
比如
h1,h2,h3,h4,p,div{}
无论什么样的选择器:标签选择器,ID选择器,类选择器.只要是选择器,有公共的CSS代码就可以使用选择器的集体声明.
精简案例:
#header{font-size:14px; background:#ccc}
div{font-size:14px; width:960px;}
.blue{font-size:14px; color:#009;}
.h1{font-size:14px; font-weight:normal;}
可以精简font属性部分，写成以下：
#header,div,.blue,.h1{font-size:14px;}
#header{background:#ccc;}
div{width:960px;}
.blue{color:#009;}
.h1{font-weight:normal;}
【选择器的嵌套】
#div1 p a{color:#900;}/*意思是在ID为DIV1内的P标签的链接a标签的文字颜色是#900*/
这样好处不需要再单独为ID为DIV1内的P标签下面的a标签单独定义class或者id类，简化CSS代码。
