CSS
1.
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
编辑
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开
2.选择器
id选择器：HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义
class选择器：class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示
3.插入一个样式表的三种方法
-
外部样式表(External style sheet)：当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
-
内部样式表(Internal style sheet)：以使用 <style> 标签在文档头部定义内部样式表
-
内联样式(Inline style)
优先级如下：
（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
4.背景属性定义
背景图片：background-image:url('paper.gif')
背景图片平铺：background-repeat:repeat-x
背景图片不平铺：background-repeat:no-repeat
背景图像的位置区域：background-origin
background-origin 属性指定了背景图像的位置区域。content-box, padding-box,和 border-box区域内可以放置背景图像。
5.文本属性定义：
文本对齐方式：text-align （right，left，justify（每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）））
文本修饰：text-decoration
text-decoration 属性用来设置或删除文本的装饰
从设计的角度看 text-decoration属性主要是用来删除链接的下划线
a {text-decoration:none;}
文本转换：text-transform
文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母，或每个单词的首字母大写
文本缩进：text-indent:50px
6.字体属性定义
属性设置字体系列 font-family
字体样式：font-style, 这个属性有三个值：
-
正常 - 正常显示文本
-
斜体 - 以斜体字显示的文字
-
倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
字体大小：font-size
7.链接样式属性定义
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
特别的链接，可以有不同的样式，这取决于他们是什么状态。
这四个链接状态是：
-
a:link - 正常，未访问过的链接
-
a:visited - 用户已访问过的链接
-
a:hover - 当用户鼠标放在链接上时
-
a:active - 链接被点击的那一刻
8.列表样式属性定义
指定列表项标记的类型：list-style-type
指定列表项标记的图像：list-style-image
9.表格属性定义
表格边框：border：1px solid black
折叠边框：border-collapse：collapse
宽高：width，height
表格填充：padding：15px
10.盒子模型
编辑
不同部分的说明：
-
Margin(外边距) - 清除边框外的区域，外边距是透明的。
-
Border(边框) - 围绕在内边距和内容外的边框。
-
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
-
Content(内容) - 盒子的内容，显示文本和图像。
11.分组选择器和嵌套选择器
分组选择器：为了尽量减少代码，你可以使用分组选择器。每个选择器用逗号分隔。在下面的例子中，我们对以上代码使用分组选择器：h1,h2,p { color:green; }
嵌套选择器：它可能适用于选择器内部的选择器的样式。在下面的例子设置了四个样式：
-
p{ }: 为所有 p 元素指定一个样式。
-
.marked{ }: 为所有 class="marked" 的元素指定一个样式。
-
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
-
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
12.Display(显示)与Visibility(可见性)
display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
13.Position（定位）
position 属性指定了元素的定位类型。position 属性的五个值：
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
static 定位
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响
fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
relative 定位
相对定位元素的定位是相对其正常位置
absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
sticky 定位
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
14.Overflow
overflow 属性用于控制内容溢出元素框时显示的方式
overflow属性有以下值：
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
注意:overflow 属性只工作于指定高度的块元素上。
注意: 在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 "overflow:scroll" 也是一样的)。
15.Float（浮动）
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
16.水平和垂直对齐
元素居中对齐：margin：auto
文本居中对齐：text-align：center
图片居中对齐：margin：auto
左右对齐-使用定位方式：position：absolute
左右对齐-使用float方式：float：right
垂直居中对齐：padding，如果要水平和垂直都居中，可以使用 padding 和 text-align: center:
垂直居中：line-height：200px
垂直居中：position ，transform
17.边框
圆角：border-radius：2px
盒阴影：box-shadow
边界图片：border-image
18.2D转换
- translate() 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
- rotate() 在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
- scale() 该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。
- skew()
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。skewX(<angle>);表示只在X轴(水平方向)倾斜。skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
- matrix() 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
19.3D转换
- rotateX() 围绕其在一个给定度数X轴旋转的元素 rotateX(deg)
- rotateY() 围绕其在一个给定度数Y轴旋转的元素 rotateY(deg)
1241
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
