前端基础CSS篇之二

一.CSS字体属性

1.字体系列

 p {
    font-family: “字体1",“字体2";
 }

2.字体大小

p {
    font-site: 20px;
}

单位：px（像素）

3.字体粗细

p {
    font-weight: 属性值;
}

属性值：

值	效果
normal	不加粗(默认值)
bold	加粗
100-900	400等于normal 700等于bold

4.文字样式

font-style: 样式；

样式：

值	效果
normal	默认
italic	斜体

5.复合属性的写法

p {
 /* font：font-style font-weight font-site/line-height font-family;

font： italic 700 20px ''宋体；
}

注:
1.使用字体复合属性的时候，顺序不能颠倒。
2.至少要有font-size和font-family

二.文本属性

1.文本颜色

div {
color: 颜色；
}

颜色的三种表现形式

/*预定义颜色值*/
color: red;
/*16进制  最常用*/
color: #FF0000
/*RGB*/
color: rgb(255,255,255)或者rgb(100%,0%,0%）

2.文本对齐

div {
    text-align: 对齐方式；
}

对齐方式：

值	效果
right	右边
left	左边
center	居中对齐

4.装饰文本

div {
    text-decoration: 装饰方式
}

装饰方式

值	效果
none	默认
underline	下划线（链接a自带)
overline	上划线
line-through	删除线

5.首行缩进

p { 
    text-indenx: 缩进；
}

单位
px 像素
em 相对单位，相对于当前元素（font-size）1字的大小，如果没有设置当前元素没有设置大小，则会按照父元素的1个文字大小。

6.行间距

p { 
    line-height: 行高
}

行间距:
上间距 + 文本高度 + 下间距

三.CSS元素显示模式

1.概念

元素显示模式就是元素（标签）以什么方式进行显示。

2.分类

分为块元素和行内元素

扫描二维码关注公众号，回复： 10258053 查看本文章

(1)块元素

常见的块元素

~

1. 等
   特点 ：

   1.独占一行
   2.高度，宽度，行边距，都可以控制
   3.宽度默认是容器（父级）宽度的100%
   4.是一个容器及盒子，里面可以放行内或者块级元素。
   

   注意点 ：

   文字类的元素内不能包含块级元素，比如：<p>,<h1>~<h6>
   

   （2）行内元素（内联元素）

   常见行内元素： 等
   特点：

   1. 相邻的行内元素,可以在一行显示
   2.高度和宽度设置无效的
   3.默认宽度是他本身内容的宽度
   4.行内元素只能容纳文本或者其他行内元素
   

   注意点：

   <a>标签里面不能再放链接
   特殊情况下<a>里面可以放块级元素，但是需要块级模式
   

   (3)行内块元素

   同时具有块元素和行元素的特点，例如： 。
   特点 ：

   1.和相邻的行内元素（行内块元素）在一行上，他们之间会有空白间隙，一行可以显示多行行内块元素。
   2.默认宽度就是它本身内容的宽度
   3.高度，行高，内外边距可以控制
   

   3.显示模式的转换

   转换为块元素

   display: block;
   

   转换为行内元素

   display: inline;
   

   转换为行内块元素

   display: inline-block;
   

   eg:

   span {
       width: 100px;
       height: 30px;
       display: block
   }
   

   4.背景

   通过css背景属性可以设置元素背景颜色，背景图片，背景平铺，背景像素固定等。

   (1）背景颜色

   background-color: 颜色值；
   /* 默认为transparent （透明) */
   

   (2）背景图片

   实际开发中常用于logo或者一些装饰性的小图片或者超大的背景图片。

   background-image: url(路径);
   

   （3)背景平铺

   background-repeat: repeat | no-repeat | repeat-x | repeat-y
   

   注意点：

   1.默认 : repeat(平铺）
   2.可以同时设置背景颜色和背景图片
   

   （4）背景位置

   background-position: x y;
   

   注释：

   x和y分别代表x坐标和y坐标，可以使用方位名词或者精确单位。
   

   方位词（position)

   top | center | bottom | left | center | right  
   

   注意点 ：

   1.如果左右两个是方位名词，则两个词前后顺序可以颠倒。如：left top 和 top left 效果一样
   
   2.如果只是指定了一样方位词，另一个默认居中对齐。
   
   /*此时X轴是靠右对齐，则Y轴默认居中，反之亦然*/
   background-position: right;
   

   精确词

   background-position：20px 40px;
   

   注意点 ：

   1.精确词第一个是X轴第二个是Y，不能颠倒
   2.如果只有一个精确值，那么一定是X轴,则Y轴默认居中
   

   混合单位

   混合单位第一个必须是X轴第二是Y轴
   

   （5）背景固定（背景附着）

   background-attachment: scroll | fixed
   

   注释：
   scroll :背景图片随着对象内容滚动
   fixed : 背景固定

   （6）背景属性复合写法

   使用复合写法没有特定的顺序，一般习惯约定顺序为：

   background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；
   

   （5）背景颜色半透明

   background: rgba(0,0,0,0.1);
   

   注释：
   最后一个参数是alpha透明的,取值0~1之间。