CSS入门

最新推荐文章于 2023-12-15 16:42:47 发布

fffffffff_jj

最新推荐文章于 2023-12-15 16:42:47 发布

阅读量152

点赞数 1

分类专栏： Web前端

本文链接：https://blog.csdn.net/qq_42347617/article/details/103802466

版权

Web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

01 Ready?

1-1 内联

1-1-1 内联CSS

内联样式，将CSS用于单个元素

<p style="color:white; background-color:gray;">
    Hello world.
</p>

1-1-2 内部样式表

   <head>
      <style>
      p {
         color:white;
         background-color:gray;
      }
      </style>
   </head>

1-1-3 外部引用CSS

将所有的CSS样式保存在同一个后缀名为.css的拓展文件中。然后通过html标签在HTML页面的部分将CSS文件引入。

<head>
   <link rel="stylesheet" href="example.css">
</head>

CSS：

p {
   color:white;
   background-color:gray;
}

1-2 语法

样式规则有三个部分：选择器，属性和值。
在这里插入图片描述

声明块包含一个或多个用分号分隔的声明。CSS声明总是以分号结尾，而声明组则由大括号包围。
每个声明都包含一个由冒号分隔的属性名称和值。

注释：/* This is a comment */

通过样式的三个主要来源形成一个级联：

由页面的作者创建的CSS样式
浏览器的默认CSS样式

浏览页面的用户自定义CSS样式

1-2-1 元素选择器

就是对已选中的HTML元素符号设置CSS样式（例如：div、p、a、ul、li等元素符号）

class 选择器：

.ClassName{
	width: 80px;
	height: 90px;
}

应用：

<div class="ClassName">ClassName的样式</div>

id选择器：

因为HTML页面中id标签的唯一性（不允许同时存在两个相同的id），所以id选择器的复用性相对较低，因此较为建议使用class选择器

#IdName{
    width:80px;
    height:90px;
}

后代选择器：

后代选择器：选中某个父级下对应的所有子级，并针对该子级设置CSS样式。

.father .baby{
    color:red;
}
.family .mother .baby{
    color:blue;
}

后代选择器设置的CSS样式不会影响到父级。
父级和子级之间需要用空格隔开。
后代选择器可以存在多层级父级，并不局限在单一父子级之间，层级越深所设置的CSS样式优先级越高。

<html>
    <head>
        <style type="text/css">
            .baby{
                color:black;
            }
            .father .baby{
                color:red;
            }
            .mother .baby{
                color:blue;
            }
            .house .father .baby{
                color:green;
            }
        </style>
    </head>
    <body>
        <p class="baby">无法无天的熊孩子</p>
        <div class="father">
            <p class="baby">亲爹带娃</p>
        </div>
        <div class="mother">
            <p class="baby">亲妈带娃</p>
        </div>
        <div class="house">
            <div class="father">
                <p class="baby">亲爹在家里带娃</p>
            </div>
        </div>
    </body>
</html>

output：

子元素选择器：

后代选择器可以跨层级影响，而子元素选择器要求父元素和子元素一定为上下级关系，中间如果隔着其他元素则会失效。
父元素和子元素之间需要用 > (子结合符) 隔开。

div > span{
    width:80px;
    height:90px;
}

<html>
    <head>
        <style type="text/css">
            div > p{
                color:red;
            }
            .mother > .baby{
                color:blue;
            }
        </style>
    </head>
    <body>
        <div>
            <p>亲爹带娃</p>
        </div>
        <div class="mother">
            <p class="baby">亲妈带娃</p>
        </div>
        <div>
            <a href="https://www.w3cschool.cn">
                <p>亲爹在家里带娃</p>
            </a>
        </div>
    </body>
</html>

output：

相邻选择器：

相邻选择器：选中对应元素的下一个兄弟元素。
所涉及的相邻兄弟元素必须是该元素的同级元素。
所涉及的相邻兄弟元素必须是相邻兄弟元素，中间若有其他元素隔开也将导致失效。
元素A和对应的相邻兄弟元素之间需要用 + 隔开。

#w3cschool+div{
    width:80px;
    height:90px;
}

属性选择器：

属性选择器：检索HTML页面中符合所设置的属性条件的元素。
属性选择器通过[ ]设置被选元素的属性条件。

<!--将选择HTML页面中所有包含了alt内属性的img元素并为其设置CSS样式-->
img[alt]{
	width: 80px;
	height: 90px;
}

/***设置页面上所有含有id属性的div元素***/
div[id]{
    color:red;
}

/***设置页面上所有同时含有class和id属性的div元素***/
a[class][id]{
    color:red;
}

除了基础的属性选择器外，接下来将给大家介绍一些特殊的属性选择器用法。

 设置页面上所有含有href属性并且属性值为https://www.w3cschool.cn的a元素

a[href=“https://www.w3cschool.cn”]{
color:red;
}

 设置页面上所有含有class属性并且属性值的词列表的某个词等于w3cschool的div元素。(适用于针对设置了多个class名称的元素使用)

div[class~=“w3cschool”]{
color:red;
}

 设置页面上所有含有class属性并且属性值中以w3cschool开头的div元素

div[class^=“w3cschool”]{
color:red;
}

 设置页面上所有含有class属性并且属性值中以w3cschool结尾的div元素

div[class$=“w3cschool”]{
color:red;
}

 设置页面上所有含有class属性并且属性值中包含w3cschool的div元素

div[class*=“w3cschool”]{
color:red;
}

设置页面上所有含有class属性并且属性值等于w3cschool或者以w3cschool开头的div元素

div[class|=“w3cschool”]{
color:red;
}

选择器分组：当需要多个元素同时使用同一套CSS样式时，可以使用选择器分组，这样可以避免为每个元素单独设置样式而照成不必要的冗余。

 选择器分组通过 , （逗号）将需要复用同一套样式的多个元素进行分隔。

/***选择器分组写法***/
a,p,div{
    color:red;
}

/***原始写法***/
a{color:red}
p{color:red}
div{color:red}

1-3 文本样式

font-family属性

font-family属性指定元素的字体。

有两种字体系列名称：

字体系列：特定的字体系列（如Times New Roman或Arial）
通用族：一组具有相似外观的字体族（如Serif或Monospace）

以下是不同字体样式的示例：

HTML代码：

This is a paragraph shown in serif font.

This is a paragraph shown in sans-serif font.

This is a paragraph shown in monospace font.

This is a paragraph shown in cursive font.

This is a paragraph shown in fantasy font.

CSS代码：

p.serif {
font-family: “Times New Roman”, Times, serif;
}
p.sansserif {
font-family: Helvetica, Arial, sans-serif;
}
p.monospace {
font-family: “Courier New”, Courier, monospace;
}
p.cursive {
font-family: Florence, cursive;
}
p.fantasy {
font-family: Blippo, fantasy;
}

执行结果：

用逗号分隔每个值，以表明它们是可选项（下一组题会介绍多个值的用法）。

如果一个字体的名字不只一个单词，那么必须用引号："Times New Roman"。

font-family属性

font-family属性应该包含几个字体名称作为备选。在CSS样式中指定Web字体时，请添加多个字体名称，以避免意外的行为。如果客户端计算机出于某种原因没有您选择的字体时，则会尝试下一个字体。

指定通用字体系列是一个很好的做法，如果没有其他字体可用，让浏览器在通用系列中选择相似的字体。

body {
font-family: Arial, “Helvetica Neue”, Helvetica, sans-serif;
}

如果浏览器不支持Arial字体，则会尝试下一个字体（Helvetica Neue，Helvetica）。如果浏览器没有任何一个，它会尝试通用的sans-serif。

 再次提醒，如果字体名称包含多个单词，请记住使用引号。

font-size属性

font-size属性用于设置字体的大小。设置网页字体大小的其中之一方法是使用关键字。例如xx-small, small, medium, large, larger, etc等。

HTML代码：

Paragraph text set to be small

Paragraph text set to be medium

Paragraph text set to be large

Paragraph text set to be very large

CSS代码：

p.small {
font-size: small;
}
p.medium {
font-size: medium;
}
p.large {
font-size: large;
}
p.xlarge {
font-size: x-large;
}

执行结果：

font-size属性

您还可以使用像素(px)或相对尺寸单位(em)数值来操纵字体大小。

当您需要像素精度时，以像素值(px)设置字体大小是一个不错的选择，它可以让您完全控制文本大小。

em尺寸单位是设置字体大小的另一种方式（em是相对尺寸单位）。它允许所有主流浏览器调整文本的大小。如果您没有在页面上的任何位置设置字体大小，那么这是浏览器的默认大小，即16px。

要计算em大小，只需使用以下公式：em = px / 16，即 1em = 16px。

例如：

h1 {
font-size: 20px;
}

h1 {
font-size: 1.25em;
}

这两个例子都会在浏览器中产生相同的结果，因为20/16 = 1.25em

 在各种浏览器中尝试文本大小和页面缩放的不同组合，以确保文本的可读性。

font-style属性

font-style属性通常用于指定斜体文本。

HTML代码：

我只是斜了一点，并不歪。

CSS代码：

p.italic {
font-style: italic;
}

执行结果：

font-style属性

font-style属性有三个值：normal，italic和oblique。

oblique非常类似于italic，但浏览器的支持较少。

HTML代码：

我没有效果。

我是斜体。

我是倾斜，楼上的孪生兄弟

CSS代码：

p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}

执行结果：

 HTML <i>标签将产生与斜体字体完全相同的结果。

<i>斜体</i>

font-weight属性

font-weight控制文本的粗细。值可以设置为normal (默认)，bold，bolder，和lighter。

HTML代码：

This is a font with a "lighter" weight.

This is a font with a "bold" weight.

This is a font with a "bolder" weight.

CSS代码：

p.light {
font-weight: lighter;
}
p.bold {
font-weight: bold;
}
p.bolder {
font-weight: bolder;
}

执行结果：

font-weight属性

根据文本的厚度，也可以使用从100（细）到900（粗）的数字来定义字体粗细。

400与normal相同，700与bold相同。

HTML代码：

This is a font with a "lighter" weight.

This is a font with a "bold" weight.

This is a font with a "700" weight.

CSS代码：

p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 700;
}

代码执行：

 HTML <strong>标签也使文本变粗。

font-variant属性

font-variant属性允许您将字体转换为所有小型大写字母。值可以设置为normal，small-caps，和 inherit。

HTML代码：

Paragraph font variant set to normal.

Paragraph font variant set to small-caps.

CSS代码：

p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}

执行结果：

 不是每个字体都支持CSS字体变体，所以在发布之前一定要测试一下。

color属性

color属性用于指定文本的颜色。

指定文本颜色的其中一种方法是使用颜色名称：如red, green, blue等

以下是更改字体颜色的示例。

HTML代码：

大家好！

楼上的怎么这么绿？

CSS代码：

p.example {
color: green;
}

执行结果：

color属性

定义color的其他方法是使用十六进制值和RGB。

十六进制形式是一个井号(#)，最多6个十六进制值(0-F)。

RGB定义了红色，绿色和蓝色的各个值。

在下面的示例中，我们使用十六进制值将标题颜色设置为蓝色，使用RGB形式将段落设置为红色。

HTML代码：

w3cschool

CSS代码：

h1 {
color: #0000FF;
}
p.example {
color: rgb(255,0,0);
}

执行结果：

<style>
    p.red{color:rgb(255,0,0);}
    p.blue{color: #0000FF;}
    p.green{color:green;}
</style>

text-align属性

text-align属性指定元素中文本的水平对齐方式。默认情况下，您网站上的文字左对齐。但是，有时您可能需要不同的对齐方式。

文本对齐属性值如下：left，right，center和justify。

HTML代码：

w3cschool

CSS代码：

p.left {
text-align: left;
}
p.right {
text-align: right;
}
p.center {
text-align: center;
}

执行结果：

 当文本对齐设置为"justify"时，每行都被拉伸，使得每一行具有相同的宽度，并且左右边距是直的（如在杂志和报纸中）。

vertical-align属性

vertical-align属性设置元素的垂直对齐。常用的值是top，middle和bottom。

下面的示例显示了如何垂直对齐表格之间的文本。

HTML代码：

Top

Middle

Bottom

CSS代码：

td.top {
vertical-align: top;
}
td.middle {
vertical-align: middle;
}
td.bottom {
vertical-align: bottom;
}

执行结果：

vertical-align属性

vertical-align属性还包含以下值：baseline，sub，super，%和px(或pt，cm)。

下面的例子显示了它们之间的区别。

HTML代码：

This is a w3cschool example.

CSS代码：

span.baseline {
vertical-align: baseline;
}
span.sub {
vertical-align: sub;
}
span.super {
vertical-align: super;
}
span.pixel {
vertical-align: -10px;
}

执行结果：

 可以使用pt(点)，cm(厘米)和%(百分比)值来代替px值。

vertical-align属性

vertical-align属性对所有元素的行为都不一样。

例如，div元素需要一些额外的CSS样式。

HTML代码：

w3cschool

CSS代码：

.main {
height: 150px; width: 400px;
background-color: LightSkyBlue;
display: inline-table;
}
.paragraph {
display: table-cell;
vertical-align: middle;
}

执行结果：

 display: inline-table; 和 display: table-cell;使用样式来使垂直对齐属性能在div中起效果

text-decoration属性

text-decoration属性用于指定文本将如何装饰。

常用的值有：

none - 默认值，这定义了一个正常的文本
inherit - 从其父元素继承此属性
overline - 在文本上方绘制水平线
underline - 在文本下方绘制水平线
line-through - 在文本中绘制水平线（替换HTML <s>标记）

下面的例子演示了每个值之间的差异。

HTML代码：

w3cschool

CSS代码：

p.none {
text-decoration: none;
}
p.inherit {
text-decoration: inherit;
}
p.overline {
text-decoration: overline;
}
p.underline {
text-decoration: underline;
}
p.line-through {
text-decoration: line-through;
}

执行结果：

 您可以将underline，overline或line-through组合起来，以添加多条装饰线。

 text-decoration: blink这个值是有效的,可以使文本闪烁，但是被弃用，大多数浏览器忽略它。

缩进：text-indent属性

text-indent属性指定在文本的第一行开始之前应该留下多少水平空间。属性值是长度(px，pt，cm，em等)，%和inherit。

HTML代码：

使用 text-indent 让文本向右缩进了60px。

CSS代码：

p {
text-indent: 60px;
}

执行结果：

 负值是允许的。 如果值为负值，则第一行将向左缩进。

text-shadow属性

text-shadow为文本添加阴影。

它有四个值：

第一个值：定义阴影在x（水平）方向的距离
第二个值：定义y（垂直）方向的距离
第三个值：定义阴影的模糊
第四个值：设置颜色

HTML代码：

w3cschool

CSS代码：

h1 {
color: blue;
font-size: 30pt;
text-shadow: 5px 2px 4px grey;
}

在上面的例子中，我们使用以下参数创建了一个阴影：

5px - X坐标
2px - Y坐标
4px - 模糊半径
灰色 - 阴影的颜色

执行结果：

 要向文本添加多个阴影，请添加逗号分隔的阴影列表。

text-shadow与模糊效果

处理阴影时，可以使用任何CSS支持的颜色格式。

对于x和y偏移，可以使用各种类型的单位（如px，cm，mm，in，pc，pt等）。

 负值也被支持。

下面的例子创建一个蓝色的阴影，比主文本向上高出2px，向左多1px，并且用0.5em模糊：

HTML代码：

w3cschool

CSS代码：

h1 {
font-size: 20pt;
text-shadow: rgba(0,0,255,1) -1px -2px 0.5em;
}

执行结果：

 注：Internet Explorer 9和更早版本不支持text-shadow属性。

text-transform属性

text-transform可以实现文本的首字母大写效果。

HTML代码：

The value capitalize transforms the first character in each word to uppercase; all other characters remain unaffected.

CSS代码：

p.capitalize {
text-transform: capitalize;
}

执行结果：

text-transform属性

使用text-transform，您可以使文本显示为全部大写或全部小写。

HTML代码：

This value transforms all characters to uppercase.

This value transforms all characters to lowercase.

CSS代码：

p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}

执行结果：

 none值不会产生任何效果

letter-spacing属性

letter-spacing属性用于设置文本中字符之间的间距。

值可以设置为：

normal 定义了默认样式，字符之间没有额外的空间;
length 长度计量单位，用px，pt，cm，mm等测量单位定义字符之间的额外空间;
inherit 继承其父元素的属性;

HTML代码：

w3cschool

CSS代码：

p.normal {
letter-spacing: normal;
}
p.positive {
letter-spacing: 4px;
}

执行结果：

letter-spacing使用负值

letter-spacing使用负值可以减少字符之间的间距。

HTML代码：

w3cschool

CSS代码：

p.positive {
letter-spacing: 4px;
}
p.negative {
letter-spacing: -1.5px;
}

执行结果：

 设置间距后请测试效果，避免影响文本的阅读性

word-spacing属性

word-spacing 属性指定文本中单词之间的空格。就像letter-spacing属性一样，可以将word-spacing 的值设置为normal，length和inherit。

HTML代码：

This paragraph has no additional word-spacing applied.

This paragraph is word-spaced at 30px.

CSS代码：

p.normal {
word-spacing: normal;
}
p.px {
word-spacing: 30px;
}

执行结果：

 当段落需要使用正常的单词间距展示时，通常会使用normal

word-spacing的测量单位

要使用word-spacing设置单词之间的间距，可以使用像px，pt，pc，cm，mm，inches，em和ex这样的测量值。

 负值也是允许的。

HTML代码：

This paragraph is word-spaced at 20px.

This paragraph is word-spaced at -5px.

CSS代码：

p.positive {
word-spacing: 20px;
}
p.negative {
word-spacing: -5px;
}

执行结果：

white-space属性

white-space可以设置元素内的换行符。

参数可以是normal，inherit，nowrap等。

 nowrap会屏蔽该元素中的所有换行符。

HTML代码：

This paragraph has multiple spaces and a line break, but it will be ignored, as we used the nowrap value.

CSS代码：

p {
white-space: nowrap;
}

执行结果：

 文本将继续在同一行，直到遇到一个<br />标记。

white-space属性

white-space也支持其他值：

pre ：文本支持所有的换行和空格
pre-line ：文本支持换行，忽略额外的空格
pre-wrap ：文本将在必要的时候或者行的结尾进行换行

HTML代码：

In the markup we have multiple spaces

and a line break.

In the markup we have multiple spaces

and a line break, but in the result multiple spaces are ignored.

In the markup we have multiple

spaces and a line break.

CSS代码：

p.pre {
white-space: pre;
}
p.preline {
white-space: pre-line;
}
p.prewrap {
white-space: pre-wrap;
}

执行结果：

 Pre-wrap值的行为与Pre值相同，只是它增加了额外的换行符以防止文本突破元素的框。

CSS盒模型

所有的HTML元素都可以被认为是盒子。CSS盒模型代表网站的设计和布局。它由边距(margin)，边框(border)，填充(padding)和实际内容组成。

属性以相同的顺序工作：顶部(top)，右侧(right)，底部(bottom)和左侧(left)。

 属性工作顺序为顺时针，以上右下左的顺序。

在这里插入图片描述

了解元素的总宽度

网页的每个元素都是一个盒子。

CSS通过盒模型来确定一个元素的大小以及如何放置它们。

使用盒模型时，了解元素的总宽度是如何计算的非常重要。

例如，带有填充(padding)的盒的总宽度将是宽度加上填充左侧(padding-left)和填充右侧(padding-right)的总和。

在这里插入图片描述
这是另一个有边距(margin)，边框(border)和填充(padding)的盒。

总宽度是左右边距，左右边框，左右填充以及内容的实际宽度的总和。

在这里插入图片描述
当您使用CSS设置元素的宽度和高度属性时，可以设置内容区域的宽度和高度。

在盒模型中设置背景颜色时，将覆盖内容区域以及填充区域(padding)。

元素的总高度

元素的总高度的计算方式与宽度相同。

在这里插入图片描述
总而言之，总元素高度 = 高度(height) + 顶部填充(padding-top) + 底部填充(padding-bottom) + 顶部边框(border-top) + 底部边框(border-bottom) + 顶部边距(margin-top) + 底部边距(margin-bottom)

知识点普及：遇到内容div想居中与外部div中，可以使用 margin : 0 auto 这样会根据内部div宽度自动填充左右两侧的margin值以达到居中效果

border属性

CSS的border属性允许您自定义HTML元素的边框。

为了向元素添加边框，您需要指定边框的大小，样式和颜色。

下面的示例显示了如何向段落添加纯绿色边框。

HTML代码：

我绿我光荣

CSS代码：

p {
padding: 10px;
border: 5px solid green;
}

执行结果：

border属性

border宽度

border的属性可以单独设置。 border-width属性指定边框的宽度。

HTML代码：

w3cschool

CSS代码：

p.first {
padding: 10px;
border-style: solid;
border-width: 2px;
}
p.second {
padding: 10px;
border-style: solid;
border-width: 5px;
}

执行结果：

border 颜色

可以使用颜色名称关键字，RGB或十六进制值定义元素的边框颜色。

HTML代码：

w3cschool 欢迎您

CSS代码：

p.first {
padding: 10px;
border-style: solid;
border-width: 2px;
border-color: blue;
}
p.second {
padding: 10px;
border-style: solid;
border-width: 2px;
border-color: #FF6600;
}
p.third {
padding: 10px;
border-style: solid;
border-width: 2px;
border-color: rgb(0, 153, 0);
}

执行结果：

border-style属性

border-style的默认值是none，它没有定义边界。

边框样式属性支持各种样式：虚线(dotted)，虚线(dashed)，双精度(double)等。下面的例子说明了它们之间的区别。

HTML代码：

w3cschool

CSS代码：

p.none {border-style: none;}
p.solid {border-style: solid;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.hidden {border-style: hidden;}

执行结果：

 在CSS中，可以使用以下属性为不同的边指定不同的边框：border-top-style，border-right-style，border-bottom-style 和 border-left-style。

CSS 宽度和高度

将一个

元素的总宽度和高度设置为100px：

 这里注意不要和盒模型的总宽度和高度弄混了哦~

HTML代码：

我的宽和高都是100px哦~

CSS代码：

div {
border: 5px solid green;
width: 90px;
height: 90px;
}

执行结果：

 div的总宽度和高度将是90px + 5px（border）+ 5px（border）= 100px;

宽度和高度的度量单位

元素的宽度和高度也可以使用百分比来分配。

在下面的例子中，元素的宽度以百分比分配，高度以像素为单位。

HTML代码：

该元素的总宽度是 100% 而总高度是 100px .

CSS代码：

div {
border: 5px solid green;
width: 100%;
height: 90px;
}

执行结果：

最小和最大尺寸

要设置元素的最小和最大高度或者宽度，可以使用以下属性：

min-width - 元素的最小宽度
min-height - 元素的最小高度
max-width - 元素的最大宽度
max-height - 元素的最大高度

在下面的例子中，我们将不同段落的最小高度和最大宽度设置为100px。

HTML代码：

本段的最小高度设置为100px。

本段的最大宽度设置为100像素。

CSS代码：

p.first {
border: 5px solid green;
min-height: 100px;
}
p.second {
border: 5px solid green;
max-width: 100px;
}

执行结果：

background-color属性

background-color属性用于指定元素的背景颜色。

HTML代码：

此页面的背景色设置为LightSkyBlue。

CSS代码：

body {
background-color: #87CEFA;
}

执行结果：

background-color的属性值

background-color可以使用三种不同的格式的参数来定义：

颜色名称关键词：red、blue等；
十六进制值：#fff、#000、#6e6e6e等；
RGB：rgb(255,255,255)、rgba(0,0,0,0.5)等（使用rgba可以实现透明背景色）；

在下面的例子中，body，h1和p元素被分配了不同的背景颜色：

HTML代码：

w3cschool

CSS代码：

body {
background-color: #C0C0C0;
}
h1 {
background-color: rgb(135,206,235);
}
p {
background-color: LightGreen;
}

执行结果：

background-image属性

background-image属性在元素中设置一个或多个背景图像。我们来为body元素设置一个背景图片。

CSS代码：

body {
background-image: url(“https://statics.w3cschool.cn/images/w3c/header-logo.png”);
background-color: #e9e9e9;
}

 该url指定图像文件的路径。 支持相对路径和绝对路径。

执行结果：

 默认情况下，背景图像放置在元素的左上角，并且垂直和水平重复以覆盖整个元素。

background-repeat属性

background-repeat属性指定如何重复背景图像。背景图像可以沿水平轴，垂直轴，两个轴重复，或者根本不重复。

repeat-x只会水平重复背景图像。

CSS代码：

body {
background-image: url(“https://statics.w3cschool.cn/images/w3c/header-logo.png”);
background-repeat: repeat-x;
}

执行结果：

repeat-y只会垂直重复背景图像。

CSS代码：

body {
background-image: url(“css_logo.png”);
background-repeat: repeat-y;
}

执行结果：

 如果你的背景图片只想使用一次，请使用no-repeat

设置继承值

当您将background-repeat属性设置为inherit时，它将采用与元素父级的属性相同的指定值。

例如，我们只在body上设置background-repeat:repeat-x;。如果我们设置了一些段落的background-repeat为inherit，它们将采用与body元素相同的属性值。

CSS代码：

body {
background-image: url(“https://statics.w3cschool.cn/images/w3c/header-logo.png”);
background-repeat: repeat-x;
}
p {
background-image: url(“https://statics.w3cschool.cn/images/w3c/header-logo.png”);
background-repeat: inherit;
margin-top: 100px;
padding: 40px;
}

执行结果：

background-attachment属性

background-attachment属性设置背景图像是固定的还是与页面的其余部分一起滚动。

background-attachment属性的参数：

scroll：默认值。背景图像会随着页面其余部分的滚动而移动。
fixed：当页面的其余部分滚动时，背景图像不会移动。
inherit：规定应该从父元素继承 background-attachment 属性的设置。

 设置了fixed属性后，即使元素具有滚动机制，背景图像会固定在某个位置不会跟随页面元素滚动。

CSS代码：

body {
background-image: url(“https://7nsts.w3cschool.cn/images/w3c/header-logo.png”);
background-repeat: no-repeat;
background-attachment: fixed;
}

执行结果：

background-attachment属性

background-attachment可以设置为inherit或scroll。

当您将background-attachment设置为inherit时，它将继承其父元素的值。

当您将背景附件设置为scroll时，背景图片将与其余内容一起滚动。

CSS代码：

body {
background-image: url(“https://statics.w3cschool.cn/images/w3c/header-logo.png”);
background-repeat: no-repeat;
background-attachment: scroll;
}

执行结果：

CSS 列表样式:

列表可以进一步风格化，图像可以用作列表项标记。

其中一种方法是使用list-style-type属性，可以设置为none,circle, square, decimal, disc, lower-alpha等。

 list-style-type属性的none值可以将列表的标记设置为不显示，在使用ul/ol进行一些网页布局（例如菜单）的时候较常使用到~

HTML代码：

w3cschool
w3cschool
w3cschool

w3cschool
w3cschool
w3cschool

w3cschool
w3cschool
w3cschool

CSS代码：

ol.lower-alpha {
list-style-type: lower-alpha;
}
ul.circle {
list-style-type: circle;
}
ul.square {
list-style-type: square;
}

执行结果：

列表的图标和位置

还有其他列表属性，如：

list-style-image ： 指定要用作列表项标记的图像。
list-style-position ： 指定标记框的位置（属性值包括：inside, outside）。

在下面的示例中，我们使用图像作为列表项标记，并指定位置在内容流中。

HTML代码：

以下列表使用 list-style-position: inside属性。

w3cschool
w3cschool
w3cschool

CSS代码：

ul {
list-style-image: url(“https://www.w3cschool.cn/statics/images/favicon.ico”);
list-style-position: inside;
}

执行结果：

 "list-style-position: outside"是默认值。

list-style属性

list-style属性是设置list-style-type，list-style-image和list-style-position的简写属性。它用于在一个声明中设置所有的列表属性：

ul {
list-style: square outside none;
}

下方是未简化版本：

ul {
list-style-type: square;
list-style-position: outside;
list-style-image: none;
}

执行结果：

list-style其中的某个值如果未传入，则该值会使用默认值。

table属性

使用CSS可以大大提高HTML表格的外观。

border-collapse属性指定表格边框是否折叠为单个边框或默认分开。如果边框是分开的，则可以使用border-spacing属性来更改间距。

HTML代码：

w3cschool	w3cschool
w3cschool	w3cschool

CSS代码：

table {
border-collapse: separate;
border-spacing: 20px 40px;
}

运行结果：

caption-side属性

caption-side属性指定表标题的位置。值可以设置为 top 或 bottom。

在下面的例子中，我们指定顶部表格标题的位置。

HTML代码：

w3cschool
Course name	Lessons	Quizzes
C++	81	363
JavaScript	48	144
HTML	38	119
CSS	70	174

CSS代码：

caption {
caption-side: top;
}

执行结果：

empty-cells属性

empty-cells属性指定是否在表格中的空单元格上显示边框和背景。

参数值可以是：

show：呈现空单元格的边框
hide ：隐藏空单元格的边框

以下是用于隐藏

元素中空单元格边框的空单元格属性。

HTML代码：

HTML	CSS
JavaScript

CSS代码：

table {
border-collapse: separate;
empty-cells: hide;
}

执行结果：

table-layout属性

table-layout指定如何计算表格列的宽度。

参数值可以是：

auto  ： 当列或单元格宽度未明确设置时，列宽将与组成列的单元格中的内容量成比例。
fixed ： 当列或单元格宽度未明确设置时，列宽将不受组成列的单元格中的内容数量的影响。

表格布局默认设置为auto。

下面的例子显示了auto和fixed的区别。

HTML代码：

Table-layout is set to auto

500.000.000.000.000

20.000

Table-layout is set to fixed

500.000.000.000.000

20.000

CSS代码：

table {
border-collapse: separate;
width: 100%;
border: 1px solid gray;
}
td {
border: 1px solid gray;
}
table.auto {
table-layout: auto;
}
table.fixed {
table-layout: fixed;
}

执行结果：

设置链接样式

链接可以使用任何CSS属性（例如，color，font-family，background等）来设置样式。

另外，链接的样式可以不同，具体取决于所处的状态。以下伪选择器可用：

a:link - 定义正常的未访问链接的样式
a:visited - 定义访问链接的样式
a:active - 一旦你点击链接，链接就会激活
a:hover - 当鼠标悬停时，链接悬停

下面的例子创建一个链接，当鼠标移到它上面的时候会改变样式。

HTML代码：

w3cschool欢迎您

CSS代码：

a:hover {
color: red;
}

执行结果：

 当为链接设置样式时，必须遵循以下规则：

- a:hover 必须在a:link和a:visited之后

- a:active 必须在a:hover之后

文本链接的样式

默认情况下，文本链接由浏览器加下划线。

处理带链接的文本CSS最常见的用法之一是删除下划线。在下面的示例中，text-decoration属性用于删除下划线。

HTML代码：

我的下划线已经被删掉咯！

CSS代码：

a:link {
text-decoration: none;
}

执行结果：

 以下属性用于控制链接的样式：

border:none - 从包含链接的图像中删除边框

outline:none - 删除IE中点击链接行上的虚线边框

设置鼠标光标样式

CSS允许您将鼠标悬停在元素上时设置所需的光标样式。例如，您可以将光标更改为手形图标，帮助图标等，而不是使用默认指针。

在下面的例子中，当我们将鼠标移到span元素上时，鼠标指针被设置为一个帮助图标：

需要帮忙么？

执行结果：

cursor参数值

cursor属性还有许多其他的值，例如：

default - 默认光标

crosshair - 光标显示为十字准线

pointer - 光标显示手形图标

cursor的值较多，以下用图片的形式列出。

在这里插入图片描述
display属性

display: block

网页上的每个元素都是一个盒模型。display属性决定了盒模型的行为方式。 block(块元素)是占用最大可用宽度的元素，前后有换行符。

以下示例中的样式规则将内联元素显示为块级元素。

HTML代码：

First w3cschool.
Second w3cschool.
Third w3cschool.
Fourth w3cschool.
Fifth w3cschool.

CSS代码：

span {
display: block;
}

执行结果：

display: inline

inline元素只占用尽可能多的宽度，并不强制换行。

CSS代码：

p {
display: inline;
}

执行结果：

 设置元素的display属性只会改变元素的显示方式，而不会改变元素的类型。

 所以，带有display: block的内联元素不允许在其中包含其他块元素。

display:none

display:none 隐藏一个元素，所以它不占用任何空间。该元素将被隐藏，在页面显示时不会展现出来，就好像该元素不存在一样。

HTML代码：

因为display:none，你们看不到我。

w3cschool

CSS代码：

h1 {
display: none;
}

执行结果：

display还有很多其他的参数值，比如list-item，table，table-cell，table-column，grid等等。

visibility属性

visibility属性用于指定元素是可见的还是隐藏的。

最常见的值是visible和hidden。

可以通过将display属性设置为“none”或者将visibility属性设置为“hidden”来隐藏元素。

但是请注意，这两种方法会产生不同的结果：

visibility:hidden隐藏了一个元素，但是它仍然占据与之前相同的空间。该元素将被隐藏，但仍然会影响布局：

这里是一个例子：

HTML代码：

w3cschool

上方div的位置变成了空行，因为 div元素被设置了visibility: hidden

CSS代码：

div.hidden {
visibility: hidden;
}

执行结果：

display:none隐藏一个元素，没有为该元素保留一个位置。

将visibility: hidden改为display:none会产生以下效果：

div.hidden {
display: none;
}

执行结果：

position属性

position属性允许你定位一个元素。它也可以将元素放在另一个元素之后，并指定元素的内容太大时应该发生的情况。

可以使用top, bottom, left, 和 right属性来定位元素。

但是，除非position属性有进行初始化设置参数值这些属性才能起效果。根据定位方法，它们的工作方式也不同。

position属性的值可以为：

absolute（绝对定位）
fixed（固定定位）
relative（相对定位）
static（默认值，无定位）
inherit（继承父级定位）

position:static (静态定位)

HTML元素默认为静态。静态定位元素总是按照页面的正常流动进行定位。

HTML代码：

没有定位

我用了静态定位

CSS代码：

p.position_static {
position:static;
top: 30px;
right: 5px;
color: red;
}

执行结果：

 静态定位元素不受top, bottom, left, 和right属性的影响。

Position属性

position:fixed（固定定位）能使具有固定位置的元素相对于浏览器窗口被定位，并且即使窗口被滚动也不会移动。

可以使用top, right, bottom, 和left的一个或多个属性来指定位置。

position:absolute（绝对定位）生成绝对定位的元素，相对于static定位（默认定位值，即没有定位）以外的第一个父元素进行定位。

可以使用top, right, bottom, 和left的一个或多个属性来指定位置。

在下面的例子中，使用固定定位将段落固定为top:30px，right:5px。

CSS代码：

p.position_fixed {
position: fixed;
top: 30px;
right: 5px;
color: red;
}

执行结果：

 fixed参数能把元素从正常的顺序中拉出。可以无视其他元素的定位。

 设置了fixed的元素可以重叠在其他元素上。

相对定位

position:relative （相对定位）元素的定位是相对其正常位置。

可以使用top, right, bottom, 和 left的属性来指定呈现的元素将如何移动。

HTML代码：

w3cschool

w3cschool w3cschool

CSS代码：

p {
width: 350px;
border: 1px black solid;
position: fixed;
}
span {
background: green;
color:white;
position: relative;
top: 150px;
left: 50px;
}

执行结果：

relative定位的元素的内容可以移动并与其他元素重叠，但是元素的保留空间在正常流程中仍然保留。

 在table中设置position:relative是无效的。

absolute绝对定位

绝对位置元素相对于具有非静态位置的第一个父元素进行定位。如果找不到这样的元素，则针对的是。

绝对定位的元素将从正常流程中移除。文档和其他元素的行为像绝对定位的元素不存在。

 绝对定位的元素可以重叠其他元素。

z-index属性

当元素位于正常流程顺序之外时（受position等属性影响时），它们可以重叠于其他元素。

z-index属性指定元素的堆栈顺序（通过z-index的值可以决定哪个元素应放置在其他元素的前面或后面）。

HTML代码：

blue (w3cschool)

red (w3cschool)

CSS代码：

.blue {
background-color: #8EC4D0;
margin-bottom: 15px;
width: 120px;
height: 120px;
color: #FFF;
}
.red {
background-color: #FF4D4D;
position: relative;
width: 120px;
height: 120px;
color: #FFF;
margin-top: -50px;
margin-left: 50px;
}

执行结果：

红框与蓝框重叠，红框会位于蓝框上方，因为红框是后加载的。

设置z-index属性可以改变这个顺序。

3/5
指定z-index属性

为蓝色div元素指定较高的z-index值，为红色div元素指定较低的z-index值将导致以下结果：

HTML代码：

blue (w3cschool)

red (W3c School)

CSS代码：

.blue {
background-color: #8EC4D0;
position: relative;
margin-bottom: 15px;
width: 120px;
height: 120px;
color: #FFF;
z-index: 3;
}
.red {
background-color: #FF4D4D;
position: relative;
width: 120px;
height: 120px;
color: #FFF;
margin-top: -50px;
margin-left: 50px;
z-index: 2;
}

执行结果：

 z-index仅适用于定位元素（position:absolute，position:relative 或 position:fixed）。

float属性

使用CSS中float，可以将元素向左或向右推，以允许其他元素环绕它。

float通常与图像一起使用，但在处理布局时也很有用。

float属性的值是 left，right，和 none。

left，right会使元素向左或者向右浮动。
none能确保元素不会进行浮动。

下面是一个右浮动的图像示例。

HTML代码：

This paragraph has an image that is floated to the right. It is highly recommended to add a margin to images so that the text does not get too close to the image. If you want your text to be easily read, you should always add a few pixels between words and borders, images, and other content.

CSS代码：

img {
float: right;
}

执行结果：

 元素是水平浮动的，这意味着元素只能左右浮动，不能上下浮动。

元素相邻

如果连续放置几个浮动的元素，那么如果有足够的空间，它们将相互浮动。

例如，在设置页面布局中，可以通过设置浮动将图像和文本设置到页面中，使得文本可以跟图像并排显示。

HTML代码：

哇！看是w3cschool耶~

CSS代码

img {
float: left;
width: 120px;
margin-right: 10px;
}
p {
width: 120px;
float: left;
}

执行结果：

清除float

元素设置了float属性后会使后面的元素都受其影响，将环绕在其周围。为了避免这种情况，请使用clear属性。

clear属性指定某个元素不受其他设置了float属性的元素的影响。

在下面的例子中，如果我们将div元素设置为float属性，则div元素后面的段落将环绕在图像周围。

HTML代码：

这段落在div元素之上不受浮动属性的影响。

这段落在div元素之后受浮动属性的影响。

这一段也是在div元素之后受浮动属性的影响。

CSS代码：

.floating {
float: right;
}

执行结果：

使用clear属性

clear属性可以使用right，left和both来指定某一个元素不受其他浮动元素的影响。

 默认值是none，它允许在两边都有浮动元素。

清除float

both用来清除来自任一方向的浮动效果。

HTML代码：

该段落位于div上方，不受div的float属性影响。

该段落位于div下方，受到div的float属性影响。

该段落由于清除了float，所以不受div的float属性影响。

CSS代码：

.floating {
float: right;
}
.clearing {
clear: both;
}

执行结果：

overflow属性

如前所述，页面上的每个元素都是一个盒子。如果没有设置盒子的高度，那么盒子的高度将随着所需的内容的增大而变大。

HTML代码：

这个文本在div元素里面，它有一个蓝色的背景颜色，并浮动到左侧。我们设定一个具体的 div元素的高度和宽度，正如你所看到的，这样会导致文本内容溢出。

CSS代码：

div {
width: 150px;
height: 150px;
background-color: LightBlue;
float: left;
}

执行结果：

overflow属性值

overflow属性有四个值：visible（默认值），scroll，hidden和auto。

scroll值能阻止内容溢出，但会增加出滚动条，通过拉动滚动条可以浏览所有内容。

CSS代码：

div {
width: 150px;
height: 150px;
background-color: LightBlue;
float: left;
overflow: scroll;
}

执行结果：

auto 和 hidden值

auto - 如果内容溢出被限制，则会添加一个滚动条，使超出的内容可以通过滚动展示出来。

hidden - 隐藏掉内容溢出的部分，溢出的内容将不可见。

CSS代码：

div {
width: 150px;
height: 150px;
background-color: LightBlue;
float: left;
overflow: hidden;
}

执行结果：

 overflow的默认值是visible

fffffffff_jj

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS入门

01 Ready?1-1 内联1-1-1 内联CSS内联样式，将CSS用于单个元素<p style="color:white; background-color:gray;"> Hello world.</p>1-1-2 内部样式表 <head> <style> p { col...
复制链接

扫一扫