CSS + Div 学习总结

CSS 相信大家都很熟悉了,就不多说了。这里是自己基础学习的一点小总结。

20160111193124355.png

 1.引用方式:


    CSS 控制页面:

    行内样式(在标记内写入样式设计)

    内嵌式(在HTML页面写人<style  type=”text/css ”>  设置样式</style>)

    连接式(<head><link href=”文件名.css”  type=”text/css”  rel=”stylesheet”></head>)

    导入式(在<style>  @ import url(文件名.CSS) </style>)

    控制优先级: 行内样式>连接式> 内嵌式>导入式

 2.基本语法:

    CSS 基本语法

             标记:  < title ></title>    <h#></h#>    <p></p>等。


    CSS选择器:


             标记选择器: 根据标记(标签)设置。     引用:【h1 { 设置}】;

             类别选择器: <p  class = “A”>  </class>     引用:【.A{设置}】;

             ID选择器  : <p  id= “A” >  </p>         引用:【#A{设置}】;


    CSS选择器声明


             集体声明: 标签排列或按继承树关系排列。 

             选择器嵌套:选择器 标记{}; 例如: #one  li{ 设置内容} ;


    CSS运用HTML继承树:

20160111193216434.png          

3.效果布局:


    3.1 效果(部分效果关键属性):


           CSS文字效果


                 字体          font-face

                 大小          font-size

                 颜色          Color: ####

                 斜体          font-style : italic

                 下划线        text-decoration: underline

                 顶划线        text-decoration :overline

                 删除线        text-decoration :line-through

                 闪烁          text-decoration :blink

                 多重效果      text-decoration: blink overline …

                 单词首字母大写text-transform:capitalize

                 单词全部大写  text-transform:uppercase

                 单词全部小写  text-transform : lowercase

          CSS段落效果

                 水平对齐      text-align

                 左对齐        text-align : left

                 右对齐        text-align :right

                 居中对齐      text-align:center

                 两端对齐      text-align:justify

                 垂直对齐      vertical-align

                 行间距和字间距line-height 和letter-spacing 

          CSS设置网页背景

                 背景颜色给页面分块

                 背景图                background-image:url (文件名);

                 背景图重复            background-repeat

                 背景图片位置          background-position

                 固定背景图片位置      background-attachment :fixed

                 添加多个背景图片      分别在不同的body 和 div 中添加背景图片

          CSS表格和表单样式


                <table>

                       <caption>表  题</caption>

                    <tr>

                       <th> 表 头 </th>

                    </tr>

                    <tr>

                       <th scope =”row”> 左表头 </th>

                        <td> 列 </td>

                    </tr>

                </table>


          CSS设置页面和浏览器


              超链接:动态超链接     a: link(Visited、hover、active)

                      按钮式超链接   通过对动态超链接a 的状态判断,选取不同的样式。

                      浮雕式超链接  

             鼠标特效:通过设置Cursor的属性来设置不同样式的鼠标。

             页面滚动条:通过3dlight、highlight、face、arrow、darkshadow。(默认:scrollbar-base-color)


    3.2布局(布局部分知识):


20160111193246054.png


              盒子模型:这个图,相信大家都看到很多次了,我就不多说了。


             重叠+div :


            <div> 是一个块级元素,相当于一个区块容器,它可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。HTML中,很多情况下在一个body 内,一个背景或者某些属性只能加载一次,那如果想实现多个背景重叠的效果,那就使用div 来分割,可以每一个div加载一个图片,这样就可以解决一些嵌套的问题。


             浮动与定位:

             浮动靠属性float:left(right、none)可以解决图片在页面中的位置是靠左(右),可以紧挨块级

元素而存在。

             定位靠属性position:static(absolute、relative、fixed),可以将图片保持原位置(绝对、相对位置不变)。