CSS学习框架如下：

  •     引入CSS的三个方式

  •     选择器的用法

  •     常用属性

  •     布局和盒子模型

  •     定位

一.引入方式

  1. 外部引入

    1. 使用<link>标签

    2. 在外部建立*.css文件

    3. <link rel="stylesheet" type="text/css" href="css/style.css文件路径">

  2. 内部引入

        <style>在此引入</style>

  3. 内联样式

        示例<p style="color:pink;"></p>

  4. 对于任意标签，一共有四种样式，除了以上三种外，还有浏览器默认样式，可修改。

二.选择器

  1. ID选择器

    <style>#p1{添加样式}</style>

    <p id="p1"></p>

  2. 标签选择器

    p{}

  3. 类选择器

    <style>.p1{添加样式}</style>

    <p class="p1"></p>

  4. 包含选择器

    .p span{}在p类中的span标签的样式

  5. 并列选择器

    .p,span{}p类和span标签共同拥有的样式

  6. 伪选择器

    a:hover{}鼠标浮动效果

    a:link{}未访问时的效果

    a:visited{}访问后

    a:active{}正在被访问

三.常用属性

  1. 文本属性

    1. color:red;文字颜色

    2. letter-spacing:10px;汉字间距

    3. word-spacing:10px;单词间距

    4. text-align:center;字居中

    5. text-indent:4px;首行缩进

    6. line-height:10px;行号，当与高一致时，常常用于垂直居中

    7. text-decoration:none;underline;划线

  2. 字体属性

    1. font-family:楷体;字体

    2. font-size:100px;字号

    3. font-style:italic;斜体

    4. font-weight:bond;黑体

      忘记之前HTML学习的即可

  3. 尺寸属性

    1. width:10px;

    2. height:10px;

    3. 与后面的盒子模型一起理解，记住：内联元素无法设置尺寸，如<span>

  4. 背景属性

    1.  

    2. background-image:url(#)；

    3. background-attachment:fixed;

    4. background-repeat:none; 

    5. background-position:10px 20px;

四.布局定位以及盒子模型

  1. 盒子模型

    1. 指的是每个元素所占的空间位置由它的宽 高 内边距 外边距 和边框共同组成

  2. 边框属性

    1. border:10px solid #000000;常配合使用。

    2. border-left: 20px solid #00ff00;仅一条边时。

      备注：虚线：dashed;

  3. 内边距

     

    1. padding:50px 四边都是50px的内边距

    2. padding:0px 50px 第一个值上下边距  第二值是 左右边距

    3. 3值上   左右   下

    4. 4值 上 左 右 下

  4. 外边距margin同上

    注意：外边距有合并现象

  5. 定位问题

    1. position:absolute;relative;fixed;

    2. 绝对定位：

      1. 常用于做网站的广告条，脱离了文档流，不占原来的流空间，尽量减少使用

      2. z-index只能在绝对定位中使用，不可以在相对定位中使用。

    3. 相对定位：占用标准文档流，用于布局

    4. 固定定位

君君的备注：

　　DIV+CSS的学习中，最重要的就是布局问题。在编写代码时不要着急，一定要先理清楚每个素材所在的层次，做到心中有数，才能敲字如有神。

笔记是为了以便自己未来用到时查阅，被人指正内容过于主观，仔细想想确实如果能受惠大众更好，以后会努力改进~