CSS层叠样式表

回头科科

已于 2022-04-20 22:22:50 修改

阅读量3.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： CSS

于 2022-04-20 22:22:41 首次发布

本文链接：https://blog.csdn.net/jcf52/article/details/124307985

CSS 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了CSS的引入方式，包括行间样式、内部样式和外部样式，并探讨了像素单位和百分比单位的使用。同时，文章讲解了CSS的基础属性，如宽高设置、背景样式、边框样式和文字样式，帮助读者理解如何控制网页的外观和布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.背景色background-color属性

2.background-image设置背景图片

3.background-repeat设置背景图片的平铺方式

4.background-position 设置背景图片的位置

2.2.3边框样式

2.2.4文字样式

2.2.5段落样式

一.css 介绍

层叠样式表，是一种样式表语言，用来描述HTML和XML文档的呈现。随着HTML的发展，为了满足面设计者的要求，HTML添加了很多显示功能，但是随着这些功能的增加，使得HTML越来越杂乱，HTML 页面也越来越臃肿，CSS便随之诞生，CSS 用于简化HTML标签，把关于样式部分的内容提取出来，进行单独的控制，使结构与样式分离开发。
CSS 是以HTML为基础，设置网页的外观显示样式，如字体、颜色、背景的控制及整体的布局等，和HTML 类似，CSS也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

1996年发布的了CSS1.0，这个版本只提供一些简单的功能，并没有得到广泛的应用。直到CSS2.0
的诞生才真正地把结构与样式进行分离，从而得到快速的发展。CSS2.1版本是CSS2.0版本的修正版，也是目前最稳定的一个版本。
随着互联网的高速发展，网页样式也有更多的需求，CSS3 在CSS2.1的基础上提供了更多实用且强大的功能。目前CSS3 还没有发布正式版本。

二.CSS基本语法

2.1css 引入方式

给HTML标签添加CSS样式总共有三种样式：行间样式、内部样式和外部样式三种方式

2.1.1行间样式引入

在HTML标签中添加style属性来设置CSS。语法如下：

style="属性1：值1；属性2：值2；属性3：值3；"

CSS样式由属性和值两部分组成，通过冒号的方式进行连接。多组样式之间使用分号（;）进行分
割。一般规范会在分号后面加一个空格，这样更加方便阅读代码。

例子：

<div style="width:50px; height:50px; background-color: black"></div>

2.1.2像素单位

像素单位用px表示，全称 “pixel”。px就是一张图片中最小的点，或者是计算机屏幕最小的点。

2.1.3百分比单位

百分比单位是一个相对单位，经常在嵌套标签中使用。假如给子标签（也叫内层标签）设
置百分比单位，那么这个单位就是相对于父标签（也叫外层标签）的尺寸大小。

例子：

<body>
<div style="width:100px; height:100px; background-color: black">
<div style="width:50%; height:50%; background-color: yellow"></div>

</div>
</body>

效果图：

2.1.4内部引入方式

内部引入方式是通过<style>标签添加css样式，它与行间样式的区别是内部引入方式是通过
<style>标签而不是style属性。<style>标签一般情况下都会添加到<head>标签中

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 在此处添加CSS的内部样式*/
    </style>
</head>
<body>

</body>
</html>

内部引入CSS样式，也遵循一定的CSS样式规范，语法格式如下：

选择器 {属性1：值1; 属性2：值2; }

2.1.5外部引入方式

外部样式的写法与内部样式的写法完全一样，只是外部引入方式是将css代码保存在扩展名为
.css 的样式表中，引入方式通过网页<head></head>标签中使用<link>标记将外部样式表文件链接到HTML文档中。其语法如下：

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

语法中必须指定<link>标记的三个属性，其中href 是定义链接外部样式表文件的url，可以是相对
路径或绝对路径；rel是定义当前文档与被链接文档之间的关系，stylesheet表示被链接的文档是样式表文件；type是定义链接文档的类型，text/css表示链接的外部文件为CSS样式表。

2.2基础属性

2.2.1宽、高

CSS通过width、height这两个属性来设置HTML标签的尺寸和大小，即元素的宽高

2.2.2背景样式

属性	含义
background-color	设置背景色
background-image	设置背景图片
background-reprat	设置背景图片的平铺方式
background-position	设置背景图片的位置
background-attachment	设置背景图随滚动条的移动方式

1.背景色background-color属性

在CSS中用background-color属性来设置背景色。在css中常用表示颜色的三种方法

关键字颜色
十六进制颜色
RGB颜色

2.background-image设置背景图片

<body>
<div style="width: 930px;height: 506px;background-image: url(1.png)"></div>
 </body>

3.background-repeat设置背景图片的平铺方式

属性的取值如下所示：

参数	说明
repeat	水平垂直方向上都是重复平铺的，默认值
repeat-x	只是水平方向重复平铺，垂直方向不重复平铺
repeat-y	只是垂直方向重复平铺，水平方向不重复平铺
no-repeat	水平和垂直方向上都不进行重复平铺

4.background-position 设置背景图片的位置

语法格式如下：

background-position:x轴坐标 y轴坐标；

CSS背景定位属性——background-position - 简书 (jianshu.com)

2.2.3边框样式

边框样式使用也是非常广泛，它是划分区域的重点标志。

边框属性	说明
border-color	边框颜色（四边）
border-width	边框大小（四边)
border-style	边框样式（四边）solid(实线) dashed(虚线) dotted(点线)
border-left-*	左边框
border-right-*	右边框
border-top-*	上边框
border-bottom-*	下边框

2.2.4文字样式

文字样式的属性，常用的包括字体、大小、粗细、颜色等方面。

文字相关属性	说明
font-family	字体类型
font-size	字体大小
font-weight	字体粗细（normal:正常 lighter:较细 bold: 较粗 bolder:很粗）
font-style	字体样式
color	字体颜色

备注：

font-family:字体1，字体2，字体3 /*可指定多种字体，多个字体按照优先顺序排列，以逗号隔开*/

2.2.5段落样式

段落属性	说明
text-decoration	文本装饰
text-indent	文本缩进
text-align	文本对齐方式
line-height	行高

1.text-decoration属性取值

取值	说明
none	无装饰线（默认）
underline	下划线
line-through	删除线
overline	顶画线（少用）
blink	文本闪烁（少用）

2.text-align属性取值

取值	取值
left	左对齐
right	右对齐
center	居中对齐
justify	左右对齐