CSS基础

1、为什么使用CSS？

有效的传递页面信息 使用CSS美化过的页面文本，使页面漂亮、美观，吸引用户

可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容 具有良好的用户体验2、

2、使用CSS设置字体的大小、类型、风格、粗细等 ；设置文本颜色、行距、首行缩进、对齐方式、文本装饰等。

设置超链接在不同状态下的样式； 设置页面背景颜色、背景图片，为列表设置列表自定义图标、设置列表项的类型、列表图像及列表符号显示位置。

A.字体样式
    对单个，组合字体进行设置
    常见单位：px(像素 Pixel)、pt(点 Point)、em(相对长度单位)

    常用设置:
        font-family: 设置字体类型
    font-size:设置字体大小
    font-weight:设置字体粗细
    font-style:设置字体类型

    综合设置：
       font:style weight size family;  (顺序不能变)

B. 文本样式设置
    text-decoration:underline(下划线)/overline(上划线)/
           line-through(中划线)
    text-align:left/center/right;  (设置文本内容居中方式)
    line-height:设置行高   (内容会上下居中)

C. 超链接伪类
    
    text-decoration:none;  //去掉超下划线

    a:link:连接未访问时
    a:visited ：连接访问后
    a:hover: 鼠标划过时
    a:active：鼠标点击时

    注：伪类可以作用到所有标签和选择器上。

D. 背景设置
     background-color: 设置标签背景色
     background-image:url(图片路径) 设置背景图片
     background-repeat:设置背景图片是否重复
     background-position:设置背景图片位置，包括x,y轴两个值

   综合设置：
     background:color image repeat position;   (顺序不固定)

E. 列表样式
    list-style-type:none;  设置列表前面图标显示类型
    list-style-image:url(); 设置列表图标图片
    list-style-position: inside/outside;  设置图片显示位置

小白日记：

1、今天不仅学了CSS基础，还学了有关CSS美化布局的一些知识，接触了div。上次因为域名路径问题，没配置好，所以没把图片显示在浏览器里显示出来，今天经过一番修改后成功了。准确来说只是换了个浏览器和多安装了一个编译器（叫notepad），再把路径改了，结果如愿出来了。

2、注意区分：../img/是html所在目录上一级（上一个文件夹）的img文件夹 ， 如果img和html同在一个文件夹用img/**.jpg

3、千里之行始于足下，愿每次都看我博客的你开心每一天，加油！！！！