zoukankan      html  css  js  c++  java
  • CSS在网页中应用的方式_嵌入式

    内联式样式表:直接写在现有的标记中,比如: 

    复制代码
    代码如下:

    <p style="font-size:24px;">www.phpstudy.net</p>
    复制代码
    代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
    <html xmlns="<a href="http://www.w3.org/19992881064151/xhtml">http://www.w3.org/1999/xhtml</a>">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS在网页中应用的方式_内联式</title>
    </head>
    <body>
    <p style="font-size:24px;">0.5秒三分绝杀!波特兰上演波什时刻 第N次拯救热火</p>
    <h1 style="font-weight:normal; color:#900;">玩命暴扣扳平+助攻绝杀三分 热火太幸运有这颗队魂</h1>
    <p>热火今夜还一功臣必须赞 11分不多但却分分是金!</p>
    <p>詹波为小弟恶犯叫屈 当事人他都起飞了!肯定假摔</p>
    <p>斯帅称客战开拓者奥登不打 波什:他很快就可复出</p>
    </body>
    </html>

    嵌入式样式表:使用<style></style>标签嵌入到HTML文件的头部中<head>标记中,如:

    复制代码
    代码如下:

    <style type="text/css">
    p{font-size:18px; color:#093;}
    </style>
    复制代码
    代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
    <html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS在网页中应用的方式_嵌入式</title>
    <style type="text/css">
    p{font-size:24px; color:#F03;}
    </style>
    </head></p> <p><body>
    <p>0.5秒三分绝杀!波特兰上演波什时刻 第N次拯救热火</p>
    <h1>玩命暴扣扳平+助攻绝杀三分 热火太幸运有这颗队魂</h1>
    <p>热火今夜还一功臣必须赞 11分不多但却分分是金!</p>
    <p>詹波为小弟恶犯叫屈 当事人他都起飞了!肯定假摔</p>
    <p>斯帅称客战开拓者奥登不打 波什:他很快就可复出</p>
    </body>
    </html>

    外链式:使用<link>标签调用CSS文件(开发中用这种方式)

    CSS在网页中应用的方式.css

    复制代码
    代码如下:

    @charset "utf-8";
    /* CSS Document */
    /*
    CSS文件中也可以导入其他的css文件
    */
    body{
    font-size:18px; 
    background:#FF0;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-family:'汉仪行楷简'
    }
    div{
    font-size:24px;
    background:#0F0;
    font-weight:bold;
    60;
    height:90;
    }
    span{
    font-size:12px; 
    font-weight:normal;
    }
    复制代码
    代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
    <html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS在网页中应用的方式_</title>
    <link href="CSS在网页中应用的方式.css" rel="stylesheet" type="text/css" />

    </head>

    <body>
    <h1>李克强主持召开<span>国务院</span>常务会议</h1>
    <h2> 听取最低生活保障政策落实督查情况汇报</h2>
    部署进一步加强和改进低保工作
    <div>决定将《社会救助暂行办法(草案)》向社会公开征求意faksdjfkasfkasdfj</div>
    </body>
    </html>

    导入式:也可以使用导入方式import,但这种方式和内嵌式一样会占用网页文件的大小,并且有的浏览器解析会有问题,就是先显示网页内容在给网页内容加样式

    复制代码
    代码如下:

    <style type="text/css">
    @import url(css文件)
    </style>
    复制代码
    代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
    <html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS在网页中应用的方式_导入式</title>
    <style type="text/css">
    @import url("CSS在网页中应用的方式.css");
    </style>
    </head></p> <p><body>
    <h1>李克强主持召开<span>国务院</span>常务会议</h1>
    <h2> 听取最低生活保障政策落实督查情况汇报</h2>
    部署进一步加强和改进低保工作
    <div>决定将《社会救助暂行办法(草案)》向社会公开征求意faksdjfkasfkasdfj</div>
    </body>
    </html>
  • 相关阅读:
    ElasticSearch学习记录
    用java代码手动控制kafkaconsumer偏移量
    kafka0.9.0及0.10.0配置属性
    kafka常用命令
    kafka消费者客户端(0.9.0.1API)
    kafka入门教程链接
    编程内功
    bzoj3145:[Feyat cup 1.5]Str
    3 SpringBoot与微服务
    2 微服务存在的问题和解决方案
  • 原文地址:https://www.cnblogs.com/cbryge/p/6047899.html
Copyright © 2011-2022 走看看