花年记事div笔记
来源:互联网 发布:知金教育不给毕业证 编辑:程序博客网 时间:2024/06/09 00:50
边框大小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:颜色名子
边框风格
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 topbottom 等属性相对于其最接近的一个最有定位设置为父对象进行绝对位置如果不布在父对象,则依据body对象,而其层叠通过z-index属性定义
fixed:未支持对象定位遵从绝对(absolute)方式,但是要遵守一些规范。
relative:对象不可层叠 将依照 left right top bottom等属性在正常文档中偏移位置。
常用属性有两个: relative (相对)
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;
background-position:bottom right; //背景图片就在右下方
div ul dl dt oldiv 这些都很长见div尽量少用和table一样嵌套越少越好
<ol>或<ul>
<li>花年记事</li>
<li>花年记事</li>
<li>花年记事</li>
</ol>或<ul>
注:<ul>上下有边距经常要去掉(margin:0px;padding:0px;)
dl内容块
<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
字体属性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>
字体大小
字体间距
字符间距 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:visited{^^^^^}//访问过属性
a:active{^^^^^^}//鼠标点击与释放时
a:hover{^^^^^^^^^^}//鼠标悬停时
如何使用:
<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>
冲突 帮助找出问题
CSS与媒体
写在CSS样式表里
@media screen {body 属性 例:字体 颜色 背景 等}
@media print {body 属性 例:字体 颜色 背景 等 }
如何使用
页面
<link href="CSS样式地址" red="stylesheet"media="screen"> //电脑显示
<link href="CSS样式地址" red="stylesheet"media="print">
- 花年记事div笔记
- 花年记事学习CSS笔记
- 花年记事
- 花年记事
- 连接access-花年记事
- 友情链接技巧-花年记事
- 【记事】本地笔记移至CSDN
- 2008年记事
- CSDN四年记事
- 2010年春节记事
- 08、09年记事
- 2013年国庆记事
- 记事
- 记事
- 记事
- 记事
- 记事
- 记事
- DIV+CSS学习笔记
- MyBatis学习 之 一、MyBatis简介与配置MyBatis+Spring+MySql
- typedef用法
- DIV+CSS 用颜色属性来指点任意元素
- [转]手持终端设备的Webapp化
- 花年记事div笔记
- WebKit
- win7 wampserver中apache端口80占…
- 关于free
- 插入flash代码
- malloc()实现原理1
- 搜索框
- malloc()实现原理2
- CSS日常公用样式与一些解决方案