css学习笔记

css元素选择器
id       #id名
class   .class名
通用选择器（*）选择页面上的所有的 HTML 元素。

有三种插入样式表的方法：
外部 CSS    页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用
                  <link rel="stylesheet" type="text/css" href="mystyle.css">
内部 CSS     head 部分的 <style> 元素中进行定义。
行内 CSS     style 属性添加到相关元素。

层叠”为新的“虚拟”样式表，其中第一优先级最高：
1.行内样式（在 HTML 元素中）
2.外部和内部样式表（在 head 部分）
3.浏览器默认样式
因此，行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式

通过 CSS，颜色通常由以下方式指定：
有效的颜色名称 - 比如 "red"
十六进制值 - 比如 "#ff0000"
RGB 值 - 比如 "rgb(255,0,0)"

不透明度 / 透明度
opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明：

background 背景

background-image 属性指定用作元素背景的图像。
默认情况下，图像会重复，以覆盖整个元素。
例如：body {
              background-image: url("paper.gif");
          }
如果上面的图像仅在水平方向重复 (background-repeat: repeat-x;)，则背景看起来会更好：
如需垂直重复图像，请设置 background-repeat: repeat-y;
background-repeat: no-repeat 属性还可指定只显示一次背景图像
background-position 属性用于指定背景图像的位置，例如：background-position: right top;
 指定应该固定背景图像：background-attachment: fixed;  
指定背景图像应随页面的其余部分一起滚动：background-attachment: scroll;
使用简写属性在一条声明中设置背景属性：
body {
  background: #ffffff url("tree.png") no-repeat right top;
}
在使用简写属性时，属性值的顺序为：
background-color
background-image
background-repeat
background-attachment
background-position
属性值之一缺失并不要紧，只要按照此顺序设置其他值即可。

CSS 边框样式
border-style 属性指定要显示的边框类型。
允许以下值：
dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
groove - 定义 3D 坡口边框。效果取决于 border-color 值
ridge - 定义 3D 脊线边框。效果取决于 border-color 值
inset - 定义 3D inset 边框。效果取决于 border-color 值
outset - 定义 3D outset 边框。效果取决于 border-color 值
none - 定义无边框
hidden - 定义隐藏边框
border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。
border-width 属性指定四个边框的宽度。可以设置一到四个值（用于上边框、右边框、下边框和左边框）
border-color 属性用于设置四个边框的颜色。
如果未设置 border-color，则它将继承元素的颜色。
可以设置一到四个值（用于上边框、右边框、下边框和左边框）
border 属性是以下各个边框属性的简写属性：
border-width
border-style（必需）
border-color
例：
p {
  border: 5px solid red;
}
border-radius 属性用于向元素添加圆角边框：

CSS 外边距
CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间
Margin - 单独的边，CSS 拥有用于为元素的每一侧指定外边距的属性：
margin-top           margin-right
margin-bottom     margin-left
 margin 属性设置为 auto，以使元素在其容器中水平居中

CSS 内边距
CSS padding 属性用于在任何定义的边界内的元素内容周围生成空间
Padding - 单独的边
CSS 拥有用于为元素的每一侧指定内边距的属性：
padding-top           padding-right
padding-bottom     padding-left
padding 属性是以下各内边距属性的简写属性：
padding-top  padding-right   padding-bottom   padding-left
例如：padding: 25px 50px 75px 100px;

轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素。

CSS 拥有如下轮廓属性：

outline-style
outline-color
outline-width
outline-offset
outline
注意：轮廓与边框不同！不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。
同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。

outline-style 属性指定轮廓的样式，并可设置如下值：
dotted - 定义点状的轮廓。
dashed - 定义虚线的轮廓。
solid - 定义实线的轮廓。
double - 定义双线的轮廓。
groove - 定义 3D 凹槽轮廓。
ridge - 定义 3D 凸槽轮廓。
inset - 定义 3D 凹边轮廓。
outset - 定义 3D 凸边轮廓。
none - 定义无轮廓。
hidden - 定义隐藏的轮廓。
outline-width 属性指定轮廓的宽度，并可设置如下值之一：
thin（通常为 1px）
medium（通常为 3px）
thick （通常为 5px）
特定尺寸（以 px、pt、cm、em 计）
outline-color 属性用于设置轮廓的颜色。
text-transform 属性用于指定文本中的大写和小写字母。
text-indent 属性用于指定文本第一行的缩进
letter-spacing 属性用于指定文本中字符之间的间距
line-height 属性用于指定行之间的间距
word-spacing 属性用于指定文本中单词之间的间距
white-space 属性指定元素内部空白的处理方式。
text-shadow 属性为文本添加阴影。
font-size 属性设置文本的大小。建议使用 em 尺寸单位
四种链接状态分别是：
a:link - 正常的，未访问的链接
a:visited - 用户访问过的链接
a:hover - 用户将鼠标悬停在链接上时
a:active - 链接被点击时