最全CSS属性详解

已于 2023-11-08 15:34:36 修改
阅读量112 收藏 1
点赞数 1
文章标签： css 前端
于 2023-11-08 14:55:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68939499/article/details/134280754
版权

一、什么是CSS

CSS是层叠样式表（Cascading Style Sheet ）的简称是一种标记语言，用于设置页面的外观样式实现结构与样式分离，便于开发维

简单的说：

1、CSS 是一种描述 HTML 文档样式的语言。

2、CSS 描述应该如何显示 HTML 元素。

二、CSS 基础语法

1、CSS组成

CSS 规则集（rule-set）由选择器和声明块组成：

 

5541d6cd177e62515ca0d351265922ef.gif

选择器指向您需要设置样式的 HTML 元素。

声明块包含一条或多条用分号分隔的声明。

每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。

多条 CSS 声明用分号分隔，声明块用花括号括起来。

实例

在此例中，所有 <p> 元素都将居中对齐，并带有红色文本颜色：

p {
  color: red;
  text-align: center;
}

例子解释

  • p 是 CSS 中的选择器（它指向要设置样式的 HTML 元素：<p>）。
  • color 是属性，red 是属性值
  • text-align 是属性，center 是属性值

2、CSS 选择器

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

我们可以将 CSS 选择器分为五类：

（1）CSS 元素选择器

元素选择器根据元素名称来选择 HTML 元素。

实例

在这里，页面上的所有 <p> 元素都将居中对齐，并带有红色文本颜色：

p {
  text-align: center;
  color: red;
}

（2）CSS id 选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

实例

这条 CSS 规则将应用于 id="para1" 的 HTML 元素：

#para1 {
  text-align: center;
  color: red;
}

注意：id 名称不能以数字开头。

（3）CSS 类选择器

类选择器选择有特定 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

实例

在此例中，所有带有 class="center" 的 HTML 元素将为红色且居中对齐：

.center {
  text-align: center;
  color: red;
}

实例

在这个例子中，只有具有 class="center" 的 <p> 元素会居中对齐：

p.center {
  text-align: center;
  color: red;
}

 

HTML 元素也可以引用多个类。

实例

在这个例子中，<p> 元素将根据 class="center" 和 class="large" 进行样式设置：

<p class="center large">这个段落引用两个类。</p>

注意：类名不能以数字开头！

（4）CSS 通用选择器

通用选择器（*）选择页面上的所有的 HTML 元素。

实例

下面的 CSS 规则会影响页面上的每个 HTML 元素：

<p class="center large">这个段落引用两个类。</p>

（5）CSS 分组选择器

分组选择器选取所有具有相同样式定义的 HTML 元素。

请看下面的 CSS 代码（h1、h2 和 p 元素具有相同的样式定义）：

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

最好对选择器进行分组，以最大程度地缩减代码。

如需对选择器进行分组，请用逗号来分隔每个选择器。

实例

在这个例子中，我们对上述代码中的选择器进行分组：

h1, h2, p {
  text-align: center;
  color: red;
}

选择器总结

ed47cafa8fea4f978b1abd09c9619e5c.png

3、如何添加 CSS

当浏览器读到样式表时，它将根据样式表中的信息来格式化 HTML 文档。

三种使用 CSS 的方法

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

  • 外部 CSS
  • 内部 CSS
  • 行内 CSS

通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！

每张 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用。

实例

外部样式在 HTML 页面 <head> 部分内的 <link> 元素中进行定义：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

外部样式表可以在任何文本编辑器中编写，并且必须以 .css 扩展名保存。

外部 .css 文件不应包含任何 HTML 标签。

"mystyle.css" 是这样的：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

注意：请勿在属性值和单位之间添加空格（例如 margin-left: 20 px;）。正确的写法是：margin-left: 20px;

内部 CSS

如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。

内部样式是在 head 部分的 <style> 元素中进行定义。

实例

内部样式在 HTML 页面的 <head> 部分内的 <style> 元素中进行定义：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

行内 CSS

行内样式（也称内联样式）可用于为单个元素应用唯一的样式。

如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。

实例

行内样式在相关元素的 "style" 属性中定义：

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

提示：行内样式失去了样式表的许多优点（通过将内容与呈现混合在一起）。请谨慎使用此方法。

多个样式表

如果在不同样式表中为同一选择器（元素）定义了一些属性，则将使用最后读取的样式表中的值。

假设某个外部样式表为 <h1> 元素设定的如下样式：

h1 {
  color: navy;
}

然后，假设某个内部样式表也为 <h1> 元素设置了如下样式：

h1 {
  color: orange;    
}

实例

如果内部样式是在链接到外部样式表之后定义的，则 <h1> 元素将是橙色：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>

层叠顺序

当为某个 HTML 元素指定了多个样式时，会使用哪种样式呢？

页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：

  • 行内样式（在 HTML 元素中）
  • 外部和内部样式表（在 head 部分）
  • 浏览器默认样式

4、CSS 注释

CSS注释

注释用于解释代码，以后在您编辑源代码时可能会有所帮助。

浏览器会忽略注释。

位于 <style> 元素内的 CSS 注释，以 /* 开始，以 */ 结束：

实例

/* 这是一条单行注释 */
p {
  color: red;
}

注释能横跨多行：

实例

/* 这是
一条多行的
注释 */ 

p {
  color: red;
}

HTML 和 CSS 注释区别

从 HTML 教程中，您学习到可以使用 <!--...--> 语法在 HTML 源代码中添加注释。

5、CSS背景属性

在本节中，您将学习如下 CSS 背景属性：

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

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

实例

页面的背景色设置如下：

body {
  background-color: lightblue;
}

通过 CSS，颜色通常由以下方式指定：

  • 有效的颜色名称 - 比如 "red"
  • 十六进制值 - 比如 "#ff0000"
  • RGB 值 - 比如 "rgb(255,0,0)"

不透明度 / 透明度

opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明：

实例

div {
  background-color: green;
  opacity: 0.3;
}
  • 注意：使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。

如果您不希望对子元素应用不透明度，例如上面的例子，请使用 RGBA 颜色值。

CSS 背景图像

background-image 属性指定用作元素背景的图像。

默认情况下，图像会重复，以覆盖整个元素。

实例

页面的背景图像可以像这样设置：

body {
  background-image: url("paper.gif");
}

CSS background-repeat

默认情况下，background-image 属性在水平和垂直方向上都重复图像。

某些图像应只适合水平或垂直方向上重复，否则它们看起来会很奇怪，如下所示：

实例

body {
  background-image: url("gradient_bg.png");
}

CSS background-repeat

默认情况下，background-image 属性在水平和垂直方向上都重复图像。

某些图像应只适合水平或垂直方向上重复，否则它们看起来会很奇怪，如下所示：

实例

body {
  background-image: url("gradient_bg.png");
}

CSS background - 简写属性

如需缩短代码，也可以在一个属性中指定所有背景属性。它被称为简写属性。

而不是这样写：

body {
  background-color: #ffffff;
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

您能够使用简写属性 background：

实例

使用简写属性在一条声明中设置背景属性：

body {
  background: #ffffff url("tree.png") no-repeat right top;
}

d44083e61976494199fa89534b1f1654.png

6、CSS 边框属性

CSS border 属性允许您指定元素边框的样式、宽度和颜色。

CSS 边框样式

border-style 属性指定要显示的边框类型。

允许以下值：

  • dotted - 定义点线边框
  • dashed - 定义虚线边框
  • solid - 定义实线边框
  • double - 定义双边框
  • groove - 定义 3D 坡口边框。效果取决于 border-color 值
  • ridge - 定义 3D 脊线边框。效果取决于 border-color 值
  • inset - 定义 3D inset 边框。效果取决于 border-color 值
  • outset - 定义 3D outset 边框。效果取决于 border-color 值
  • none - 定义无边框
  • hidden - 定义隐藏边框

border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

实例

演示不同的边框样式：

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
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.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

c33e6cbf14964994ae0cfc765919d29b.png

CSS 边框宽度

border-width 属性指定四个边框的宽度。

可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick：

CSS 边框颜色

border-color 属性用于设置四个边框的颜色。

可以通过以下方式设置颜色：

  • name - 指定颜色名，比如 "red"
  • HEX - 指定十六进制值，比如 "#ff0000"
  • RGB - 指定 RGB 值，比如 "rgb(255,0,0)"
  • HSL - 指定 HSL 值，比如 "hsl(0, 100%, 50%)"
  • transparent

注释：如果未设置 border-color，则它将继承元素的颜色。

CSS 边框 - 单独的边

从上一章的例子中，您已经看到可以为每一侧指定不同的边框。

在 CSS 中，还有一些属性可用于指定每个边框（顶部、右侧、底部和左侧）：

CSS Border - 简写属性

就像您在上一章中所见，处理边框时要考虑许多属性。

为了缩减代码，也可以在一个属性中指定所有单独的边框属性。

border 属性是以下各个边框属性的简写属性：

  • border-width
  • border-style（必需）
  • border-color

CSS 圆角边框

border-radius 属性用于向元素添加圆角边框：

CSS 外边距

CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间。

通过 CSS，您可以完全控制外边距。有一些属性可用于设置元素每侧（上、右、下和左）的外边距。

Margin - 单独的边

CSS 拥有用于为元素的每一侧指定外边距的属性：

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

所有外边距属性都可以设置以下值：

  • auto - 浏览器来计算外边距
  • length - 以 px、pt、cm 等单位指定外边距
  • % - 指定以包含元素宽度的百分比计的外边距
  • inherit - 指定应从父元素继承外边距

提示：允许负值。

外边距合并

外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

f210e84a6b924d52be54c0e4d48fc91a.png

CSS 内边距

CSS padding 属性用于在任何定义的边界内的元素内容周围生成空间。

通过 CSS，您可以完全控制内边距（填充）。有一些属性可以为元素的每一侧（上、右、下和左侧）设置内边距。

2faa7b6e29b64c728748c47c26d0ee7b.png

7、CSS 设置高度和宽度

height 和 width 属性用于设置元素的高度和宽度。

height 和 width 属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。

CSS 高度和宽度值

height 和 width 属性可设置如下值：

  • auto - 默认。浏览器计算高度和宽度。
  • length - 以 px、cm 等定义高度/宽度。
  • % - 以包含块的百分比定义高度/宽度。
  • initial - 将高度/宽度设置为默认值。
  • inherit - 从其父值继承高度/宽度。

  • 设置 max-width

    max-width 属性用于设置元素的最大宽度。

    可以用长度值（例如 px、cm 等）或包含块的百分比（％）来指定 max-width（最大宽度），也可以将其设置为 none（默认值。意味着没有最大宽度）。

    当浏览器窗口小于元素的宽度（500px）时，会发生之前那个 <div> 的问题。然后，浏览器会将水平滚动条添加到页面。

    在这种情况下，使用 max-width 能够改善浏览器对小窗口的处理。

    提示：将浏览器窗口拖动到小于500px的宽度，以查看两个 div 之间的区别！

  • 04ab9d2ff53846178b9e26fd738eb0b5.png

8、文本颜色

color 属性用于设置文本的颜色。颜色由以下值指定：

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

查看 CSS 颜色值，以获取可能颜色值的完整列表。

页面的默认文本颜色是在 body 选择器中定义的。

文本对齐

text-align 属性用于设置文本的水平对齐方式。

文本可以左对齐或右对齐，或居中对齐。

下例展示了居中对齐以及左右对齐的文本（如果文本方向是从左到右，则默认为左对齐；如果文本方向是从右到左，则默认是右对齐）：

文本方向

direction 和 unicode-bidi 属性可用于更改元素的文本方向：

垂直对齐

vertical-align 属性设置元素的垂直对齐方式。

本例演示如何设置文本中图像的垂直对齐方式：

文字装饰

text-decoration 属性用于设置或删除文本装饰。

text-decoration: none; 通常用于从链接上删除下划线：

文本转换

text-transform 属性用于指定文本中的大写和小写字母。

它可用于将所有内容转换为大写或小写字母，或将每个单词的首字母大写：

文字缩进

text-indent 属性用于指定文本第一行的缩进：

55a6e57122c04de5ae9afa8aab68424e.png

CSS font-family 属性

在 CSS 中，我们使用 font-family 属性规定文本的字体。

font-family 属性应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性。请以您需要的字体开始，并以通用系列结束（如果没有其他可用字体，则让浏览器选择通用系列中的相似字体）。字体名称应以逗号分隔。

注释：如果字体名称不止一个单词，则必须用引号引起来，例如："Times New Roman"。

9、字体样式、 图标、链接

font-style 属性主要用于指定斜体文本。

此属性可设置三个值：

  • normal - 文字正常显示
  • italic - 文本以斜体显示
  • oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）

如何添加图标

向 HTML 页面添加图标的最简单方法是使用图标库，比如 Font Awesome。

将指定的图标类的名称添加到任何行内 HTML 元素（如 <i> 或 <span>）。

下面的图标库中的所有图标都是可缩放矢量，可以使用 CSS进行自定义（大小、颜色、阴影等）。

设置链接样式

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

实例

a {
  color: hotpink;
}

此外，可以根据链接处于什么状态来设置链接的不同样式。

四种链接状态分别是：

  • a:link - 正常的，未访问的链接
  • a:visited - 用户访问过的链接
  • a:hover - 用户将鼠标悬停在链接上时
  • a:active - 链接被点击时

HTML 列表和 CSS 列表属性

在 HTML 中，列表主要有两种类型：

  • 无序列表（<ul>）- 列表项用的是项目符号标记
  • 有序列表（<ol>）- 列表项用的是数字或字母标记

CSS 列表

CSS 列表属性使您可以：

  • 为有序列表设置不同的列表项标记
  • 为无序列表设置不同的列表项标记
  • 将图像设置为列表项标记
  • 为列表和列表项添加背景色

10、CSS 表格

表格边框

如需在 CSS 中设置表格边框，请使用 border 属性。

全宽表格

在某些情况下，上表似乎很小。如果您需要一个可以覆盖整个屏幕（全宽）的表格，请为 <table> 元素添加 width: 100%：

双边框

请注意上面的表格有双边框。这是因为表格和 th、td 元素都有单独的边框。

11、CSS 布局 - position 属性

2002de1b5d814be1af29a4392552adf6.png

12、CSS 布局 - 浮动和清除

CSS 布局 - 浮动和清除

CSS float 属性规定元素如何浮动。

CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。

float 属性

float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。

float 属性可以设置以下值之一：

  • left - 元素浮动到其容器的左侧
  • right - 元素浮动在其容器的右侧
  • none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
  • inherit - 元素继承其父级的 float 值

最简单的用法是，float 属性可实现（报纸上）文字包围图片的效果。

13、CSS 伪类

什么是伪类？

伪类用于定义元素的特殊状态。

伪类和 CSS 类

伪类可以与 CSS 类结合使用：

当您将鼠标悬停在例子中的链接上时，它会改变颜色：

实例

a.highlight:hover {
  color: #ff0000;
}

什么是伪元素？

CSS 伪元素用于设置元素指定部分的样式。

例如，它可用于：

  • 设置元素的首字母、首行的样式
  • 在元素的内容之前或之后插入内容

语法

伪元素的语法：

selector::pseudo-element {
  property: value;
}

::first-line 伪元素

::first-line 伪元素用于向文本的首行添加特殊样式。

下面的例子为所有 <p> 元素中的首行添加样式：

实例

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

 

m0_68939499
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CSS filter属性详解
01-08
filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。 CSS标准里包含了一些已实现预定义效果的函数。你也可以参考一个SVG滤镜，通过一个URL链接到SVG滤镜元素(SVG filter...
CSS透明属性详解代码
10-26
在CSS中，透明属性可以用来控制元素的可见性，使其部分或全部变得不那么明显，从而达到半透明的效果。这在网页设计中常用于创建视觉层次感和动态效果。本文将详细讲解CSS中的透明属性，并提供针对不同浏览器的兼容性...
CSS 选择符
weixin_33709590的博客
07-04 72
1.id选择器（ # myid）2.类选择器（.myclassname） 3.标签选择器（div, h1, p） 4.相邻选择器（h1 + p） 5.子选择器（ul &gt; li） 6.后代选择器（li a） 7.群组选择器 (p,li) 8.通配符选择器（ * ） 9.属性选择器（a[rel = "external"]） 10.伪类选择器（a: hover, li:nth-child）可继承的...
CSS - 深入了解（三大特性、css权重、属性值计算过程）
weixin_48728769的博客
10-24 1734
css三大特性（层叠性、继承性、优先级）、css权重特殊性、属性值计算过程（页面渲染过程）
CSS 属性的计算过程
最新发布
小卡酷谋的博客
04-22 406
如果该条属性作者并没有设置，那么还不会着急去使用默认值，而是会去看一下能否继承到该属性值。当然不是，真实的情况是这个元素所有的属性都拥有，只不过有一组默认的属性值。，当作者样式和浏览器默认样式中的声明值有冲突时，会优先把作者样式中的声明值当作。最终，如果没有作者样式，该属性值也无法继承而来，则会使用浏览器的默认样式。一段很简单的代码，就一个段落，然后设置了一个颜色属性为红色。属性，但是其实它一个属性都没落下，每个属性都是有默认值。属性值，同属于作者样式，这显然就属于层叠冲突了。
CSS中的计算属性
xiaowude_boke的博客
12-06 2427
CSS计算属性的使用以及应用情景
【CSS重点知识】属性计算的过程
m0_62360527的博客
03-27 7923
CSS属性值的计算过程是指一个元素从所有属性都没有值，到所有属性都有值的过程。这个过程分为四个步骤：确定声明值，层叠冲突，使用继承和使用默认值。注意 前两部是筛选作者属性，第一步对比的是作者属性，和浏览器默认属性（作者代写属性）， 大家需要把浏览器默认属性，和默认属性分开。学习css 属性计算是一个非常重要的基础，需要好好学习。
css的属性计算过程
qq_48819167的博客
01-19 284
我们所书写的任何一个 HTML 元素，实际上都有完整的一整套 CSS 样式 总的来讲，属性值的计算过程，分为如下这么 4 个步骤： 确定声明值->层叠冲突->使用继承->使用默认值 确定声明值 声明值就是作者自己所书写的 CSS 样式 层叠冲突 - 1比较源的重要性 页面作者样式(开发者自己设置的) 用户代理样式(浏览器默认样式) 用户样式(浏览器用户) - 2比较优先级(源冲突后) - 选择器的权重(同一选择器一般是越详细权重越高) 发生冲突时，由选择器的权重（优先级）决定
css浮动 float属性详解
11-21
给元素本身添加float属性 float值： left 元素向左浮动。 right 元素向右浮动。 none 默认值。元素不浮动，并会显示在其在文本中出现的位置。 inherit 规定应该从父元素继承 float 属性的值...
css属性详解说明，css属性详解说明
12-27
background 简写属性，作用是将背景属性设置在一个声明中。 background-attachment 背景图像是否固定或者随着页面的其余部分滚动。Scroll随文滚动 background-color 设置元素的背景颜色。 background-image 把...
CSS之float属性详解
01-08
float官方文档概念 float属性指定一个盒子（元素）是否应该浮动，可以设置浮动方向。 css语法 float：left|right|none|inherit ；... CSS之float详解 .left { height: 60px; width: 60px; background-color: #ff
CSS3 calc()会计算属性详解
09-27
主要介绍了CSS3 calc()会计算属性详解的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS 中的常用属性(图文详解版)
m0_74365243的博客
05-15 4250
对CSS中常用属性的总结
css所有属性介绍
xcLeigh
12-02 3356
css所有属性介绍，里面包含了所有的css属性，CSS3 动画属性（Animation）， CSS 背景属性（Background） ，CSS 边框属性（Border 和 Outline），Box 属性，Color 属性 ，Content for Paged Media 属性，CSS 尺寸属性（Dimension），可伸缩框属性（Flexible Box）， CSS 字体属性（Font），内容生成（Generated Content）， Grid 属性，Hyperlink 属性，CSS 列表属性
css属性
m0_45144737的博客
12-23 1525
一些css好用属性
CSS样式属性
零一
12-02 336
一 、 CSS文字属性 字体属性(font)： 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式 {font-style: oblique;} (偏斜体) italic; (斜体) normal;(正常) 行高 {line-height: normal;} (正常) 单位：PX、PD、EM 粗细 {fo...
CSS常用属性
m0_61934949的博客
03-21 1196
01. CSS背景属性(Background) 属性与描述 　　background：在一个声明中设置所有的背景插件1 　　background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动1 　　background-color：设置元素的背景颜色1 　　background-image：设置元素的背景图像1 　　background-position：设置背景图像的开始位置1 　　background-repeat：设置是否及如何重复背景图像 ...
CSS样式表及常用属性
yxyq1210的博客
08-02 1840
CSS常用属性一、样式表的应用：​ 行内样式表、内部样式表、外部样式表、导入样式表 行内样式表：就是将样式表写在元素的开始标签中，格式<开始标签 style=”属性:属性值;”></结束标签> 内部样式表：就是将样式表写在网页的头部，格式 <head> <style type=”text/css”> 选择器{样式声明} </style></he
Css所有属性
行者
12-19 595
CSS 的属性很多，有许多人都抱怨说要怎麼才能快速记忆 CSS 的属性呢 . 在这裡我就把 CSS 所有的属性列在一张小卡片上， 大家可以像背英语单词的小卡片一样， 用来记忆： CSS 速记 小纸片 ( 目前缺 ) ](yw2c;m e     字体属性： (font) *x3";%o     大小   font-size: x-large;( 特大
html 里的css属性详解
04-05
HTML中的CSS属性用于描述和控制网页的样式和布局。以下是一些常见的CSS属性及其功能： 1. color：设置文本颜色。 2. background-color：设置背景颜色。 3. font-family：设置字体样式。 4. font-size：设置字体大小。 5. line-height：设置行高。 6. text-align：设置文本对齐方式。 7. margin：设置元素外边距。 8. padding：设置元素内边距。 9. border：设置元素边框。 10. display：设置元素的显示方式。 11. position：设置元素的定位方式。 12. float：设置元素在父元素中的浮动方式。 13. width：设置元素的宽度。 14. height：设置元素的高度。 15. opacity：设置元素的透明度。 16. transition：设置元素的过渡效果。 17. background-image：设置元素的背景图像。 18. border-radius：设置元素的圆角。 19. box-shadow：设置元素的阴影效果。 20. text-decoration：设置文本的修饰效果。 以上只是一些常见的CSS属性，实际上CSS属性有很多，每个属性都有其特定的作用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值