文档章节

CSS

Romanceling
 Romanceling
发布于 2016/05/05 19:03
字数 2454
阅读 79
收藏 0

css的使用方式;css规则特性和样式优先级;css选择器;border与box;背景色和背景图;文本格式化;表格;元素的定位;列表样式;元素的显示方式;鼠标样式。

------------------------------------------------------------------------------------------------------

css:层叠样式表,用于定义html的显示方式,样式通常存储在样式表中。
css的使用方式:
    - 内联方式:样式定义在html元素的属性style中。
    例    <h1 style="color:red;">内联方式</h1>
    
    - 内部样式:在head的style子标签中写的css,该css可以在当前页面复用。
    例    <style>
            h1{
                color:red;
            }
        </style>

    - 外部样式:在head标签中,通过link标签引入外部css文件。任何页面都可以复用这些样式。
    例    <link rel="stylesheet" href="my.css">
------------------------------------------------------------------------------------------

css语法规范:css由多个样式规则组成,每个样式规则包含选择器和样式声明,样式声明包含属性和值。

css规则特性:
    - 继承性:父元素的某些样式可以被子元素继承,如字体颜色等。
    - 层叠性:同一个元素若存在多个css规则,不冲突的声明可以叠加。
    - 优先级:同一个元素若存在多个css规则,冲突的声明以优先级高者为准。

样式优先级从高到低为:内联样式→(外部样式和内部样式:就近原则)→浏览器默认设置
-------------------------------------------------------------------------------------------
css选择器:
1.元素选择器:通过元素名来选择css作用的目标。
          通常在页面中有多个相同的元素需要重用同样的效果时使用。
例         p{
        color:red;
         }

2.类选择器:根据class选择一组元素。通常在页面中有多个不相同的元素需要重用同样的效果时使用。
例      .female{
        color:pink;
      }

3.id选择器:根据id选择唯一的元素。*/
例      #p4{
        color:red;
      }

4.选择器组:选中一组选择器。
    .female,#p4{
        font-family:"微软雅黑","黑体";
    }

5.派生选择器:
    - 后代选择器:选择某元素的所有后代(子孙)元素。
例    ol li{
        color:blue;
    }

    - 子元素选择器:选择某元素的所有子(儿子)元素。
例    ol>li{
        color:green;
    }
    
6.伪类选择器:可以设置同一元素在不同状态下的样式。
    - link:向未被访问过的超链添加样式。
例    a:link{
        color:red;
    }

    - visited:向已被访问过的超链添加样式。
例    a:visited{
        color:green;
    }

    - active:向被激活(正在点)的元素添加样式。
例    #b1(按钮):active{
        background-color:red;
    }

    - 当元素获得焦点时(光标正在闪烁),向该元素添加样式。
例    #t1(文本框):focus{
        background-color:red;
    }

    - hover:当鼠标悬停在元素上方时,向该元素添加样式。
例    img:hover{
        width:300px;
        height:450px;
    }
-----------------------------------------------------------------------------------------
border与box
border:用来设置元素的边框。

一.border的设置方式:
1.四边一起设置:语法为 border:边框的宽width值  style值  color值;
例        p{
            border:1px dashed red;        /* dashed虚线,solid实线 */
        }

2.单边设置:语法为 border-left/right/top/bottom:width值  style值  color值;
例    h1 {
        border-left:10px solid blue;
    }

3.内容溢出overflow:当内容溢出元素框时如何处理。
    - visible:可见。    - hidden:隐藏。
    - scroll:滚动(箭头)。    - auto:滚动(滚动条)。

样式单位:
    - % :百分比    - px :像素    - em :当前的字体尺寸

二.框模型:定义了元素框处理元素的内容、内边距(padding)、边框和外边距(margin)的方式。
    - width和height指内容区域的宽和高。
    - 增加内边距、边框和外边距不会影响内容区域的尺寸,但会增加元素框的总尺寸。
1.四边一起设置相同的样式:
例    /*统一所有div的宽高和边框*/
    div{
        width:100px;
        height:100px;
        border:1px solid red;
    }
    /*1.四边一起设置相同的边距*/
    #d2{
        padding:20px;
        margin:30px;
    }

2.四边一起分别设置不同的样式:    
例    /*2.四边一起设置不同的边距:顺序为  上 右 下 左
    */
    #d3{
        padding:10px 20px 30px 40px;
        margin:40px 30px 20px 10px;
    }

3.单边设置:
例    /*3.单边(left/rigth/top/bottom)设置边距*/
    #d4{
        padding-top:20px;
        padding-left:30px;
        margin-left:40px;
        margin-bottom:30px
    }
4.对边设置:
例    /*4.对边(上下  左右)设置边距*/
    #d5{
        padding:20px 40px;
        margin:30px 60px;
    }

5.特殊的居中设置:
例    /*5.特殊用法,使用margin对边设置外边距时,若左右的值时auto,则该元素会水平居中*/
    #d6{
        margin:0 auto;
    }
------------------------------------------------------------------------------------------
背景色和背景图:
一.背景色:background-color属性,为元素设置背景色。
例    body{
        background-color:#ccc;
    }

二.背景图片:background-image属性用于设置背景图,默认值是none。
例    body{
        background-image:url("../images/background.png");
    }

1. 默认情况下背景图时平铺效果,即水平和竖直方向上重复出现,可以通过background-repeat属性控制:
 - repeat:平铺。  - repeat-x:水平方向重复出现  还有repeat-y和no-repeat
例    body{
        background-image:url("../images/background.png");
        background-repeat:no-repeat;
    }

2. background-position:用于设置图片在元素中的位置,该属性可取值为:
    - x%y%:左上角是0%0%,右下角是100%100%
    - xy:左上角是00
    - left:在页面或者包含元素的左边显示,还有center,right,top,bottom

3.默认情况下背景会随着页面滚动而滚动,可以通过background-attachment属性来改变特征。
 - 默认值是scroll:背景会随文档滚动。
 - 可取值为fixed:背景图像固定,不会随着页面的其余部分滚动。

*4.采用简化的方式设置背景:background:背景色 背景图 重复 位置;
            上述四个值可以省略,但至少保留背景色或背景图之中的一个值
例    body{
        background:url(../images/background.png) no-repeat center;
    }
------------------------------------------------------------------------------------------
文本格式化:
一.文本字体的控制:
1.字体:font-family:value1(字体1),value2,...;(字体集)
例    body{
        font-family:"微软雅黑","文泉驿正黑","黑体";
    }
2.字体大小:font-size:value;
例    p{
        font-size:30px;
    }
3.字体加粗:font-weight:normal/bold;
例    p{
        font-weight:bold;
    }
4.字体颜色:color:value;
例    p{
        color:red;
    }
5.文本排列:text-align:left/right/center;
6.文字修饰(下划线):text-decoration:none/underline;
7.行高:line-height:value;
例    p{
        line-height:3em;(3个当前的字体尺寸高度)
    }
8.首行文本缩进:text-indent:value(2em);
-------------------------------------------------------------------------------------------
表格:表格可以使用box模型(边框、内外边距、宽高)以及文本格式化属性。
例:表格常用样式属性:
table{
    width:200px;
    border:1px solid red;
    padding:10px;
    margin:30px;
}

 - 合并相邻的边框:border-collapse:separate/collapse(合并);
例    table{
        border-collapse:collapse;
    }
--------------------------------------------------------------------------------------------

定位:
一.流定位:块级元素上下排列,行内元素左右排列。
二.浮动定位:将元素脱离普通的流定位,会释放原本所占空间,在css中任何元素都可以浮动。
1.float:none/left(左浮动)/right(右浮动);
例    div{
        float:left;
    }

2.clear:用于消除浮动带来的影响。
    clear:none/left/right/both;定义了那边不可以出现浮动元素。
例    p{
        clear:left;(这样浮动的元素就不会遮盖这个段落p)
    }

三.相对定位:**元素原本所占的空间不释放。
    - 首先需要设置position属性的值为relative
    - 然后使用left、right、top、bottom属性设置偏移量。
例    /*使用相对定位实现鼠标悬停时照片偏移的效果*/
    li:hover{
        /*相对定位*/
        position:relative;
        /*设置偏移量*/
        left:2px;
        top:-2px;
    }

四.绝对定位:绝对定位释放原本所占空间。
    - 绝对定位会相对与最近的已定位父辈(或更高辈)元素
    - 如果该元素没有已定位父辈元素,那么它的位置相对于最初的包含块,如body元素。
*    - 首先需要设置position属性的值为absolute
    - 然后使用left、right、top、bottom属性设置偏移量。
例    若html中的代码为:<div class="outter">
                <div class="d1">d1</div>
              </div>
    则css中的决定定位代码可以为:
    .outter{
        /*父元素上加position仅仅是为了便于子元素做绝对定位。此处不设置偏移量*/
        position:relative;
    }
    .d1{
        position:absolute;
        bottom:10px;
        right:10px;
    }

五.固定定位:将元素定位在窗口的某个位置,释放空间,不随页面滚动而移动。
    - 首先需要设置position属性的值为fixed
    - 然后使用left、right、top、bottom属性设置偏移量。
例    若html中的代码为:<body>
                  <div><a href="#">TOP</a></div>
              </body>
    则css中的决定定位代码可以为:div{
                    width:40px;
                    background-color:#ccc;
                    text-align:center;
                    line-height:30px;
                    position:fixed;
                    bottom:10px;
                    right:5px;
                     }

六.堆叠顺序:z-index:value;值越大越在前面显示
例    img:hover{
        z-index:999;
    }
--------------------------------------------------------------------------------------
列表样式:
1.list-style-type:控制列表中列表项标志的样式:
 - 无序列表可取值:none无标记、disc实心圆,默认值、circle空心圆、square实心方块
 - 有序列表可取值:none无标记、decimal数字(1,2...),默认值
    lower-roman小写罗马数字(i,ii,iii...),upper-roman大写罗马数字(Ⅰ,Ⅱ,Ⅲ...)

2.list-style-image:使用图像替换列表项的标志,取值为:url();
例 html:<ol>
        <li id="sx">山西</li>
        <li>广东</li>
    </ol>
    <ul>
        <li>北京</li>
        <li>合肥</li>
    </ul>

css:    <style>
        ol{
            list-style-type:upper-roman;
        }
        ul{
            list-style-type:square;
        }
        #sx{
            list-style-image:url(../images/add.png);
        }
    </style>
------------------------------------------------------------------------------------------
元素的显示方式:
1.元素都有默认的显示方式:
 - 块元素:独立成行,可设置宽高,从上至下。
 - 如:hn/p/ol/ul/div/table

 - 行内元素:不独立成行,无宽高,从左至右。
 - 如:span/b/strong/i/em/del/u/a

 - 行内块:不独立成行,有宽高,从左至右。
 - 如:img/input/select/textarea

2.改变元素的显示方式:display
 - none:不显示该元素,释放空间。
 - block:将元素显示方式设置为块。
 - inline:将元素显示方式设置为行内。
 - inline-block:将元素显示方式设置为行内块。
------------------------------------------------------------------------------------------
鼠标样式:cursor:定义了鼠标指针放在一个元素边界范围内时所用的光标形状。
 - default/pointer/crosshair/text/wait/help等。

© 著作权归作者所有

上一篇: JavaScript基础
下一篇: HTML
Romanceling
粉丝 14
博文 166
码字总数 91809
作品 0
无锡
程序员
私信 提问

暂无文章

OSChina 周六乱弹 —— 如果是个帅小伙你愿意和他出去吗

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 小小编辑推荐:《Ghost 》游戏《死亡搁浅》原声 《Ghost 》游戏(《死亡搁浅》原声) - Au/Ra / Alan Walker 手机党少年们想听歌,请使劲儿戳...

小小编辑
18分钟前
10
2
java通过ServerSocket与Socket实现通信

首先说一下ServerSocket与Socket. 1.ServerSocket ServerSocket是用来监听客户端Socket连接的类,如果没有连接会一直处于等待状态. ServetSocket有三个构造方法: (1) ServerSocket(int port);...

Blueeeeeee
今天
6
0
用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
5
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
16
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部