CSS(二)——CSS3基础知识

最新推荐文章于 2022-07-22 14:31:24 发布

bounceii

最新推荐文章于 2022-07-22 14:31:24 发布

阅读量1.2k

点赞数 3

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

本文链接：https://blog.csdn.net/rjlmylover_zyw/article/details/121285895

版权

CSS 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

圆角

border-radius 属性定义元素角的半径。

border-radius 属性可以接受一到四个值。规则如下：

四个值 - border-radius: 15px 50px 30px 5px;（依次分别用于：左上角、右上角、右下角、左下角）：

三个值 - border-radius: 15px 50px30px;（第一个值用于左上角，第二个值用于右上角和左下角，第三个用于右下角）
两个值 - border-radius: 15px 50px;（第一个值用于左上角和右下角，第二个值用于右上角和左下角）：
一个值 - border-radius: 15px;（该值用于所有四个角，圆角都是一样的）

边框图像

通过使用 CSS border-image 属性，可以设置图像用作围绕元素的边框。
注意：为了使 border-image 起作用，该元素还需要设置 border 属性！

border-image 用于设置所有 border-image-* 属性的简写属性。
border-image-source 规定用作边框的图像的路径。
border-image-slice 规定如何裁切边框图像。
div { border-image-source: url(border.png); border-image-slice: 50% 50%; }
border-image-width 规定边框图像的宽度。
div { border-image-source: url(border.png); border-image-width: 30 30; }
border-image-outset 规定边框图像区域超出边框盒的量。
div { border-image-source: url(border.png); border-image-outset: 30 30; }
border-image-repeat 规定边框图像应重复、圆角、还是拉伸。
div { border-image-source: url(border.png); border-image-repeat: round; }

CSS多重背景

CSS 允许您通过 background-image 属性为一个元素添加多幅背景图像。

不同的背景图像用逗号隔开，并且图像会彼此堆叠，其中的第一幅图像最靠近观看者。
background-size 属性允许您指定背景图像的大小。可以通过长度、百分比或使用以下两个关键字之一来指定背景图像的大小：contain 或 cover。

contain 将背景图像缩放为尽可能大的尺寸（但其宽度和高度都必须适合内容区域）。这样，取决于背景图像和背景定位区域的比例，可能存在一些未被背景图像覆盖的背景区域。

cover 会缩放背景图像，以使内容区域完全被背景图像覆盖（其宽度和高度均等于或超过内容区域）。这样，背景图像的某些部分可能在背景定位区域中不可见。

在处理多重背景时，background-size 属性还可以接受多个设置背景尺寸的值（使用逗号分隔的列表）。

下面的例子有两幅背景图像，第一幅图像是花朵（与底部和右侧对齐），第二幅图像是纸张背景（与左上角对齐）

<style> 
#example1 {
  background-image: url(/i/photo/flower.gif), url(/i/paper.jpg);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
  padding: 15px;
}
</style>
</head>
<body>

<h1>多重背景</h1>
<p>下面的 div 元素有两副背景图像：</p>

<div id="example1">
  <h1>Welcome to Shanghai</h1>
  <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
  <p>The city is located on the southern estuary of the Yangtze, with the Huangpu River flowing through it.</p>
</div>

在浏览器中显示
在这里插入图片描述

全尺寸背景图像
现在，我们希望网站上的背景图像始终覆盖整个浏览器窗口。
具体要求如下：
1.用图像填充整个页面（无空白）
2.根据需要缩放图像
3.在页面上居中图像
4.不引发滚动条
下面的例子显示了如何实现它：使用元素（元素始终至少是浏览器窗口的高度）。然后在其上设置固定且居中的背景。最后使用 background-size 属性调整其大小：

html {
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

- background-origin 属性
CSS background-origin 属性指定背景图像的位置。

该属性接受三个不同的值：

border-box - 背景图片从边框的左上角开始
padding-box -背景图像从内边距边缘的左上角开始（默认）
content-box - 背景图片从内容的左上角开始

- background-clip 属性
CSS background-clip 属性指定背景的绘制区域。

该属性接受三个不同的值：

border-box - 背景绘制到边框的外部边缘（默认）
padding-box - 背景绘制到内边距的外边缘
content-box -在内容框中绘制背景
默认是这样

background-clip：padding-box

background-clip：content-box

颜色

- RGBA 颜色（主要就用的它后面的a）
RGBA 颜色值是 RGB 颜色值的扩展，带有 alpha 通道 - 该通道规定颜色的不透明度。

RGBA 颜色值是这样规定的：rgba(red, green, blue, alpha)。
alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。
注意：这样设置的透明度，不会影响文本
在这里插入图片描述
区别于opacity

渐变

线性渐变
可以是从上到下，从左到右，或者对角线
语法：
background-img： linear-gradient（to right， red， blue）从左到右
background-img： linear-gradient（to bottom right， red， blue）从左上到右下

0deg 等于向上（to top）。值 90deg 等于向右（to right）。值 180deg 等于向下（to bottom）
css background-image: linear-gradient(-90deg, red, yellow);

- 同时使用透明的度

background-img：linear-gradient（to right ， rgba(255,0,0,0), rgba(255,0,0,1)）

效果
在这里插入图片描述
- 径向渐变
径向渐变由其中心定义。

语法

background-image: radial-gradient(shape size at position,start-color, ..., last-color);

默认地，shape 为椭圆形，size 为最远角，position 为中心。

shape 参数定义形状。它可接受 circle 或 ellipse 值。默认值为 ellipse（椭圆）。
size 参数定义渐变的大小。它可接受四个值：
closest-side ，farthest-side ， closest-corner ， farthest-corner

在这里插入图片描述

这样写色标之间间隔不同 css background-image: radial-gradient(red 5%, yellow 15%, green 60%);

重复径向渐变
repeating-radial-gradient() 函数用于重复径向渐变：

{
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

在这里插入图片描述

阴影

- 文字阴影

之前CSS里面就有介绍文字阴影，那是最简单的水平阴影和垂直阴影text-show：2px，2px，
现在，给文本

添加颜色text-shadow: 2px 2px red;
然后是模糊效果text-shaw：2px 2px 4px red
多个阴影
如需在文本中添加多个阴影，您可以添加以逗号分隔的阴影列表。
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
还可以使用 text-shadow 属性在文本周围创建纯边框（无阴影）：
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

- 盒子阴影

与文字阴影类似，box-shadow: 10px 10px 5px grey;加模糊，加颜色

文本模式

文字溢出text-overflow

被剪裁text-overflow: clip
用…表示
圈1.单行溢出

圈2. 多行溢出

自动换行
属性word-wrap: break-word;使长文字能够被折断并换到下一行。
换行规则word-break: keep-all;长单词不会被打断，word-break: break-all;长单词会被打断

writing-mode 属性规定文本行是水平放置还是垂直放置。
水平writing-mode: horizontal-tb垂直 writing-mode: vertical-rl

2D转换！！

- translate

水平，垂直移动transform：translate（X,Y）或者transform：translateX（）
transform：translateY（）
在这里插入图片描述

rotate

转换中心点

- scale()
增加或减少元素的大小（根据给定的宽度和高度参数）。
下面的例子把 <div> 元素增大为其原始宽度的两倍和其原始高度的三倍：
transform: scale(2, 3);
还可有transform：scaleX（），scaleY（）
skew()
使元素沿 X 和 Y 轴倾斜给定角度。

下面的例子使 <div> 元素沿 X 轴倾斜 20 度，同时沿 Y 轴倾斜 10 度：
transform: skew(20deg, 10deg);
还有transform：skewX（），transform：skewY（）
matrix() 方法把所有 2D 变换方法组合为一个。

matrix() 方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素。
参数如下：matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

3D转换

与2D转换类似transform：ratato（），transform：ratatoX（），transform：ratatoY（）

perspective 规定 3D 元素的透视效果。
是给它的父盒子加的perspective

<style>
#div1
{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
perspective:150;
-webkit-perspective:150; /* Safari and Chrome */
}

#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg); /* Safari and Chrome */
}
</style>
</head>

<body>

<div id="div1">
  <div id="div2">HELLO</div>
</div>
 
</body>

在浏览器上展示
在这里插入图片描述

过渡！！

一般会与hover配合使用，谁要过渡给谁加transition：width 0.5s

transition：属性名（要过渡的）秒数（一定要有s）

transition-delay 规定过渡效果的延迟（以秒计）。

动画！！

在需要动画的元素中定义animation-name：a（自定义）， animation-duration：秒数
然后@keyframes a（上面给的命名） {}函数


/* 应用动画的元素 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}
/* 动画代码 */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

animation-delay：秒数 属性规定动画开始的延迟时间。
animation-iteration-count：次数 属性指定动画应运行的次数。使用值 “infinite” 使动画永远持续下去
animation-direction 属性可接受以下值

normal - 动画正常播放（向前）。默认值
reverse - 动画以反方向播放（向后）
alternate - 动画先向前播放，然后向后
alternate-reverse - 动画先向后播放，然后向前

也有速度曲线

指定动画填充模式backwards
动画开始之前（在动画延迟期间）使 <div> 元素获得由第一个关键帧设置的样式值
forwards
在动画结束时保留来自最后一个关键帧的样式值
both
在动画开始之前使 <div> 元素获得第一个关键帧设置的样式值，以及在动画结束时保留最后一个关键帧的样式值

工具提示

鼠标移到指定元素上，显示提示的额外信息
主要用到position子绝父相，visibility：hidden/visible，z-index，
（div里套一个span）

<style>
/* Tooltip 容器 */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* 如果需要在可悬停文本下面显示点线 */
}

/* Tooltip 文本 */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* 定位工具提示文本 - 请看下面的例子 */
  position: absolute;
  z-index: 1;
  
}

/* 将鼠标悬停在工具提示容器上时，显示工具提示文本 */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

在.tooltip .tooltiptext 里加 top: -5px;left: 105%;
top:-5px 用于将其放置在其容器元素的中间。我们使用数字 5 是因为工具提示文本的上下内边距均为 5px。如果增加其内边距，还请您同时增加 top 属性的值，以确保它停留在中间。如果要将工具提示放在左侧，也同样适用。
如果要让提示显示在右边则改right：105%，这个"105%"，是距离div的距离

如果您希望工具提示位于上方或下方，请看下面的例子。请注意，我们使用了负 60 像素的左外边距属性（margin-left）。这是为了把工具提示与可悬停文本进行居中对齐。该值是工具提示宽度的一半（120/2 = 60）。

.tooltip .tooltiptext {
  width: 120px;
  bottom: 100%;
  left: 50%; 
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

图像样式

淡入文本

- <head>
<style>
.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h1>淡入文本</h1>

<div class="container">
  <img src="/i/css/avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

</body>

- 从上滑入

<head>
<style>
.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.container:hover .overlay {
  bottom: 0;
  height: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h1>滑入（从上）</h1>

<div class="container">
  <img src="/i/css/avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>
 
</body>

调整图像 object-fit

用于指定应如何调整 <img> 或 <video> 的大小以适合其容器。

假如一个图片是300px*300px，当我们设置它的width：200px，hieght：300px时，会将其按比例缩放，图像的长宽比将被破坏。
从这样在这里插入图片描述
变为这样

使用 object-fit: cover;，它会剪切图像的侧面，保留长宽比，并填充空间。
在这里插入图片描述
object-fit 属性可接受如下值：

fill - 默认值。调整替换后的内容大小，以填充元素的内容框。如有必要，将拉伸或挤压物体以适应该对象。
contain - 缩放替换后的内容以保持其纵横比，同时将其放入元素的内容框。
cover - 调整替换内容的大小，以在填充元素的整个内容框时保持其长宽比。该对象将被裁剪以适应。
none - 不对替换的内容调整大小。
scale-down - 调整内容大小就像没有指定内容或包含内容一样（将导致较小的具体对象尺寸）

按钮

我们可以自己设置buttom的样式

<style>
.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;/*鼠标悬停在上面时是小手形状*/
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
/*好好看怎么设置的after*/
.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;/*这样会实现渐变的效果*/
  top: 0;
  right: -20px;/*因为盒子的内边距是20px*/
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;/*鼠标放上去的时候内边距会变大，文本区域变小，具体值与aftr插入的图标大小有关*/
}

.button:hover span:after {
  opacity: 1;/*与上面opacity配合会实现渐变效果*/
  right: 0;
}
</style>
</head>
<body>

<h1>带动画效果的按钮</h1>

<button class="button" style="vertical-align:middle"><span>请悬停在我上方</span></button>

</body>

分页实例

跟上面的按钮类似，我们可以设置分页的样式，主要有应用display：block-inline，fooat：left，设置border，padding，margin，hover时transtion，opacity，text-align：center

下面是一个面包屑分页

<style>
ul.breadcrumb {
  padding: 8px 16px;
  list-style: none;
  background-color: #eee;
}

ul.breadcrumb li {display: inline;}

ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}

ul.breadcrumb li a {color: green;}
</style>
</head>
<body>

<h1>面包屑分页</h1>

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Pictures</a></li>
  <li><a href="#">Summer 15</a></li>
  <li>Italy</li>
</ul>

</body>

在浏览器显示
在这里插入图片描述

多列

column-count 规定元素应划分的列数。：colum-count：3/三列/
column-fill规定如何填充列。：column-fill：all
column-gap指定列之间的间隙。column-gap：20px （内容与内容间的间隔)
column-rule用于设置所有 column-rule-* 属性的简写属性。column-rule：1px solid blue
column-rule-color规定列之间规则的颜色。
column-rule-style规定列之间的规则样式。column-rule-style：solid
column-rule-width规定列之间的规则宽度。
column-span规定一个元素应该跨越多少列。
column-width为列指定建议的最佳宽度。
columns用于设置 column-width 和 column-count 的简写属性。

用户界面

resize

只允许用户调整文本框宽度resize: horizontal; overflow: auto;
只允许用户调整文本框高度resize: vertical; overflow: auto;
都可调resize：both
取消调整，主要针对于textarea {resize：none}

outline-offset 轮廓线
在轮廓与元素的边缘边框之间添加空间

注意：outline-offset是在边框外面的。元素的总宽度和高度不受轮廓线宽度的影响。outline-offset可能会与其他内容重叠。

例

div.ex1 {
  margin: 20px;
  border: 1px solid black;
  outline: 4px solid red;
  outline-offset: 15px;
}

在这里插入图片描述

box-sizing ！！！

如果不设置box-sizing：border-sizing属性的话，每每增加margin或者padding 值时，整个盒子会受影响，不再是原大小，
box-sizing：border-sizing就解决了这一问题

* {margin：0；
	padding：0；
	box-sizing：border-sizing；}

这样设置了之后，再改变盒子margin或者padding时，盒子所占空间也不会改变。

display：flex弹性布局！！！

弹性框布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。非常好用！
使用方法：

给父元素设置

display:flex（给父元素设置为flex布局之后，子元素的float，clear，vertical-align，都会失效）
设置主轴 flex-deirction:column/row（默认情况下是row，就是X轴是主轴，clumn是Y轴，如果设置flex-deirction：column，主轴就是Y轴）
主轴方向设置 justify-content：center/flex-start/flex-end/space-around/space-between（

center将在flex容器下居中
flex-start将在flex容器开头对齐（默认）
flex-end将在flex容器尾部对齐
space-around显示在行之前，之后，之间有空格的flex项目
space-between显示在行之间有空格的flex项目

不换行默认下不换行，当内容超出所设置宽时，会缩小内容大小以达到在一行显示的效果。
flex-wrap：wrap 就会另起一行
侧轴方向设置（单行） align-items 与主轴类似，多增加一个stretch拉伸属性
侧轴换行了情况下：align-content
flex-flow是dirction与wrap的符合属性

给子元素设置

align-self设置所选子元素对齐方式，其将覆盖所有align-items属性
其包括以下几个属性

order属性可以改变flex项目的顺序（order后面必须跟数字）
flex-grow设置某个flex项目比其他flex项目将增长多少（后面也只能跟数字）
flex-shrink 设置某个flex项目将比其他收缩多少
flex-basis规定初始长度

var（）函数

您可以将它们放在变量中，而不必一遍又一遍地复制和粘贴相同的颜色。
var() 函数的语法如下：var(name, value)

name 必需。变量名（以两条破折号开头）。
value 可选。回退值（在未找到变量时使用）。
注释：变量名称必须以两个破折号（–）开头，且区分大小写！

var() 如何工作
首先：CSS 变量可以有全局或局部作用域。

全局变量可以在整个文档中进行访问/使用，而局部变量只能在声明它的选择器内部使用。

如需创建具有全局作用域的变量，请在 :root 选择器中声明它。 :root 选择器匹配文档的根元素。

如需创建具有局部作用域的变量，请在将要使用它的选择器中声明它。

全局

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

body { background-color: var(--blue); }

h2 { border-bottom: 2px solid var(--blue); }

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

使用 var() 有如下优势：

使代码更易于阅读（更容易理解）
使修改颜色值更加容易

局部

有时，我们希望变量仅在页面的特定部分中进行更改。

假设我们想要按钮元素使用不同的蓝色。那么，我们可以在 button 选择器内重新声明 --blue 变量。当我们在这个选择器中使用 var(–blue) 时，它将使用此处声明的局部 --blue 变量值。

我们看到局部的 --blue 变量会覆盖 button 元素的全局 --blue 变量：

button {
  --blue: #0000ff;
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

如果只在一个地方使用一个变量，我们也可以声明一个新的局部变量，就像这样：

button {
  --button-blue: #0000ff;
  background-color: var(--white);
  color: var(--button-blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

媒体查询！！！

使用媒体查询是一种流行的技术，可以向台式机、笔记本电脑、平板电脑和手机（例如 iPhone 和 Android 手机）提供定制的样式表。
通俗点讲，媒体查询就是可以实现在不同设备上显示出完美的效果。不同设备可视屏幕大小尺寸不同，在这个屏幕上显示出的效果完美，但在另一个不一样尺寸的屏幕上可能就会出现乱码，媒体查询引入@media就可以帮助解决这样的问题。

媒体查询语法

@media mediatype and/not/only （media feature）{css-code;}

mediatype 媒体类型，包括 all（用于所有设备）， print（用于打印机和打印预览）， screen（电脑屏幕，平板电脑，智能手机）
关键字

media feature媒体类型，必须用小括号包含

媒体查询使用
下面例子表示，在电脑平板手机屏幕上，如果屏幕宽小于等于800px，则背景颜色为pink色
rem布局

rem是一个单位，与em区分：em是相对父元素的字体大小
rem是相对html元素的字体大小

引入
语法 <link rel="stylesheet" media="mediatype and/not/only(media feature）" href="mystylesheet.css">
引入资源是针对于不同的屏幕尺寸，设置不同的页面方案
link里面的"medi="与上面媒体查询的语法是一样的，只不过不用加@符号