CSS对边框和文字的排版

CSS的边框排版:

边框的样式 border-style

基本语法 border-style

border-top-style

border-bottom-style

border-left-style border-right-style

取值：      none  没有边框          dotted  点线             dashed  虚线           solid   实线             double  双实线                                                  groove  凹型线           ridge   凸型线           inset   嵌入式          outset  嵌出式

取同一个值：四条边框线是同一个线型

取两个值：上下边框使用第一个取值，左右边框使用第二个取值

取三个值： 上边框取第一个值，左右取第二个值，下边框取第三个值

取四个值：上第一个值，右取第二个值，下取第三个值，左取第四个值

边框的属性设定和边距/填充:边框的宽度   border-width  

基本语句： border-width              border-top-width            border-bottom-width             border-left-width         border-right-width 取值；         thin  ----细边框             medium  ---中等边框      thick--粗边框 长度---数字

边框的颜色：border-color  

基本设置语法：    border-color    border-top-color    border-bottom-color    border-left-color    border-right-color    取值    英文单词  “red”代表红色    RGB  颜色码

边框的综合设定和边距：

border 边距指的是设置网页中某个元素的四边和网页中其他元素之间的空白距离

上边距  margin-top

下边距 margin-bottom

左边距  margin-left

右边距  margin-right

复合设置 margin         

取值：   数字----长度   百分比---是相对于上一级元素的百分比，允许是负数   auto ---自动提取边框的值，默认值

边框的圆角：

border-radius设置边框圆角

border-radius:50px; 先把边框设置后再设置圆角

div { border:2px solid; border-radius:25px;  }

边框的阴影：

box-shadow: 10px 10px 5px #888888;//添加阴影 X方向的偏移像素 Y方向的偏移像素 模糊的像素值 阴影颜色

边框的填充：用来设置边框和其内部的元素之间的空白距离

上边距  padding-top

下边距 padding-bottom

左边距  padding-left

右边距  padding-right

复合设置 padding 取值： 数字---长度 百分比

CSS对文字的排版：

调整字符间距  : letter-spacing   用来控制字符之间的间距，这个间距实际上就是在浏览器中所显示的字符间的空格距离。

取值：   normal ---表示正常显示（默认）   长度--可以使用负数，带上单位   单位px(像素)

对文字添加修饰： 为文字添加如下划线，删除线等修饰   text-decoration   属性的取值：   underline----添加下划线   overline---添加上划线   line-through--添加删除线   blink---添加闪烁效果（只能在Netscape的浏览器中正常显示）  none--没有任何的修饰

文本的对齐方式：text-align 用来控制文本的排列和对齐方式 属性的取值： left--左对齐 right--右对齐 center--居中对齐 justify--两端对齐。

段落的缩进设置：

text-indent   用来控制每个段落的首行缩进的距离。   属性取值：   长度（数字）带上单位   百分比相对于上一级元素的宽度

行高设置：line-height   用来控制文本内容之间行间距   属性取值   normal---浏览器默认的行高   数字--设置行高带上单位   百分比----表示行高是该元素字体大小的百分比

放大缩小位移：

Transform transform:rotate(30deg);//旋转30度

transform:translate(50px,100px) 把元素从左侧移动 50 像素，从顶端高度的 4 倍。

transform:skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。移动 100 像素

transform:scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始

动画：Animation

格式：animation:myfirst 5s;

（myfirst动画名，5s动画时间）

@keyframes myfirst 

{ 
0% {background: red;} 
25% {background: yellow;} 
50% {background: blue;} 
100% {background: green;}
 } 

@keyframes myfirst { 

from {background: red;} 

to {background: yellow;}
}

过渡动画：transition 格式：transition: width 2s; （应用于宽度，时间2秒）

div{transition:width 5s;      

   width:100px;height:100px;     

    background:red;}

div:hover { width:300px; } 先定义一个层的hover  鼠标进入后把宽度改为300px  则就会看到过渡动画