css学习记录(二)
css中的长度单位
像素px --像素,是网页中使用最多的单位
百分比 --相对于父元素,比如类box2是box1的子元素,如果.box1的css样式中为height: 100px
.box2的样式如果是50%,那么他的height为50px,在自适应网页中经常使用
em --em和百分比类似,相对于当前元素的字体大小css中的font-size来决定,浏览器默认像素为16px,当字体发生改变时,em也会随之变化
font-size设置的不是文字本身的大小,是他所在框的大小。
通过font-family可以指定文字字体
当设置字体相关样式时使用
.box{ font-size:50px; height:1em; //那么这个高度就是50px }
css中的颜色
在css中可以使用red blue green 直接表示颜色
也可以用RGB值来表示不同的颜色比如 color:rgb(红色浓度,绿色浓度,蓝色浓度)其中浓度用0-255的值表示,也可以用百分比10%
等表示,百分比是相对于255的。
另外可以用十六进制表示 ,写法为#红色绿色蓝色 ,使用三组两位的十六进制来表示一个颜色
推荐工具:使用FastStoneCapture中的截图功能可以获得十六进制的写法颜色值
十六进制:0 1 2 3 4 5 6 7 8 9 a b c d e f 范围为00-ff
.box{
background-color:rgb(12,15,17);
background-color:rgb(20%,30%,15%);
background-color:#00ff00;//这种最常用方式
}
颜色单位:在css中可以使用颜色的单词来表示不同的颜色
css中的字体
font-family
浏览器将字体分为5大类,但不同的浏览器对这些字体的理解,则渲染表现形式不一样
一般将这五大类字体写在font-family最后 比如
p{
font-family:arial,微软雅黑,serif(兜底的字体);
}
衬线字体:serif
非衬线字体:sans-serif
等宽字体:monospace
草书字体:cursive
虚幻字体:fantasy
font-style可以设置字体的斜体效果,font-weight字体的粗细效果
在css中可以在一个样式设置字体所有样式
p{
font:italic small-caps bold 60px "微软雅黑"; //斜体 加粗 大小字母,没有顺序要求,不写的话,采用默认值
但是要求文字大小和大小必须写,且大小必须是倒数第二个,字体是倒数第一个。简写性能较好
}
css中设置文字的行间距
css中没有直接设置行间距的方式,只能通过设置行高来设置行间距,行高越大,间距越大
.p{
line-height:40px;
font-size:20;
}
则行间距为2*((40-20)/2)行高就为20px。
p{
font:italic small-caps bold 60px/80px "微软雅黑"; //80px为行高
}
css中的文本样式
.p{
text-transform:capitalize;等 //通过上面来设置英文的大小写
text-decoration; //来修饰文本,添加各种划线 可用来去除超链接默认的下划线
text-align:left;//文本的对齐方式
font-size:20px;
text-indent:2em;//首行缩进,还有向左缩进,比如用户看不见的文字,让搜索引擎可以看见。
}
下集预告
css中的难点重点:盒子模型与浮动。
获取更多前端资料
请关注公众号:前端从入门到SP
微信扫描二维码获取更多前端资料