CSS样式资料整理
1.文本样式
属性 | 描述 | 取值 |
---|
color | 设置文本颜色 | 十六进制值,RGB值,颜色名称 |
text-align | 设置元素文本的水平对齐 | center,left,right,justify |
vertical-align | 设置元素图像的垂直对齐 | 默认,text-top,text-bottom |
text-decoration | 设置或删除文本的装饰 | none,overline,line-through,underline,blink |
text-transform | 设置文本转换属性 | uppercase,lowercase,capitalize |
text-indent | 设置第一行文本缩进 | 像素值,百分比 |
letter-spacing | 设置字符之间的间距 | 像素值 |
line-height | 设置行高 | 像素值,百分比 |
direction | 设置文本方向 | ltr,rtl |
word-spacing | 设置单词之间的间距 | 像素值 |
white-space | 设置元素中空白的处理方式 | normal,pre,nowrap,pre-wrap,pre-line |
text-shadow | 设置文本阴影效果 | 语法: text-shadow: h-shadow v-shadow blur color; |
text-outline | 设置文本外轮廓 | 语法: text-outline: thickness blur color; |
2.背景样式
属性 | 描述 | 取值 |
---|
background-color | 设置背景颜色 | 十六进制,RGB,颜色名称 |
background-image | 设置背景图片 | url(‘URL’),none |
background-size | 设置背景图片的尺寸 | background-size:length,percentage,cover,contain; |
background-repeat | 设置是否及如何重复背景图像 | repeat,repeat-x,repeat-y,no-repeat |
background-attachment | 设置背景图像是否固定或者随着页面的其余部分滚动 | scroll,fixed |
background-position | 设置背景图像的开始位置 | x% y%; xpos ypos; [top,center,bottom left,center,right] |
background | 简写所有的背景属性 | #00FF00 url(bg.jpg) no-repeat fixed top; |
3.字体样式
属性 | 描述 | 取值 |
---|
font | 声明中设置所有字体属性 | font:italic bold 12px/20px arial,sans-serif; |
font-family | 规定文本的字体系列 | “serif”、“sans-serif”、“cursive”、“fantasy”、“monospace”, 多个使用逗号隔开,中文字体加双引号 |
font-size | 规定文本的字体尺寸 | xx-small 到 xx-large,length,% |
font-style | 规定文本的字体样式 | normal,italic,oblique |
font-variant | 规定是否以小型大写字母的字体显示文本 | normal,small-caps |
font-weight | 规定字体的粗细 | lighter,normal,bold,bolder,100-900 |
4.链接状态样式
属性 | 描述 | 取值 |
---|
a:link | 正常,未访问过的链接 | 可以用任何CSS属性(如颜色,字体,背景等) |
a:visited | 用户已访问过的链接 | 可以用任何CSS属性(如颜色,字体,背景等) |
a:hover | 当用户鼠标放在链接上时 | 可以用任何CSS属性(如颜色,字体,背景等) |
a:active | 链接被点击的那一刻 | 可以用任何CSS属性(如颜色,字体,背景等) |
5.列表样式
属性 | 描述 | 取值 |
---|
list-style | 声明中设置所有的列表属性 | list-style:square inside url(‘URL’); |
list-style-image | 将图象设置为列表项标记 | URL,none |
list-style-position | 设置列表项标记的放置位置 | inside,outside |
list-style-type | 设置列表项标记的类型 | none,disc,circle,square,decimal,roman,alpha,latin,greek… |
6.表格样式
属性 | 描述 | 取值 |
---|
border-collapse | 规定是否合并表格边框 | separate,collapse |
border-spacing | 规定相邻单元格边框之间的距离 | length length |
caption-side | 规定表格标题的位置 | top,bottom |
7.尺寸样式
属性 | 描述 | 取值 |
---|
width | 设置元素的宽度 | 像素值,百分比 |
height | 设置元素的高度 | 像素值,百分比 |
line-height | 设置行高 | 像素值,百分比 |
max-height | 设置元素的最大高度 | 像素值,百分比 |
max-width | 设置元素的最大宽度 | 像素值,百分比 |
min-height | 设置元素的最小高度 | 像素值,百分比 |
min-width | 设置元素的最小宽度 | 像素值,百分比 |
8.@media媒体类型
属性 | 描述 |
---|
all | 用于所有的媒体设备。 |
aural | 用于语音和音频合成器。 |
braille | 用于盲人用点字法触觉回馈设备。 |
embossed | 用于分页的盲人用点字法打印机。 |
handheld | 用于小的手持的设备。 |
print | 用于打印机。 |
projection | 用于方案展示,比如幻灯片。 |
screen | 用于电脑显示器。 |
tty | 用于使用固定密度字母栅格的媒体,比如电传打字机和终端。 |
tv | 用于电视机类型的设备。 |
9.盒模型
- CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
- 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局。
- CSS 框模型概述图示。
- 解释说明:
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像。
![CSS盒模型](https://i-blog.csdnimg.cn/blog_migrate/c20532153d34ba865eae0bac8e4bc137.png#pic_center)
案例一:有盒模型后,计算像素的总值。
//CSS盒模型:
div {
width: 200px;
border: 20px solid red;
padding: 20px;
margin: 20px;
}
//最终像素计算:
200px (宽)+ 40px (左 + 右填充)+ 40px (左 + 右边框)+ 40px (左 + 右边距) = 320px
案例二:给出宽度后,设置盒模型设计。
//设置总宽度为300像素的元素
200+40+40+20=300px
//CSS盒模型
div {
width: 200px;
padding: 20px;
border: 10px solid gray;
margin: 20px;
}
1.最终元素的总宽度计算公式是这样的:
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
2.元素的总高度最终计算公式是这样的:
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
10.边框和轮廓样式
属性 | 描述 | 取值 |
---|
border | 声明中设置所有的边框属性 | border:5px solid red; |
border-color | 设置四条边框的颜色 | 十六进制,RGB,颜色名称 |
border-style | 设置四条边框的样式 | none,dotted,dashed,solid,double |
border-width | 设置四条边框的宽度 | length,thin,medium,thick |
border-left | 声明中设置所有的左边框属性 | border-left:5px solid red; |
border-left-color | 设置左边框的颜色 | 十六进制,RGB,颜色名称 |
border-left-style | 设置左边框的样式 | none,dotted,dashed,solid,double |
border-left-width | 设置左边框的宽度 | length,thin,medium,thick |
outline | 声明中设置所有的轮廓属性 | outline:#00FF00 dotted thick; |
outline-color | 设置轮廓的颜色 | 十六进制,RGB,颜色名称 |
outline-style | 设置轮廓的样式 | none,dotted,dashed,solid,double |
outline-width | 设置轮廓的宽度 | length,thin,medium,thick |
11.padding内填充样式
属性 | 描述 | 取值 |
---|
padding | 声明中设置所有内边距属性 | auto,length,% |
padding-bottom | 设置元素的下内边距 | length,% |
padding-left | 设置元素的左内边距 | length,% |
padding-right | 设置元素的右内边距 | length,% |
padding-top | 设置元素的上内边距 | length,% |
备注 : padding属性,可以有一到四个值。
padding:25px 50px 75px 100px;
上填充为25px 右填充为50px 下填充为75px 左填充为100px
padding:25px 50px 75px;
上填充为25px 左右填充为50px 下填充为75px
padding:25px 50px;
上下填充为25px 左右填充为50px
padding:25px;
所有的填充都是25px
12.margin 外边距样式
属性 | 描述 | 取值 |
---|
margin | 声明中设置所有外边距属性 | auto,length,% |
margin-bottom | 设置元素的下外边距 | length,% |
margin-left | 设置元素的左外边距 | length,% |
margin-right | 设置元素的右外边距 | length,% |
margin-top | 设置元素的上外边距 | length,% |
备注 : margin属性可以有一到四个值。
margin:25px 50px 75px 100px;
上边距为25px 右边距为50px 下边距为75px 左边距为100px
margin:25px 50px 75px;
上边距为25px 左右边距为50px 下边距为75px
margin:25px 50px;
上下边距为25px 左右边距为50px
margin:25px;
所有的4个边距都是25px
13.Display显示样式
display 属性规定元素应该生成的框的类型。
display取值 | 描述 |
---|
none | 此元素不会被显示。 |
block | 此元素将显示为块级元素,此元素前后会带有换行符。 |
inline | 默认。此元素会被显示为内联元素,元素前后没有换行符。 |
inline-block | 行内块元素。(CSS2.1 新增的值) |
list-item | 此元素会作为列表显示。 |
run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
table | 此元素会作为块级表格来显示(类似 ),表格前后带有换行符。
|
inline-table | 此元素会作为内联表格来显示(类似 ),表格前后没有换行符。
|
一、块元素和内联元素
块元素是一个元素,占用了全部宽度,在前后都是换行符。
<h1>
<p>
<div>
内联元素只需要必要的宽度,不强制换行。
<span>
<a>
二、块元素和内联元素区别
块级元素(block)特性:
总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性:
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变,就是里面文字或图片的大小;
三、块元素和内联元素重要元素
块级元素主要有:
address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
内联元素主要有:
a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
可变元素(根据上下文关系确定该元素是块元素还是内联元素):
applet ,button ,del ,iframe , ins ,map ,object , script
四、CSS中块级、内联元素的应用:
利用CSS我们可以摆脱上面表格里HTML标签归类的限制,自由地在不同标签/元素上应用我们需要的属性。
主要用的CSS样式有以下三个:
display:block -- 显示为块级元素
display:inline -- 显示为内联元素
display:inline-block -- 显示为内联块元素,表现为同行显示并可修改宽高内外边距等属性。
14.Position定位样式
position 属性规定元素的定位类型。
position取值 | 描述 |
---|
absolute | 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 |
fixed | 生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 |
relative | 生成相对定位的元素,相对于其正常位置进行定位。 因此,“left:20” 会向元素的 LEFT 位置添加 20 像素。 |
static | 默认值。没有定位, 元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
1.static 定位
HTML 元素的默认值,即没有定位,遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。
p.p_static {
position: static;
border: 3px solid #73AD21;
}
2.fixed 定位
元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。
p.p_fixed
{
position:fixed;
top:30px;
right:5px;
}
3.relative 定位
相对定位元素的定位是相对其正常位置。
h2.p_left
{
position:relative;
left:-20px;
}
h2.p_right
{
position:relative;
left:20px;
}
4.absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>。
h2
{
position:absolute;
left:100px;
top:150px;
}
15.Overflow溢出样式
overflow 属性规定当内容溢出元素框时发生的事情。overflow 属性只工作于指定高度的块元素上。
position取值 | 描述 |
---|
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
16.Float浮动样式
float 属性定义元素在哪个方向浮动。
position取值 | 描述 |
---|
left | 元素向左浮动。 |
right | 元素向右浮动。 |
none | 默认值。元素不浮动,并会显示在其在文本中出现的位置。 |
一、注意几点:
1.float 属性定义元素在哪个方向浮动。以往应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。
2.浮动元素会生成一个块级框,而不论它本身是何种元素。
3.浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。
4.假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。
17.Float浮动样式
clear 属性定义了元素的哪边上不允许出现浮动元素。
clear取值 | 描述 |
---|
left | 在左侧不允许浮动元素。 |
right | 在右侧不允许浮动元素。 |
both | 在左右两侧均不允许浮动元素。 |
none | 默认值。允许浮动元素出现在两侧。 |