妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得⾮常的清楚，受益匪浅。先把HTML和CSS基础课程部分视频的学习笔记记录如下：
#PS基础
##前端需要的PS技能 - PS技能（前端需要）：切图、修图、测量 - PS⼯具： - 移动⼯具 - 矩形选框⼯具 - 裁切⼯具 - 吸管⼯具 - 横排⽂
字⼯具 - ⼿抓（快捷键：空格） - 缩放（快捷键：Ctrl + 和 Ctrl -） - 标尺（快捷键：Ctrl R，主要是拖出参考线。矩形区域选择的时候，
按住Ctrl，就能贴合参考线） - ⾃由变换（快捷键 Ctrl T） - 盖印可见图层（Ctrl Alt Shift E） - 储存为web格式（Ctrl Alt Shift S）
##图⽚格式 - PSD（源⽂件） - JPG、GIF、PNG（导出图） - JPG：不⽀持透明半透明，所有空⽩区域填充⽩⾊（⽹页中的⼤图、⾼清
图：体积⼤） - GIF：⽀持透明，不⽀持半透明（⽹页中的⼩图标、动态图⽚） - png8：⽀持透明，不⽀持半透明（⽹页中的⼩图标） -
png24：⽀持透明，也⽀持半透明（图像中存在半透明效果的图⽚）
##PSD测量注意事项 - ⽂字右⽅和下⽅会有1像素的默认间隙
#代码初识
html 超⽂本标记语⾔（结构）
CSS 层叠样式表（样式）
js javascript（⾏为）
⽂件编码格式与代码编码格式⼀致的时候，⽹页才不会出现乱码，才可以显⽰正常。
GB2312 中⽂简体标准
utf-8 国际标准
样式的位置：
⾏间样式
内部样式
外部样式表
##background
1background: {
2    url(bg.jpg) center top no-repeat gray fixed; }
等价于：
1#bg {
2background-image: url(bg.jpg); background-position: center top; background-repeat: no-repeat; background-color: gray; background-attachment: fixed; } ##border
border-top/right/bottom/left
solid dash dotted(IE6不⽀持)
padding
padding-top/right/bottom/left
内边距相当于给⼀个盒⼦加了填充厚度，会影响盒⼦⼤⼩
##margin
margin-top/right/bottom/left
上下外边距会叠压
⽗⼦级包含的时候，⼦级的margin top会传递给⽗级；（内边距替代外边距）
如果给⼀个盒⼦仅设置margin-left: auto，那么盒⼦会跑到最右边；如果设置margin-right: auto，那么盒⼦就会跑到最左边。同时设置margin-left和margin-right为auto，可以使盒⼦居中。
##盒模型和结构样式
盒⼦⼤⼩ = border + padding + width/height
盒⼦宽度 = 左border + 左padding + width + 右padding + 右border
盒⼦⾼度 = 上border + 上padding + height + 下padding + 下border
常见样式——结构
width 宽度
height 宽度
background 背景
border 边框
padding 内边距
margin 外边距
复合属性：⼀个属性多个属性值的命令
##常见⽂本设置
font: font-style font-weight font-size/line-height font-family;
font-size（⼀般为偶数，中⽂最⼩号12px）
font-family（中⽂默认宋体、西⽂默认是arial，可⽤逗号分隔多种字体）
color（英⽂、rgb、⼗六位进制⾊彩值）
line-height（⽂字是在⾏⾼的上下居中）
text-align
text-indent（⾸⾏缩进，⽤em缩进字符）
font-weight
font-style
text-decoration：underline、overline、line-through
letter-spacing
word-spacing（以空格为解析单位）
##img
注意写img的alt属性
把img放到⼀个块⾥⾯，默认img与该块的下边框有⼏个像素的间距。为了解决这个问题，可以为img添加样式display: block；但是这种解决⽅法有局限性。另外⼀种⽅法是给图⽚添加vertical-align: top；也可以。
##a标签
target=”_self”/”_blank”
在head中添加如下代码，可以让页⾯中所有的链接都在新页⾯中打开，其中base代表默认
<base target="_blank"/>
a标签的作⽤
链接（a标签中放链接）
下载（href的路径是⽂件路径）
锚点（a的href中放的是id）
##常见标签和SEO浅析
标题h标签
段落p标签
强调strong标签（粗体）
强调em标签（斜体）
span标签
有序列表ol标签
⽆序列表ul标签
列表项li
定义列表dl
定义列表标题dt
定义列表项dd
浅析SEO（搜索引擎优化）
部分⽅法： 1. 页⾯标签语义化 2. 使⽤对SEO有利的标签：h1/h2/h3/strong/em… 3. 提⾼页⾯关键词密度 4. 其他
SEM：搜索引擎营销；（包含SEO）
##基础选择符
id选择符 #
class选择符 .
类型选择符 p div a img等
组选择符 ⽤逗号，分隔
包含选择符 ⽤空格分隔
通配符 *
##选择符优先级
同级样式默认后者覆盖前者
样式优先级（级别问题，官⼤⼀级压死⼈；只看样式权重，与样式名称在html中的先后⽆关，只跟样式style中的先后顺序有关）类型选择符（1）
class选择符（10）
id选择符（100）
style⾏间样式（1000）
js动态修改⾏间样式
##a伪类详解
link 未访问（默认）
hover ⿏标悬停（⿏标划过）
active 链接激活（⿏标按下）
visited 访问过后（点击过后）
注意上⾯四者的书写顺序 a:link → a:visited → a:hover → a:active，这样在链接点击之后，a:hover和a:active的样式才不会被
a:visited的样式覆盖，仍然起效。
a伪类的应⽤：
1. 四个伪类全⽤（搜索引擎、新闻门户、⼩说⽹站）
2. ⼀般⽹站只⽤ a {} 和 a:hover {}
a伪类的兼容
IE6不⽀持a以外其他任何标签的伪类
IE6以上的浏览器⽀持标签的hover伪类
##标签默认值样式重置
1/* 默认样式重置（css reset） */
2body, p, h1, h2, h3, h4, h5, h6, dl, dd { margin: 0; font-size: 12px; /* font-family */ } ol, ul { list-style: none; padding: 0; margin: 0; } a { text-decoration: none; } ##标签基本特性和转换
内联、内嵌、⾏内属性标签 a、span、strong、em
默认同⾏可以继续跟同类型标签
内容撑开宽度
不⽀持宽⾼
不⽀持上下的margin和padding
代码换⾏被解析（如果内联元素在代码中换⾏了，那么在页⾯中，就会体现为内联元素之间的空隙）
块标签 p、div、h1~h6、ol、ul、dl
默认独占⼀⾏显⽰
没有宽度时，默认撑满⼀排
⽀持所有css命令
display: block; 显⽰为块
display: inline; 显⽰为内嵌
##inline-block的特性和应⽤
特性：
块在⼀⾏显⽰
⾏内属性标签⽀持宽⾼
没有宽度的时候，内容撑开宽度
问题：
代码换⾏被解析（代码中inline-block换⾏写，在页⾯中inline-block元素之间会有空隙）
IE6/7不⽀持块属性标签的inline-block
关于代码换⾏解析（页⾯中内联元素和inline-block元素之间的空隙）：
css鼠标点击样式
空隙为⼀个空格的⼤⼩，也就是页⾯上默认字号的⼀半。⽐如页⾯上默认字号为12px，那么它们之间的空隙就是6px。
inline-block的应⽤：分页导航
分析结构（div包⼀排a）
a标签⽀持宽⾼并在⼀排显⽰，因此要设置inline-block
有hover效果
当前页的页码上不能点
cursor指针样式（规定要显⽰的光标的类型）
cursor: pointer text move …
cursor: url(hand.cur), pointer; 如果前⾯图⽚没引⼊进来，就⽤后⾯的pointer
##前端规范
1. 所有标签的书写均为英⽂半⾓状态下的⼩写
2. id, class必须以字母开头
3. 所有标签必须闭合
4. html标签⽤tab键缩进
5. 属性值必须带引号
6. <!– html注释 –> 注意注释内容与横线之间要有空格
7. /* css注释 */ 注意星号与⽂字之间要有空格
8. ul, li/ ol, li/ dl, dt, dd拥有⽗⼦级关系的标签
9. p, dt, h标签，⾥⾯不能嵌套块属性标签
10. a标签不能嵌套a
11. 尽量不要⽤内联元素去嵌套块（例如：p标签中添加了h或者div块标签，⼀个p标签会被隔成两个。注意，这⾥指的是块标签。如果p
⾥⾯放了span，然后把span的样式设置了display: block;，p标签不会被隔成两个。）
##浮动的原理 left/right/none 以及清除浮动的各种⽅法
###浮动的定义
元素加了浮动，会脱离⽂档流，按照指定的⼀个⽅向移动，直到碰到⽗级的边界或者另外⼀个浮动元素停⽌。
1. 使块元素在⼀⾏显⽰
2. 使内嵌元素⽀持宽⾼
3. 在不设置宽度的时候宽度由内容撑开
4. 脱离⽂档流（⽂档流是⽂档中可显⽰对象在排列时所占⽤的位置）
5. 提升层级半层（只够挤进元素本⾝，元素⾥⾯的内容，如⽂字，图⽚等，还是会被挤出来）
clear left/right/both/none
clear控制元素的某个⽅向上不能有浮动元素
###清除浮动（撑开⽗级元素）
⽅法⼀、 给⽗级元素加⾼（问题：扩展性不好）
⽅法⼆、 给⽗级也加浮动（问题：页⾯中所有元素都加浮动，margin左右⾃动失效。Float’s Bad!）
⽅法三、 ⽤⽗级添加display: inline-block来清除浮动（问题：margin左右⾃动失效）
⽅法四、 在浮动元素下边加上<div class=”clear”></div>空标签清浮动（问题：IE6最⼩⾼度19px；解决后IE6下还有2px偏差）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。