**
**实际的应用:
1.去掉默认样式(用到的标签名都写上,逗号隔开)
margin:0px;
padding:0px;
例:body,table,tr,td,div,dl,dt,dd,ul,li{
margin:0px;
padding:0px;
}
2:div居中:margin:0 auto;
3:文字垂直居中:元素的高度(height)与行高(line-height)设成相同的值
一:网页布局的时候(命名代码规范)
头部div取值为:id="header"
中间div取值为:id="container"
中间左部分div取值为:class="left"
中间中部分div取值为:class="middle"
中间右部分div取值为:class="right"
底部div取值为:id="footer"
二:样式表
①:行内样式:
写在标签中,加style属性,在属性值中写样式
<标签 style="属性:值;属性:值;">
②:内部样式:
<style type="text/css">
具体样式
</style>
③:引用外部样式:
<link rel="stylesheet" type="text/css" href="样式表文件.css" />
样式形式的级别:
行内样式 > 内部样式 > 外部样式
三:选择器(w3c规定:一个页面id不能重复)
①标签选择器
选择器的位置是标签名
②类选择器
以.开头
引用时在标签中加 class="类样式的选择器名"
③id选择器
以#开头
先为控件添加id属性(一个页面id不能重复)
再在style标签中为其添加样式
选择器的级别:
id > class > 标签(样式冲突时)
①后代选择器:
选择器1 选择器2(空格隔开)
②并集选择器
选择器1,选择器2(逗号隔开)
③交集选择器
选择器1选择器2(中间没有任何分隔)
!!!!注意:在交集选择器中,选择器1必须是标签选择器,选择器2必须是类或id选择器
一:字体设置
1:字体样式
字体类型 font-family font-family:"隶书"(楷体);
1.先设置英文字体,再设置中文字体2.每种字体逗号隔开3.字体类型中有空格或为中文,要加双引号
如果浏览器不支持第一个字体,则会尝试下一个。
字体大小 font-size font-size:12px;(单位像素)
字体风格 font-style font-style:italic;
normal:默认 italic:倾斜体
字体的粗细font-weight font-weight:bold;
normal:标准 、bold:粗体字体 lighter:细体
在一个声明中设置所有字体属性(顺序字体风格-字体粗细-字体大小-类型) font:italic bold 36px "宋体";
2:文本样式
1:颜色:color
black blue green red gray orange purple white yellow
黑色 蓝色 绿色 红 灰色 橙 紫 白色 黄色
2:水平对齐方式:text-align
left:左 right:右 center:居中 justify:两端对齐
3:首行缩进:text-indent:2em
4:行高:line-height:12px
5:文本添加修饰:text-decoration
none:标准文本 underline:设置文本的下划线 overline:设置文本的上划线
line-through:设置文本的删除线 blink:设置文本的闪烁(IE无效)
6:垂直对齐方式(vertical-align:垂直方向对齐方式 top middle bottom ——只对img标签起效)
<p><img ......../>xxxxx</p> p img{vertical-align:middle;}
二:超链接
1:分类
未单击访问前(a:link)
鼠标悬浮在超链接上(a:hover)【必须设置在a:link和a:visited之后才有效】
单击未释放(a:active)【必须设置在a:hover之后才有效】
单击访问后(a:visited)
2:设置顺序:link->visited->hover->active
注意:a:link 与a:visited:如果没有设置href属性,这两个将没有样式
3:语法:
标签名:伪类名{声明;}
a:hover {
color:#B46210;
text-decoration:underline;
}
2:设置鼠标形状:cursor 【span{cursor:pointer;}】
default:默认 箭头
pointer: 超链接的指针(小手)
wait:指示程序正在忙()
help:可用的帮助(箭头问好)
text:指示文本(细I的形状)
crosshair:呈现十字状
三:背景样式
1:<div>:可将HTML文档分割成独立的,不同的部分,常用来进行网页的布局
width:宽度(200px)height:高度(290px)
<div id="iys2" style="width:180px ;height:180px;">
或
#iys2{width:180px ;height:180px;
2:背景属性
①背景颜色:background-color(值:red、yellow或#ff0000)
②背景图像
背景图像:background-image:url(bg.jpg)
背景重复:background-repeat(repeat:水平垂直方向重复 repeat-x:水平方向重复
repeat-y:在垂直方向重复 no-repeat:背景图像仅显示一次
显示背景图像上的起始位置(基准的位置:左上方):background-position
正(值)方向偏移的位置为:右下方
负(负)方向偏移的位置为:左上方
1.只设置一个值:x轴为设定的值,y轴为居中
2.设置两个值:第一个是x轴,第二个是y轴
简写背景样式:顺序(颜色 url 背景定位 背景重复方式)
四:列表样式
list-style:none;去掉默认圆点
1:列表项标记的类型 list-style-type
none:无标记符号
disc:实心圆,默认类型
circle:空心圆
square:实心正方形
decimal:数字
2:图像替换列表项的标记(设置它后list-style-type将不起作用) list-style-image
list-style-image:url(image/arrow-right.gif);
注意:此设置网络的兼容性差,可用图片背景(加偏移量)代替
3:何处放置列表项标记 list-style-position
inside:标记放置在文本(范围)以内
outside:标记放置在文本以外
4:设置所有列表的属性 list-style
顺序:list-style-type list-style-position list-style-image
五:盒子模型
1:边框(第一层)
2:元素内容及内边距(第二层)
3:背景图(第三层)
4:外边距
盒子模型的宽度=content(内容)+padding(填充:内容与边框之间)+border(内容的边框)+margin(两个内容之间的距离)
1:边框
①border-color:颜色
属性 说明 示例
border-top-color 上边框颜色 border-top-color:#369;
border-right-color 右边框颜色 border-right-color:#369;
border-bottom-color 下边框颜色 border-bottom-color:#fae45b;
border-left-color 左边框颜色 border-left-color:#efcd56;
四个边框为同一颜色 border-color:#eeff34;
上、下边框颜色:#369 左、右边框颜色:#000 border-color:#369 #000;
border-color 上边框颜色:#369左、右边框颜色:#000 border-color:#369 #000 #f00;
上、右、下、左边框颜色:#369、#000、#f00、#00f border-color:#369 #000 #f00 #00f;
②border-width:粗细
thin 设置细的边框
medium 默认值(设置中等的边框)
thick 设置粗的边框
像素值 自定义设置边框的宽度
border-top-width:5px;
border-right-width:10px;
border-bottom-width:8px;
border-left-width:22px;
border-width:5px ;
border-width:20px 2px;
border-width:5px 1px 6px;
border-width:1px 3px 5px 2px;
③border-style:样式
none:无边框
dotted:点线边框
dashed:虚线边框
solid:实线边框
double:双线边框
④简写(border):在一个声明中设置所有的边框属性
border-top border-right border-bottom border-left
顺序为:width style color
2:外边距(与其他盒子之间的距离)
属性
margin-top:上边距
margin-right:右边距
margin-bottom:下边距
margin-left:左边距
margin
示例
auto:居中显示
margin-top: 1 px
margin-right : 2 px
margin-bottom : 2 px
margin-left : 1 px
margin :3px 5px 7px 4px; 上、右、下、左边距
margin :3px 5px; 上下3px 左右边距5px
margin :3px 5px 7px; 上下为3和7;左右为5
margin :8px; 四个边距都是8px
3:内边距(内容与边框之间的距离)
属性
padding-left
padding-right
padding-top
padding-bottom
padding
示例
padding-left:10px;
padding-right: 5px;
padding-top: 20px;
padding-bottom:8px;
padding:20px 5px 8px 10px ;
padding:10px 5px;
padding:30px 8px 10px ; :上下为30和10;左右为8
padding:10px;
4:标准文档流(CSS默认的排列规则)
①块级元素:以一块区域显示的元素(独占一行,拥有自己的区域)
<ul><ol><dl><h1><p><div>
②内联元素:字母之间横向排列,到最右端自动拆行(没有自己的区域)
<span><a><img><strong>
③内联标签可以包含在块级标签之中;但块级标签无法包含在内联标签之中
④display属性(控制元素的显示方式)
值 说明
block 块级元素的默认值,元素会被显示为块级元素,该元素前后会带有换行符
inline 内联元素的默认值。元素会被显示为内联元素,该元素前后没有换行符
none 设置元素不会被显示
六:页面布局(131型、121型)
1:浮动 float属性(元素向哪个方向浮动)
none:不浮动(默认值)
left:向左浮动
right:向右浮动
设置了浮动后,该元素将会脱离标准文档流,盒子的元素将不再延伸,而是根据内容的宽度来确定,但不会脱离父标签的范围
2:清除浮动 clear属性(设置元素的哪一侧不允许有浮动元素)
left:左侧不允许有浮动
right:右侧不允许有浮动
both:两侧均不允许有浮动
none:两侧允许有浮动元素(默认值)
3:控制元素的大小(<div>)
width:元素宽度
height:元素高度
4:扩展盒子的高度
因为盒子中的元素有了浮动,所以,盒子本身的高度可能就会变低,那么如果想让盒子的高度视觉上依然包含所有的元素,我们可以扩展盒子的高度。
方法一:在盒子中元素的最下方添加空div,设置样式clear:both清除浮动
方法二:在父级的标签设置中添加overflow属性为:hidden。
5:溢出处理
就是将内容放到一个固定宽度和高度的盒子中,超出的部分隐藏起来或以带滚动条的窗口显示
owerflow属性
visible:默认值,内容不会被修剪,会呈现在盒子之外
hidden:内容会被修剪,并且其余的内容是不可见的
scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容
没有内容溢出的方向也会出现滚动条
auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余内容
没有内容溢出的方向不会出现滚动条
七:定位机制
标准流
浮动
绝对定位
1:position属性:相对于父级的位置和相对于它自身该在的位置
①:static:默认值没有定位(元素按照标准流进行布局)
②:relative:相对定位(移动后的位置相对于原位置)(负数正方向/正数反方向)
同时还要指定一定的偏移量,水平方向:left或right; 垂直方向:top或tottom
元素移动之后,元素的大小并没有改变,原有的位置依然保留,其他的元素不受影响(不会被下面的其他的元素占用)
#third {
background-color:#C5DECC;
border:1px #395E4F dashed;
position:relative;
right:20px;
bottom:30px;
}
③:absolute:绝对定位
使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素”为基准进行偏移。
如果没有已经定位的祖先元素,那么会以浏览器窗口(右上)为基准进行定位。
绝对定位的元素从标准文档流中脱离,这意味着它们对其他元素的定位不会造成影响。
元素的某个边框相对于父级的某个边框的距离
设置绝对定位,不设置偏移量,他将保持在原有的位置上(但依然脱离了文档流)
元素定位之后,元素的大小将以内容的大小填充,原有的位置没有了,被其他的元素占用
④:先浮动后定位
相对定位,对浮动元素没有影响,并且继续执行相对定位
绝对定位,会让浮动元素失去浮动的效果,执行绝对定位
2:z-index属性:用于调整元素定位是重叠的上下位置(在设置了position的值的时候,他才有效)
z-index的值越大,他的堆放位置越在上面

被折叠的 条评论
为什么被折叠?



