码迷,mamicode.com
首页 > Web开发 > 详细

CSS第二章

时间:2016-10-23 00:17:34      阅读:256      评论:0      收藏:0      [点我收藏+]

标签:线性   font   das   一件事   塌陷   取值   方式   bsp   没有   

1、

文本与字体属性:

text-decoration:文本修饰线  none(去除修饰线)underline(下划线)overline(上划线)line-through(删除线)

color:设置文本的颜色

font-size:设置字体大小   值要在单位  px

font-style:设置文字的样式   取值:italic(斜体)

font-weight:设置文本的加粗效果   取值:normal(正常)  bold(加粗)

font-family:给文本设置字体   可以一次写多个字体  每一个字体要加双引号  

text-align:设置文本的水平对齐方式   取值:left|center|right

text-transform:改变字母的大小写或者首字母大写   取值:lowercase(小写)  uppercase(大写)Capitalize(首字母大写)

line-height:设置行高   将一行文本在一个容器内垂直方向居中   它的值应该要与height这个属性的值一样  

text-indent:首行缩进  取值:px 或者em  (1em指一个汉字的位置  )  值可以是负数

2、

 

尺寸样式属性:width:设置宽度   height:设置高度

3、浮动:

float:它是用来实现让一个元素浮动  取值有两个:left(向左浮动)right(向右浮动)

4、清除浮动:只要浮动了 就必须要清除浮动 因为浮动元素它会影响到它下面的元素的排版布局!

有3种方法:a.给浮动元素的父元素设置一个固定的高度这个方法不建议使用 因为一个元素的高度它应该是由其内容来决定

     b.使用清除浮动的属性 clear :left(清除左浮动)、right(清除右浮动)、both(两个都清除);清除浮动的属性一般是用在浮动元素的最后面我们在浮动元素的最后面新建一个空白的div 这个div里面不要放置任何的内容 <div id=‘clear‘></div>,这个div它就是用clear这个属性来实现清除浮动

     c.使用overflow:hidden来清除浮动  它主要是给无序列表来使用

 

               overflow:hidden;这个主要作用是用来将溢出的部分进行隐藏

5、padding

padding就是内填充,padding-top:上内填充padding-right:右内填充padding-bottom:下内填充padding-left:左内填充

它的顺序是顺时针方向 :上、右、下、左。例padding10px   表示上下左右四个方向的内填充都是10px    ,padding10px  20px;  表示上下为10  左右为20  ,             padding10px 20px 30px;   表示上10 左右20 30  ,padding10px 20px 30px 40px  表示上10  20 30 40

!!!注意:HTML中有一些标签是有默认的内填充和外边距,在写CSS代码时第一件事情就是要将这些标签的内外边距都清除: *{margin:0;padding:0;}

6、margin

margin是外边距,方向顺序同padding

margin 有塌陷现象,竖直方向的margin值它不会叠加,只会取较大的值。

浮动的元素没有塌陷现象。   { margin-left:auto;margin-right:auto;}可以让一个盒子在一个容器内居中。   能用padding时尽量少用margin!

7、border   边框

border这个属性它有三要素:粗细 线型 颜色  (线性常用有三种:solid实线、dashed虚线、dotted点状线)

border-top:上边框线 ,border-right:右边框线  ,border-bottom:下边框线  ,border-left:左边框线

8、display属性

取值:inline(将块状元素转换为行内元素)block(将行内元素转换为块状元素 )

 

 

 

 

 

 

CSS第二章

标签:线性   font   das   一件事   塌陷   取值   方式   bsp   没有   

原文地址:http://www.cnblogs.com/dufeibufei/p/5988664.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!