css入门基础（二）

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
微信扫描二维码获取更多前端资料