css常用属性与解释
文本的属性:
font-family:字体 line-height 行高 行间距
font-size:字号 color:字体颜色
font-weight:字体加粗 text-align:文本对齐方式
font-style: 字体样式 text-decoration:划线设置
font:文本的复合属性 text-indent:首行缩进
盒子的属性:
height:高 border-width:边框的粗细
width:宽 border-style:边框的样式
background-color:背景颜色 border-color:边框的颜色
background-image: url();背景图片 border:边框的复合属性
background-repeat: 背景图平铺方式 padding:内边距的复合元素
background-position:背景图位置 margin:外边距
background:背景复合属性
浮动:
/* 左浮动 */ /* 右浮动 */
float: left; float: right;
边框和内外边距都有上下左右的属性,大致格式为复合元素+上下左右:;
例:border-top:3px solid red;
且,若想使某方向边框或内边距为无,如下设置即可:
border-top:none; 设置上边框为无
left:左 top:上 right:右 bottom:下
伪类:
a:link{}:未访问状态 a:visited{}:访问后状态
a:hover{}:鼠标移入状态 a:active{}:鼠标摁下状态
出于隐私,访问后状态只支持颜色的改变
访问的4种状态,当这些状态同时存在时,要按照l,v,h,a顺序设置
一般使用link和hover属性,且link属性可由正常的选择器设置代替
浮动造成的影响:
当元素设置浮动后,如果没有给父盒子设置高度,父盒子会认为盒子内没有内容。父盒子的高度不会被撑开,
此时父盒子的高度就是0,后面的块元素就会跑到浮动元素的下面了
清除浮动造成的影响:
1.给父盒子设置固定高度
2.给父盒子设置overflow:hidden;属性
3.额外标签法:在浮动元素后面添加块元素,并设置clear:both;属性。表示结束之前浮动所造成的影响。
4.给父元素调用clearfix类名称
/* 强制换行 */
word-break: break-all;
/* 强制不换行 */
white-space: nowrap;
/* 字间距 */
letter-spacing: 1em;
css常用属性
单属性: 一个属性名对应一个属性值
1.font-family:字体
示例:font-family: "微软雅黑";
Chrome的默认字体为微软雅黑
2.font-size:字号
示例:font-size: 16px;
字号单位是px,Chrome默认字号16px
3.font-weight:字体加粗
示例:font-weight:400;
400 normal 正常 默认值
700 bold 加粗
4.font-style: 字体样式
示例:font-style:intalic;
正常:normal
倾斜:intalic
5.line-height 行高 行间距
行高:
示例:line-height:400px;
调整文本在元素中垂直方向的位置
当元素未设置固定高度:在设置行高时会同时为元素设置相同的高度。
文本为单独一行时:
当元素设置固定高度:高度不会随着行高而变化。且:
当行高等于所属元素高度时,文本垂直居中
当行高大于所属元素高度时,文本基于居中位置往下
当行高小于所属元素高度时,文本基于居中位置往上
行高也是关于文本的属性,可以被继承
行间距:
示例:line-height:400px;
行与行之间的间距,设置基线到基线的距离
盒子可看作4条线,上下边线,中线和基线。基线为字体下方的边缘线,可参考英文字母的基线
文本为多行时:
line-height: 500px;
也可以使用其他单位:
line-height: 2em; 两行之间间隔2个字符大小
line-height: 3; 两行之间间隔3倍字符大小
6.font:文本的复合属性 (字号和字体必填)
复合属性:一个属性名对应多个属性值
示例:font:italic 700 30px/300px "微软雅黑";
一般格式为:
font:是否倾斜(默认不倾斜) 是否粗体(默认粗体) 字号/行高(必填) 字体(必填);
当复合属性和单属性同时存在时,要先写复合属性,再写单属性。否则单属性的值会被复合属性的值层叠
font:italic 700 30px/300px “微软雅黑”;
7.color:字体颜色
示例:color: yellow;
示例:background: red;
设置文本的颜色 :color: yellow;
设置背景颜色 :background: red;
颜色样式一般为以下3种:
第一种:用英文单词
: yellow;
第二种:用十进制方式 rgb()
三基色: 红绿蓝,每个颜色的取值范围是0-255之间
: rgb(23,222,12);
第三种:用十六进制方式
:#ffffff;
8.text-align:文本对齐方式
示例:text-align:center;
left(默认):左对齐
center:居中对齐
right:右对齐
能让元素中的文本、行内元素和行内块元素居中,但是不能让块元素居中
注:块元素虽然没有居中,但块元素中的内容会相对块元素居中,即父元素的属性会被子元素继承
9.text-decoration:划线设置
示例:text-decoration:none;
underline 下划线
overline 上划线
line-throught 删除线
none 无
10.text-indent:首行缩进
示例:text-indent:2em;
px单位:像素单位
em单位:1em=当前标签一个字体的大小
块元素的属性
1.height:高
示例:height:400px;
元素的高度,未在css里设置时高度时,元素的高度为该元素内子元素撑开的高度
2.width:宽
示例:width:400px;
元素的宽度,未在css里设置时高度时,元素的宽度等于该元素父元素的宽度
3.background-color:背景颜色
示例:background-color:red;
为盒子设置背景色
4.background-image: url();背景图片
示例:background-image:url(image/case.jpg);
为盒子设置背景图片
5.background-repeat: 背景图平铺方式
示例:background-repeat:no-repeat;
repeat(默认值)水平垂直铺满
repeat-x 水平平铺
repeat-y 垂直平铺
no-repeat 不平铺
6.background-position:背景图位置
示例:background-position:0px 0px;
也可为:background-position:left bottom;
水平 left/center/right 正值向左,负值向右
垂直 top/center/bottom 正值向下,负值向上
7.background:背景复合属性
示例:background:green url(image/mm.jpg) no-repeat 0px 0px;
background:背景色 背景图 平铺方式 水平位置 垂直位置;
只有水平和垂直的位置顺序不能改变,其他的属性都可以变换位置,且所有属性值都可以不写,不写时默认为无背景色,无背景图片,不平铺,图片位置在左上方
8.border-width:边框的粗细
示例:border-width: 5px;
设置块元素边框的粗细
9.border-style:边框的样式
示例:border-style: solid; 实线边框
solid 实线
dashed虚线
dotted点状线
10.border-color:边框的颜色
示例:border-color: red;
设置块元素边框的颜色
11.border:边框的复合属性
示例:border: 5px solid red ;边框的粗细(默认值3px) 边框样式 边框颜色(默认值黑色)
若想使某方向边框为无,如下设置即可:
border-top:none; 设置上边框为无
12.padding:内边距的复合元素
示例:padding: 10px 10px 10px 10px;
当元素设置内边距后,盒子在网页中的尺寸会被撑大,如果保持元素的尺寸不变,要相应的从宽高减去内边距撑开的大小
元素在网页中的尺寸=自身设置的宽高+内边距+边框
内边距写法:
一个值:代表上下左右;
两个值:代表上下,左右;
四个值:代表上,右,下,左;
顺序不能乱
注:当元素是块元素时,在不设置宽度的情况下,宽度和父元素的宽度一样,此时给该元素设置左右的padding后不需要减要撑出的宽度,总宽度不变。会自动减小该元素的宽高以适应多出来的内边距,
13.margin:外边距
示例:
margin: 10px 10px 10px 10px;
margin-top: 20px; 上外边框
外边距合并:
垂直排列的两个块元素,给上面的盒子设置向下的外边距,同时给下面的盒子设置向上的外边距,会造成外边距合并,
当两个值相同时,合并后的外边距值就是该值,
当两个值不同时,是较大的那个值
外边距塌陷:
嵌套的两个块元素,当给子元素(第一个子元素)设置向上的外边距时,父元素会跟着掉下来,此时形成了外边距塌陷.
外边距塌陷解决方案:
1.给父元素设置上边框
2.给父元素设置overflow属性
3.给父元素设置浮动
4.给子元素设置浮动
5.给父元素设置向上的padding
块元素的水平居中
若想设置块元素水平居中,则设置自身水平方向的外边距为auto即可
即:
边框和内外边距都有上下左右的属性,大致格式为复合元素+上下左右:;
例:
上边框:border-top:3px solid red;
上内边距:padding-top: 10px;
上外边距:margin-top: 20px;
left:左 top:上
right:右 bottom:下
14.伪类
a:link{}:未访问状态 a:visited{}:访问后状态
a:hover{}:鼠标移入状态 a:active{}:鼠标摁下状态
伪类:访问的4种状态,当这些状态同时存在时,要按照l,v,h,a顺序设置
一般使用link和hover属性,且link属性可由正常的选择器设置代替
伪类的权重和类一样
出于隐私,访问后状态只支持颜色的改变
15.浮动
/* 左浮动 */
float: left;
/* 右浮动 */
float: right;
一般的块和行内元素称之为标准流
浮动是一个半脱离标准流的状态
元素设置浮动后不具备之前的显示模式,称之为浮动流
如今浮动是用来做网页的横向布局,当元素设置浮动后,设置宽高起作用
浮动的内外边距:
只对自己起作用,对周围的元素没有影响
浮动的横向布局:
由于浮动元素会对后面的块元素造成影响,所以需要给浮动元素套一个父元素占位,使后面的元素不会重叠到浮动元素下
浮动造成的影响:
当元素设置浮动后,如果没有给父盒子设置高度,父盒子会认为盒子内没有内容。父盒子的高度不会被撑开,此时父盒子的高度就是0,后面的块元素就会跑到浮动元素的下面了
解决方案:
1.给父盒子设置固定高度
2.给父盒子设置overflow:hidden;属性
3.额外标签法:在浮动元素后面添加块元素,并设置clear:both;属性。表示结束之前浮动所造成的影响。
4.给父元素调用clearfix类名称
浮动的文本环绕
浮动最初是用来实现文本环绕的
即:使文本环绕着浮动的元素,且文本不会被浮动元素所覆盖