CSS总结
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CSS 中的注释:/*
*/
html 中放置 CSS 样式的三种方法
1.内部: (访问量大的门户网站可使用)
head 中放 style 标签
<style>
span{
font-size:50px;
}
</style
2.内联:
在标签身上加 style 属性
<span style="font-size:50px;">样式标签</span>
3.文本属性
text-decoration:none; 下划线|上划线|删除线|none
text-align:center;文字对齐
line-height:50px;行高,可以设置文字垂直居中,100%正常值.
text-indent:10px;首行缩进 10px;
word-break:break-all;碰到 Div 右侧折行
word-spacing:20px;词间距
letter-spacing:20px;字间距
white-space:normal 合空白，不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
:pre; 原样输出
:nowrap;不换行
:pre-line;合并空白,保留换行.
:pre-wrap;保留空白,保留换行.
10.表格样式 border-collapse:设置是否将表格边框折叠为单一边框 collapse;折叠 separate;默认不折叠 border-spacing:10px; 表格四边边框之间的空白,separate 值时才可用. :10px 20px;宽高不同 width:宽 height:高,可用以 tr,th. border: 1px solid blue;表格边框 text-align:right|left|; vertical-align:top|bottom; table-layout:fixed;列宽由表格宽度和列宽度设定。 :automatic;默认。列宽度由单元格内容设定。
7.尺寸样式样式 width: min-width: max-width: height:
//最少宽度 //最大宽度
8.textarea 文本域 resize:none; //右下角不能拖动
9.样式继承 文本类的 css 最易被继承 font-family font-size font-weight font-sytle colr text-align
CSS 颜色: color: 1.#ffffff; 2.red; 3.rgb; //255,255,255;
CSS 选择器: 1.标签选择器 h1{} span{} 2.id 选择器 #id 名{} 3.class 类选择器 .类名{} 4.组合选择器 span,font,h1,……{} 5.关联选择器 #id 名 h1{ } 6.伪类选择器(有兼容问题,用 js 替代) a:link{} a:hover{} a:active{} a:visited{}
14.定位属性
一:绝对定位
position:absolute;
left:10px; /x 坐标
top:10px; /Y 坐标
二:相对定位
position:relative;
top:50%; /*相对父标签上的 50% x 坐标*/
left:50%; /*相对父标签左的 50% Y 坐标*/
/*要相对父标签居中,要用 margin-left:-**px; margin-right:- 自己本身尺寸的一半 px;.*/
三:z-index:5;
/*值越大,越往上.支持负值.不用单位*/
15.布局样式 练习:div 无意议块标签,可以设计宽高,背景,专用来快速布局
16.漂浮 float-left; /左漂浮 float-right;/右漂浮
17.滚动条 overflow:visible|auto|hidden|scroll;
border-bottom-color:定义下边颜色
缩写:border:1px solid #f00; :border-left:简写属性，用于把左边框的所有属性设置到一个声明中。
6.列表样式 list-style-type:none; none:不显示项目符号 disc:默认值,实心圆 circle:空心圆 square:实心方块 decimal:阿拉伯数字 lower-roman:小写罗马数字 upper-roman:大写罗马数字 lower-alpha:小写英文字母 upper-alpha:大写英文字母 list-style-image: url("/i/eg_arrow.gif");把图像设置为列表中的项目标记 list-style:简写属性。用于把所有用于列表的属性设置于一个声明中。
11.外边距
margin-top:auto; margin-right:0px; margin-bottom:auto; margin-left:0px; margin:简写属性。作用是在一个声明中设置元素的所内边距属性。顺序:上右下左缩写 //margin:0px auto 0px auto; //margin:0 auto; 12.内边距 padding-top: padding-right: padding-bottom: padding-left: padding:简写属性,顺序:上右下左. 13.边框: border-top: border-right: border-bottom: border-left: border:简写属性,顺序:上右下左. 加有边框样式.
4.鼠标光标属性
cursor:pointer;小手 :wait;等待 :help;帮助 :text;输入提示
5.边框属性:宽度 样式 颜色 样式:border-style: :none 定义无边框。 :solid 定义实线 :double 定义双线 :dotted 定义点状边框 :dashed 定义虚线 :inset 定义 3D inset 边框 :outset 定义 3D outset 边框 :groove 定义 3D 凹槽边框 border-top-style:定义上边样式 宽度:border-width:20px; border-right-width:定义右边宽度 颜色:border-color:#foo;
2.背景属性
background-color:#ccc;
background-imgas:url(图片地址);
background-repeat:repeat 重复背景图像
:no-repeat 不重复背景图像
:repeat-x 水平重复
:repeat-y; 垂直重复
background-postion:X 坐标 Y 坐标; 设置背景图像的起始位置
CSS 常见的样式属性和值
1.字体与颜色
font-family:宋体;
//字体
Fra Baidu bibliotek
font-size:50px;
//大小
font-weight:bold|900; //字体加粗
默认值:normal;
font-style:italic;
//字体风格加斜 默认值:normal;
color:blue;
//字体颜色
18.显示和隐藏 1)占位隐藏 visibility:hidden; 2)不占位隐藏 display:none;
19:显示 visibility:visible; display:block;设置为块级元素 display:inline;设置为内联元素 opacity:0.4; 不透明度,1 表示不透明.
:left top;
:center;
background-attachment:scroll;默认值。背景图像会随着页面其余部分的滚动而移动。
:fixed; 当页面的其余部分滚动时，背景图像不会移动。
background:#ccc url() repeat-x ;简写属性，作用是将背景属性设置在一个声明中。
3.外部:(建议)
<link rel="stylesheet" type="text/css" href="index.css">
CSS 中的优先级: 1.内联 2.内部或外部 /注:谁离标签近,谁的优先级就最高. 3.精确配置大于模糊配置 一:id 二:类 三:标签 四:*
CSS 长度单位: 1.px 像素 2.em 倍数
*/
html 中放置 CSS 样式的三种方法
1.内部: (访问量大的门户网站可使用)
head 中放 style 标签
<style>
span{
font-size:50px;
}
</style
2.内联:
在标签身上加 style 属性
<span style="font-size:50px;">样式标签</span>
3.文本属性
text-decoration:none; 下划线|上划线|删除线|none
text-align:center;文字对齐
line-height:50px;行高,可以设置文字垂直居中,100%正常值.
text-indent:10px;首行缩进 10px;
word-break:break-all;碰到 Div 右侧折行
word-spacing:20px;词间距
letter-spacing:20px;字间距
white-space:normal 合空白，不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
:pre; 原样输出
:nowrap;不换行
:pre-line;合并空白,保留换行.
:pre-wrap;保留空白,保留换行.
10.表格样式 border-collapse:设置是否将表格边框折叠为单一边框 collapse;折叠 separate;默认不折叠 border-spacing:10px; 表格四边边框之间的空白,separate 值时才可用. :10px 20px;宽高不同 width:宽 height:高,可用以 tr,th. border: 1px solid blue;表格边框 text-align:right|left|; vertical-align:top|bottom; table-layout:fixed;列宽由表格宽度和列宽度设定。 :automatic;默认。列宽度由单元格内容设定。
7.尺寸样式样式 width: min-width: max-width: height:
//最少宽度 //最大宽度
8.textarea 文本域 resize:none; //右下角不能拖动
9.样式继承 文本类的 css 最易被继承 font-family font-size font-weight font-sytle colr text-align
CSS 颜色: color: 1.#ffffff; 2.red; 3.rgb; //255,255,255;
CSS 选择器: 1.标签选择器 h1{} span{} 2.id 选择器 #id 名{} 3.class 类选择器 .类名{} 4.组合选择器 span,font,h1,……{} 5.关联选择器 #id 名 h1{ } 6.伪类选择器(有兼容问题,用 js 替代) a:link{} a:hover{} a:active{} a:visited{}
14.定位属性
一:绝对定位
position:absolute;
left:10px; /x 坐标
top:10px; /Y 坐标
二:相对定位
position:relative;
top:50%; /*相对父标签上的 50% x 坐标*/
left:50%; /*相对父标签左的 50% Y 坐标*/
/*要相对父标签居中,要用 margin-left:-**px; margin-right:- 自己本身尺寸的一半 px;.*/
三:z-index:5;
/*值越大,越往上.支持负值.不用单位*/
15.布局样式 练习:div 无意议块标签,可以设计宽高,背景,专用来快速布局
16.漂浮 float-left; /左漂浮 float-right;/右漂浮
17.滚动条 overflow:visible|auto|hidden|scroll;
border-bottom-color:定义下边颜色
缩写:border:1px solid #f00; :border-left:简写属性，用于把左边框的所有属性设置到一个声明中。
6.列表样式 list-style-type:none; none:不显示项目符号 disc:默认值,实心圆 circle:空心圆 square:实心方块 decimal:阿拉伯数字 lower-roman:小写罗马数字 upper-roman:大写罗马数字 lower-alpha:小写英文字母 upper-alpha:大写英文字母 list-style-image: url("/i/eg_arrow.gif");把图像设置为列表中的项目标记 list-style:简写属性。用于把所有用于列表的属性设置于一个声明中。
11.外边距
margin-top:auto; margin-right:0px; margin-bottom:auto; margin-left:0px; margin:简写属性。作用是在一个声明中设置元素的所内边距属性。顺序:上右下左缩写 //margin:0px auto 0px auto; //margin:0 auto; 12.内边距 padding-top: padding-right: padding-bottom: padding-left: padding:简写属性,顺序:上右下左. 13.边框: border-top: border-right: border-bottom: border-left: border:简写属性,顺序:上右下左. 加有边框样式.
4.鼠标光标属性
cursor:pointer;小手 :wait;等待 :help;帮助 :text;输入提示
5.边框属性:宽度 样式 颜色 样式:border-style: :none 定义无边框。 :solid 定义实线 :double 定义双线 :dotted 定义点状边框 :dashed 定义虚线 :inset 定义 3D inset 边框 :outset 定义 3D outset 边框 :groove 定义 3D 凹槽边框 border-top-style:定义上边样式 宽度:border-width:20px; border-right-width:定义右边宽度 颜色:border-color:#foo;
2.背景属性
background-color:#ccc;
background-imgas:url(图片地址);
background-repeat:repeat 重复背景图像
:no-repeat 不重复背景图像
:repeat-x 水平重复
:repeat-y; 垂直重复
background-postion:X 坐标 Y 坐标; 设置背景图像的起始位置
CSS 常见的样式属性和值
1.字体与颜色
font-family:宋体;
//字体
Fra Baidu bibliotek
font-size:50px;
//大小
font-weight:bold|900; //字体加粗
默认值:normal;
font-style:italic;
//字体风格加斜 默认值:normal;
color:blue;
//字体颜色
18.显示和隐藏 1)占位隐藏 visibility:hidden; 2)不占位隐藏 display:none;
19:显示 visibility:visible; display:block;设置为块级元素 display:inline;设置为内联元素 opacity:0.4; 不透明度,1 表示不透明.
:left top;
:center;
background-attachment:scroll;默认值。背景图像会随着页面其余部分的滚动而移动。
:fixed; 当页面的其余部分滚动时，背景图像不会移动。
background:#ccc url() repeat-x ;简写属性，作用是将背景属性设置在一个声明中。
3.外部:(建议)
<link rel="stylesheet" type="text/css" href="index.css">
CSS 中的优先级: 1.内联 2.内部或外部 /注:谁离标签近,谁的优先级就最高. 3.精确配置大于模糊配置 一:id 二:类 三:标签 四:*
CSS 长度单位: 1.px 像素 2.em 倍数