CSS 基本内容, 类选择符, id 选择符, 伪类, 伪元素, 结构, 继承, 特殊性, 层叠, 元素分类, 颜色, 长度, url, 文本, 字体, 边框, 块级元素, 浮动元素, 内联元素, 定位.
链接:
<link rel="stylesheet" type="text/css" href="sheet.css" title="default">
<link rel="stylesheet" type="text/css" href="sheet.css" title="default">
样式:
h1 { color: red; };
@import 指示引入多个外部样式表的链接
- <style type="text/css">
- @import url(styles.CSS); p { color: red };
- </style>
CSS 注解
/* dashucoding */
内联样式:
<p style="color: red;">dashucoding</p>
规范:
选择符 + 声明
- p {
- color: red;
- } // 选择符 属性 值
- p {
- font-weight: bold;
- }
伪类和伪元素
属性 | 说明 |
---|---|
:link | 超链接是一个未访问过的地址 |
:visited | 访问过的网页 |
:active | 处于活跃的状态 |
a { color: red; }; a:visited { color: red; };
伪元素:
:first-letter 和 :first-line 首字母 和 首行
p:first-letter { color: red; }
CSS 有个特点是继承, 可以依赖于祖先 - 后代关系.
!important 有这个标记, 表示这条规则优先
p { color: red !important; }
元素分类:
三种类型: 块级元素, 内联元素, 列表项元素
块级元素有段落, 标题, 列表, 表格, div,body 等. 内联元素有 a,em,span 等. 列表项元素有 li 元素.
dispaly: block | inline | list-item | none
颜色:
rgb(100%, 100%, 100%) 红蓝绿 , 白色
单位:
em 给字体的 font-size 值
文本:
文本缩进
text-indent < 长度 > | < 百分比 >
p { text-indent: -4em; }
text-align 属性
用于元素中文本行的对齐方式
text-align: left | center | right | justify
white-space 空白
white-space pre | nowrap | normal
p { white-space: normal; } 将如何空白压缩成单个空白符
white-space 属性值为 pre, 可以将元素内的空白忽略.
p { white-space: pre; }
行高:
line-height 文本行的基线间的距离.
纵向对齐, vertical-align
vertical-align: baseline 使元素的基线同父元素的基线对齐.
vertical-align: sub; vertical-align: super;
低端对齐: vertical-align
顶端对齐: vertical-align
vertical-align: top; vertical-align: text-top;
中间对齐:
vertical-align: middle;
文字间隔:
Word-spacing 长度 | normal
Word-spacing: 0.3em;
字母间隔:
letter-spacing: 长度 | normal
文本转换:
text-transform uppercase | lowercase | capitalize | none
文本修饰:
text-decoration: none | overline | line-through
框:
width 长度 | 百分比 | auto
height 长度 | auto
margin 长度 | 百分比 | auto
- margin: top right bottom left
- margin-top
- margin-right
- margin-bottom
- margin-left
- border-width // thin medium thick
- border-style: none;
- padding
浮动与清除
- float: left | right | none
- <img src=""style="float: right"; alt="dashu">
float: none 用于防止元素浮动
清除浮动元素
clear left | right | both | none
clear 原理是增加元素的上边界, 使它在低于浮动元素的位置结束, 清除元素的上边界宽度当有效地忽略.
- list-style-type disc
- disc | circle | square | decimal | upper-alpha | lower-alpha | upper-roman | lower-roman | none
- list-style-type
disc 为实心圆
circle 为空心圆
square 实心或空心方块
列表项图像
list-style-image <url> | none
列表项位置: list-style-position
list-style-position: inside | outside
定位:
position: static | relative | absolute | fixed | inherit
溢出:
overflow: visible | hidden | scroll | auto | inherit
溢出剪切:
overflow-clip: rect | auto | inherit
元素剪切:
clip rect | auto | inherit
元素可见性:
visibility: visible | hidden | collapse | inherit
相对定位:
position: relative;
绝对定位:
position: relative;
固定定位:
position: fixed;
层叠定位:
z-index: integer | auto
轮廓:
outline, outline-color, outline-style, outline-width
边框:
- border-top-color, border-right-color, border-bottom-color
- border-left-color, border-top-style
- border-right-style, border-left-style
实例:
- <table cellspacing=0 border cellpadding="10">
- <tr>
- <td rowspan=2>dashu</td>
- <td colspan=2>dashu2</td>
- </tr>
- <tr>
- <td>1</td>
- <td>2</td>
- </tr>
- </table>
结言
好了, 欢迎在留言区留言, 与大家分享你的经验和心得.
感谢你学习今天的内容, 如果你觉得这篇文章对你有帮助的话, 也欢迎把它分享给更多的朋友, 感谢.
来源: http://www.jianshu.com/p/a5f3ab3a7fe7