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的动 ...

随机推荐

load-on-startup
在servlet的配置当中,<load-on-startup>1</load-on-startup>,一般出现在启动线程的servlet当中含义是: 标记容器是否在启动的时候 ...
如何调动员工的积极性 -引用LTP.Net知识库
也许是老板的意识不强,也许员工的意识薄弱,关于老板的意识强不强,我们只能看他是只顾眼前的利益,还是放眼于未来呢. 1:有一个领导的样子现在,在我国,聊天是非常时髦的,也非常受我们这个年龄段的人欢迎.如 ...
关于android中Bundle的使用
1.Android using Bundle for sharing variables 注:android中使用Bundle来共享变量,下例中Activity1和Activity2通过bundl ...
20160113006 asp.net实现ftp上传代码(解决大文件上传问题)
using System;using System.Configuration;using System.Data;using System.Linq;using System.Web;using S ...
onActivityResult传值的使用
参考地址: http://wang-peng1.iteye.com/blog/632833 http://www.cnblogs.com/linjiqin/archive/2011/06/03/207 ...
使用Jvisualvm监控JVM的内存、CPU、线程
最近做性能测试发现很多性能问题,面对一些开发小白的数据结构思想,真想喊一声:放开那个代码,让我来!冲动. 面对WEB站点开发,性能测试是经常要做的,下面一种介绍如何结合性能测试工具,更好的监控WEB服 ...
Xcode插件管理以及Xcode7 升级
一,Xcode插件管理工具 Alcatraz: mkdir -p ~/Library/Application\ Support/Developer/Shared/Xcode/Plug-ins; cur ...
11个让你吃惊的 Linux 终端命令
原文:http://linux.about.com/od/commands/tp/11-Linux-Terminal-Commands-That-Will-Rock-Your-World.htm 作者 ...
.Net分页实现
public partial class _Default : System.Web.UI.Page { private mydbDataContext _context = new mydbData ...
\r与\n有何区别，编码的时候应该如何使用
\r与\n有何区别,编码的时候应该如何使用区别: \r: 全称:carriage return (carriage是“字车”的意思,打印机上的一个部件) 简称:return 缩写:r ASCII码: ...

2 CSS

2 CSS的更多相关文章

随机推荐

热门专题