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

随机推荐

[HTML]页面间传值的五种方法
一.QueryString传值:1. 这是最简单的传值方式,但缺点是传的值会显示在浏览器的地址栏中且不能传递对象,只适用于传递简单的且安全性要求不高的整数值,例如: 2. 新建一个WEB项目,添加一个 ...
[HTML]表格的一切
如何设置HTML页面自适应宽度的table(表格): <table width="95%" border="1" cellpadding="2& ...
求两个数的最大公约数（Java）
获得两个随机数(100以内),并放入数组中 public int[] getTwoRandom(){ int[] t = new int[2]; Random rand = new Random(); ...
List null
List<String> list = new ArrayList<String>(); 不给list add,list也不为null 所以list判断有没有数据,只能用判断l ...
通过URl将服务器的图片下载到本地并压缩
private void downloadServerPic(final String url1) { new Thread() { @Override public void run() { // ...
Andriod 字符串数组里加入字符串元素
private String[] t1 = { "姓名", "性别", "年龄", "居住地","邮箱&quo ...
Fragment懒加载
package com.bpj.lazyfragment;import android.support.v4.app.Fragment;/* *baseFragment */ public class ...
SqlSever基础 over与avg配合，将平均值添加到原表的右侧，并为新列起名
镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...
Linux下指定版本编译安装LAMP
说明: 操作系统:CentOS 6.5 64位需求: 编译安装LAMP运行环境各软件版本如下: MySQL:mysql-5.1.73 Apache:httpd-2.2.31 PHP:php-5.2 ...
【mark】自己整合的vi/vim命令
又发现一篇很好的 http://blog.chinaunix.net/uid-16759545-id-4891666.html 又发现一个很好的系列:有空闲要精读一下: http://www.cnbl ...

2 CSS

2 CSS的更多相关文章

随机推荐

热门专题