CSS样式资料整理

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.盒模型

1. CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
2. 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局。
3. CSS 框模型概述图示。
4. 解释说明：
   1. Margin(外边距) - 清除边框外的区域，外边距是透明的。
   2. Border(边框) - 围绕在内边距和内容外的边框。
   3. Padding(内边距) - 清除内容周围的区域，内边距是透明的。
   4. Content(内容) - 盒子的内容，显示文本和图像。
      

案例一：有盒模型后，计算像素的总值。
//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	默认值。允许浮动元素出现在两侧。