【前端】css笔记（1）

足足一米58

已于 2022-07-27 17:28:11 修改

阅读量121

点赞数 3

分类专栏： css 文章标签：前端 css html

于 2022-07-25 13:41:58 首次发布

本文链接：https://blog.csdn.net/weixin_61731785/article/details/125968407

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

目录：

background-repeat&background-position 属性

背景- 简写属性

选择器，以及一条或多条声明

CSS 规则由两个主要的部分构成：

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

html 元素

可以用 id单独定义 ,CSS 中 id 选择器以 #来定义（id不得以数字开头）：

<style>
#para1 {
text-align: center;
color: red;
}
</style>
<p id="para1">你好，世界！！！</p>

class 选择器

用于描述多个元素的样式，在 CSS 中，类选择器以一个点"."号显示（class不得以数字开头）：

<style>
.center
{
text-align:center;
}
</style>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>

也可以指定特定的 HTML 元素使用 class：

<style>
p.center
{
text-align:center;
}
</style>
<h1 class="center">此标题不受影响</h1>
<p class="center">此段落将居中对齐。</p>

标签选择器

以 HTML 标签作为 CSS 修饰所用的选择器：
<style>
h3{
color:red;
}
</style>
<h3>W3cschool教程</h3>

内联选择器

直接在标签内部写 CSS 代码：

<h3 style="color:red;">W3cschool教程</h3>

插入样式表的方法有三种:

外部样式表
内部样式表
内联样式

外部样式表

通过改变一个文件来改变整个站点的外观：

<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

多重样式：

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来层叠为一个

层叠优先级（内联最高）：

浏览器缺省设置
外部样式表
内部样式表（位于 head 标签内部）
内联样式（在 HTML 元素内部）

优先级逐级增加的选择器列表，其中数字 7 拥有最高的优先权：

通用选择器（*）
元素(类型)选择器
类选择器
属性选择器
伪类
ID 选择器
内联样式

`background-color` 属性

定义了元素的背景颜色：

<style>
body
{
background-color:#b0c4de;
}
</style>

`background-image` 属性

描述了元素的背景图像：

<style>
body
{
background-image:url('/statics/images/w3c/intro.png');
background-color:#cccccc;
}
</style>

background-repeat&`background-position` 属性

需要在 HTML 页面上对背景图像进行平铺，可以使用 background-repeat 属性；

可以利用 background-position 属性改变图像在背景中的位置：

<style>
body
{
   background-image:url('/statics/images/w3c/intro.png');
   background-repeat:no-repeat;
   background-position:right top;
   margin-right:200px;
}
</style>

百分数值：

background-position:66% 33%;

长度值：

background-position:50px 100px;

背景- 简写属性

属性值的顺序为：

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

<style> body { background:#ffffff url('/statics/images/w3c/intro.png') no-repeat right top; margin-right:200px; } </style>

固定或滚动背景：

background-attachment: fixed;

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>css整理</title>
</head>
<body>
    <style>
        #para1 {
            text-align: center;
            color: red;
        }
    </style>
    <p id="para1">你好，世界！！！</p><!--CSS 中 id 选择器以 # 来定义-->

    <style>
        .center {
            text-align: center;
        }
    </style>
    <h1 class="center">标题居中</h1>
    <p class="center">段落居中。</p><!--类选择器以一个点"."号显示-->

    <style>
        p.center {
            text-align: center;
        }
    </style>
    <h1 class="center">此标题不受影响</h1>
    <p class="center">此段落将居中对齐。</p><!--指定特定的 HTML 元素-->


    <style>
        h3 {
            color: red;
        }
    </style>
    <h3>W3cschool教程</h3><!--标签选择器-->

    <h3 style="color:red;">W3cschool教程</h3><!--内联选择器-->

    <style>
        body {
            background-color: #b0c4de;
        }
    </style><!--背景颜色-->

    <style>
        body  {
            background-image: url('/statics/images/w3c/intro.png');
            background-color: #cccccc;
        }
    </style><!--背景图像-->

    <style>
        body {
            background-image: url('/statics/images/w3c/intro.png');
            background-repeat: no-repeat;
            background-position: right top;
            margin-right: 200px;
        }
    </style><!--背景平铺和位置设置-->
    background-position:66% 33%;<!--百分数值-->
    background-position:50px 100px;<!-- 长度值-->

    <style>
        body {
            background: #ffffff url('/statics/images/w3c/intro.png') no-repeat right top;
            margin-right: 200px;
        }
    </style><!--背景-简写属性-->
    background-attachment: fixed;<!--固定背景-->

</body>
</html>