CSS基础学习

最新推荐文章于 2023-12-09 03:00:00 发布

微笑向日葵°

最新推荐文章于 2023-12-09 03:00:00 发布

阅读量209

点赞数

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

本文链接：https://blog.csdn.net/weixin_43535265/article/details/114369633

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

CSS学习

一.css背景属性

background-clip

在这里插入图片描述

background-origin
在这里插入图片描述

background-origin 属性规定 background-position 属性相对于什么位置来定位。
注释：如果背景图像的 background-attachment 属性为 “fixed”，则该属性没有效果。

CSS 背景简写顺序
在使用简写属性时，属性值的顺序为：
background-color
background-image
background-repeat
background-attachment
background-position

属性值之一缺失并不要紧，只要按照此顺序设置其他值即可。请注意，在上面的例子中，我们没有使用 background-attachment 属性，因为它没有值。

样例代码：

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

简写后为：

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

background-attachment：fixed；
防止当文档滚动到超过图像的位置时，图像就会消失,即声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：
background-attachment: scroll;这是background-attachment的默认值，图片会因为滚动而随着页面一起滚动

二.CSS颜色

CSS RGB 颜色

rgb(red, green, blue) 定义了 0 到 255 之间的颜色强度。
rgb(255, 0, 0) ---------------红色
rgb(0, 0, 0) ----------------- 黑色
rgb(255, 255, 255) ------- 白色
通常为所有 3 个光源使用相等的值来定义灰色阴影（灰的程度不同）。
rgb(60, 60, 60)--------------灰色
rgb(120, 120, 120)---------灰色
RGBA 值
RGBA 颜色值是具有 alpha 通道的 RGB 颜色值的扩展 - 它指定了颜色的不透明度
RGBA 颜色值指定为： rgba(red, green, blue, alpha)
alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字：
rgba(255, 99, 71, 0)
rgba(255, 99, 71, 0.4)
rgba(255, 99, 71, 0.8)
三个rgba的值除了透明度的值不同，其他都是一样的，最终展示的颜色只是透明度不同

CSS HEX 颜色

颜色指定格式为 #rrggbb
其中 rr（红色）、gg（绿色）和 bb（蓝色）是介于 00 和 ff 之间的十六进制值（与十进制 0-255 相同）
#ff0000 -------红色
#000000------黑色
#ffffff-----------白色
通常为所有 3 个光源使用相等的值来定义灰色阴影（灰的程度不同）
#b4b4b4------灰色
#f0f0f0--------灰色

CSS HSL 颜色

在 CSS 中，可以使用色相、饱和度和明度（HSL）来指定颜色，格式如下：
hsla(hue, saturation, lightness)
色相（hue）是色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色。
饱和度（saturation）是一个百分比值，0％表示灰色阴影，而 100％是全色。
亮度（lightness）也是百分比，0％是黑色，50％是既不明也不暗，100％是白色。
hsl(0, 100%, 50%)------红色
hsl(0, 100%, 0%)--------黑色
hsl(0, 100%, 100%)-----白色
通常通过将色调和饱和度设置为 0 来定义灰色阴影，
并将亮度从 0％到 100％进行调整可以得到更深/更浅的阴影：
hsl(0, 0%, 47%)----------灰色
hsl(0, 0%, 56%)----------灰色
HSLA 值
HSLA 颜色值是带有 Alpha 通道的 HSL 颜色值的扩展 - 它指定了颜色的不透明度
HSLA 颜色值指定为：
hsla(hue, saturation, lightness, alpha)
alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字：
hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4)

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

三.CSS边框

CSS Border - 简写属性
border-width
border-style（必需）
border-color
实例：

p {
	border-width:5px;
    border-style:solid;
    border-color:red;
}

实例简写：

p {
    border: 5px solid red;
}

CSS 圆角边框
实例：

.p{
	border-radius:12px;
	border:5px solid #0000FF ;
	text-align: center;
}

运行结果：
在这里插入图片描述

四.CSS外边距

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

（1）. 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并,如下图所示：
在这里插入图片描述
（2）. 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图

(3). 假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并。请看下图
在这里插入图片描述
如果这个外边距遇到另一个元素的外边距，它还会发生合并：

五.CSS 轮廓 Outline

outline 属性是用于设置以下各个轮廓属性的简写属性：
outline-width
outline-style（必需）
outline-color
从上面的列表中，outline 属性可指定一个、两个或三个值。值的顺序无关紧要。
例如：

outline: 5px solid yellow;

在这里插入图片描述

六.CSS 文本

在这里插入图片描述

文本对齐

text-align：用于设置文本的水平对齐方式
text-align: center | left | right | justify
当 text-align 属性设置为 “justify” 后，将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的（就像在杂志和报纸中）,示例如下：

div {
  border: 1px solid black;
  padding: 10px;
  width: 200px;
  height: 200px;
  text-align: justify;
}

<div>
In my younger and more vulnerable years my father gave me some advice 
that I've been turning over in my mind ever since. 
</div>

运行结果：
在这里插入图片描述

文本方向

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

<p>This is the default text direction.</p>
<p class="ex1">This is right-to-left text direction.</p>

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

运行结果：
在这里插入图片描述

** 垂直对齐**

vertical-align 属性设置元素的垂直对齐方式。
vertical-align：baseline | top | middle | bottom
四种效果分别显示为：
在这里插入图片描述

文字装饰

text-decoration 属性用于设置或删除文本装饰。
text-decoration: overline | line-through | underline | none；
text-decoration: none; 通常用于从链接上删除下划线：
三种效果分别显示为：
在这里插入图片描述

文本转换

text-transform 属性用于指定文本中的大写和小写字母
text-transform: uppercase | lowercase | capitalize
三种效果分别显示为：
在这里插入图片描述

缩进文本

通过使用 text-indent 属性，所有元素的第一行都可以缩进

一个给定的长度，甚至该长度可以是负值。

text-indent 可以使用所有长度单位，包括百分比值。
百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为 20%，所影响元素的第一行会缩进其父元素宽度的 20%。
效果如下：
在这里插入图片描述

字母间距

letter-spacing 属性用于指定文本中字符之间的间距。
效果如下：
在这里插入图片描述

行高

line-height 属性用于指定行之间的间距：
效果如下：
在这里插入图片描述

文字间距

word-spacing 属性用于指定文本中单词之间的间距。
效果如下：
在这里插入图片描述

空白换行

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

此例演示如何禁用元素内的文本换行，效果如下：
在这里插入图片描述

文本阴影

text-shadow 属性为文本添加阴影。

最简单的用法是只指定水平阴影（2px）和垂直阴影（2px），
还可以向阴影添加颜色（红色）；向阴影添加模糊效果（5px）；
以上的代码如下：

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

效果如下：
在这里插入图片描述

七、CSS字体

字体属性如下：

为了缩短代码，也可以在一个属性中指定所有单个字体属性。
font 属性是以下属性的简写属性：
font-style
font-variant
font-weight
font-size/line-height
font-family

以下展示的是一个段落。字体设置为斜体和粗体，字体大小设置为12像素，行高设置为30像素，字体族为Georgia。示例如下：

font: italic bold 12px/30px Georgia, serif;

结果如下：
在这里插入图片描述

八、CSS链接

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

注意：

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

九、CSS列表

1.列表项目标记
list-style-type 属性指定列表项标记的类型。
list-style-type: circle | square | upper-roman | lower-alpha
list-style-image 属性将图像指定为列表项标记：
相关代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
  list-style-type: circle;
}
ul.b {
  list-style-type: square;
}
ol.c {
  list-style-type: upper-roman;
}
ol.d {
  list-style-type: lower-alpha;
}
ul.e{
  list-style-image: url(img/icon1.jpg);
}
</style>
</head>
<body>

<p>无序列表实例：</p>
<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
</ul>

<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
</ul>

<p>有序列表实例：</p>
<ol class="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<p>图像列表实例：</p>
<ul class="e">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

运行结果如下：
在这里插入图片描述

十、CSS表格

在这里插入图片描述
1. border-collapse
属性设置表格的边框是否被合并为一个单一的边框，还是像在标准的 HTML 中那样分开显示。
border-collapse根据不同的取值运行结果如下：

2. border-spacing
border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）
该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。除非 border-collapse 被设置为 separate，否则将忽略这个属性。尽管这个属性只应用于表，不过它可以由表中的所有元素继承。

实例一：

border-collapse: separate;
border-spacing: 10px;

结果如下：
在这里插入图片描述
实例二：

border-collapse: separate;
border-spacing: 10px 50px;

结果如下：
在这里插入图片描述
3. caption-side
caption-side 属性设置表格标题的位置。
该属性指定了表标题相对于表框的放置位置。
表标题显示为好像它是表之前（或之后）的一个块级元素。
caption-side:top(默认） | bottom | inherit

注意：由于平时所见的标题均是在表的上方，这里只展示标题在这表的下方效果

在这里插入图片描述
4. empty-cells
empty-cells 属性设置是否显示表格中的空单元格（仅用于“分离边框”模式）

注意：该属性定义了不包含任何内容的表单元格如何表示。如果显示，就会绘制出单元格的边框和背景。除非 border-collapse 设置为 separate，否则将忽略这个属性。

效果如下：
在这里插入图片描述
5. table-layout
table-layout 属性用来显示表格单元格、行、列的算法规则

固定表格布局：
固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。
在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。
通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。
自动表格布局：
在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。
此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容。

效果如下：
在这里插入图片描述