CSS——基本元素属性

字体属性

• 字体样式（自身电脑里的字体样式）

<style>
    .font-family .one {
        font-family: 'Microsoft YaHei';
   }
    .font-family .two {
        font-family: '宋体';
   }
</style>

<div class="font-family">
    <div class="one">
       这是微软雅黑
    </div>
    <div class="two">
       这是宋体
    </div>
</div>

• 大小

<style>
    .font-size .one {
        font-size: 40px;
   }
    .font-size .two {
        font-size: 20px;
   }
</style>
<div class="font-size">
    <div class="one">
       大大大
    </div>
    <div class="two">
       小小小
    </div>
</div>

• 粗细
  取值范围是 100 —— 900

<style>
    .font-weight .one {
        font-weight: 900;
   }
    .font-weight .two {
        font-weight: 100;
   }
</style>
<div class="font-weight">
    <div class="one">
       粗粗粗
    </div>
    <div class="two">
       细细细
    </div>
</div>

• 颜色

 color: red;

• 文字样式

倾斜 
font-style: italic;
取消倾斜 
font-style: normal;

文本属性

• 文本对齐

text-align: enter; 居中对齐

left左对齐
right右对齐

• 文本装饰

 text-decoration: [值];

underline 下划线. 
none 啥都没有. 可以给 a 标签去掉下划线. 
overline 上划线. 
line-through 删除线 

• 文本缩进

text-indent: [值];

单位可以使用 px 或者 em. 
使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小. 

• 行高
  行高指的是上下文本行之间的基线距离.
  行高 = 上边距 + 下边距 + 字体大小

line-height: [值];

注意: 行高等与元素高度, 就可以实现文字居中对齐

 height: 100px;
 line-height: 100px;

背景属性

-背景颜色

background-color: [指定颜色]

• 背景图片

background-image: url(...);

注意:

1. url 不要遗漏.
2. url 可以是绝对路径, 也可以是相对路径
3. url 上可以加引号, 也可以不加.

• 背景平铺

background-repeat: [平铺方式]

主要取值:
repeat: 平铺
no-repeat: 不平铺
repeat-x: 水平平铺
repeat-y: 垂直平铺
默认是 repeat.；背景颜色和背景图片可以同时存在. 背景图片在背景颜色的上方

• 背景位置

background-position: x y;

参数有三种风格:

• 方位名词: (top, left, right, bottom)
• 精确单位: 坐标或者百分比(以左上角为原点)
• 混合单位: 同时包含方位名词和精确单位

注意
1.如果参数的两个值都是方位名词, 则前后顺序无关. (top left 和 left top 等效)
2.如果只指定了一个方位名词, 则第二个默认居中. (left 则意味着水平居中, top 意味着垂直居中. )
3.如果参数是精确值, 则的的第一个肯定是 x , 第二个肯定是 y. (100 200 意味着 x 为 100, y 为 200)
4.如果参数是精确值, 且只给了一个数值, 则该数值一定是 x 坐标, 另一个默认垂直居中.
5.如果参数是混合单位, 则第一个值一定为 x, 第二个值为 y 坐标. (100 center 表示横坐标为 100, 垂直居中)

• 背景尺寸

background-size: ;

1.可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px
2.也可以填百分比: 按照父元素的尺寸设置.
3.cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
4.contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

边框属性

• 基础属性
  粗细: border-width
  样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
  颜色: border-color

    border-width: 10px;
    border-style: solid;
    border-color: green;

或者可以简写

border: 1px solid red;

可以改四个方向的任意边框.
border-top/bottom/left/right

只给上边框设为红色, 其余为蓝色. 
border: 1px solid blue;
border-top: red;

• 边框会撑大盒子

使边框不再撑大盒子
 * {
    box-sizing: border-box;
}

• 内边距
  可以给四个方向都加上边距
  padding-top
  padding-bottom
  padding-left
  padding-right

padding: 5px; 表示四个方向都是 5px
padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px
padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px
padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针)

• 外边距
  同内边距

margin:  ; 

• 块级元素水平居中
  前提:
  指定宽度(如果不指定宽度, 默认和父元素一致)
  把水平 margin 设为 auto

3种写法都可
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

注意:
这个水平居中的方式和 text-align 不一样.
margin: auto 是给块级元素用得到.
text-align: center 是让行内元素或者行内块元素居中的.
另外, 对于垂直居中, 不能使用 "上下 margin 为 auto " 的方式.