CSS简易学习笔记
学习地址：http://www.w3school.com.cn/css/index.asp
cnblog不能把格式复制上来，有格式文字版：https://github.com/songzhenhua/github/blob/master/CSS%E7%AE%80%E6%98%93%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0.txt
★CSS 指层叠样式表 (Cascading Style Sheets)
★CSS结构 selector {property: value}，实例 h1 {color:red; font-family: "sans serif";}
★对选择器进行分组，被分组的选择器就可以分享相同的声明。 h1,h2,h3,h4,h5,h6 { color: green; }
通配符选择器，如：* {color:red;}
★根据 CSS，子元素从父元素继承属性 body { font-family: Verdana, sans-serif; } 根据上面这条规则，站点的 body 元素将使用 Verdana 字体。如果你希望段落的字体是 Times，加规则 p { font-family: Times, "Times New Roman", serif; }
★CSS 元素选择器（类型选择器），匹配文档树中该元素类型的每一个实例 如：h1 {color:blue;}
★后代选择器（上下文选择器or派生选择器）：依据元素在其位置的上下文关系来定义样式，两个元素之间的层次间隔可以是无限的。 li strong { font-style: italic; font-weight: normal; } 上面的例子中，只有 li 元素中的 strong 元素的样式为斜体字
★子元素选择器，只能选择作为某元素子元素的元素。 h1 > strong {color:red;}
★相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。用一个结合符只能选择两个相邻兄弟中的第二个元素。 h1 + p {margin-top:50px;}
★id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。区分大小写。 #red {color:red;}
★id选择器和派生选择器混用 #sidebar p { font-style: italic; text-align: right; margin-top: 0.5em; } 上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落
★类选择器以一个点号显示，区分大小写。 .center {text-align: center} 在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。 在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。 <h1 class="center"> This heading will be center-aligned </h1> <p class="center"> This paragraph will also be center-aligned. </p> 注意：类名的第一个字符不能使用数字！
和 id 一样，class 也可被用作派生选择器： .fancy td { color: #f60; background: #666; } 在上面这个例子中，类名为 fancy 的更大的元素内部的所有表格单元以灰色背景显示橙色文字
元素也可以基于它们的类而被选择： td.fancy { color: #f60; background: #666; } 在上面的例子中，类名为 fancy 的表格单元将是带有灰色背景的橙色。
多类选择器：一个 class 值中可能包含一个词列表，各个词之间用空格分隔 <p class="important warning"> This paragraph is a very important warning. </p> 通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限） .important.warning {background:silver;}
★属性选择器 下面的例子为带有 title 属性的所有元素设置样式： [title] { color:red; }
属性和值选择器 下面的例子为 title="W3School" 的所有元素设置样式： [title=W3School] { border:5px solid blue; }
为指定元素的属性选择器：为input元素中type="text"的所有元素设置样式 input[type="text"] { width:150px; }
属性和值选择器 - 多个值 下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值： [title~=hello] { color:red; } 下面的例子会选择 lang 属性等于 en 或以 en- 开头的所有元素。适用于由连字符-分隔的属性值： [lang|=en] { color:red; }
[attribute^=value] 匹配属性值以指定值开头的每个元素。 [attribute$=value] 匹配属性值以指定值结尾的每个元素。 [attribute*=value] 匹配属性值中包含指定值的每个元素。
属性和值选择器 - 多个属性 a[href][title="W3School"] {color:red;} 将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色
★插入样式表的方法有三种： 外部样式表：使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部 <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
内部样式表：使用 <style> 标签 <head> <style type="text/css"> body {background-image: url("images/back40.gif");} </style> </head>
内联样式： <p style="color: sienna; margin-left: 20px"> This is a paragraph </p>
★多重样式：如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将优先从内而外继承
★背景 背景色，默认值是 transparent，“透明”之意 p {}
背景图像，默认值是 none p.flower {background-image: url(/i/eg_bg_03.gif);}
背景重复： background-repeat 属性，值有（repeat-x ， repeat-y ， no-repeat）
背景定位，可使用关键字(top、bottom、left、right、center)、百分比、px body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:66% 33%; }
背景关联：文档向下滚动时，背景图像是固定的，使用属性及值：background-attachment:fixed
★背景CSS3新属性 background-size 属性规定背景图片的尺寸 div { background:url(bg_flower.gif); background-size:63px 100px; /*background-size:40% 100%;*/ background-repeat:no-repeat; }
background-origin 属性规定背景图片的定位区域。 div { background:url(bg_flower.gif); background-repeat:no-repeat; background-origin:content-box; /*content-box、padding-box 或 border-box*/ }
为 body 元素设置两幅背景图片： body { background-image:url(bg_flower.gif),url(bg_flower_2.gif); }
★文本 缩进文本：text-indent，可使用单位、百分比，属性可以继承。 p {text-indent: 5em;}
文本水平对齐：text-align，值left、right、center、justify(水平对齐、两端对齐)
单词间隔：word-spacing，其默认值 normal 与设置值为 0 是一样的
字母间隔：letter-spacing
大小写转换：text-transform，有4个值（none、uppercase、lowercase、capitalize）
文本装饰：text-decoration 有5个值（none、underline下划线、overline上划线、line-through删除线、blink闪烁）
处理空白符：white-space属性 空白符 换行符 自动换行 pre-line合并 保留 允许 normal 合并 忽略 允许 nowrap 合并 忽略 不允许 pre 保留 保留 不允许 pre-wrap保留 保留 允许
★文本CSS3新属性 text-shadow：添加阴影 h1 { text-shadow: 5px 5px 5px #FF0000;/*水平阴影、垂直阴影、模糊距离、颜色*/ }
word-wrap：单词太长的话就可能无法超出某个区域，允许您允许文本强制文本进行换行 p {word-wrap:break-word;}
★字体 指定字体：font-family
字体风格：font-style（normal、italic斜体）
字体加粗:font-weight(100-900、norbold)
字体大小：font-size，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)
★链接的四种状态，设置时必须按以下顺序： a:link - 普通的、未被访问的链接 a:visited - 用户已访问的链接 a:hover - 鼠标指针位于链接的上方 a:active - 链接被点击的时刻
下划线：text-decoration（none、underline）
★列表 列表类型：list-style-type 列表项图像：list-style-image 列表标志位置：list-style-position
★表格 表格边框：border 折叠边框：border-collapse 属性设置是否将表格边框折叠为单一边框 表格宽度和高度：width 和 height 属性定义表格的宽度和高度 表格文本对齐：text-align 和 vertical-align 表格内边距：padding
★轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用 有属性：outline-color、outline-style、outline-width
★框模型 (Box Model) 元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
背景应用于由内容和内边距、边框组成的区域。
内边距、边框和外边距都是可选的，默认值是零
内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。
外边距可以是负值，而且在很多情况下都要使用负值的外边距。
★CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。 h1 {padding: 10px;}各边都有 10 像素的内边距 h1 {padding: 10px 0.25em 2ex 20%;}按照上、右、下、左的顺序分别设置各边的内边距
也通过使用下面四个单独的属性，分别设置上、右、下、左内边距： padding-top padding-right padding-bottom padding-left
★元素的边框 (border) 是围绕元素内容和内边距的一条或多条线
a:link img {border-style: outset;}把一幅图片的边框定义为outset，使之看上去像凸起按钮 p.aside {border-style: solid dotted dashed double;}按top-right-bottom-left的顺序定义边框
定义单边样式： border-top-style border-right-style border-bottom-style border-left-style
边框宽度：border-style p {border-style: solid; border-width: 5px;} p {border-style: solid; border-width: 15px 5px 15px 5px;}
也可以通过下列属性分别设置边框各边的宽度： border-top-width border-right-width border-bottom-width border-left-width
★边框颜色：border-color 属性 定义单边颜色： border-top-color border-right-color border-bottom-color border-left-color CSS2 引入了边框颜色值 transparent。这个值用于创建有宽度的不可见边框
★边框CSS3新属性 border-radius：圆角矩形 div { border:2px solid; border-radius:25px; }
box-shadow：用于向方框添加阴影 div { box-shadow: 10px 10px 5px #888888;/*水平 垂直 距离 颜色*/ }
border-image：图片边框 div { border-image:url(border.png) 30 30 round; }
★外边距：margin 单边外边距属性： margin-top margin-right margin-bottom margin-left
★外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
★div、h1 或 p 元素常常被称为块级元素。这些元素显示为一块内容，即“块框”。 span 和 strong 等元素称为“行内元素”，因为它们的内容显示在行中，即“行内框”。
把一些文本添加到一个块级元素（比如 div）的开头。即使没有把这些文本定义为段落，它也会被当作段落对待，这个框称为无名块框。 <div> some text <p>Some more text.</p> </div> 块级元素的文本行也会发生类似的情况。假设有一个包含三行文本的段落。每行文本形成一个无名框。无法直接对无名块或行框应用样式，因为没有可以应用样式的地方
display属性改变生成的框的类型,设置为none，让生成的元素根本没有框,即框和内容不显示。
★CSS 有三种基本的定位机制：普通流（默认）、浮动和绝对定位。
★position 属性： static：元素框正常生成。 relative：元素框偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。 absolute：元素框从文档流完全删除，并相对于包含于的块定位。 fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。
★CSS 定位属性 position把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 overflow设置当元素的内容溢出其区域时发生的事情,值：scroll、hidden、auto clip 设置元素的形状。元素被剪入这个形状之中，然后显示出来。 vertical-align 设置元素的垂直对齐方式，值：text-top、text-bottom z-index 设置元素的堆叠顺序，值：-1、1
★float属性：浮动。浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 clear属性：阻止行框围绕浮动框，值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。
★伪类 (Pseudo-classes)的语法：selector : pseudo-class {property: value} 可以与 CSS 类配合使用。
您可以使用 :first-child 伪类来选择元素的第一个子元素 p:first-child {font-weight: bold;} li:first-child {text-transform:uppercase;} 第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体。第二个规则将作为某个元素（在 HTML 中，这肯定是 ol 或 ul 元素）第一个子元素的所有 li 元素变成大写。
:focus 向拥有键盘输入焦点的元素添加样式
★伪元素(Pseudo-elements)的语法：selector:pseudo-element {property:value;} 可以与 CSS 类配合使用。
:first-line 伪元素用于向文本的首行设置特殊样式，只能用于块级元素。
:first-letter 伪元素用于向文本的首字母设置特殊样式，只能用于块级元素。
CSS2 - :before 伪元素在元素的内容前面插入新内容。 下面的例子在每个 <h1> 元素前面插入一幅图片： h1:before { content:url(logo.gif); }
CSS2 - :after 伪元素在元素的内容之后插入新内容。
★CSS 尺寸 (Dimension) height 设置元素的高度。 line-height 设置行高。 max-height 设置元素的最大高度。 max-width 设置元素的最大宽度。 min-height 设置元素的最小高度。 min-width 设置元素的最小宽度。 width 设置元素的宽度。
★CSS 分类属性 (Classification) clear 设置一个元素的侧面是否允许其他的浮动元素。 cursor 规定当指向某元素之上时显示的指针类型。 display 设置是否及如何显示元素。 float 定义元素在哪个方向浮动。 position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 visibility 设置元素是否可见或不可见。
★CSS 图像透明度 E9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。 IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。
★CSS3过渡 过渡是元素从一种样式逐渐改变为另一种的效果。
应用于宽度属性的过渡效果，时长为 2 秒： div { transition: width 2s; ｝
规定当鼠标指针悬浮于 <div> 元素上时： div:hover { width:300px; }
如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开： 向宽度、高度和转换添加过渡效果： div { transition: width 2s, height 2s, transform 2s; ｝
属性 描述 transition 简写属性，用于在一个属性中设置四个过渡属性。 transition-property 规定应用过渡的 CSS 属性的名称。 transition-duration 定义过渡效果花费的时间。默认是 0。 transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 transition-delay 规定过渡效果何时开始。默认是 0。
★CSS3 动画 动画是使元素从一种样式逐渐变化为另一种样式的效果。@keyframes 规则用于创建动画。
@keyframes myfirst { from {background: red;} to {background: yellow;} }
当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。 把 "myfirst" 动画捆绑到 div 元素，时长：5 秒： div { animation: myfirst 5s; ｝
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。 @keyframes myfirst { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} }
改变背景色和位置： @keyframes myfirst { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} }
属性 描述 @keyframes 规定动画。 animation 所有动画属性的简写属性，除了 animation-play-state 属性。 animation-name 规定 @keyframes 动画的名称。 animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 animation-timing-function 规定动画的速度曲线。默认是 "ease"。 animation-delay 规定动画何时开始。默认是 0。 animation-iteration-count 规定动画被播放的次数。默认是 1。 animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 animation-fill-mode 规定对象动画时间之外的状态。
★CSS3 多列 div { column-count:3; }
属性 描述 CSS column-count 规定元素应该被分隔的列数。 column-fill 规定如何填充列。 column-gap 规定列之间的间隔。 column-rule 设置所有 column-rule-* 属性的简写属性。 column-rule-color 规定列之间规则的颜色。 column-rule-style 规定列之间规则的样式。 column-rule-width 规定列之间规则的宽度。 column-span 规定元素应该横跨的列数。 column-width 规定列的宽度。
