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()不仅可以追加数字编号,还可以追加字母编号或罗马数字编号 |