css小结
- 外部链接css的方式：
<link rel = "stylesheet" type = "text/css" href = "*.css"/>
- 内部css的使用方式：
<style type = "text/css">
css代码;
</style>
- 外部的CSS的好处：
- 重用。
- 修改同步更新，不需要一个一个修改。
- 设置不同的输出设备。
<link rel = "stylesheet" type = "text/css" href = "1.css" media = "screen"/>
<link rel = "stylesheet" type = "text/css" href = "2.css" media = "handheld"/>
- 在一个样式表中引入另一个样式表：
@import "1.css";
- 选择器的使用：
- 一般选择器：直接用元素。比如直接h1；
- 通用选择器：适用于全部的元素。*{…}
- 类选择器：指定特定的class。
- h1.classname：这种适用于h1元素中class属性的值为classname的元素。
- .classname：这种适用于任何元素中class属性的值是classname的元素。
- 子选择器：选择某种依赖关系的元素。比如td>b，表示td元素的直接子元素b的元素。
- 后继选择器：某种依赖关系的元素。比如 table b,表示table中的b元素。
- 字体类别：
- font-family:这是字体，比如serif,monospace等。
- 具体用法：
font-family : arial,sans-serif;
表示首选arial字体，如果机器中没有arial字体，则选用sans-serif字体。
- font-size：大小。
- 具体用法：
font-size：12px;
表示字体大小为12像素。
- font-weight：表示是否为粗体。
- 具体用法：
font-weight：bold；
表示为粗体。
- font-style：表示是否是斜体。
- 具体用法：
font-style：italic；
表示为斜体。
- 文本类别：
- text-align：表示文本的位置。可选为left,right,center;
- 具体用法：
text-align：center；
表示文本在中央。
- text-decoration：表示文本是否要下划线、删除线等。可选为underline\line-through;
- 具体用法：
text-decoration：underline;
表示文本下方有下划线。
- color：表示文本的颜色。
- text-indent：文本缩进多少。
- 具体用法：
text-indent：2px；
表示缩进2个像素。
- line-height：表示行之间的宽度。
- 具体用法：
line-height：2px;
表示行之间间隔2像素。
- 文本伪类：
- first-letter：对于第一个字母特别着重。形如：open；
- 具体用法：
p：first-letter{....}
- first-line：对于第一行特别着重。形如：I am xiazdong；
- 边框类别：可用于任何元素的边框。
- border-width：表示边框的宽度。
- 具体用法：
border-width：2px;
表示边框的宽度为2px。
- border-style：表示边框的类型。可选：solid,dotted
- 具体用法：
border-style：solid；
表示边框是实线。
- border-color：表示边框的颜色。
- 具体用法：
border-color：red；
表示边框的颜色为红色。
- padding：表示边框和文本的距离。
- 具体用法：
padding：2px；
表示边框和文本距离为2像素。
- margin：表示边框的距离。
- 具体用法：
margin：2px；
表示边框之间距离为2像素。
- width：框的宽度。
- height：框的高度。
- max-height和min-height：框的最大高度和最小高度。
- max-width和min-width：框的最大宽度和最小宽度。
- overflow：表示框是否要滚动条。
- 具体用法：
overflow：scroll；
表示边框需要滚动条。
- 背景类别：
- background-color：表示背景颜色。
- background-image：表示背景的图片。
- 具体用法：
background-image：url("apple.jpg")；
表示背景来自apple.jpg文件。
- background-position：表示背景图片的位置。可选:(1)20%,30%(2)left(3)center….
- 具体用法：
background-position：center;
表示图片在中心。
- background-attachment：表示图片是否会随着滚动条移动而变化。可选：fixed,scroll
- 具体用法：
background-attachment：fixed;
表示图片不会变化。
- background-repeat：表示图片是否会重复。可选：no-repeat,repeat,repeat-x,repeat-y;
- 具体用法：
background-repeat：no-repeat；
表示不会重复。
- 列表类别：
- list-style-type：表示前标的样式。可选：disc(默认),circle,square,none,decimal,lower-roman;
- 具体用法：
list-style-type：square；
表示用方块进行标号。
- list-style-position：表示标号的位置。可选：inside,outside;
- 具体用法：
list-style-position：outside;
- 表类别：
- border-collapse：是否应该显示每一个边框；可选：collapse或separate;
- 具体用法：
border-collapse：separate；
表示每个边框都会显示，不会合并。
- border-spacing：边框之间的距离；
- 具体用法：
border-spacing：15px;
表示边框之间距离为15像素。
- 外边框类别：和边框的区别是不占用空间。
- outline-style：
- outline-color：
- outline-width：
- :before和:after伪元素：
- :before:用于指定在哪些元素之前加哪些内容。
- 具体用法：
h1:before{content:"这里是h1内容：";}
这样在h1的前面会加上这个字符串。
- :after和：before正好相反。
- 链接类别：
- 伪类：能够使得链接在不同状态下的样式不同。
- link：当一般状态下。
- visited：访问完后。
- active：当激活链接时。
- hover：当停留在链接上时。
- 具体用法：
a:link{
color:red;
}
a:hover{
color:blue;
}
a:visited{
color:black;
}
链接一般状态为红色，鼠标停留在链接上时是蓝色，访问完后是黑色。
- 其他类别：
- display:用于将内联框显示为外部框或反过来。
- cursor：用于指定鼠标指针的样式。
- visibility：某个元素是否显示。
- 相对定位（relative）：相对于普通定位进行偏移，但是这个相对定位的元素没有剥离出普通定位，即如果有三个段落，如果第二个段落移开了，但是空间还是依然保留，不会被第三个段落占用。
- 具体用法：
position:relative;
top:30px;
left:30px;
- 绝对定位（absolute）：被排除在普通定位之外，其他类似相对定位。如果有三个段落，如果第二个段落移开了，则空间被第三个段落占用。
- 具体用法：
position:absolute;
top:30px;
left:30px;
- 固定定位（fixed）：完全脱离普通定位，而是固定在窗体的某一个位置，不论滚动条移动也不会变化。
- 注意：z-index特性可以设置多个元素重叠时，元素的叠放次序，z-index越大，则越靠顶。
- 具体用法：
position:fixed;
top:0px;
left:0px;
表明这个框不动，并且在最顶部。
- 浮动定位float：脱离普通定位，并且包含在框中，但不会重叠。指定float后，需要指定width特性，为了确定框的宽度。
- 具体用法：
float:left;
width:100px;
表明某个元素放在左边，并且宽度为100像素。
