CSS的核心属性

主要内容：

<1>. 文本设置

<2>. 列表设置

<3>. 背景设置

一：文本设置：

1．颜色：color 属性值：颜色的英文/16进制的颜色/rgb

2. 字题大小：Font-size:1em=16px,12pt=16px,默认字体16px;微软雅黑

3. 字体：font-family:楷体

4. 字体样式：font-style

5. 加粗：font-weight:bold/;border/600~900

    变细：font-weight:lighter;/100~500/

6.倾斜：font-style 属性值italic/oblique/normal

7.文本位置：text-align:属性值：left(左对齐)/right(右对齐)/jusitify (两端对齐) [多行文本起作用]

8.行高：line-height

9.Text-decoration:设置线的位置（none:没有，overline:上划线，outline:下划线）

 

添加代码后： text-decoration: none;

10.Text-indent:首行缩进 可以取负值，只对一行起作用

11.Letter-spacing:字间距  word-spacing字母间距

   添加代码后： letter-spacing:10px ;

 

 

二：列表设置

 列表属性的设置：

1.List-style-type: 

    none(没有);circle(空心圆);disc(实心圆);square(实心正方形) 设置列表样式【类型】

   添加 代码后： list-style-type: none;

 

 2.List-style-image:url()；设置列表风格图片

添加 代码后： list-style-image:url("img/icon.jpg");

 

 3.List-style-position:inside（在列表里面）;outsiade（在列表外面 默认）；设置列表样式的位置

 4.List-style:none；去列表符号

 三：背景设置

1. 背景颜色：background-color :rgba(,,,,) ，reb(,,,,)最后一个透明度的取值范围为0-1         

添加代码后： background-color:rgb(255,255,255,0.8)

 

1. 背景图片：background-image url(‘图片位置’)

2.  背景大小：background-size

3. 背景平铺：Background-repeat:     

4.  (1)no-repeat(不平铺);(2)repeat（平铺）;(3)repeat-x（横向平铺）;(4)repeat-y（纵向铺）;

  

 

 

  添加代码后：background-repeat: no-repeat;

 

 

 

 

 

  5.设置背景图片的位置：Background-position:首先要设置不平铺

         属性值：两个方位；一个方位；两个像素值；一个像素值（可以为负值，）

   6.背景图片的固定：Background-attachment:

        (1)scroll(滚动）

                  (2)fixed(固定，固定在浏览器窗口里面，固定之后就相对于浏览器窗口了)

    7.简写 不需要注意顺序

    8. margin-top:与上边框的距离

    9.清除浮动：overflow:hidden;

      清除margin-top的影响

练习一：

 

 

 

 

 

练习二：

长截图：

截图：

作业：