花年记事div笔记

边框大小 border

 

border-width:thin    //细

border-width:medium  //默识边框宽度

border-width:thick   //粗一点

border-width:<length>     //可用数值来指定

border-top-width:**px;    //设置上边框

border-right-width:**px;  //设置右边框

border-bottom-width:**px;    //设置下边框

border-left-width:**px;    //设置左边框

边框颜色

border-color:颜色名子    (red  #ffffff  rgb(rrr%,ggg%,bbb%))

 

边框风格

border-style:none;  //边框不但没有还不占用空间

border-style:hidden;  //不显示但点用空间

DIV浮动 float

float:left; //左浮动

float:right; //右浮动

float:none;  //默认

注：float相对定位根据浏览器大小而变化而position就不行了

 

position:static/absolute/fixed/relative

static:默认值无特殊定位 对象

absolute:将对象从文本中托出 使用 left right top bottom 等属性相对于其最接近的一个最有定位设置为父对象进行绝对位置如果不布在父对象，则依据body对象，而其层叠通过 z-index属性定义

fixed:未支持对象定位遵从绝对(absolute)方式，但是要遵守一些规范。

relative:对象不可层叠 将依照 left right top bottom 等属性在正常文档中偏移位置。

常用属性有两个: relative (相对)  absolute(绝对)

position:relative; 表示相对定位被定位了这个属性标签在所属的范围内可以进行上下左右移动

position:absolute; 表示绝对 如果定义了这个属性的原素其将根据浏览器 左上角 0 开始计算

问：现在大家做网页大部分为居中，如果我们要网页中的某个元素的位置，并且浮动正常元素之上，不论屏幕分辨率多少它的位置始终是针对页内的某个元素，靠单纯的absolute是不行的，怎样解决？

答：在元素的父级无素定义为position:relative;(这里可以是祖父级，也可以是position:absolute;）需要决对定位的无素设为position:absolute; 这样再设定 top right bottom left 的值就可以了，这样其定位的参照标准就是父级的左上解padding的左上侧。。

 

边界距 margin

margin:0 auto;  //(就是对于父元素自动,左右自动调整位置，也就是居中 )
margin:** ** ** **; //每个边界<上 右下左>

margin-top:**px;   //上边界

margin-right:**px;   //右边界

margin-bottom:**px;   //下边界

margin-left:**px;   //左边界
注：也可以修改网页内容与浏览器的边界

 

填充属性 padding

padding:0 auto; //(就是对于父元素自动,左右自动调整位置，也就是居中 )
padding:** ** ** ** //<上 右 下 左>

padding-top:**px;

padding-right:**px;

padding-bottom:**px;

padding-left:**px;

 

背景属性 background

background-image:url(背景地址); //图片背景

background-image:none;      //无背景

background-image:inherit;   //继承父值

 

图片背景重复

background-repeat:repeat; //默认的 重复背景

background-repeat:repeat-x;  //仅平行重复

background-repeat:repeat-y;  //仅垂直重复

background-repeat:no-repeat;  //不重复

background-repeat:inherit;    //继承父值

 

背景附着

background-attachment:scroll //背景随着滚动

background-attachment:fixed  //背景固定

background-attachment:inherit //继父值

 

背景定位

background-position:<x><y>;  //用具体数值或百分比来指定

background-position:[top/center bottom/center left/center right] //用关键字定位

如何使用：

background-position:200px 200px;  //也就是说这个背影图片距上方200像素和左边200像素

background-position:bottom right; //背景图片就在右下方

 

div ul dl dt oldiv 这些都很长见 div尽量少用和table一样嵌套越少越好

<ol>或<ul>                ol表现为：             ul表现为：

<li>花年记事</li>               1.花年记事             ·花年记事

<li>花年记事</li>               2.花年记事             ·花年记事

<li>花年记事</li>               3.花年记事             ·花年记事

</ol>或<ul>            ul是无序列表 前面用大圆点表示 ol前面用1234....

注:<ul>上下有边距经常要去掉(margin:0px; padding:0px;)

   竖排和横排要不要前面的点和浮动   [去点 list-style:none][横 folat:left]

 

dl内容块  dt是标题  dd是内容

<dl>                     

<dt>标题</dt>                            

<dd>内容1</dd>

<dd>内容2</dd>

</dl>                 dt和dd 里可以加入 ol ul li 和 p

 

字体属性 font

font-family:字体,字体;

font-style:italic;    //斜体

font-style:obligue;  //斜体

font-style:normal   //正常 

字体粗细

font-weight:normal //正常

font-weight:lighter //这正常体字要细一点

font-weight:bold   //加粗

font-weight:bolder //比加粗的粗一点

font-weight:<100-900>  //数值来表示

 

字体大小  font-size:**px;  //一般都用 px  pt 或百分之多少来表示

 

字体间距  p{ line-weight:-px;}

 

字符间距 h1{letter-spacing:20px;} //或负多少 (-20px;)

 

字体小写变大写

font-variant:normal  //首字母大写

font-variant:small   //所有字母变大写首字母变的更大

 

文本缩进 text

text-indent:**px;  //具体数值对首段落首行缩进

text-indent:**%;   //根据百分比缩进

 

文本属性对齐

text-align:left;   //文本左对齐

text-align:right;   //文本右对齐

text-align:center;   //文本居中

text-align:justify;   //文本两端对齐

 

文本装饰

text-decoration:none;  //无装饰

text-decoration:underline;  //下划线

text-decoration:overline;  //上划线

text-decoration:line-through;  //删除线

 

文本变形

text-transform:none;  //不变形

text-transform:capitalize;  //首字母大写

text-transform:uppercase;   //全部变大写

text-transform:lowercase;   //全部小写

 

链接与化类别鼠标指向点击

全局属性为：                                 单独定义：

a:link{^^^^^}    //未访问链接          a.red:link{^^^^^}    //未访问链接

a:visited{^^^^^} //访问过属性          a.red:visited{^^^^^} //访问过属性

a:active{^^^^^^} //鼠标点击与释放时    a.blue:link{^^^^^^} //未访问链接
a:hover{^^^^^^^^^^}//鼠标悬停时        a.blue:visited{^^^^^^^^^^}//访问过属性

如何使用:

<a href="http://blog.sina.com.cn/jieeeee">这里使用的是全局属性</a>

<a class="red" href="http://blog.sina.com.cn/jieeeee">这里使用的是red属性</a>

<a class="blue" href="http://blog.sina.com.cn/jieeeee">这里使用的是blue属性</a>

 

冲突 帮助找出问题  用 !important

 

CSS与媒体

写在CSS样式表里

@media screen {body 属性 例：字体 颜色 背景 等}

@media print {body 属性 例：字体 颜色 背景 等 }

如何使用

页面

<link href="CSS样式地址" red="stylesheet" media="screen"> //电脑显示

<link href="CSS样式地址" red="stylesheet" media="print">  //打印效果