CSS样式
背景
@[平铺模式, 背景定位, 百分比及长度定位, 背景固定]
| 属性模式 | 语法 |
|---|---|
| 背景色 | ·background-color：颜色 |
| 背景图片 | background-image: url(地址) |
| 背景固定 | background-attachment：模式 |
| 起始位置 | background-position：位置 |
| 平铺设置 | background-repeat：平铺模式 |
背景平铺
background-repeat: 模式
| 平铺模式 | 效果 |
|---|---|
| repeat-x | x轴平铺 |
| repeat-y | y轴平铺 |
| no-repeat | 不平铺 |
| repeat | 默认全平铺 |
背景定位
background-position: 位置关键字
| 位置关键词 | 作用 | 组合用法 |
|---|---|---|
| center | 居中 | center center |
| top | 顶部 | top center 或 center top |
| bottom | 底部 | bottom center 或 center bottom |
| right | 靠右 | right center 或 center right |
| left | 靠左 | left center 或 center left |
百分数值 与 长度 方法定位
| 例子 | 效果 |
|---|---|
background-position:66% 33%; |
放在水平方向 2/3、方向 1/3 处 |
background-position:50px 100px; |
左上角在元素内边区左上角50px、向下100px的位置上 |
背景固定
| 例子 | 效果 |
|---|---|
background-attachment:fixed; |
fixed [固定]下拉不会导致背景图移动 |
background-attachment:scroll; |
scroll 默认值[不固定] |
文本
@[颜色, 大小, 对齐, 装饰，缩进，间距]
| 属性模式 | 语法 |
|---|---|
| 对齐元素中文本 | text-align |
| 缩进元素中文本首行 | text-indent |
| 设置字间距 | backgword-spacing |
| 设置元素中空白的处理方式 | white-space |
| 设置行高 | line-height |
| 字符转换 | text-transform 属性 处理文字大小写 |
| 文本装饰 | text-decoration 属性 加下划线等等 |
| …. | … |
水平锤子对齐
文字居中方法一般设置文的行高和父级元素高度一致
vertical-align:enter; 也是可以的
.a {
width:500px;
height:80px;
text-align:center;
line-height:80px;
}
<div class="a">文字文字文字文字</div>缩进
- 可以为所有块级元素应用
text-indent: 长度单位;
| 平铺模式 | 效果 |
|---|---|
| 直接值 | 单位em，可以为负数 例：2em 缩进两个字 |
| 百分比值 | 缩进值为 20%，元素第一行会缩进其父元素宽度20% |
水平对齐
text-align:对齐属性
| 属性模式 | 语法 |
|---|---|
| 左对齐 | (默认值) left |
| 右对齐 | right |
| 居中 | enter |
| 两端对齐文 | justify (不常用) |
字间隔 & 字母间隔
| 属性模式 | 语法 | 单位 |
|---|---|---|
| 字间隔【每个单词 间隔】 | word-spacing： 属性 |
em 或 px |
| 字母间隔【每个字 间隔】 | letter-spacing： 属性 |
em 或 px |
字体
| 属性模式 | 语法 | 参数 |
|---|---|---|
| 设置字体系列 | font-family：字体 | |
| 字体的尺寸 | font-size: 大小 | |
| 字体风格 | font-style：模式 | 斜体：italic |
| 字体的粗细 | font-weight：模式 | 粗体：bold 更粗：bolder 数字：100... |
连接
能设置链接样式的 CSS 属性有很多（如 color, font-family, background 等）
链接的特殊性在于能够根据它们所处的状态来设置它们的样式
a:link- 普通的、未被访问的链接a:visited- 用户已访问的链接a:hover- 鼠标指针位于链接的上方a:active- 链接被点击的时刻
注意：为了使定义生效，a:hover 必须位于 a:link 和 a:visited 之后！！
a:active 必须位于 a:hover 之后！！
列表
| 属性模式 | 语法 | 参数 |
|---|---|---|
| 列表标记样式 | list-style-type：样式 | 空：none 实心(默认)：disc 数字：decimal … |
| 标记位置设置 | list-style-position:属性 | 左侧(默认值) outside 在文本内inside |
| 字体风格 | list-style-image:url（地址） |
表格
| 属性模式 | 语法 | 常用 |
|---|---|---|
| 表格边框合并为单一的边框 | border-collapse | border-collapse: collapse; 单边框显示 |
| 设置分隔单元格边框的距离 | border-spacing | |
| 设置表格标题的位置 | caption-side | |
| ……… | ……. |
表格应用案例
<head>
<style type="text/css">
#customers{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
}
td,th{
font-size: 1em;
border: 1px solid #98bf21;
padding: 3px 7px 2px 7px;
}
#customers th{
font-size: 1.1em;
text-align: left;
padding-top: 5px;
padding-bottom: 4px;
background-color:#A7C942;
color:#ffffff;
}
#customers tr.alt td{
color:#000000;
background-color:#EAF2D3;
}
</style>
</head>
<body>
/*此处省略创建表单内容*/
</body>效果图
模型器
清除所有元素的脏边距
* {
margin: 0;
padding: 0;
}内边距
padding
| 设置方法 | 语法 | 细节 |
|---|---|---|
| 各边统一设置 | padding: 10px; | |
| 每边顺时针设置 | padding: 10px 0.25em 2ex 20%; | 单位：px em ex 百分比 |
| 单边设置 | padding-方向 | 上：top 下：bottom 左：left 右：right |
边框
border
每个边框有 3 个方面：宽度、样式，以及颜色
| 设置方法 | 语法 | 细节 |
|---|---|---|
| 边框样式 | border-style:样式 | 单边框：ridge 输入框：inset 凸框：outset..如下图 |
| 边框宽度 | border-width: 5px; | 可以四个方向分开设置 例：下：border-bottom-width： |
| 边框颜色 | border-color 颜色 | 可以对四个方向设置 顺时针 |
设置边框常用方法
p {border: 边框粗度 样式属性 颜色;} 边框样式属性
p {border-style: solid solid solid none;} 四个方向都可以分开设置 顺时针
外边距
margin
四个方向赋值原理
h1 {margin: 0.25em 1em 0.5em;} /* 等价于 0.25em 1em 0.5em 1em */
h2 {margin: 0.5em 1em;} /* 等价于 0.5em 1em 0.5em 1em */
p {margin: 1px;} /* 等价于 1px 1px 1px 1px */
p {margin: auto;} /* 等价于 全部方向自动对齐居中 */外边距合并
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并
定位
div、h1 或 p 元素被称为块元素。这些元素显示为一块内容。相反，span 和 strong 等元素“行内元素”，这是因为它们的内容显示在行中。
position:位置定义
| 语法 | 含义 |
|---|---|
| relative（相对定位） | 可以随窗口大小变化，跟随父亲移动 |
| absolute（绝对定位） | 不随窗口大小变，只固定在特定坐标轴上 |
| fixed（固定定位） | 常用在顶部导航！跟随滚动条移动 |
| static（静态定位） | 默认值 正常流 |
overflow:超出边框部分处理
| 语法 | 含义 |
|---|---|
| overflow: scroll | 超出部分以滚动条显示 常用 |
| overflow: hidden | 直接裁剪，多余部分不显示 常用 |
| overflow: auto | 自动判断处理 |
| overflow: visible | 默认值 不会被修剪，会呈现在元素框之外 |
clip:裁剪元素
img
{
/*裁剪坐标;*/
clip:rect(0px,60px,200px,0px);
}vertical-align:垂直对齐方式
| 语法 | 含义 |
|---|---|
| vertical-align:middle | 垂直居中父元素 常用 |
| vertical-align:top | 元素的顶端与行中最高元素的顶端对齐 |
| vertical-align:bottom | 元素的顶端与行中最低的元素的顶端对齐 |
| vertical-align:baseline | 默认值 |
| … | …. |
z-index:图层顺序
img{
z-index:-1; /* 层级为-1 显示在比-1大得层级之下*/
}display:框类型
| 语法 | 含义 |
|---|---|
| 元素不显示 | display：none |
| 设置为块级，前后带换行符 | display：block |
| (默认) 内联元素 | display：inline |
| … | … |
clear : 清除浮动
| 语法 | 含义 |
|---|---|
| clear:left | 在左侧不允许浮动元素 |
| clear:right | 在右侧不允许浮动元素 |
| clear:both | 在左右两侧均不允许浮动元素 |
| clear:none | 默认值 |
选择器
选择器分类
| 类型 | 语法例子 |
|---|---|
| 元素选择器 | p {CSS语法} |
| 选择器分组 | h2, p {CSS语法} 多个属性用逗号间隔 |
| 类选择器 | .class名 {CSS语法} |
| ID选择器 | #ID名 {CSS语法} |
| 属性选择器 | a[href] {CSS语法} 只对有href属性的a元素应用样式 |
| 后代选择器 | h1 em {CSS语法}只对h1元素中的em元素应用样式 |
| 子元素选择器 | h1 > strong {CSS语法} h1元素子元素的strong元素应用样式 |
| 相邻兄弟选择器 | h1 + p {CSS语法} 选择紧接另一元素后的元素，且有相同父元素 |
伪类
@[:hover, ….]
| 类型 | 语法例子 |
|---|---|
| 被激活的元素 | :active |
| 鼠标悬浮的元素 | :hover |
| 键盘输入焦点 | :focus |
| 未被访问的链接 | :link |
| 已被访问的链接 | :visited |
| 第一个子元素 | :first-child |
| 带有指定 lang 属性 | :lang |
伪元素
@[:before, :first-line, 元素滞后添加元素, ….]
| 类型 | 语法例子 |
|---|---|
| 向文本的第一个字母添加特殊样式 | h1:first-letter |
| 向文本的首行添加特殊样式 | h1:first-line |
| 元素之前添加内容 | h1:before 常用 |
| 元素之后添加内容 | h1:after 常用 |
【content】属性用于插入生成的内容，常和:before选择器和:after选择器配合使用，将生成的内容放在一个元素内容的前面或后面
h1:before {content:url(/i/logo.jpg)}
/*各种用法*/
content: normal | string | attr() | uri() | counter()| 用法 | 作用 |
|---|---|
| string | 查入文本的内容，一般是一个字符串 |
| attr() | 插入元素的属性值，语法：attr(attribute) |
| uri() | 插入一个外部资源文件，可以是图像，音频，视频文件或浏览器所支持的其他任何资源 常用 |
| counter() | 计数器，用于插入排序标识,counter()不仅可以追加数字编号，还可以追加字母编号或罗马数字编号 |