CSS 的基本操作
2016-12-09 本文已影响25人
sunnyaxin
CSS(Cascading Style Sheets)层级样式表，是一种用来表现HTML或XML等文件样式的计算机语言。CSS是模型与视图分离这个概念的典范之作。学习CSS需要有HTML基础。
盒子形状
布局定位的重要CSS属性
float, clear, position, display
width, height, padding, margin, border
- float：控制靠左还是靠右,有三个值:
float: left / right / none
- clear：规定元素的哪一侧不允许其他浮动元素。但是这个功能与display属性协同会产生不同的效果。 所以初学者来讲，只要记住这一种用法就好了。
- position：显示相对于原有位置的偏移量，经常跟right，left，top，bottom相联合使用。
position: static / relative / absolute / fixed
- absolute：会脱离他的父级元素，他的定位会相对于整个窗口。而且他原本在文档流里就不占位置了。 设置right,left,top,bottom这四个属性的时候，是相对于整个页面来换算的。
- relative：还在父级元素里，设置right, left, top, bottom的时候，他就相对于自己来计算。最重要的是，他原本占有的位置仍保留。
- fixed：right, left, top, bottom四个属性则是相对于窗口来换算了，与相对于整个页面来换算最大的区别就在于，当页面宽高超过窗口的时候。 fixed的元素会悬浮在那里，我们在页面上看到的跟着滚动条走得悬浮块都是这么做的。
- display：改变生成的盒子的类型。
none, block, inline, inline-block, list-item, table, run-in 等
- block：块级元素，如div、h1 、p 元素，意味着这些元素显示为一块内容。 块级元素的特点是：(1)宽度充满父级容器、(2)与前后元素都会空一行、(3)盒子模型涉及的所有属性都可以被修改
- inline：行内元素，如a、span、strong 元素，它们的内容显示在行中。 行内元素的特点是：(1)通常在块级元素里，且只会占据自己内容部分的空间、(2)不能在前后元素之间生成空行
- inline-block：兼顾了两者，既象行内元素一样流动布局，又像block元素一样有自己的padding margin等
- none：让生成的元素根本不显示，不占用文档中的空间。
流式布局
通过使用百分比设置各个部分的宽度来适应不同的分辨率。
伪类和伪元素
用于向某些选择器添加特殊效果
语法
- 伪类
selector : pseudo-class {property: value}
selector.class : pseudo-class {property: value} (CSS类与伪类搭配使用)
- 伪元素
selector:pseudo-element {property:value;}
selector.class:pseudo-element {property:value;} (CSS类与伪元素搭配使用)
例如：
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
"first-line" 伪元素用于向文本的首行设置特殊样式。
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
伪类属性
| 属性 | 描述 |
|---|---|
| :active | 向被激活的元素添加样式 |
| :focus | 向拥有键盘输入焦点的元素添加样式 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式 |
| :link | 向未被访问的链接添加样式 |
| :visited | 向已被访问的链接添加样式 |
| :first-child | 向元素的第一个子元素添加样式 |
| :lang | 向带有指定 lang 属性的元素添加样式 |
伪元素属性
| 属性 | 描述 |
|---|---|
| :first-letter | 向文本的第一个字母添加特殊样式 |
| :first-line | 向文本的首行添加特殊样式 |
| :before | 在元素之前添加内容 |
| :after | 在元素之后添加内容 |
