2 CSS

CSS基础

html 在一个网页中负责的事情是一个页面的结构
css(层叠样式表) 在一个网页中主要负责了页面的数据样式。

编写css代码的方式：
    第一种：在style标签中编写css代码。   只能用于本页面中，复用性不强。
        格式：
            <style type="text\css">
                编写css的代码。
            </style>
        例子：
           <style type="text\css">
               a{
                    color:#F00;
                    text-decoration:none;
               }
           </style>

     第二种：可以引入外部的css文件。推荐使用。

        方式1：使用link标签。   推荐使用...
           格式：
               <link href="css文件的路径" rel="stylesheet">

            例子： <link href="1.css" rel="stylesheet"/>

        方式2：使用<style>引入

             格式：
                    <style type="text/css" >
                       @import url("css的路径");
                    </style>

             例子：
                <style type="text/css" >
                   @import url("1.css");
               </style>

    第三种方式：直接在html标签使用style属性编写。    只能用于本标签中，复用性较差。不推荐使用。

          例子：
             <a style="color:#0F0; text-decoration:none" href="#">新闻的标题1</a

Code

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
    </head>

    <body>

        <h1>标题1</h1>
        <a style="color:#0F0; text-decoration:none" href="#">新闻的标题1</a>
        <a href="#">新闻标题2</a>
        <a href="#">新闻标题3</a>
        <a href="#">新闻标题4</a>
        <a href="#">新闻标题5</a>
        <a href="#">新闻标题6</a>

    </body>

</html>

CSS选择器

选择器：选择器的作用就是找到对应的数据进行样式化。
   1.标签选择器：就是找到所有指定的标签进行样式化。

       格式：
           标签名{
               样式1；样式2....
           }

       例子：
           div{
               color:#F00;
               font-size:24px;
           }
   2. 类选择器: 使用类选择器首先要给html标签指定对应的class属性值。

       格式：
           .class的属性值{
               样式1；样式2...
           }

       例子：
           .two{
               background-color:#0F0;
               color:#F00;
               font-size:24px;
           }

类选择器要注意的事项：
1. html元素的class属性值一定不能以数字开头.
2. 类选择器的样式是要优先于标签选择器的样式。

3. ID选择器：使用ID选择器首先要给html元素添加一个id的属性值。

           ID选择器的格式：

               #id属性值{
                   样式1；样式2...
               }
       id选择器要注意的事项：
           1. ID选择器的样式优先级是最高的，优先于类选择器与标签选择器。
           2. ID的属性值也是不能以数字开头的。
           3. ID的属性值在一个html页面中只能出现一次。

   4. 交集选择器：就是对选择器1中的选择器2里面的数据进行样式化。

选择器1 选择器2{
           样式1，样式2....
       }

       例子：
           .two span{
               background-color:#999;
               font-size:24px;
           }

5. 并集选择器：对指定的选择器进行统一的样式化。

       格式：
           选择器1,选择器2..{
               样式1；样式2...
           }

       span,a{
           border-style:solid;
           border-color:#F00;
       }
   6. 通过选择器:

           *{
               样式1；样式2...
           }

Code

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
    </head>

    <body>

        <div id="one" class="two">这个是<span>第一个div标签</span>...</div>
        <div id="one" class="two">这个是<span>第二个div标签</span>...</div>
        <span>这个是一个span标签</span>
        <br/>
        <a class="two" href="#">新闻标题</a>

    </body>

</html>

伪类选择器

伪类选择器就是对元素处于某种状态下进行样式的。
注意：
1. a:hover 必须被置于 a:link 和 a:visited 之后
2. a:active 必须被置于 a:hover 之后

Code

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
    </head>

    <style type="text/css">
        a:link {
            color: #F00
        }
        /* 没有被点击过---红色 */

        a:visited {
            color: #0F0
        }
        /*  已经被访问过的样式---绿色 */

        a:hover {
            color: #00F;
        }
        /* 鼠标经过的状态---蓝 */

        a:active {
            color: #FF0;
        }
    </style>

    <body>

        <a href="#">百度</a>

    </body>

</html>

Code 伪类选择器应用

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
    </head>

    <style type="text/css">
        table {
            background-color: #CCC;
            border-collapse: collapse;
            border: 3px;
        }
        tr:hover {
            background-color: #06F;
        }
    </style>

    <body>

        <table border="1px" width="400px" height="300px" align="center">
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>人品</th>
            </tr>

            <tr>
                <td>张三</td>
                <td>98</td>
                <td>差</td>
            </tr>

            <tr>
                <td>李四</td>
                <td>50</td>
                <td>极好</td>
            </tr>

            <tr>
                <td>综合测评</td>
                <td colspan="2">不错</td>
            </tr>

        </table>
    </body>

</html>

Code 伪类选择器应用2

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
    </head>

    <style type="text/css">
        /*操作背景的属性 */

        body {
            /*background-color:#CCC;  设置背景颜色*/

            background-image: url(img/2.jpg);
            background-repeat:no-repeat;
            /*  设置背图片是否要重复 */

            background-position: 370px 100px;
            /* 设置背景图片的位置， 第一个参数是左上角的左边距， 第二个参数是左上角的上边距 */
        }
        /* 操作文本的样式 */

        div {
            color: #F00;
            font-size: 16px;
            line-height: 40px;
            letter-spacing: 10px;
            text-align: center;
            text-decoration: none;
            text-transform: uppercase;
        }
    </style>

    <body>
        <div>
            <pre>
                     seven步诗
                煮豆燃豆萁，豆在釜中泣。
                本是同根生，相煎何太急。
            </pre>
        </div>
    </body>

</html>

Code 操作表格的属性

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
    </head>

    <style type="text/css">
        table {
            /*border-collapse:collapse; 合并表格的边框*/

            border-spacing: 20px;
            /* 设置单元格的边框与表格的边框距离*/

            table-layout: fixed;
        }
    </style>

    <body>
        <table border="1px" width="400px" height="300px" align="center">
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>人品</th>
            </tr>

            <tr>
                <td>张三</td>
                <td>98</td>
                <td>差</td>
            </tr>

            <tr>
                <td>李四</td>
                <td>50</td>
                <td>极好极好极好极好极好极好极好极好极好极好极好极好极好极好极好</td>
            </tr>

            <tr>
                <td>综合测评</td>
                <td>不错</td>
            </tr>

        </table>
    </body>

</html>

Code 设置边框的属性

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
    </head>

    <style type="text/css">
        /*
        div默认是没有边框呃。
    */

        div {
            width: 100px;
            height: 100px;
            border-style: dotted solid double;
            /* 设置边框的样式  上 右 下 左*/

            border-color: #F00;
            border-bottom-color: #0FF;
            border-top-width: 100px;
        }
    </style>

    <body>
        <div>这个是第一个div</div>
    </body>

</html>

盒子模型

盒子模型: 盒子模型就是把一个html边框比作成了一个盒子的边框，盒子模型要做用于操作数据与边框之间的距离或者是边框与边框之间的距离。
盒子模型主要是用于操作内边距(padding)与外边距（margin）

Code

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
    </head>

    <style type="text/css">
        div {
            border-style: solid;
            width: 100px;
            height: 100px;
            /* 内边距 */

            padding-left: 10px;
            padding-top: 20px;
        }
        .one {
            margin-bottom: 30px;
        }
        .two {
            margin-left: 700px;
        }
    </style>

    <body>
        <div class="one">
            这个是一个div
        </div>

        <div class="two">
            这个是二个div
        </div>
    </body>

</html>

Code 登录框

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
    </head>

    <style type="text/css">
        .outer {
            border-style: solid;
            width: 370px;
            height: 200px;
            margin-top: 250px;
            margin-left: 420px;
            background-image: url(../1.jpg);
            background-repeat: no-repeat;
            background-position: center;
        }
        .userName {
            margin-top: 60px;
            margin-left: 80px;
        }
        .password {
            margin-left: 80px;
            margin-top: 20px;
        }
        input {
            border-color: #000;
            border-width: 3px;
        }
        #button {
            margin-left: 120px;
        }
    </style>

    <body>
        <div class="outer">

            <div class="userName">
                用户名
                <input type="text" />
            </div>

            <div class="password">
                密&nbsp;&nbsp;码
                <input type="password" />
            </div>

            <input id="button" type="submit" value="登陆" />

        </div>
    </body>

</html>

定位
相对定位：相对定位是相对于元素原本的位置进行移动的。
使用方式： position:relative;

绝对定位：绝对定位是相对于整个页面而言。
       position:absolute;
       top:200px;
       left:380px;

   固定定位：
       position:fixed; /* 固定定位: 固定定位是相对于整个浏览器而已的。
       top:380px;
       left:1000px;

Code

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
    </head>

    <style type="text/css">
        div {
            border-style: solid;
            width: 100px;
            height: 100px;
        }
        .one {
            background-color: #F00;
        }
        .two {
            background-color: #0F0;
            position: relative;
            /* 相对定位,对于当前位置 */

            top: 10px;
            left: 10px;
        }
        .three {
            background-color: #00F;
        }
        #ad {
            width: 400px;
            height: 200px;
            border-style: solid;
            font-size: 24px;
            color: #F00;
            position: absolute;
            /* 绝对定位,相对于一个页面 的左上角而言的。 */

            top: 200px;
            left: 380px;
        }
        #ad2 {
            position: fixed;
            /* 固定定位: 固定定位是相对于整个浏览器而已的。 */

            top: 380px;
            left: 1000px;
        }
    </style>

    <body>
        <div class="one"> one</div>
        <div class="two">two</div>
        <div class="three">three</div>
        <div id="ad">
            <marquee scrollamount="30">广告</marquee>
        </div>
        目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位....
        目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位....
        目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位....
        目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位....
        目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位....
        目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位....
        目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位....
        目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正.... 目前正在学习css定位.... 目前正在学习css定位....
        目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位....
        目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位....
        目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位....
        目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位....
        目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位....
        目前正在学习css定位.... 目前正在学习css定位.... 目前正.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位....
        目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位....
        目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正在学习css定位.... 目前正....
        <div id="ad2">
            <img src="img/2.png" />
        </div>
    </body>

</html>

2 CSS的更多相关文章

Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
CSS的未来
仅供参考前言完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...
理解CSS外边距margin
前面的话 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...
理解CSS视觉格式化
前面的话 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...
谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库
在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...
谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

随机推荐

【转】MYSQL入门学习之十：视图的基本操作
转载地址:http://www.2cto.com/database/201212/176775.html 一.视图的基本介绍 www.2cto.com 视图是虚拟的表.与包含数据 ...
hdu4935 Prime Tree（2014多校联合第七场）
首先这是一道dp题,对题意的把握和对状态的处理是解题关键. 题目给出的范围是n在1到1e11之间,由于在裂变过称中左儿子总是父亲节点的一个非平凡约数,容易看出裂变过程只与素数幂有关,并且显然有素数不 ...
Python网络爬虫Scrapy框架研究以及代理设置
地址:https://github.com/yidao620c/core-scrapy 例子:https://github.com/geekan/scrapy-examples 中文翻译文档: htt ...
spring Aop中aop:advisor 与 aop:aspect的区别
转载:http://blog.csdn.net/u011710466/article/details/52888277 在spring的配置中,会用到这两个标签.那么他们的区别是什么呢? ...
Bean的生命周期
Bean的生命周期原文:http://997004049-qq-com.iteye.com/blog/1729793 任何一个事物都有自己的生命周期,生命的开始.生命中.生命结束.大家最熟悉的应该是 ...
如何实现百度外卖APP个人中心头像"浪"起来的动画效果
作为一个中午下班不肯离开工作岗位且勤奋工作的骚年来说,叫外卖就成了不可或缺的习惯.某日瞬间发现百度外卖的APP波浪效果很是吸引人.相比较其他的外卖APP,颜值略高些.(淘宝也有波浪的效果),遂就思考如 ...
lua中奇葩用法
th> a=torch.zeros(,) [.0001s] th> a [torch.DoubleTensor of size 1x5] [.0002s] th> a[] [torc ...
spark记录
Filtering multiple values in multiple columns: In the case where you're pulling data from a database ...
Win7\xp添加虚拟网Microsoft Loopback Adapter
安装Microsoft Loopback Adapter 1 依次找到打开“开始菜单”---“控制面板”---“添加硬件”的菜单选项如下图所示. 步骤阅读 2 如果没有“添加硬件”当然你也可以直接, ...
【leetcode❤python】 19. Remove Nth Node From End of List
#-*- coding: UTF-8 -*-#双指针思想,两个指针相隔n-1,每次两个指针向后一步,当后面一个指针没有后继了,前面一个指针的后继就是要删除的节点# Definition for sin ...

2 CSS

2 CSS的更多相关文章

随机推荐

热门专题