学习html5的第五天课堂笔记

1.选择器
1）基本选择器
2）层次选择器
3）属性选择器
.first[name]
4）伪类选择器
:hover
:first-child
:last-child
:nth-child
:nth-last-child
5）伪元素选择器
::before
::after
::first-letter
::first-line

---

2.css层叠
1）优先级
A.!important
B.选择器权重（特性值）
1000 规则应用在了style属性中
100 id选择器
10 类选择器、伪类选择器属性选择器
1 元素选择器、伪元素选择器
C.顺序：权重一样时，写在后面的优先级高

2）继承：
规则的继承，可以继承（inherit）的规则有
font-*
text-*
list-*
color
不可被继承(initial)：
background-*
border-*
margin-*
padding-*
不设置（unset）
3）单位：颜色
1.关键字 blaack
2.十六进制 #000000
3.rgb() rgb(0,0,0)
4.rgba() rgba(0,0,0,0.4)
长度
1.绝对单位:px,cm,mm,in
2.相对单位:
em—相对于当前元素的字体大小值。1em = 18px
rem—相对于html元素的字体大小值。1rem = 14px

---

3.字体规则
css语法->选择器->规则
—字体规则
—列表规则
—盒子规则
—animate
1)color
2)font-family
A.通用字体（英文）：serif、sans-serif、monospace、cursive、fantasy
B.常用字体（中文）：Microsoft YaHei、微软雅黑、宋体
C.应用规则（字体栈）
html{
font-size:14px;
font-family:”Microsoft YaHei”,”宋体”,”seirf”
}
D.webfont
a.下载字体:
ttf,woff,svg,eot
b.在css中定义字体
@font-face{
font-family:’my-font’,
src:url(‘../fonts/myfonts.ttf’),url(‘../fonts/myfont.woff’)
}
c.在定义css中使用该字体
html{
font-family:’myfont’,serif;
}
字体图标：iconfont,阿里巴巴,font-awesome
3)font-style
4)font-weight bold
5)line-height 行高
6)font速写形式
font:[font-style] 可选属性
[font-weight] 可选属性
font-size 必须填写的属性
[line-height] 可选属性
font-family 必须填写的属性
字体大小和行高同事出现的语法：14px/2 即 font-size:14px;
line-height:2em;
font:14px “微软雅黑”,”宋体”；
7)text-intent
8)text-align
9)text-trnsform
10)text-decoration
text-decoration-style 样式(solid,dashed,dotted,double)
text-decoratin-color 颜色
text-decoration-line 位置
11)text-shadow
12)cursor pointer
13)outline 外边框

---

4.列表样式
list-style-image 列表图标 url()
list-style-position 列表图标位置
list-style-type 列表图类型 circle

速写形式：list-style:none
:circle inside

---

5.盒子样式
A.盒子模型：所有的块元素都可以理解为盒子模型，例如div p
特性：
外边距：margin 外边距盒子距离其他盒子的空间
边框：border 盒子边框
内边距：padding 盒子边框距离内容的空间
元素内容：content 盒子的内容，用于存放子元素或内容
1)传统盒子
box-sizing:content-box;
width = content
width = 内容的宽度
内容区：width
占有面积：width + padding + border
盒子所在空间=盒子内容所在空间

2)边框盒子
box-sizing:border-box;
width = border + padding + 内容
width = border以内

B.边框(border)
border-top———–上边框
border-top-style
border-top-width
border-top-color
border-right———右边框
border-right-style
border-right-width
border-right-color
border-bottom——–下边框 (多行编辑快捷键Ctrl+Shift+L)
border-bottom-style
border-bottom-width
border-bottom-color
border-left———-左边框
border-left-style
border-left-width
border-left-color

 border-redius 为元素指定圆角边框的半径    

 速写模式  border：1px solid #ccc;
 ------<呼吸灯>--------

C.盒子居中
margin:0 auto;

D.外边距(margin)
margin-top
margin-right
margin-bottom
margin-left

 margin:1px;--------------上下左右都为1px
 margin:5px 10px;---------上下5px,左右10px
 margin:1px 5px 10px;-----上1px,左右5px,下10px
 margin:1px 5px 10px 20px;-----上1px,右5px,下10px,左20px

E.内边距(padding)—–与margin有类似属性
padding-top
padding-right
padding-bottom
padding-left

F.背景(background)
background-color———背景色，从边框开始覆盖
background-image：url(path)
—图片默认从内容区域开始覆盖，但是可以通过bg-orgin修改
background-origin（设置背景图片的起始覆盖点）
border-box—–从边框覆盖
content-box—-从内容覆盖
background-repeat(图片重复方式)：
repeat———-x,y方向重复
repeat-x——–x方向重复
repeat-y——–y方向重复
no-repeat——-不重复
background-position(设定背景图片初始位置，相对于background-origin定义的位置)
关键字 center
坐标 20px 20px
background-size（设置背景的大小）
cover——–覆盖，覆盖最大的边。背景铺满整个屏幕
contain——包含，覆盖最小的边

---

面试题：
HTML、CSS的注释是什么样的？
CSS的导入有哪三种方式？linkhe 和 @import有什么区别？
选择器：选择同一个元素有几种方法？
行内元素、块级元素分别有哪些，各自的特点是什么？
H5新增标签有哪些？
浏览器内核？
网络字体的使用
盒子模型：

---

块级元素：

　　address - 地址 　　　　

　　blockquote - 块引用

　 center - 居中对齐块

　　dir - 目录列表

　　div - 常用块级容易，也是css layout的主要标签

　　dl - 定义列表

　　fieldset - form控制组

　　form - 交互表单

　　h1 - 大标题

　　h2 - 副标题

　　h3 - 3级标题

　　h4 - 4级标题

　　h5 - 5级标题

　　h6 - 6级标题

　　hr - 水平分隔线

　　isindex - input prompt

　　menu - 菜单列表

　　noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容

　　noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）

　　ol - 排序表单

　　p - 段落

　　pre - 格式化文本

　　table - 表格

　　ul - 非排序列表

行级元素：

　　a - 锚点

　　abbr - 缩写

　　acronym - 首字

　　b - 粗体(不推荐)

　　bdo - bidi override

　　big - 大字体

　　br - 换行

　　cite - 引用

　　code - 计算机代码(在引用源码的时候需要)

　　dfn - 定义字段

　　em - 强调

　　font - 字体设定(不推荐)

　　i - 斜体

　　img - 图片

　　input - 输入框

　　kbd - 定义键盘文本

　　label - 表格标签

　　q - 短引用

　　s - 中划线(不推荐)

　　samp - 定义范例计算机代码

　　select - 项目选择

　　small - 小字体文本

　　span - 常用内联容器，定义文本内区块

　　strike - 中划线

　　strong - 粗体强调

　　sub - 下标

　　sup - 上标

　　textarea - 多行文本输入框

　　tt - 电传文本

　　u - 下划线

空元素，没有内容的 HTML 元素被称为空元素：

　　
- 定义换行

　　

---

- 分割线

　　

　　

---

link 和 @import 的区别是？

引用CSS的两种方式：

1.link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

2.link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

3.link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

4.link支持使用Javascript控制DOM去改变样式；而@import不支持。