程序员语录：

不要太刻意地把写程序这件事和挣钱挂起来，局限了你挣钱的本事

<html>

<head>

    <title>网页样式</title>

</head>

<body>

<!--标记的属性-->

<font size="30" color="red">人</font>

<!--css样式-->

<font style="font-size:250px;color:red;">人</font>

</body>

</html>

结果：

标签样式

<html>

<head>

    <title>标签样式</title>

    <style type="text/css">

        span{

            font-size:22px;

            color:blue;

            background-color:#FFFF99;

            border:1px solid green;

        }

        div{

            background-color:#CCFFCC;

            border:1px solid blue;

        }

        </style>

</head>

<body>

<!--区域标记 标示作用 span行的标记-->

<span>span标记</span>

body样式

<u>u标记</u>

<div>

    div1

    div1

    div1

</div>

<p>p标记</p>

</body>

</html>

结果显示：

样式选择器：

<html>

<head>

    <title>样式选择器</title>

    <style type="text/css">

        /*嵌入样式表 html选择器 使用html标记名称*/

        h1{

            border-bottom:2px solid red;

            font-size:30px;

            font-weight:bold;

            color:red;

            height:60px;

            line-height:60px;

            padding-left:20px;

        }

        /*类选择器*/

        .red {

            border:2px dotted red;

            font-size:18px;

            font-weight:bold;

            color:white;

            height:100px;

            width:100px;

            line-height:100px;

            background-color:red;

            text-align:center;

        }

        /*ID选择器*/

        #blue {

            border:2px dotted blue;

            font-size:18px;

            font-weight:bold;

            color:white;

            height:150px;

            width:150px;

            line-height:150px;

            background-color:blue;

            text-align:center;

        }

        /*联合选择器*/

        span.green{

            border:2px dotted green;

            font-size:18px;

            font-weight:bold;

            color:white;

            height:200px;

            width:200px;

            line-height:200px;

            background-color:green;

            text-align:center;

        }

        /*层级选择器*/

        div .yellow {

            border: 1px dotted yellow;

            font-size:16px;

            font-weight:normal;

            color:white;

            height:30px;

            width:60px;

            line-height:30px;

            background-color:yellow;

            text-align:center;

        }

        /*层级选择器*/

        .red .yellow {

            border:1px dotted yelllow;

            font-size:16px;

            font-weight:normal;

            color:white:

            height:30px;

            width:60px;

            line-weight:30px;

            background-color:yellow;

            text-align:center;

        }

        h4,h5,h6 {

            font-size:16px;

            font-weight:normal;

            color:green;

        }

    </style>

</head>

<body>

<h1>样式选择器</h1>

<span>span</span>

<span class="red" >span</span>

<span id="blue">span</span>

<span class="green">span</span>

<div class="green">div</div>

<div>

    <span class="yellow">span</span><div class="blue">div</div>

</div>

<span class="yellow">span</span>

<span class="red">

    <span class="yellow">span</span>

</span>

<h4>h4</h4>

<h5>h5</h5>

<h6>h6</h6>

</body>

</html>

结果显示：

页面使用css:

index.html:

<html>

<head>

    <title>页面使用css</title>

    <style type="text/css">

    /*嵌入样式表*/

    h6 {

        /*border-color:green;

        border-style:double;

        border-width:5px;*/

        border: 2px dotted gray;

        width:300p;

        font-size:18px;

        font-weight:normal;

        color:gray;

        height:60px;

        text-align:center;

        vertical-align:bottom;

        line-height:60px;

    }

    </style>

    <!--导入外部样式表-->

    <link rel="StyleSheet" href="main.css" type="text/css"/>

</head>

<body>

<h1>页面使用css</h1>

<hr/>

<h3>内联</h3>

<h5 style="font-size:25px;color:blue;font-family:黑体;font-weight:bold;border:1 solid blue;width:300px;">样式</h5>

<h5>样式</h5>

<h3>嵌入</h3>

<h6>样式</h6>

<h3>外部</h3>

<h4>样式</h4>

<h3>输入</h3>
<h2>样式</h2>

</body>

</html>

此时还需要main.css:

h4 {

    font-size:18px;

    font-weight:bold;

    color:red;

    width:500px;

    height:80px;

    border:3px double red;

    text-align:center;

    line-height:80px;

    background-color:#33FFFFFF

}

/*输入样式表*/

@import url(import.css);

import.css文件：

h2{

    font-size:20px;

    font-weight:bold;

    color:white;

    width:480px;

    height:280px;

    border:3px solid black;

    text-align:center;

    line-height:140px;

    background-color:#00FA9A;

    background-image:url(11.png);

    background-repeat:no-repeat;

}

3个文件在相同目录下：

用firefox打开index.html

结果：

css样式 第6节的更多相关文章

  1. Web前端开发基础 第四课（认识CSS样式）

    CSS代码语法 css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示: 选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素( ...

  2. [css]样式合并与模块化

    原文链接:http://www.zhangxinxu.com/wordpress/2010/07/css%E7%9A%84%E6%A0%B7%E5%BC%8F%E5%90%88%E5%B9%B6%E4 ...

  3. [css]【转载】CSS样式分离之再分离

    原文链接:http://www.zhangxinxu.com/wordpress/2010/07/css%E6%A0%B7%E5%BC%8F%E5%88%86%E7%A6%BB%E4%B9%8B%E5 ...

  4. jquery轻松操作CSS样式

    $(this).click(function(){  if($(this).hasClass(“zxx_fri_on”)){    $(this).removeClass(“zxx_fri_on”); ...

  5. 用css样式，为表格加入边框

    Table 表格在没有添加 css 样式之前,是没有边框的.这样不便于我们后期合并单元格知识点的讲解,所以在这一节中我们为表格添加一些样式,为它添加边框. 在右侧代码编辑器中添加如下代码: <s ...

  6. 漂亮的表格样式(使用CSS样式表控制表格样式)

    根据WEB2.0风格,设计了几个表格样式,我希望你喜欢. WEB2.0推广使用div开放式布局.但并不是完全放弃使用形式,在数据表现形式而言是一个不错的选择. 本节将介绍如何使用现在CSS样式表来控制 ...

  7. WEB入门 四 CSS样式表深入

    学习内容 Ø        CSS选择器深入学习 Ø        CSS继承 Ø        CSS文本效果 Ø        CSS图片效果 能力目标 Ø        掌握CSS选择器的组合声 ...

  8. WEB入门三 CSS样式表基础

    学习内容 Ø        CSS的基本语法 Ø        CSS选择器 Ø        常见的CSS样式 Ø        网页中3种使用CSS的方式 能力目标 Ø        理解CSS的 ...

  9. Boostrap入门级css样式学习

    1. 自适应网页设计 首先,在网页代码的头部,加入一行 viewport元标签.viewport是网页默认的宽度和高度, <meta name="viewport" cont ...

随机推荐

  1. ubuntu14.04安装opencv3.0

    sudo apt-get update sudo apt-get upgrade 搭建C/C++编译环境: sudo apt-get install build-essential 安装关联库: su ...

  2. HIVE中查询FAILED: Error in metadata: javax.jdo.JDOFatalDataStoreException: Communications link failure

    有一天早上到公司用hive中查询数据,发现报错不能连接.通过检查发现mysql服务器没有启动,开启mysql服务器后查询正常.

  3. Codeforces295A - Greg and Array(线段树的成段更新)

    题目大意 给定一个序列a[1],a[2]--a[n] 接下来给出m种操作,每种操作是以下形式的: l r d 表示把区间[l,r]内的每一个数都加上一个值d 之后有k个操作,每个操作是以下形式的: x ...

  4. Call Hierarchy(方法调用层次)

    在VS2010中的一项新功能:Call Hierarchy窗口,它可以审查代码,确定方法在哪里调用,以及它们与其他方法的关系. 打开一个类文件,找有方法体实现代码的方法,右键选择View Call H ...

  5. 问题-Error creating object. Please verify that the Microsoft Data Access Components 2.1(or later) have been properly installed.

    问题现象:软件在启动时报如下错误信息:Exception Exception in module zhujiangguanjia.exe at 001da37f. Error creating obj ...

  6. Java空字符串与null的区别和判断字符串是否为空的方法

    Java空字符串与null的区别: 1.类型null表示的是一个对象的值,而并不是一个字符串.例如声明一个对象的引用,String a = null ;""表示的是一个空字符串,也 ...

  7. Delphi- 内置数据库的使用例子BDE

    以前开发时经常使用一些大型的数据库,像这样小的数据库还是前段时间才看到.看看Delphi怎么使用内置的数据库, 先在BDE里拉两个数据库控件.DataBase和Table,然后再拉两个数据库控件Dat ...

  8. MyBatis<forEach/>如何遍历Map参数里的值

    纠结了好一阵子, 最终给我解决了. 直接上代码了: mapper文件: <insert id="saveBlogs"> INSERT INTO blog (user_i ...

  9. winform窗体跟随窗体

           Form2 frm2 = new Form2();         private void MoveProc()         {             frm2.StartPos ...

  10. 总结swift语言常见的20个问题和回答

    1.假设我是个刚入门的iOS开发人员,选swift学习呢,还是选objective-c学习,还是两个都学? 这个能够依据两种情况来决定:1.我想进入公司担任iOS开发的职位    2.我仅仅想做个独立 ...