CSS-学习笔记
id和class选择器
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。类选择器以一个点"."号显示
层叠次序 1、浏览器缺省设置 2、外部样式表 3、内部样式表（位于<head>标签内部）4、内联样式（在HTML元素内部）
当使用简写属性时，顺序为body {background:background-color background-image background-repeat background-attachment background-position}
CSS文本属性：color direction（文本方向） letter-spacing（字符间距） lin-height（设置行高） text-align（对齐文本） text-decoration（向文本添加修饰） text-indent（缩进元素中文本的首行 text-shadow（设置文本阴影） text-transform（控制元素中的字母） vertical-align（设置元素的垂直对齐） white-space（设置元素中空白的处理方式） word-spacing （设置字间距）
在计算机屏幕上，sans-serif字体被认为是比serif字体容易阅读
为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。
em的尺寸单位由W3C建议。1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em
CSS伪类：
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
CSS Positioning定位
Static-没有定位 Fixed-相对浏览器窗口是固定位置 Relative--相对正常位置 absolute--相对于最近的已定位父元素
下拉菜单： dropdown{} dropdown-content{}
.dropdown:hover .dropdown-content {
display: block;
}
HTML 部分：
我们可以使用任何的 HTM，元素来打开下拉菜单，如：<span>, 或 a <button> 元素。
使用容器元素 (如： <div>) 来创建下拉菜单的内容，并放在任何你想放的位置上。
使用 <div> 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。
CSS 部分：
.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。
.dropdown-content 类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。 注意 min-width 的值设置为 160px。你可以随意修改它。 注意: 如果你想设置下拉内容与下拉按钮的宽带一致，可设置 width 为 100% ( overflow:auto 设置可以在小尺寸屏幕上滚动)。
我们使用 box-shadow 属性让下拉菜单看起来像一个"卡片"。
:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。
嵌套标签及下拉菜单
框模型：Margin - 清除边框区域。Margin没有背景颜色，它是完全透明 Border - 边框周围的填充和内容。边框是受到盒子的背景颜色影响 Padding - 清除内容周围的区域。会受到框中填充的背景颜色影响 Content - 盒子的内容，显示文本和图像
属性和值得选择器 [title~=hello] {color:blue;} [lang|=en] {color:blue;}
属性选择器样式无需使用class或id的形式: input[type="text"] input[type="button"]