2014-11-26----css的简介

CSS :层叠样式表 cascading style sheets 它的作用是:美化html网页

格式:样式名:值;样式名:值;样式名:值;

注释语法:/* 注释内容 */

选中代码按TAB,代码左移,shift+tab右移

(一)基本:

一:分类:

1.内联 和html联合显示,控制精确,可重用性差,冗余多

<p >呵呵呵</p>


2.内嵌 作为一个独立区域内嵌在网页里,必须在head里面

<head>

<style type="text/css">
p 对页面里的p起作用
{
font-size:108px;
}

</style>
</head>


3.外部 建个CSS文件夹,新建CSS文件

右键,css样式表,附加样式表,找到文件,一般用link连接方式


二:选择器

1.简单选择器

*是所有的

标签选择器: 用标签名做选择器,如:p{样式}
class选择器:设置统一的class,比如在<p class="qd"> 在样式表中用点代表class的选择器 .qd{样式}
id选择器:针对某个id起作用,id不允许重。<p id="xx"> 在样式表中#xx{样式}

id选择器优先级高于class选择器优先级高于标签名选择器,优先级高的会覆盖掉优先级低的样式,样式表优先级高于属性的

2.复合选择器

以逗号隔开;并列关系,同时起作用如:#xx,#dd{ 样式 }
以空格隔开,后代关系,如果p在div里面,则用 div p { 样式 }
以点隔开的,筛选关系,p.qd { }对p进行class筛选,p里class为qd的执行样式

(二)样式:

一:背景与前景
background-color:#eeeeff;背景颜色
background-image:url(image/8b322d3f373e4a3fb8a1677e.jpg);背景图片(默认平铺):

background-attachment:fixed; 背景固定
background-attachment:scroll;背景和字一起滚动,默认是一起
background-repeat:repeat;对齐方式,默认平铺repeat
background-repeat:no-repeat;不平铺
background-repeat:repeat-x;横向平铺
background-repeat:repeat-y;纵向平铺
background-position:center;不平铺的情况下位置放到中间
background-position:right bottom;右下角
background-position:right 100px bottom 100px;离右边100,离下面100,可以是负的值

前景
font-family:"隶书";字体名称(微软雅黑,宋体)
font-size:12px; 字体大小,像素(12px,14px,18px)8em默认字体的8倍还可以用百分比
font-weight:100; bold,normal 是否加粗
font-style:inherit; italic,normal是否倾斜
color:#09F;颜色

文本对齐修饰
text-decoration:underline;下划线,overline上划线,line-through删除线,none是去掉下划线,可以去掉超链接的下划线
text-align:center;横向对齐方式
vertical-align:middle;纵向对齐方式top.middle,bottom
text-indent:首行缩进量,如果字体是14px,则缩进两个位28px
line-height:行高 一般是1.5到2倍的字体大小

二:边界与边框

1.border类:边框

border: 5px solid blue ;5个像素的粗细,样式是实线,颜色是blue;
border-width:5px; border-style:double;border-color:red;这是分开设置粗细,样式和颜色
border-top:5px solid red;设置上面的 border-bottom:5px solid red;设置下面的


2.margin类:外边距

margin:10px;四个边距都是10px; margin-top:10px; right,left,bottom;上右左下
margin:10px 0px 10px 0px;顺序是顺时针:上右下左。

3.padding类:内边距

padding:10px 0px 10px 0px;顺时针,上右下左

三:列表与方块

默认布局方式,流式布局,上到下,左到右,相对流式布局

width,height, 只有在绝对定位布局时可用(left,top,right,bottom)

对ol列表:
list-style:none;去掉有序数字 circle;是圆圈,disc圆点
list-style-image:url(images/8.jpg);列表图片
list-style-position:outside; 符号在边距上,inside符号在边距之内
margin padding 默认是有边距和间距
list-style-type:disc 类型

四:格式与布局

布局的时候一般最上面写上:

*
{
margin:0px auto;
padding:0px;
}

让所有的外距和内距为0,加了auto居中。

1.position:
obsolute; 绝对定位,放在页面首屏的那个位置,跟着滚动
外层没有position=absolute或relative它按照浏览器边框定位
如果外层有position=absolute或relative它按照外层的那个元素的边框进行定位

fixed; 固定在页面的一个位置上,滚动屏幕,它不动,针对浏览器边框定位


正常一个div默认占一行,确定它本来应该在的位置, 如果不设置position,则left,right,top,bottom不管用
relative;相当于之前应当在的位置进行移动,之前的位置应该是左上角

2.z-index:9; z轴,控制谁在上层,大的压小的

3.溢出overflow:超出范围
hidden隐藏 scroll出现滚动条

4.float:浮动方向,原本默认占一行,float之后可以在一行内放多个
float:left 从左边浮

5.clear:both 截断流 加一行<div >截断浮动流

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。