首页 > > 网页制作 > css >

CSS

2018-06-24 02:03:40来源：未知 阅读 ()

新老客户大回馈,云服务器低至5折

1、css的简介

（1）什么是css

  　　层叠样式表，css是对html进行样式修饰语言

  　　层叠：就是层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的部分应用优先级高的，不冲突的部分共同作用。

　　  样式表：就是css属性样式的集合

（2）css的作用

         a . 修饰html的 使其html样式更加好看

　　 b . 提高样式代码的复用性

　　 c . html的内容与样式相分离 便于后期维护

（3）css的引入方式和书写规范

         a . 内嵌样式

 　　　 内嵌样式是把css的代码嵌入到html标签中   

<div style = "color:red;font-size: 100px;">你好啊 小朋友</div>

  　       运行效果 ：

             

              语法：

                       。使用style属性将样式嵌入到html标签中

  　　　　　 。属性的写法：属性：属性值

　　　　       。多个属性之间使用分号；隔开

               不建议使用

         b . 内部样式

<style type="text/css">
    div{color:blue;font-size: 100px;}
</style>

             在head标签中使用style属性进行css的引入  

　　　　语法：

                       。使用style标签进行css的引入

                           <style type = "text/css">

　　　　　　　　属性：type：告知浏览器使用css解析器去解析

  　　　　　 。属性的写法：属性：属性值

　　　　       。多个属性之间使用分号；隔开

         c . 外部样式

　　　 将css样式抽取成一个单独css文件 谁去使用谁去引用

<link rel = "stylesheet" type = "text/css" href = "demo1.css">

            语法：

　　　　   。创建css文件 将css属性写在css文件中

        　　   。在head标签中使用link标签进行引入  

                            ref : 代表要引入的文件和html的关系

        　　　　    type : 告知浏览器使用css解析器去解析

                            href : css文件地址

　　　　　 　。属性的写法：属性：属性值

 　　　      。多个属性之间使用分号；隔开 

 

2、css选择器

      （1）基本选择器

                a  元素选择器

                   语法：html标签名{css属性}

            　   示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
    span{color:blue;font-size: 100px;}
</style> 

</head>
<body>
    <span>hello css!</span>
</body>
</html>

               b   id选择器  id唯一性

          　　 语法：#id的值{css属性}

                   例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
    #div1{background-color: red;}
    #div2{background-color: pink;}
</style> 

</head>
<body>
    <div id = "div1">hello css1!!!</div>
    <div id = "div2">hello css2!!!</div>
</body>
</html>

            效果：

           

             c     class选择器 

                   语法：  .class的值{css属性}

                    示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
    .style1{background-color: red;}
    .style2{background-color: pink;}
</style> 

</head>
<body>
    <div class = "style1">hello css1!!!</div>
    <div class = "style1">hello css2!!!</div>
    <div class = "style2">hello css3!!!</div>
</body>
</html>

        效果：

       

       （重点）选择器的优先级：id > class > 元素选择器

　  （2）属性选择器

               语法：基本选择器[属性='属性值']{css属性}

               示例： 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
    input[type='text']{background-color: yellow}
    input[type='password']{background-color: pink}
</style> 
     
</head>
<body>
    <form action="">
        name:<input type = "text"/><br>
        pass:<input type = "password"/><br>
    </form>
</body>
</html> 

      效果：

           

      （3）伪元素选择器

               a 标签的伪元素选择器        

                 静止状态   a:link{css属性}

                 悬浮状态   a:hover{css属性}

                 触发状态  a:action{css属性}

                 完成状态  a:visited{css属性} 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
    a:link{color:blue}
    a:hover{color:red}
    a:active{color:yellow}
    a:visited{color:green}
</style> 
     
</head>
<body>
    <a href = "#">点击我吧</a>
</body>
</html>

 

　　（4）层级选择器：

                 语法：父级选择器 子级选择器。。。

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
    #d1 .dd2 span{color:red}
</style> 
     
</head>
<body>
    <div id = "d1">
        <div class = "dd1"> 
            <span>span1-1</span>
        </div>
        <div class = "dd2">
            <span>span1-2</span>
        </div>
    </div>
    <div id = "d2">
        <div class = "dd1">
            <span>span1-1</span>
        </div>
        <div class = "dd2">
            <span>span1-2</span>
        </div>
        </div>
    
</body>
</html>

3、css属性

    （1）文字属性

　　　　font-size : 大小

　　        font-family : 字体类型

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
    span{color:red;font-size:100px;font-family:黑体;}
</style> 
     
</head>
<body>
    <span>hello css!</span>
</body>
</html>

    （2）文本属性

              color : 颜色

              text-decoration : 下划线

                           属性值：none underline

             text-align : 对齐方式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
    div{color:red;text-decoration:underline;text-align:left}
    a{text-decoration: none}
</style> 
     
</head>
<body>
    <div>hello css!!!</div>
    <a href = "#">click me!!!</a>
</body>
</html>

    （3）背景属性

              background-color : 背景颜色

              background-image : 背景图片

                          属性值 : url("图片的地址");

              background-repeat : 平铺方式

 　　　　　　 属性值 : 默认横向纵向平铺

                                        repeat : 横向纵向平铺

                                        no-repeat : 不平铺

　　　　　　　　　　repeat-x : 横向平铺

　　　　　　　　　　repeat-y : 纵向平铺

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
    body{
        background-color:black;
        background-image: url("image/100.png");
        background-repeat: no-repeat;
    }
</style> 
     
</head>
<body>

</body>
</html>

 

    （4）列表属性

             list-style-type : 列表项前的小标志

                  属性值很多，不一一列举

             list-style-image : 列表项前的小图片

                  属性值 : url("图片地址");

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
        /* ul{list-style-type:square;} */
        ul{list-style-image:url("image/222.png");}
</style> 
     
</head>
<body>
    <ul>
        <li>天道酬勤</li>
        <li>天道酬勤</li>
        <li>天道酬勤</li>
    </ul>
</body>
</html>

 

    （5）尺寸属性

　　  width : 宽度

          height : 高度

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
    #d1{background-color: red;width:200px;height:200px;}
    #d2{background-color: pink;width:200px;height:200px;}
</style> 
     
</head>
<body>
    <div id = "d1">div1</div>
    <div id = "d2">div2</div>
</body>
</html>

    （6）显示属性

             display : 

   　　　　属性值：none : 隐藏

　　　　　　　　   block : 块级显示

　　　　　　　　   inline : 行级显示

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
    span{color:red;display:none}
</style> 
     
</head>
<body>
    <form action = "">
        name:<input id = "name" type = "text"/><span id = "span">对不起 输入不符合要求</span>
        <br>
        pass:<input id = "pass" type = "password">
        <br>
        <input id = "btn" type = "button" value = "button">
    </form>
</body>

<script type="text/javascript">
    document.getElementById("btn").onclick = function(){
        document.getElementById("span").style.display = "inline";
    };
</script>

</html>

    （7）浮动属性

 　　　 float : 

   　　　　　属性值 ： left   right

　　　　　　　　　　 clear : 清除浮动 left right both

             缺点 : 

　　　　　　（1）影响相邻的元素不能正常显示

　　　　　　（2）影响父元素不能正常显示

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
    #d1{width :200px;height :200px;background-color: red;float:left}
    #d2{width :200px;height :200px;background-color: blue;float:left}
</style> 
     
</head>
<body>
    <div id = "d1"></div>
    <div id = "d2"></div>
</body>

</html>

4、css盒子模型

   border :

　　　　border - width : 边框的宽度

　　        border - color : 边框的颜色

                border - style : 边框的线型

                

 　　　  border - top : 上边框

               border - bottom : 下边框

               border - left : 左边框

               border - right : 右边框

   padding : 

     　　 代表边框内壁与内部元素之间的距离

　　　  padding : 10px 代表上下左右都是10px

              padding : 1px 2px 3px 4px;   上 右 下 左

　　      padding : 1px 2px;  上下/左右

　　　  padding-top : 单独设置

    margin: 　　   

　　       代表边框外壁与其他元素之间的距离

　　　  margin : 10px 代表上下左右都是10px

              margin : 1px 2px 3px 4px;   上 右 下 左

　　      margin : 1px 2px;  上下/左右

　　　  margin-top : 单独设置

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
    #mooncake{width:100px;height:100px;background-color: red} 
    #box1{width:120px;height:120px;border:10px solid green;padding:20px;margin:50px}
</style> 
     
</head>
<body>
    <div id = "box1">
        <div id = "mooncake">花好月圆</div>
    </div>
</body>

</html>

图书商城案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
    .clear{
        clear:both;
    }
    #top_left{
        width:300px;
        float:left;
    }
    #top_right{
        width:500px;
        float:right;
        margin-top:15px;
        font-size:13px;
    }
    #top_right a{
        text-decoration: none;
        color:#06F;
    }
    #top_right a:hover{
        color:#909;
    }
    #menu{
        background-color:#1C3F09;
        border-top:5px solid #82b211;
        padding:10px 0px;
        text-align: center;
    }
    #menu a{
        margin: 0 10px;
        color:#fff;
        text-decoration: none;
        font-weight: bold; 
        font-size: 15px; 
    }
    #menu a:hover{
        color:#999;
    }
    #menu .all{
        color:yellow;
    }
    #search{
        background-color: #B6B684;
        padding:7px 0;
        text-align: right;
        
    }
    #search input[type='image']{
        margin-right: 250px;
        margin-bottom:0px; 
    }
    #search input[type='text']{
        height:15px;
        border:1px solid #999;
    }
    #content{
        width:900px;
        /* border:1px solid #999; */
        margin:8px auto 15px   /*auto div居中*/
    }
    #content_top{
        text-align: right;
        text-size:13px;
    }
    #content_bottom{
        border:1px solid #999;
        background-color: #FCFDEF;
        padding : 10px 15px;
    }
    #content_bottom h1{
        font-size:15px;
        display:inline;
    }
    #content_bottom span{
        font-size:12px;
    }
    #product_list_img img{
        width:100%;
    }
    .book{
        float:left;
        width :25%;
        text-align: center;
        padding:10px 0;
    }
    .bookimg img{
        width:130px;
        height:196px;
    }
    #jumpPage{
        text-align:center;
        margin:10px;
    }
    #jumpPage a{
        padding:2px 6px;
        border:1px solid #9AAFE5;
        text-decoration: none;
        color:#9AAFE5;
    }
    #jumpPage a:hover{
        color:#2B66A5;
        border:1px solid #2B66A5;
    }
    .current{
        background-color: blue;
    }
    #bottom{
        background-color: #EFEEDC;
        height:80px;
        padding:10px 0;
    }
    #bottom_left{
        width:400px;
        float: left;
    }
    #bottom_right{
        width:500px;
        float: right;
        line-height:28px;  /*行高*/
    } 
    
</style>

</head>
<body>
    <div id = "page">
        <div id = "top">
            <div id = "top_left">
                <img alt="" src="image/logo.png">
            </div>
            <div id = "top_right">
                <img alt="" src="image/cart.png">
                <a href = "#">购物车</a>
                <a href = "#">帮助中心</a>
                <a href = "#">我的账户</a>
                <a href = "#">新用户注册</a>
            </div>
        </div>
        <div class = "clear"></div>
        <div id = "menu">
            <a href = "#">文学</a>
            <a href = "#">生活</a>
            <a href = "#">计算机</a>
            <a href = "#">外语</a>
            <a href = "#">经管</a>
            <a href = "#">社科</a>
            <a href = "#">学术</a>
            <a href = "#">少儿</a>
            <a href = "#">艺术</a>
            <a href = "#">原版</a>
            <a href = "#">考试</a>
            <a href = "#">生活百科</a>
            <a class = "all" href = "#">全部目录商品</a>
        </div>
        <div id = "search">
            <span>Search</span>
            <input type = "text">
            <input type = "image" src = "image/searchbutton.png">
        </div>
        <div id = "content">
            <div id = "content_top">
                <span>首页&nbsp;&gt;&nbsp;旅游&nbsp;&gt;&nbsp;图书列表</span>
            </div>
            <div id = "content_bottom">
                <h1>商品目录</h1>
                <hr>
                <h1>计算机类</h1>
                <span>共100种商品</span>
                <hr>
                <div id = "product_list">
                    <div id = "product_list_img">
                        <img alt="" src="image/productlist.png">
                    </div>
                    <div id = "booklist">
                        <div class = "book">
                            <div class = "bookimg">
                                <img alt="" src="image/100.png">
                            </div>
                            <div class = "bookIntr">
                                <span>书名:XXX</span><br>
                                <span>售价:XXX</span>
                            </div>
                        </div>
                        <div class = "book">
                            <div class = "bookimg">
                                <img alt="" src="image/101.png">
                            </div>
                            <div class = "bookIntr">
                                <span>书名:XXX</span><br>
                                <span>售价:XXX</span>
                            </div>
                        </div>
                        <div class = "book">
                            <div class = "bookimg">
                                <img alt="" src="image/102.png">
                            </div>
                            <div class = "bookIntr">
                                <span>书名:XXX</span><br>
                                <span>售价:XXX</span>
                            </div>
                        </div>
                        <div class = "book">
                            <div class = "bookimg">
                                <img alt="" src="image/103.png">
                            </div>
                            <div class = "bookIntr">
                                <span>书名:XXX</span><br>
                                <span>售价:XXX</span>
                            </div>
                        </div>
                        <div class = "book">
                            <div class = "bookimg">
                                <img alt="" src="image/104.png">
                            </div>
                            <div class = "bookIntr">
                                <span>书名:XXX</span><br>
                                <span>售价:XXX</span>
                            </div>
                        </div>
                        <div class = "book">
                            <div class = "bookimg">
                                <img alt="" src="image/104.png">
                            </div>
                            <div class = "bookIntr">
                                <span>书名:XXX</span><br>
                                <span>售价:XXX</span>
                            </div>
                        </div>
                        <div class = "book">
                            <div class = "bookimg">
                                <img alt="" src="image/105.png">
                            </div>
                            <div class = "bookIntr">
                                <span>书名:XXX</span><br>
                                <span>售价:XXX</span>
                            </div>
                        </div>
                        <div class = "book">
                            <div class = "bookimg">
                                <img alt="" src="image/106.png">
                            </div>
                            <div class = "bookIntr">
                                <span>书名:XXX</span><br>
                                <span>售价:XXX</span>
                            </div>
                        </div>
                        <div class = "clear"></div>
                        <div id = "jumpPage">
                            <a href = "#">上一页</a>
                            <a class = "current" href = "#">1</a>
                            <a href = "#">2</a>
                            <a href = "#">3</a>
                            <a href = "#">4</a>
                            <a href = "#">5</a>
                            <a href = "#">6</a>
                            <a href = "#">7</a>
                            <a href = "#">下一页</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id = "bottom">
            <div id = "bottom_left"></div>
                <img alt="" src="image/logo.png">
            <div id = "bottom_right">
                <span>CONTACT US</span><br>
                <span>copyright 2017&copy;BookStore All Rights RESERVED</span>
            </div>
        </div>
    </div>
</body>
</html>

效果如下：

 

案例中所用到的图片资源放到这里了：http://download.csdn.net/download/little_frog_prince/10138403

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：换行、文字隐藏省略号问题

下一篇：inline-block问题

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签