<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

    css和html相结合（div、span、p等等）：<BR />

    1、每个html标签中都有一个style样式属性，该属性的值就是css代码，每个代码之间用";"隔开

    <BR />

    <div style="background-color:#00C; color:#6C9">同样div定义01次，复用性差</div>

    <BR />

    <div style="background-color:#00C; color:#6C9">同样div定义02次，复用性差</div>

    <BR />

    2、使用style标签方式，style样式，应放在head标签中，表明页面在加载时，就加载样式

    <BR />

    <style type="text/css">

        div{

            background-color:#000;

            color:#FFF

            }

    </style>

    <div>同样div<bR />定义整体样式01次，复用好差</div>

    <BR />

    <span style="background-color:#000; color:#09C">span：区域：局部定义</span>

    <BR />

    <style type="text/css">

        span{

             background-color:#C93;

             color:#0F0

            }

    </style>

    <span>span：区域：整体部定义</span>

    

    <BR />

    <p style="background-color:#900; color:#6FF">

        p：段落同样可以定义css样式

    </p>

</body>

</html>

分别定义了div层的样式，span区域的样式，p段的样式。

可以定义局部的，可以定义全局的。全局的样式定义最好在head标签中定义，表明页面一加载就加载样式。

CSS_01_css和html的结合1、2的更多相关文章

  1. CSS_01_CSS和html结合的方式3、4

    第01步:编写第01个css样式:div.css @charset "utf-8"; /*第01步:定义div:背景色.字体颜色*/ div{ background-color:# ...

随机推荐

  1. 在serviceImpl里使用自身的方法

    @Service("tbLeaveRegisterService")@Transactionalpublic class TbLeaveRegisterServiceImpl ex ...

  2. 低功耗蓝牙4.0BLE编程-nrf51822开发(4)

    蓝牙是一种短距离的通讯方式,它设计的意图是取代电子便携设备之间的有线电缆连接.蓝牙的主要特性是健壮性.低功耗.成本低,它工作于免费的2.4无线传输频段. 蓝牙有两种技术系统:基本速率Basic Rat ...

  3. 闭包 Clousure

    闭包 Clousure 参考:http://caibaojian.com/javascript-closures.html?fid=776%230-tsina-1-25974-397232819ff9 ...

  4. Search in Rotated Sorted Array I

    Search in Rotated Sorted Array I Suppose a sorted array is rotated at some pivot unknown to you befo ...

  5. qq临时会话代码修改

    使用:http://wpa.qq.com/msgrd?V=1&Uin=965745468&Site=www.***.com&Menu=yes提示 抱歉,无法发起临时会话,您可以 ...

  6. JS位操作符

    1.按位与 AND & var result = 25 & 3; alert(result); //1var result2 = 25 & -3;alert(result2); ...

  7. JS-009-屏幕分辨率、浏览器显示区域、元素位置获取

    此文简略讲述有关屏幕大小.元素位置及大小获取. 执行文中脚本时,请先打开 Chrome 浏览器,并切换至开发者工具的控制台,并打开网址:http://www.yixun.com/,文中元素事例为页面元 ...

  8. mac下配置laravel环境

    1.由于 Laravel 需要使用 PHP 的 Mcrypt 扩展,所以我们使用下面的命令来安装. brew search mcrypt brew install php54-mcrypt 2.安装 ...

  9. javascript知识点记录（1）

    javascript一些知识点记录 1.substring,slice,substr的用法 substring 和slice 都有startIndex 和 endIndex(不包括endInex),区 ...

  10. 破解win10系统密码