拉森火山国家公园
拉森火山国家公园是位于。。。
气候
因为拉森火山国家公园。。。
第二章：CSS基础（css基础知识笔记）
第二章：CSS 基础
2.1 CSS简介
Cascading Style Sheets
用来定义页面元素的样式
设置字体和颜色
设置位置和大小
添加动画效果
h1{ color:white; font-size:14px; }
选择器（Selector） { 属性（Property）：属性值（Value） }
选择器：选中要给那些元素定义样式
eg：选择器是h1，说明要给h1标签定义样式
属性：给元素设置某个属性
eg：color是颜色属性
属性值
eg：while：白色
声明（Declaration）
声明=属性+属性值
声明块=花括号+多条声明
规则=选择器+声明块
在页面中使用CSS
外链：把CSS写在一个单独的文件里边，然后使用link标签把它引入页面中
推荐使用第一种方法，更利于代码的维护
嵌入：直接把样式写在一个style标签里
内联：直接把一个元素的样式写在这个元素的style属性里
Example Content
一个完整的页面
这个代码包含一个h1标签和一个p标签
Web框架的架构模式探讨
在写干货之前，我想先探讨两个问题，模式的局限性？模式有什么用？
代码风格：编程风格
每条声明写一行 两条规则之间空一行
调试CSS：开发者工具
2.2基础选择器
CSS：Cascading Style Sheets
用来定义页面元素的样式
选择器Selector
找出页面中的元素，以便给他们设置样式
使用多种方式选择元素
按照标签名、类名或id
按照属性
按照DOM树中的位置
通配选择器“ * ”（是一个星号）：可以匹配页面中所有元素
This is heading
this is some paragraph.
标签选择器：通过标签名选中一个元素。
h1：一级标题；
p：段落
This is heading
this is some paragraph.
id选择器：通过id属性选择元素
！注意：id的值在整个页面中必须是唯一的
HTML5 文档
类选择器：通过Class属性来选择元素
eg：li的class=done，所以可以通过.done选中这个元素
id不同，class的值在页面中可以出现多次，把有相同样式的标签起相同class值，然后通过类选择器定义样式
Todo List
- Learn HTML
- Learn CSS
- Learn JavaScript
属性选择器：选择元素
eg：input的一个属性是disabled，可以通过input[disabled]拥有disabled这个属性的input。
根据属性值选中元素
input[type=“password”]：type的值是password的input元素
伪类（pseudo-classes）
不基于标签和属性定位元素，通过状态或所属的DOM结构来选择元素
几种伪类
动态伪类：根据元素所处的状态来选择元素的。eg：链接；
a: link:正常链接
a: visited: 访问过的链接；
a: hover :鼠标放上去之后的链接；
a: active: 鼠标按下这个链接之后的状态；
点击文本输入框，变成focus状态。通过 : focus 设置这种样式下的状态。
结构性伪类：通过在DOM树中所处位置来选择元素
"li:first-child"选中第一个元素
"li:last-child"选中最后一个元素
电影票房排行
- 阿凡达
- 泰坦尼克号
- 星球大战：原力觉醒
- 复仇者联盟3
组合器(Combinators)
第一种：选择器相加
最少3个字符
其他种类：
选择器组：多个相同规则的选择器，可合为一组
用逗号分隔开，就可以形成一个选择器组
body, h1, h2, h3, h4, h5, h6, ul, ol, li { margin: 0; padding: 0; } [type="checkbox"],[type="radio"] { box-sizing:border-box; padding: 0; }
2.3设置字体
字体font-family：通过font-family属性可以设置字体，这个属性值是一个字体列表。用逗号隔开。
!注意：用户的设备上可能没有那么多字体，所以可以多设置几种字体，浏览器会选择设备上有的字体展示
serif：字体族，某一类字体，浏览器可以从设备已有的字体中选择一个属于该类的字体进行展示。
CSS中用5种通用字体
衬线体：笔画末端有装饰
无衬线体：线条简单无装饰
手写体：线条模仿手写体
fantasy：设计感强，较夸张
等宽字体：每个字符的宽度都一样，所有的中文都是等宽字体
卡尔斯巴德洞窟
卡尔斯巴德洞窟。。。
font-family使用建议\
字体列表最后写上通用字体族，确保实际展示出来的风格是想要的
若需要显示中文和英文使用不同的字体，需要把英文字体放在中文字体前面。
中文字体一般包含英文字体字符;
中文字体放前面的话，所有字体都是以中文字体展示；
英文字体放前面，显示中文时，英文字体无这个中文字符，就会按照中文字体字符显示。
使用Web Fonts：使用一些特殊的字体，用户设备上没有，可以使用Web字体
用@font-face声明web字体
* 通过font-family指定字体名字 * src指定字体的url和格式
使用web字体时，只需要指定它的名字即可。浏览器会通过URL下载字体并展示。
！注意：中文的字体文件较大，需使用字体处理工具。把页面上使用到的字符提取成小的字体文件，再使用。
Web fonts are awesome!
Web fonts are a CSS feature...
font-size：设置文字的字号
关键字
small、medium、large
长度
px、em
百分数
相对于父元素字体大小进行计算
2em是父级字符大小的两倍
.note，80%：20*80%=16px
Notes:Web fonts ... With this in mind, let's build ...A web font example
font-style：设置文字是否为斜体
它的默认值是normal
斜体：将normal设置为italic即可
Normal Text
Italic Text
font-weight：文字粗细，支持100到900九种字重。
* 数字表示 * normal和bold表示
！注意：大部分字体可能只支持normal和bold两种字重
当字体不支持字重时，会以能支持的最接近的字重来显示。
- 锦瑟无端五十弦（100）
- 锦瑟无端五十弦（200）
- 锦瑟无端五十弦（300）
- 锦瑟无端五十弦（400-normal）
- 锦瑟无端五十弦（500）
- 锦瑟无端五十弦（600）
- 锦瑟无端五十弦（700-bold）
- 锦瑟无端五十弦（800）
- 锦瑟无端五十弦（900）
line-height：可设置行间距，表示两行文字基准线之间的距离
当使用没有单位的数字来表示行高时，实际行高是这个数字*字体大小。
As we looked at in ...Font families recap
font：把字体的属性一起设置
font顺序：style weight size/height family
除了字号和字体，其他属性也可不指定
font：style weight size/height family h1 { font: bold 14px/1.7 Helvetica, sans-serif; } p { font: 14px serif; }
2.4设置文字样式
text-align
设置文字在文本里的对齐方式
left：左对齐
center：居中对齐
right：右对齐
justify：分散对齐：
分散对齐：两端文字完全对齐，分散对齐会调整两端的空格间距使文字两端对齐
！注意：下面这些的
spacing
letter-spacing：字母间距（默认是0）单位是px
word-spacing：单词间距（默认是0）单位是px
text-indent：设置首行文字的缩进（默认是0）单位是px
text-decoration：文字修饰（默认是none）
underline：下划线
line-through：删除线
overline：上划线
white-space：控制换行和空格的行为
normal：空格和换行会被合并
nowrap：这行文字永远不会换行
pre：保留文本中的空格和换行不做任何合并
pre-wrap：和pre类似，当一行内显示不下时会自动折行。
pre-line：合并空格，保留换行。
text-shadow：设置阴影
text-shadow：color offset-x offset-y blur-radius
颜色 在x方向上的偏移 在y方向上的偏移 阴影的模糊程度
2.5盒模型基础:css布局
content：盒子里内容的大小
padding：内容和边框的间距
border：边框
margin：此盒和其他盒的距离
width
指定content box（内容区域）的宽度
取值为长度、百分数、auto
auto由浏览器根据内容和其它属性确定
百分数相对于容器的content box宽度
Height
指定content box高度
取值为长度、百分数、auto
auto由子元素的高度加起来得到的
百分数相对于容器的content box高度计算
！注意：当父容器也设置了明确的高度时，百分数才生效；
当父容器的高度是auto，子元素设置百分比的高度是无用的。
padding
指定元素四个方向的内边框
padding-top
padding-right
padding-left
padding-bottom
默认值都是0
可分别设置，也可通过padding一起设置四个方向上的内边距\
padding只有一个值时，四个方向都是这个值。
两个值：eg:10px 20px：上下是10px，左右是20px
四个值：上 右 下 左
百分数的padding相对父容器宽度
When one value is ...
When two value is ...
When three value is ...
When four value is ...
margin collapse
只会垂直方向上发生
负margin
当margin是负值时，两个元素会重叠起来。
box-sizing:border-box
宽度好高度是设置的内容区域的尺寸。
This is the ...
Length and ...
p：块级
style：行级
块级
行级
Block Level Box
Inline Level Box
不和其他盒子并列摆放
和其他行级盒子一起放在一行或拆开成多行
适用所有的盒模型属性
盒模型中的width、height不适用
块级元素
行级元素
生成块级盒子
生成行级盒子；内容分散在多个行盒（line box）中
body、article、div、main、section、h1- 6、p、ul、li等
span、em、strong、cite、code等
display：block
display：inline
display
block
块级盒子
inline
行级盒子
inline-block
本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
none
排版时完全被忽略
inline—block
An inline-block box is something... it won't be broken ... it won't break across two lines.
2.7盒子的效果
圆角 border-radius：圆角的半径
无法复制加载中的内容
20px：ABCD都是20px
20px 50px：A：20px B：50px C：50px D：20px
20px 30px 40px 50px：A：20px B：30px C：40px D：50px（顺时针转一圈）
20px / 50px：（x和y两个方向上的半径）
水平方向：20px
垂直方向：50px
30%（百分数）
水平方向：宽度的30%
垂直方向：高度的30%
给每个角的水平和垂直方向设置不同的值
background：设置盒子的背景
默认值
background-color：背景颜色
透明色
background-image：背景图片
url(/cat.png)
background-repeat：背景图是否重复
no-repeat；repeat（默认值）；repeat-x（水平方向重复）；repeat-y（垂直方向重复）；
background-position：背景图位置
默认值是0 0
background-size：背景图大小
可通过宽度和高度来制定
background-position
background-position：top 垂直方向是顶部；水平方向居中
background-position：left 垂直方向是居中；水平方向居左
background-position：center 垂直方向是居中；水平方向居中
background-position：bottom right 图片在右下角
background-position：20px 20px
Background-position：50% 50%
background-position：bottom 20px right 20px 图片距离右边缘和下边缘分别是20像素、20像素
CSS Sprites
- Cat
- Dog
- Lion
- Bird
- Fox
- Pig