css学习4（背景）

news2024/11/24 14:08:09

1、CSS中，颜色值通常以以下方式定义:

十六进制 - 如："#ff0000"
RGB - 如："rgb(255,0,0)"
颜色名称 - 如："red"

2、background-image 属性描述了元素的背景图像.

默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

3、为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.

4、当使用简写属性时，属性值的顺序为：:

background-color
background-image
background-repeat
background-attachment
background-position

5、文本的属性主要有文本的颜色、文本的对齐方式。

6、 text-decoration属性主要是用来删除链接的下划线。

7、CSS字体属性定义字体，加粗，大小，文字样式。

8、font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

9、为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。

em的尺寸单位由W3C建议。1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

8、在所有浏览器的解决方案中，设置 <body>元素的默认字体大小的是百分比。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>背景相关</title>
        <style>
        body{
            /*background-image:url('A.jpg');
            background-repeat: no-repeat;
            background-position: right top;*/
            background:red url('A.jpg') no-repeat right top;
            background-attachment: fixed;
            font-size: 100%;
        }
        p{
            background-color: red;
            color: yellow;
        }
        h1{
            color: rgb(0, 255, 0);
            text-align: center;
        }
        p.date{text-align: right;}
        p.main{text-align: justify; font-family: "幼圆";font-style: italic;font-size: 1em;}
        a {text-decoration: none;}
        p.capitalize{text-transform: capitalize;text-indent:100px;}
        </style>
    </head>
    <body>
        <h1>CSS学习</h1>
        <p>PHP是世界上最好的编程语言</p>
        <h1>CSS text-align 实例</h1>
        <p class="date">2015年3月14日</p>
        <p class="main">“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”</p>
        <p>链接到：<a href="https://www.baidu.com/">谷歌</a></p>
        <p class="capitalize">phP是世界上最好的编程语言</p>
    </body>
</html>

运行结果：