如何对页面进行美化调整?

<style> 标签用于为 HTML 文档定义样式信息。

style 元素可以出现在 HTML 文档中的各个部分,一个文档可以包含多个 style 元素。

__________________________________

<html>
<head>
    <meta charset="UTF-8">
    <title>鱼C-零基础入门学习Web(Html5+Css3)</title>
    <style type="text/css">
        h1 {color: red}
        p {color: blue}
    </style>
</head>
<body>
    <h1>header 1</h1>
    <p>A paragraph.</p>
</body>
</html>

__________________________________

<style>
    body {
        background-image: url (“../img/bc.png”)
    }
    h1 {
        text-align: center;
        color: white;
    }
    h2 {
        margin-left: 60%;
        color: white;
    }
    p {
	text-indent: 32px;
	font-size: 16px;
        line-height: 32px;
        color: white;
    }
    img{
	position: absolute;
	left: 50%
	margin-left: -181px;
    }
</style>

__________________________________

<style media=”print”>
    h1 {
        color: black;
    }
    h2 {
        color: black;
    }
    p {
        background-color: black;
    }
</style>

__________________________________

<style media=”screen and (min-width:512px) and (max-width:1024px)”>
    body{
        background-image: url(“../img/bc2.png”)
    }
</style>

__________________________________

media 属性指定样式适用的媒体。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>鱼C-零基础入门学习Web(Html5+Css3)</title>
    <style type="text/css">
        h1 {color:#FF0000;}
        p {color:#0000FF;}
        body {background-color:#FFEFD6;}
    </style>

    <style type="text/css" media="print">
        h1 {color:#000000;}
        p {color:green;}
        body {background-color:#FFFFFF;}
    </style>
</head>

<body>
    <h1>style标签-media属性 例子</h1>
    <p>如果打印这个页面,或者预览这个页面,会看到 media="print" 的样式。这个  "print"样式包含了绿色文本和白色背景。</p>
</body>
</html>

__________________________________

课程来自鱼C论坛


0 条评论

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注