囫囵吞枣——CSS笔记

学习http://www.runoob.com/css/css-syntax.html的笔记。文中图片均来自菜鸟教程

CSS样式的格式：

• 可读性：每行描述一个属性。
• 注释方式：/* 注释说明*/
• 选择器：#（id选择器）.（class选择器）  
• 样式：内部样式（写在<style></style>标签内）。行内样式（在标签内添加 style="样式" 属性）。外部样式（引用css文件）。

CSS

背景颜色（background-color）：

    例：background-color:#6495ed;

    定义颜色的方式有三种：

• 十六进制 - 如："#ff0000"   ——十六进制颜色大全http://www.runoob.com/cssref/css-colorsfull.html
• RGB - 如："rgb(255,0,0)"   
• 颜色名称 - 如："red"     ——颜色名称大全  http://www.runoob.com/cssref/css-colornames.html

背景图片（background-image）：

   例：background-image:url('名称.png');

• 设置背景图像是否固定或者随着页面的其余部分滚动：background-attachment ：

1. scroll：默认值。背景图像会随着页面其余部分的滚动而移动。
2. fixed：当页面的其余部分滚动时，背景图像不会移动
3. inherit：规定应该从父元素继承 background-attachment 属性的设置

• 图片是否及如何重复。：background-repeat:

1. 水平垂直平铺：repeat-x
2. 定位不平铺：no-repeat

• 改变图像在背景中的位置:background-position （三种设置方式）：

           1.（top left（左上） ，top center（上 中），top right（右上），center left（右 中），center center  （居中），center right(右中)，bottom left（ 左下），bottom center（下中） ，bottom right（右下），top left（上左））

           2.（x% y%）第一个值是水平位置，第二个值是垂直位置。只设定一个值，是两个值均为设定的值。

           3.（xpos ypos）第一个值是水平位置，第二个值是垂直位置。单位是像素 (0px 0px) ，可混合使用 % 和 position 值。

    可以把属性简写在一起。例：body {background:#ffffff url('img_tree.png') no-repeat right top;}

   注：顺序为

• background-color（颜色）
• background-image（图片）
• background-repeat（展现方式）
• background-attachment（是否随着页面滚动）
• background-position（设置背景图像是否及如何重复。）

• 关于文本

• 设置字体颜色： color（和设置背景颜色一致）

• 文本对齐方式：text-align（center   right  lef  ....justify（每一行被展开为宽度相等））
• 下划线： text-decoration：

1. none（没有下划线）
2. underline（有下划线）
3. overline（文本上有条线）
4. line-through（穿过文本的一条线）
5. blink（闪烁的文本）
6. inherit（规定应该从父元素继承 text-decoration 属性的值。）

• 文本转换：text-transform：

1. none（默认。定义带有小写字母和大写字母的标准的文本。）
2. capitalize（文本中的每个单词以大写字母开头。）
3. uppercase（定义仅有大写字母。）
4. lowercase（定义无大写字母，仅有小写字母。）
5. inherit（规定应该从父元素继承 text-transform 属性的值。）

•   文本缩进：text-indent: 

1. %  设置百分百
2. length  固定缩进设定的值
3. inherit 规定应该从父元素继承 text-indent 属性的值。

• 字体样式：font-style

1.  normal：默认值。浏览器显示一个标准的字体样式
2. italic：浏览器会显示一个斜体的字体样式
3. oblique：浏览器会显示一个倾斜的字体样式。
4. inherit：规定应该从父元素继承字体样式。

链接（伪类）

• a:link - 正常，未访问过的链接
• a:visited - 用户已访问过的链接
• a:hover - 当用户鼠标放在链接上时
• a:active - 链接被点击的那一刻

注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

注意：伪类的名称不区分大小写。

盒子模型

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

 注：其中关于边框的设置   

border-style:dotted（点状） solid（实线） double（双线） dashed（虚线） ridge（定义3D脊边框）groove（定义3D沟槽边框）等; 
可以单独设置 每天边的边框样式。

外边距 ：margin
填充：padding

分组选择器：每个选择器用逗号分隔. 例：h1,h2,p{color:green;}
嵌套选择器：适合选择器内部的选择器的样式。（无法写出比较通俗的解释，自行百度）

   隐藏元素 - display:none（不占布局）或visibility:hidden（隐藏但还占布局位置）

    定位： position:

1.        fixed   （固定）
2.        relative  （相对）
3.        absolute   （绝对）

注：定位重叠时： z-index（数值越大，越显示在前，数值是包含正负数）

浮动：Float（浮动）
清除浮动：clear:both;

CSS组合选择符（哈哈~）：

• 后代选取器(以空格分隔)                     例：div p {  color:red }        
• 子元素选择器(以大于号分隔）           例：div>p{  color:red }      div 为父级  p为子级  div-9之间的元素
• 相邻兄弟选择器（以加号分隔）         例：div+p{  color:red }
• 普通兄弟选择器（以破折号分隔）      例：div~p{  color:red }    div 后面所以的p元素

四周阴影 ：

   语法：

box-shadow: h-shadow（水平阴影的位置，可为负值） v-shadow（垂直阴影的位置，可为负值） blur（模糊距离） spread（阴影的尺寸） color（阴影的颜色） inset（内部）/外部(outset) ;

图片透明度：opacity