程序员语录：

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

<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. sed命令教程

    转载自:http://coolshell.cn/articles/9104.htmlawk于1977年出生,今年36岁本命年,sed比awk大2-3岁,awk就像林妹妹,sed就是宝玉哥哥了.所以 林 ...

  2. leetcode@ [51/52] N-Queens

    https://leetcode.com/problems/n-queens/ class Solution { public: void dfs(vector<vector<string ...

  3. url 编码方法

    这个方法用于把 字符串转换成url 的编码 第一个参数是 字符串,第二个参数是 指定的编码(UTF-8 ,GBK, gbk2312...) private string UrlEncode(strin ...

  4. hdoj 2524 矩形A + B

    矩形A + B Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Sub ...

  5. [html]js打开指定页面

    1.在当前窗口打开 location.href = "http://www.baidu.com"; 2.可以设置开发方式 window.open("http://www. ...

  6. 百度的TSDB——可针对tag查询，应该类似kairosDB

    天工架构 目前,天工平台的服务主要由物接入.物解析.物管理.规则引擎和时序数据库组成,并可无缝对接百度云天算智能大数据平台及基础平台产品,可提供千万级设备接入的能力,百万数据点每秒的读写性能,超高的压 ...

  7. linux中配置Java环境

    一. 下载JDK 下载linux版本的jdk32(64) 二. 需要配置的环境变量 1. PATH环境变量.作用是指定命令搜索路径,在shell下面执行命令时,它会到PATH变量所指定的路径中查找看是 ...

  8. Oracle—用户管理的完全恢复（一）

    一．分类 可以分为在非归档模式下和归档模式下的完全恢复,完全恢复主要是针对归档模式下的,在非归档模式下很难做到完全恢复,除非是在做恢复时,联机重做日志还没有被重写. 二．非归档的有关性质 1.在非归档 ...

  9. PowerShell脚本传递参数

    在编写PowerShell脚本的时候,可以通过给变量赋值的方法输出想要的结果,但这样的话,需要改动脚本内容.其实也可以在脚本中定义参数,然后再在执行脚本的时候对参数赋值,而无需改动脚本内容. 在Pow ...

  10. 路冉的JavaScript学习笔记-2015年1月23日

    1.JavaScript的数据类型 A.原始类型:包含数值.字符串.布尔值.空值(null)和未定义值(undefined). Js原始类型均为不可改变类型.对不可变类型调用任何自带方法都不会改变原始 ...