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

随机推荐

[算法][C]计算向量的角度
C 语言里 double atan2(double y,double x) 返回的是原点至点(x,y)的方位角,即与 x 轴的夹角.也可以理解为复数 x+yi 的辐角.返回值的单位为弧度,取值范围为 ...
【转】MYSQL入门学习之十一：触发器的基本操作
转载地址:http://www.2cto.com/database/201212/176781.html 触发器是MySQL响应以下任意语句而自动执行的一条MySQL语句(或位于BEGIN和END语句 ...
关于viewport的研究
昨天项目中用到了适应移动端显示的viewport,一般的使用方式如下: <meta name="viewport" content="width=device-wi ...
Android WebView如何加载assets下的html文件
项目需求:将html文件以及所用到的图片都放在 assets/html/ 目录下.然后在页面上通过WebView来显示直接付上代码: private void readHtmlFormAssets( ...
周赛-Colored Sticks 分类：比赛 2015-08-02 09:33 7人阅读评论(0) 收藏
Colored Sticks Time Limit: 5000MS Memory Limit: 128000K Total Submissions: 32423 Accepted: 8556 Desc ...
验证码识别--type2
验证码识别--type2 终于来到了彩色图像,一定有一些特点这里的干扰项是色彩不是很鲜艳的.灰色的线条,还有单独的干扰点,根据这些特性进行去除直接ostu的话,有的效果好,有的效果不好本来是 ...
Reflection实现通用增删改
新增 /// <summary> /// 通用新增方法 /// </summary> /// <param name="arr">一行数据封装的 ...
HDU 4910 Problem about GCD 找规律+大素数判断+分解因子
Problem about GCD Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
Codeforces Round #372 (Div. 2) A
Description ZS the Coder is coding on a crazy computer. If you don't type in a word for a c consecut ...
Linux 性能监测：Network
网络的监测是所有 Linux 子系统里面最复杂的,有太多的因素在里面,比如:延迟.阻塞.冲突.丢包等,更糟的是与 Linux 主机相连的路由器.交换机.无线信号都会影响到整体网络并且很难判断是因为 L ...

2 CSS

2 CSS的更多相关文章

随机推荐

热门专题