css样式

最新推荐文章于 2024-07-25 08:14:42 发布

小飞侠在吗

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量258

点赞数

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/W_LIN/article/details/124964746

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS样式_走在美的光辉中的博客-CSDN博客_css样式

css概述

css是层叠样式表* (Cascading Style Sheets)，作用是将内容和样式分离开，更方便修改样式而不会影响内容；

基本语法：

p {
  font-family: verdana;
  font-size: 20px;
}

css样式添加

方法一：行内例：<p style=" color.red;">

<!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>

方法二：内嵌样式例：<style type="text/css"></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>

方法三：单独文件例：<link rel="stylesheet" href="css/style.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>

优先级：行内样式>内嵌样式>链接样式>浏览器默认样式

css选择器

元素选择器，例: p{}
id选择器，例如：#part1{} (id = "part1") 注意：id 名称不能以数字开头。
类选择器，.center {}（class = "center"）
通用选择器， *{ } 选择页面上的所有的 HTML 元素
嵌套说明例： p span{ } ( <p><span>你</span>是对的</p>) 注：空格
集体声明例：h1,p{ }
混合：1.多个class选择器混用，用空格分开例：<div class=" one yellow left">...</div> 2.id 和class混用<div id="my" class="one yellow left"> 注意：id选择器只可以引用一次；

选择器	例子	例子描述
.class	.intro	选取所有 class="intro" 的元素。
#id	#firstname	选取 id="firstname" 的那个元素。
*	*	选取所有元素。
element	p	选取所有 <p> 元素。
element,element,..	div, p	选取所有 <div> 元素和所有 <p> 元素。

css注释

位于 <style> 元素内的 CSS 注释，以 /* 开始，以 */ 结束：
HTML 源代码中添加注释

css颜色

red,blue,green
rgb(red, green, blue) 定义了 0 到 255 之间的颜色强度。
rgb(x%,x%,x%) 0%-100%
rgba(red, green, blue, alpha) alpha表示透明度
#rrggbb 十六进制数
rr（红色）、gg（绿色）和 bb（蓝色）是介于 00 和 ff 之间的十六进制值（与十进制 0-255 相同）。

例如，#ff0000 显示为红色，因为红色设置为最大值（ff），其他设置为最小值（00）。
hsla(hue, saturation, lightness, alpha) alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字

色相（hue）是色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色。

饱和度（saturation）是一个百分比值，0％表示灰色阴影，而 100％是全色。

亮度（lightness）也是百分比，0％是黑色，50％是既不明也不暗，100％是白色。

css背景

background-color 属性指定元素的背景色。
background-image
属性指定用作元素背景的图像。默认情况下，图像会重复（在水平和垂直方向上都重复图像。），以覆盖整个元素。
```
body {
  background-image: url("paper.gif");
}
```
background-repeat： repeat-x设置图片仅在水平方向重复；repeat-y设置图片仅在垂直方向重复； no-repeat指定只显示一次背景图像
background-attachment 指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）,fixed:固定背景图像；scroll：背景图像随页面一起滚动

background-position：用于指定背景图像的位置，如

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

所有 CSS 背景属性

属性	描述
background	在一条声明中设置所有背景属性的简写属性。
background-attachment	设置背景图像是固定的还是与页面的其余部分一起滚动。
background-clip	规定背景的绘制区域。
background-color	设置元素的背景色。
background-image	设置元素的背景图像。
background-origin	规定在何处放置背景图像。
background-position	设置背景图像的开始位置。
background-repeat	设置背景图像是否及如何重复。
background-size	规定背景图像的尺寸。

css边框

border 属性,元素边框的样式、宽度和颜色。

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 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

注意：除非设置了 border-style 属性，否则其他 CSS 边框属性都不会有任何作用！

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

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

特定边框的宽度：border-width 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）

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

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

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

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

特定的边框颜色：border-color 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */

HEX值：

border-color: #ff0000; /* 红色 */

RGB值：

border-color: rgb(255, 0, 0); /* 红色 */

HSL值：

border-color: hsl(0, 100%, 50%); /* 红色 */

css边框各边

边框属性border-style: dotted solid double dashed;

/* 四个值 */
p {
  border-style: dotted solid double dashed; 
}

/* 三个值 */
p {
  border-style: dotted solid double; 
}

/* 两个值 */
p {
  border-style: dotted solid; 
}

/* 一个值 */
p {
  border-style: dotted; 
}

例中使用的是 border-style 属性。但 border-width 和 border-color 也同样适用。

css圆角边框

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

所有 CSS 边框属性

属性	描述
border	简写属性，在一条声明中设置所有边框属性。
border-color	简写属性，设置四条边框的颜色。
border-radius	简写属性，可设置圆角的所有四个 border-*-radius 属性。
border-style	简写属性，设置四条边框的样式。
border-width	简写属性，设置四条边框的宽度。
border-bottom	简写属性，在一条声明中设置所有下边框属性。
border-bottom-color	设置下边框的颜色。
border-bottom-style	设置下边框的样式。
border-bottom-width	设置下边框的宽度。
border-left	简写属性，在一条声明中设置所有左边框属性。
border-left-color	设置左边框的颜色。
border-left-style	设置左边框的样式。
border-left-width	设置左边框的宽度。
border-right	简写属性，在一条声明中设置所有右边框属性。
border-right-color	设置右边框的颜色。
border-right-style	设置右边框的样式。
border-right-width	设置右边框的宽度。
border-top	简写属性，在一条声明中设置所有上边框属性。
border-top-color	设置上边框的颜色。
border-top-style	设置上边框的样式。
border-top-width	设置上边框的宽度。

css外边距 `margin`

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

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

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

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

提示：允许负值。

css外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

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

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：

假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

如果这个外边距遇到另一个元素的外边距，它还会发生合并：

注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

CSS内边距：

Padding - 单独的边

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

padding-top
padding-right
padding-bottom
padding-left

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

length - 以 px、pt、cm 等单位指定内边距
% - 指定以包含元素宽度的百分比计的内边距
inherit - 指定应从父元素继承内边距

提示：不允许负值。

CSS宽度和高度

CSS 高度和宽度值

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

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

注意：请记住，height 和 width 属性不包括内边距、边框或外边距！它们设置的是元素的内边距、边框和外边距内的区域的高度/宽度！

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

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

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

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

注释：max-width 属性的值将覆盖 width（宽度）。

设置 CSS 尺寸属性

属性	描述
height	设置元素的高度。
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。
width	设置元素的宽度。

CS

内容 - 框的内容，其中显示文本和图像。
内边距 - 清除内容周围的区域。内边距是透明的。
边框 - 围绕内边距和内容的边框。
外边距 - 清除边界外的区域。外边距是透明的。

内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：

* { margin: 0; padding: 0; }

提示：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。

提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。

重要提示：使用 CSS 设置元素的 width 和 height 属性时，只需设置内容区域的宽度和高度。要计算元素的完整大小，还必须把内边距、边框和外边距加起来。

元素的总宽度应该这样计算：

元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距

元素的总高度应该这样计算：

元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

CSS轮廓

CSS 拥有如下轮廓属性：

outline-style
outline-color
outline-width
outline-offset
outline

注意：轮廓与边框不同！不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。

CSS 轮廓样式

outline-style 属性指定轮廓的样式，并可设置如下值：

dotted - 定义点状的轮廓。
dashed - 定义虚线的轮廓。
solid - 定义实线的轮廓。
double - 定义双线的轮廓。
groove - 定义 3D 凹槽轮廓。
ridge - 定义 3D 凸槽轮廓。
inset - 定义 3D 凹边轮廓。
outset - 定义 3D 凸边轮廓。
none - 定义无轮廓。
hidden - 定义隐藏的轮廓。

outline-width 属性指定轮廓的宽度，并可设置如下值之一：

thin（通常为 1px）
medium（通常为 3px）
thick （通常为 5px）
特定尺寸（以 px、pt、cm、em 计）

outline-color 属性用于设置轮廓的颜色。

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

name - 指定颜色名，比如 "red"
HEX - 指定十六进制值，比如 "#ff0000"
RGB - 指定 RGB 值，比如 "rgb(255,0,0)"
HSL - 指定 HSL 值，比如 "hsl(0, 100%, 50%)"
invert - 执行颜色反转（确保轮廓可见，无论是什么颜色背景）

outline-offset 属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。

所有 CSS 轮廓属性

属性	描述
outline	简写属性，在一条声明中设置 outline-width、outline-style 以及 outline-color。
outline-color	设置轮廓的颜色。
outline-offset	指定轮廓与元素的边缘或边框之间的空间。
outline-style	设置轮廓的样式。
outline-width	设置轮廓的宽度。

CSS文本

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

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

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

提示：对于 W3C compliant CSS：如果您定义了 color 属性，则还必须定义 background-color 属性。

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

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

如果文本方向是从左到右，则默认为左对齐；如果文本方向是从右到左，则默认是右对齐

当 text-align 属性设置为 "justify" 后，将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的（就像在杂志和报纸中）：

div {
  text-align: justify;
}

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

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

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

img.top {
  vertical-align: top;
}

img.middle {
  vertical-align: middle;
}

img.bottom {
  vertical-align: bottom;
}

文字装饰

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

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

h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

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

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

p.uppercase {
  text-transform: uppercase;//全大写
}

p.lowercase {
  text-transform: lowercase;//全小写
}

p.capitalize {
  text-transform: capitalize;//首字母大写
}

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

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

line-height 属性用于指定行之间的间距

word-spacing 属性用于指定文本中单词之间的间距

white-space 属性指定元素内部空白的处理方式

text-shadow 属性为文本添加阴影（水平阴影（2px）和垂直阴影（2px）模糊效果（5px）阴影添加颜色（红色））

h1 {
  text-shadow: 2px 2px 5px red;
}

所有 CSS 文本属性

属性	描述
color	设置文本颜色。
direction	指定文本的方向 / 书写方向。
letter-spacing	设置字符间距。
line-height	设置行高。
text-align	指定文本的水平对齐方式。
text-decoration	指定添加到文本的装饰效果。
text-indent	指定文本块中首行的缩进。
text-shadow	指定添加到文本的阴影效果。
text-transform	控制文本的大小写。
text-overflow	指定应如何向用户示意未显示的溢出内容。
unicode-bidi	与 direction 属性一起使用，设置或返回是否应重写文本来支持同一文档中的多种语言。
vertical-align	指定文本的垂直对齐方式。
white-space	指定如何处理元素内的空白。
word-spacing	设置单词间距。

CS

在 CSS 中，有五个通用字体族：

衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
草书字体（Cursive）- 模仿了人类的笔迹。
幻想字体（Fantasy）- 是装饰性/俏皮的字体。

所有不同的字体名称都属于这五个通用字体系列之一

提示：在计算机屏幕上，无衬线字体被认为比衬线字体更易于阅读。

一些字体的例子

通用字体族	字体名称实例
Serif	Times New Roman Georgia Garamond
Sans-serif	Arial Verdana Helvetica
Monospace	Courier New Lucida Console Monaco
Cursive	Brush Script MT Lucida Handwriting
Fantasy	Copperplate Papyrus

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

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

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

此属性可设置三个值：

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

font-weight 属性指定字体的粗细：

font-variant 属性指定是否以 small-caps 字体（小型大写字母）显示文本。

在 small-caps 字体中，所有小写字母都将转换为大写字母。但是，转换后的大写字母的字体大小小于文本中原始大写字母的字体大小。

font-size 属性设置文本的大小。

绝对尺寸：

将文本设置为指定大小
不允许用户在所有浏览器中更改文本大小（可访问性不佳）
当输出的物理尺寸已知时，绝对尺寸很有用

相对尺寸：

设置相对于周围元素的大小
允许用户在浏览器中更改文本大小

注释：如果您没有指定字体大小，则普通文本（如段落）的默认大小为 16px（16px = 1em）。

font 属性是以下属性的简写属性：

font-style
font-variant
font-weight
font-size/line-height
font-family

注意：font-size 和 font-family 的值是必需的。如果缺少其他值之一，则会使用其默认值。

所有 CSS 字体属性

属性	描述
font	简写属性。在一条声明中设置所有字体属性。
font-family	规定文本的字体系列（字体族）。
font-size	规定文本的字体大小。
font-style	规定文本的字体样式。
font-variant	规定是否以小型大写字母的字体显示文本。
font-weight	规定字体的粗细。

CSS图标

Font Awesome 图标

如需使用 Font Awesome 图标，请访问 fontawesome.com，登录并获取代码添加到 HTML 页面的 <head> 部分：

<script src="https://kit.fontawesome.com/yourcode.js"></script>

Bootstrap 图标

如需使用 Bootstrap glyphicons，请在 HTML 页面的 <head> 部分内添加这行：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

提示：无需下载或安装！

Google 图标

如需使用 Google 图标，请在HTML页面的 <head> 部分中添加以下行：

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

提示：无需下载或安装！

设置链接样式

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

实例

a {
  color: hotpink;
}

四种链接状态分别是：

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

如果为多个链接状态设置样式，请遵循如下顺序规则：

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

text-decoration 属性主要用于从链接中删除下划线：

background-color 属性可用于指定链接的背景色

CSS 列表属性

属性	描述
list-style	简写属性。在一条声明中设置列表的所有属性。
list-style-image	指定图像作为列表项标记。
list-style-position	规定列表项标记（项目符号）的位置。
list-style-type	规定列表项标记的类型。

CSS

表格边框

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

下例为 <table>、<th> 和 <td> 元素规定了黑色边框：

table, th, td {
  border: 1px solid black;
}

全宽表格

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

实例

table {
  width: 100%;
}

border-collapse 属性设置是否将表格边框折叠为单一边框：

table {
  border-collapse: collapse;
}

如果只希望表格周围有边框，则仅需为 <table> 指定 border 属性：

table {
  border: 1px solid black;
}

表格宽度和高度

表格的宽度和高度由 width 和 height 属性定义。

下例将表的宽度设置为 100％，将 <th> 元素的高度设置为 50px：

text-align 属性设置 <th> 或 <td> 中内容的水平对齐方式（左、右或居中）。

默认情况下，<th> 元素的内容居中对齐，而 <td> 元素的内容左对齐。

要使 <td> 元素的内容也居中对齐，请使用 text-align: center：

th {
  text-align: center;
}

vertical-align 属性设置 <th> 或 <td> 中内容的垂直对齐方式（上、下或居中）。

如需控制边框和表格内容之间的间距，请在 <td> 和 <th> 元素上使用 padding 属性：

向 <th> 和 <td> 添加 border-bottom 属性，以实现水平分隔线

th, td {
  border-bottom: 1px solid #ddd;
}

在 <tr> 元素上使用 :hover 选择器，以突出显示鼠标悬停时的表格行

tr:hover {background-color: #f5f5f5;}

为了实现斑马纹表格效果，请使用 nth-child() 选择器，并为所有偶数（或奇数）表行添加 background-color：

tr:nth-child(even) {background-color: #f2f2f2;}

<th> 元素的背景颜色和文本颜色：

th {
  background-color: #4CAF50;
  color: white;
}

在 <table> 元素周围添加带有 overflow-x:auto 的容器元素（例如 <div>），以实现响应式效果

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>

注释：在 OS X Lion（在 Mac 上）中，滚动条默认情况下是隐藏的，并且仅在使用时显示（即使设置了 "overflow:scroll"）

CSS 表格属性

属性	描述
border	简写属性。在一条声明中设置所有边框属性。
border-collapse	规定是否应折叠表格边框。
border-spacing	规定相邻单元格之间的边框的距离。
caption-side	规定表格标题的位置。
empty-cells	规定是否在表格中的空白单元格上显示边框和背景。
table-layout	设置用于表格的布局算法。