程序员语录：

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

<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. eclipse中 将java项目转换为web项目 博客分类： Tomcat

      1.找到项目工作空间目录,打开.project文件,并修改文件, 修改如下:      找到:<natures> </natures>代码段,在代码段中加入如下内容并保存: ...

  2. HDU 1754 I Hate It 线段树 单点更新 区间最大值

    #include<iostream> #include<string> #include<algorithm> #include<cstdlib> #i ...

  3. jquery实现无外边框table

    jquery实现无外边框table 在需要设为无外边框的table上加上class noOutBorder <tableclass="noOutBorder"> < ...

  4. IIS8之System.ServiceModel.Activation.HttpModule錯誤處理

    在Windows Server 2012 R2上安装一个WCF服务,怎么弄都是报System.ServiceModel.Activation.HttpModule錯誤 经过不懈尝次及查找资料,终于找到 ...

  5. WPF线程获取UI线程

    WPF中只能是UI线程才可以改变UI控件相关,当采用多线程工作时,可用以下代码获取 UI线程进行操作: App.Current.Dispatcher.Invoke((Action)delegate() ...

  6. Ⅸ.spring的点点滴滴--IObjectFactory与IFactoryObject的杂谈

    承接上文 ObjectFactory与IFactoryObject的杂谈 .net篇(环境为vs2012+Spring.Core.dll v1.31) public class parent { pu ...

  7. 【三支火把】---队列和栈的C程序实现

    这几天总结了C语言的队列,栈的实现方法,在此总结一下:一.栈 首先从栈开始,诚然,相信学习过数据结构的你,肯定应该知道栈是什么东西了,如果不知道也没事每一句话我就可以帮你总结--数据只在栈顶进行插入和 ...

  8. JavaScript- 图片无缝滚动

    图片向上.向下.向左.向右不间断无缝滚动. 图片向下滚动: <div id="colee" style="overflow: hidden; height: 253 ...

  9. DNF即将代替Yum

    也许你会惊奇在新安装的 Fedroa 22中没有找到 yum 包,也不明白为何在调用 /usr/bin/yum 或使用各种 Yum 插件时会得到警告.嗯,你看到的没错,Yum 已经去了~.直白的说, ...

  10. [Javascript] Object.freeze() vs Object.seal()

    let person = { firstName: "Zhentian", lastName: "Wan" }; /*Object.freeze() makes ...