首页 > 代码库 > CSS第二章
CSS第二章
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 (1个em指一个汉字的位置 ) 值可以是负数
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:左内填充
它的顺序是顺时针方向 :上、右、下、左。例:padding:10px 表示上下左右四个方向的内填充都是10px ,padding:10px 20px; 表示上下为10 左右为20 , padding:10px 20px 30px; 表示上10 左右20 下30 ,padding:10px 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第二章