《CSS入门经典》学习笔记

第I部分  基础知识

第1章  层叠样式表简介

第2章  基本概念
content:在文档中放入字符串
/* */：注释
<link rel='stylesheet' type='text/css' href='stylesheet.css' />:通过link元素将CSS链接到文档，rel:外部文档与调用文档之间的关系，href:超链接引用，type:MIME类型
@import('/path/to/stylesheet.css'):在一个样式表中包含另一个样式表，必须在样式表顶部
@import url(path/to/cssdoc.css);:在文档中导入样式表

第3章  选择器
.planet: 类选择器，以.开头
div.planet: 类选择器附加类型选择器
<div class='planet jupiter': 元素被分配多个类名
div.planet.jupiter: 引用拥有多个类名的元素
#jupiter: id选择器，以#开头
div#jupiter: id选择器附加类型选择器
*: 通用选择器，应用于文档中所有元素
div#body span.inline-code: 后代选择器，id为body的div元素下的类名为inline-code的span元素
p > span.inline-code: 直接子选择器，p元素的类名为inline-code的span子元素
div#heading + div#body: 相邻选择器，与id为heading的div元素相邻的id为body的div元素
img[alt]: 属性选择器，存在alt属性的img元素
input[type="text"]: 基于属性值的选择器，type属性为text的input元素
a[href^="ftp://"]:基于属性值的选择器，href属性值以ftp://开头的a元素
a[href$=".html"]: href属性值以.html结尾的a元素
a[href*=".php"]: href属性值中包含.php的a元素
p:first-letter: 伪元素，p元素的首字母
p:first-line: 伪元素，p元素的首行
:link: 伪类，未访问的超链接
:visited: 已访问的超链接
:hover: 鼠标指针停留在该元素上
:active: 正在单击的元素
a:link: 未访问的a元素
p:first-chile: 结构化伪类，p元素的第一个子元素

第4章  层叠和继承
计算选择器的针对性：
a: 通过style属性应用时a=1
b: 选择器中id属性的数量
c: 选择器中属性、伪类和类名的数量
d: 选择器中元素名的数量
选择器的针对性=abcd,数值越大，优先级越高
background: lightblue !important;: 声明优先于其他任何声明，包括style属性

第II部分  属性

第5章  文本属性
letter-spacing: 10px;: 将字母间距设为10px,默认为normal,其值为0，也可以设为负值
word-spacing: 25px;: 将单词间距设为25px,默认为normal,其值为0，也可以设为负值
text-indent: 25px;: 段落首行缩进25px,默认为0，也可以设为负值
text-align: left;: 左对齐，默认为left,right为右对齐，center为居中对齐，justify为两端对齐
text-decoration: underline;: 设置下划线，默认为none,overline为上划线，line-through为中划线，blink为闪烁
text-transform: capitalize;: 将每个单词的首字母变成大写，默认为none,uppercase为每个字母大写，lowercase为每个字母小写
white-space: pre;: 将源代码中的空格和换行符保留下来，默认为normal,nowrap: 阻止文本溢出到下一行，强制文本在一行中输出

第6章  字体属性
font-family: "Times New Roman"; : 设置字体
通用字体族：
通用字体        相关字体
serif        Times, Times New Roman
sans-serif    Helvetica, Arial
monospace    Courier, Courier New
cursive        Zapf-Chancery
fantasy        Western
font-style: italic;: 设置为斜体，默认为normal, oblique为倾斜
font-variant: samll-caps;: 使小写字母变成尺寸稍小的大写字母，默认为normal
font-weight: bold;: 设置为粗体，默认为normal
font-size: medium;: 字体大小设置为medium, 也可以是12px,或75%等
绝对字体尺寸与标题大小(比例因数1.2)：
绝对取值        xx-small    x-small        small        medium        large        x-large        xx-large
HTML标题    n/a        <h6>        <h5>        <h4>        <h3>        <h2>        <h1>
font: italic small-caps bold 1.5em/3em sans-serif;: font简写属性，设置为斜体、小型大写字母、粗体、1.5em大小、3em行高及sans-serif字体，其中font-size和font-family必须设定，其他可选

第7章  盒模型
margin: 0;: 设置外边距为0， 另有margin-top, margin-right, margin-bottom, margin-left,简写顺序为上、右、下、左，三值简写顺序为上、右/左、下，两值简写顺序为上/下、右/左，margin-right设为auto时为左对齐，margin-left设为auto时为右对齐，两者均设为auto时为居中对齐
外边距折叠：两元素接触时，外边距更小的那个减小为零
border-width: thin;: 设置边框宽度为thin, 可选值还有medium,thick,或2px等，初始值为medium，另有border-top-width, border-right-width, border-bottom-width, border-left-width, 简写顺序为上、右、下、左，三值简写顺序为上、右/左、下，两值简写顺序为上/下、右/左
border-style: hidden;: 边框样式设为隐藏，可选值还有dotted点、dashed短杠、solid实线、double双线、groove凹槽、ridge山脊、inset嵌入、outset等，初始值为none,另有border-top-style, border-right-style, border-bottom-style, border-left-style,简写顺序同上
border-color: darkkhaki;: 设置边框颜色，另有border-top-color, border-right-color, border-bottom-color, border-left-color
border: 1px dashed darkkhaki; 设置边框宽度为1px,短杠样式，darkkhaki颜色
padding: 2px;: 设置内边距为2px,padding属性与margin属性相似
width: 280px;: 设置元素宽度，为从左内边距边缘到右内边距边缘之间的距离，初始值为auto
height: 130px;: 设置元素高度，是介于上、下内边距边缘之间的距离，初始值为auto
块级元素有div,p,h1~h6,form,ul等，当width和height设为auto时，会横跨所有可用空间，垂直方向上会扩展到容纳内部所有内容
table设为auto时，大小的伸缩应用在水平和垂直两个方向上，img设为auto时，图像会显示成原样
min-width: 500px;: 设置最小宽度，另有max-width最大宽度，min-height最小高度，max-height最大高度
line-height: 3cm;: 设定文本行的高度
overflow: visible;: 当内容溢出可用空间时可见，可选值有hidden隐藏，scroll滚动条，auto自动，初始值为visible,另有overflow-x,overflow-y属性，分别控制水平和垂直滚动条

第8章  CSS浮动：浮动和垂直对齐
float: left;: 设置为左边浮动，元素会表现为块级元素，但大小设置变成水平方向和垂直方向都是收缩适应，其他内容将在该元素周围环绕，可选值有right,none,初始值为none
內联元素span设置float属性后会变成块级元素，且在两方向上具有收缩适应
clear: left;: 清除或取消其他元素float属性对此元素的效果
vertical-align: sub;: (应用于內联元素时)用于下标，super用于上标，top与盒子的顶部对齐，middle与文本行中小写字母的中心点对齐，bottom与盒子底部对齐，text-top与最高字符对齐，text-bottom与最低字符对齐，(应用于表格元素时)baseline对齐到基线，top对齐到表格单元顶部，middle对齐到表格单元中心，bottom对齐到表格单元底部

第9章  列表属性
list-style-type: disc; :设置项目列表和编号列表样式为disc圆点，可选值有circle圆圈，square方块，decimal数字，decimal-leading-zero:01,lower-roman:i,upper-roman:I,lower-latin:a,upper-latin:A等,初始值为disc
list-style-image:url('arrow.png');: 定值列表符号为arrow.png
list-style-position:inside;: 设置列表符号出现在列表项元素的内部，outside:在列表项元素外部，初始值为outside
list-style: square url('arrow.png') outside;: list-style属性的简写形式，允许三个样式以任意顺序出现

第10章  背景属性
background-color: yellow;: 背景颜色设为黄色，可接受颜色关键字、RGB值、十六进制颜色值、短十六进制颜色值，初始值为transparent:不使用颜色
background-image: url('sun.png');: 背景设为图像，默认图片在整个可用区域平铺，初始值为none
background-repeat: repeat;: 设置背景图片沿水平和垂直方向平铺，可选值repeat-x:只沿x轴平铺，repeat-y:只沿y轴方向平铺，no-repeat:关闭平铺，只显示一张图片
background-position: 10px 10px;: 设置背景图片位置，可选值为长度值、百分比值、top,bottom,center三个关键字与left,right,center三个关键字的任意组合，当设置为平铺时指定的位置表示图片从何处开始平铺
background-attachment: fixed;: 页面滚动时背景图片会固定在一个地方，scroll:背景图片随Web页面的内容滚动，初始值为scroll
background: white url('palms.png') no-repeat fixed bottom center; : background可以任意指定1~5个单独的背景属性

第11章  定位属性
position: absolute;: 绝对定位，将元素放到文档中特定位置，可选值有static:静态定位，在文档中连续显示，relative:相对定位，可堆叠和分层放置在z轴上，用作包含在该元素中的绝对定位元素的参考点，如果没有任何元素处于非静态位置，则绝对定位元素的定位就相对于浏览器的视口，fixed:固定位置，总是相对于视口进行定位，
top: 0; left: 0;: 偏移关键字，另有bottom,left,设置相对偏移量
z-index: 1;: 浏览器会把值最高的元素放在顶层，把值最低的元素放在最底层，元素嵌套时，元素后代的z-index值自然高于元素本身的值，设置的值会被忽略

第12章  表格属性
<caption>:表格标题
<colgroup>:闭合表格中所有的<col/>元素
<col/>:表格中的列
<thead>:闭合表格中所有的列表头<th>元素，如果打印的表跨越多页，<thead>会在每页顶部出现
<tbody>:包含所有的表数据
<tfoot>:与表头<thead>类似，出现于每页底部
caption-side: bottom;: 标题出现在底部，top:标题出现在顶部，初始值top
col#album {
    width: 200px;
}: 定义列宽为200px
opacity: 0.7;: 设置透明度为0.7
table-layout: fixed;:设置表格为固定宽度，多出的数据将会溢出，auto:表格跨度会扩展到能够容纳它所包含的内容，默认值为auto
border-collapse: collapse;: 删除单元格之间的间距，separate: 使单元格之间留有间距，初始值为separate
border-spacing: 15px;: 将单元格间距设为15px，初始值为0
border-spacing: 15px 0;: 将单元格水平间距设为15px,垂直间距设为0

第III部分  高级CSS和可选择的媒体

第13章  打印样式
<link rel='stylesheet'
    type='text/css'
    media='screen'
    href='096977%20fg1301.css' />: media属性设置为screen, 表明该样式表只针对屏幕显示，可选值有print:打印机、all:所有媒体
@media screen {    /* 在样式表中 */
    p {
        width: 200px;
    }
}
@media print {
    p {
        width: 2in;
    }
}: @media为封装样式规则，在样式表内部基于媒体来调整样式表
page-break-before: always;: 在该元素之前出现一个页面中断，可选值：auto,always,avoid,left,right
page-break-after: always;: 在该元素之后出现一个页面中断

第14章  XML
<?xml version="1.0"?>: XML声明
<?xml version="1.0" encoding="LATIN-1" standalone="yes"?>: encoding:编码类型，standalone="yes":在XML文档中不会出现文档类型定义
<?xml-stylesheet type="text/css" href="test.css"?>: XML stylesheet声明，用于引入外部样式表
display: inline;: 使目标元素成为行内元素
display: block;: 使目标元素成为块级元素
display: list-item;: 使目标元素之前出现默认的项目符号，类似于<li>元素
display: table;: 将目标元素声明为表格
display: table-caption;: 将目标元素声明为表格标题
display: table-column-group;: 类似于HTML中的<colgroup>元素，用来将列分组
display: table-column;: 类似于HTML中的<col>元素，声明为一列
display: table-row-group;: 类似于HTML中的<tbody>元素,声明为多行
display: table-row;: 类似于HTML中的<tr>,声明为一行
display: table-header-group;: 类似于HTML中的<headings>,声明为表头
display: table-footer-group;: 类似于<tfooter>,声明为表格脚

第15章  Cursor属性
cursor: wait;: 使指针在目标元素上方时显示为等待指针，可选值有default,crosshair十字,pointer手指,move,e-resize,w-resize,ne-resize,sw-resize,n-resize,s-resize,nw-resize,se-resize,text,wait,help,progress,hand,all-scroll,col-resize,row-resize,no-drop,not-allowed,vertical-text
cursor: url('custom_cursor.png'), default;: 自定义指针及后备指针