第二部分：CSS3


html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础选择器之标签选择器title>
    
    <style>
        p {
            color: green;
 
        }
 
        div {
            color: pink;
 
        }
    style>
head>
 
<body>
    <p>男生p>
    <p>男生p>
    <p>男生p>
    <div>女生div>
    <div>女生div>
    <div>女生div>
body>
 
html>

2.4：类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器

注意：

①类选择器使用"."（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）

②可以理解为给这个标签起了一个名字

③长名称或词组可以使用短横线来为选择器命名

④不要使用纯数字、中文等命名，尽量使用英文字母来表示

⑤命名要有意义，尽量使别人一眼就知道这个类名的目的


html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础选择器之类选择器title>
    <style>
        /* 类选择器口诀：样式点定义，结构类（class）调用，一个或多个，开发最常用 */
        .red {
            color: red;
        }
    style>
head>
 
<body>
    <ul>
        <li class="red">冰雨li>
        <li class="red">来生缘li>
        <li>李香兰li>
        <li>生僻字li>
        <li>江南Styleli>
    ul>
    <div class="red">我也想变红色div>
body>
 
html>

2.5：类选择器-多类名

我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签

简单理解：一个标签有多个名字


html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多类名的使用方式title>
    
    <style>
        .red {
            color: red;
        }
 
        .font35 {
            font-size: 35px;
        }
    style>
head>
 
<body>
    <div class="red font35">刘德华div>
body>
 
html>

2.6：id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式

HTML元素以id属性来设置id选择器，CSS中id选择器以"#"来定义


html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础选择器之id选择器title>
    <style>
        /* id选择器的口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用 */
        /* 
        id选择器和类选择器的区别
            ①类选择器好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用
            ②id选择器好比人的身份证号码，全中国是唯一的，不得重复
            ③id选择器和类选择器最大的不同在于使用次数上
            ④类选择器在修改样式中使用的最多，id选择器一般使用在页面唯一性的元素上，经常和JavaScript搭配使用            
        */
        #pink {
            color: pink;
        }
    style>
head>
 
<body>
    <div id="pink">迈克尔.杰克逊div>
body>
 
html>

2.7：通配符选择器

在CSS中，通配符选择器使用"*"定义，它表示选取页面中所有元素(标签)

通配符选择器不需要调用，自动就给所有的元素使用样式

三：CSS字体属性

3.1：CSS3字体描述

描述符	值	描述
font-family	name	必需。规定字体的名称。
src	URL	必需。定义字体文件的 URL。
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	可选。定义如何拉伸字体。默认是 "normal"。
font-style	normal italic oblique	可选。定义字体的样式。默认是 "normal"。
font-weight	normal bold 100 200 300 400 500 600 700 800 900	可选。定义字体的粗细。默认是 "normal"。
unicode-range	unicode-range	可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。

3.2：CSS Fonts属性用于定义字体系列、大小、粗细和文本样式（如粗体）


html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体属性title>
    <style>
        /* 1.字体系列 */
        h2 {
            font-family: 'Microsoft YaHei';
        }
 
        p {
            font-family: 'Times New Roman', Times, serif;
        }
 
        /* 2.字体大小 */
        body {
            font-size: 16px;
        }
 
        /* 标题标签比较特殊，需要单独指定文字大小 */
 
        /* 3.字体粗细 */
        .bold {
            /* 
            这个700的后面不要跟单位，等价于bold，都是加粗的效果
            实际开发中，我们更提倡使用数字，表示加粗或者变细
            */
            font-weight: 700;
        }
 
        h2 {
            font-weight: 400;
            /* font-weight: normal */
        }
 
        /* 4.文字样式 */
        p {
            font-style: italic;
        }
 
        em {
            /* 让倾斜的字体不倾斜 */
            font-style: normal;
        }
    style>
head>
 
<body>
    <h2>小贾学前端h2>
    <p class="bold">前端好有意思p>
    <p>我要好好学p>
    <em>下课时候的你em>
body>
 
html>


html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS属性之复合属性title>
    <style>
        /* 
        使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
        不需要设置的属性可以省略(取默认值)，但必须保留font-size和font-family属性，否则font属性将不起作用
        */
        div {
            /* font: font-style font-weight font-size/line-height font-family; */
            font: italic 700 16px 'Microsoft yahei';
        }
    style>
head>
 
<body>
    <div>三生三世十里桃花，一心一意百行代码div>
body>
 
html>

四：CSS边框

用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如 Photoshop。

4.1：CSS3 圆角

在 CSS2 中添加圆角棘手。我们不得不在每个角落使用不同的图像。

在 CSS3 中，很容易创建圆角。

在 CSS3 中 border-radius 属性被用于创建圆角

如果你在 border-radius 属性中只指定一个值，那么将生成 4 个圆角。

但是，如果你要在四个角上一一指定，可以使用以下规则：

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值： 四个圆角值相同

CSS3 圆角属性

属性	描述
border-radius	所有四个边角 border---radius 属性的缩写
border-top-left-radius	定义了左上角的弧度
border-top-right-radius	定义了右上角的弧度
border-bottom-right-radius	定义了右下角的弧度
border-bottom-left-radius	定义了左下角的弧度

实例：


在div中添加圆角元素：
 
div
{
    border:2px solid;
    border-radius:25px;
}

4.2：CSS3 盒阴影

CSS3 中的 box-shadow 属性被用来添加阴影::

实例：


在div中添加box-shadow属性
 
div
{
    box-shadow: 10px 10px 5px #888888;
}

4.3：CSS3 边界图片

有了 CSS3 的 border-image 属性，你可以使用图像创建一个边框：

border-image 属性允许你指定一个图片作为边框！用于创建上文边框的原始图像：

在 div 中使用图片创建边框:

Border

实例：


在 div 中使用图片创建边框
 
div
{
    border-image:url(border.png) 30 30 round;
    -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
    -o-border-image:url(border.png) 30 30 round; /* Opera */
}

4.4：新边框属性

属性	说明	CSS
border-image	设置所有边框图像的速记属性。	3
border-radius	一个用于设置所有四个边框- *-半径属性的速记属性	3
box-shadow	附加一个或多个下拉框的阴影	3

五：CSS背景

5.1：CSS3 background-image属性

CSS3中可以通过background-image属性添加背景图片。

不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。

实例：


#example1 {
     background-image: url(img_flwr.gif), url(paper.gif); 
     background-position: right bottom, left top; 
     background-repeat: no-repeat, repeat; 
}

可以给不同的图片设置多个不同的属性

实例：


#example1 {
     background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; }

5.2：CSS3 background-size 属性

background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。

CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。

你指定的大小是相对于父元素的宽度和高度的百分比的大小。

实例1：

重置背景图像：


div { 
    background:url(img_flwr.gif);     
    background-size:80px 60px; 
    background-repeat:no-repeat; 
 
}

实例2：

伸展背景图像完全填充内容区域：


div { 
    background:url(img_flwr.gif);
    background-size:100% 100%; 
    background-repeat:no-repeat; 
}

5.3：CSS3 的 background-origin 属性

background-origin 属性指定了背景图像的位置区域。

content-box, padding-box,和 border-box区域内可以放置背景图像。

实例：

在 content-box 中定位背景图片：


div { 
    background:url(img_flwr.gif); 
    background-repeat:no-repeat; background-size:100% 100%; 
    background-origin:content-box; 
}

5.4：CSS3 多个背景图像

在 body 元素中设置两个背景图像：


body {
     background-image:url(img_flwr.gif),url(img_tree.gif); 
}

5.5：CSS3 background-clip属性

CSS3中background-clip背景剪裁属性是从指定位置开始绘制。

实例：


#example1 { 
    border: 10px dotted black;
    padding: 35px; background: yellow; 
    background-clip: content-box; 
}

5.6：新的背景属性

顺序	描述	CSS
background-clip	规定背景的绘制区域。	3
background-origin	规定背景图片的定位区域。	3
background-size	规定背景图片的尺寸。	3

六： CSS渐变

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

CSS3 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

6.1：CSS3 线性渐变

为了创建一个线性渐变，你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

线性渐变的实例：

线性渐变

语法：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

6.1.1：线性渐变 - 从上到下（默认情况下）

下面的实例演示了从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：

实例：

#grad { background-image: linear-gradient(#e66465, #9198e5); }

6.1.2：线性渐变 - 从左到右

下面的实例演示了从左边开始的线性渐变。起点是红色，慢慢过渡到黄色：

实例：

#grad { height: 200px; background-image: linear-gradient(to right, red , yellow); }

6.1.3：线性渐变 - 对角

你可以通过指定水平和垂直的起始位置来制作一个对角渐变。

下面的实例演示了从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到黄色：

实例：

#grad { height: 200px; background-image: linear-gradient(to bottom right, red, yellow); }

6.1.4：使用角度

如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）

语法：

background-image: linear-gradient(angle, color-stop1, color-stop2);

角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

但是，请注意很多浏览器（Chrome、Safari、firefox等）使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。

下面的实例演示了如何在线性渐变上使用角度：

实例：

#grad { background-image: linear-gradient(-90deg, red, yellow); }

6.1.5：使用多个颜色节点

下面的实例演示了如何设置多个颜色节点：

实例：

#grad { background-image: linear-gradient(red, yellow, green); }

下面的实例演示了如何创建一个带有彩虹颜色和文本的线性渐变：

实例：

#grad { /* 标准的语法 */ background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); }

6.1.6：使用透明度（transparent）

CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。

为了添加透明度，我们使用 rgba() 函数来定义颜色节点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

下面的实例演示了从左边开始的线性渐变。起点是完全透明，慢慢过渡到完全不透明的红色：

实例：

#grad { background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); }

6.1.7：重复的线性渐变

repeating-linear-gradient() 函数用于重复线性渐变

实例：

#grad { /* 标准的语法 */ background-image: repeating-linear-gradient(red, yellow 10%, green 20%); }

6.2：CSS3 径向渐变

径向渐变由它的中心定义

为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

径向渐变的实例：

Radial gradient

语法：

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

6.2.1：径向渐变 - 颜色节点均匀分布（默认情况下）

实例：

#grad { background-image: radial-gradient(red, yellow, green); }

6.2.2：径向渐变 - 颜色节点不均匀分布

实例：

#grad { background-image: radial-gradient(red 5%, yellow 15%, green 60%); }

6.2.3：设置形状

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

实例：

#grad { background-image: radial-gradient(circle, red, yellow, green); }

6.2.4：不同尺寸大小关键字的使用

size 参数定义了渐变的大小。它可以是以下四个值：

closest-side
farthest-side
closest-corner
farthest-corner

实例：

#grad1 { background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black); } #grad2 { background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black); }

6.2.5：重复的径向渐变

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

实例：

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

七：CSS文本效果

7.1：CSS3 的文本阴影

CSS3 中，text-shadow属性适用于文本阴影

阴影效果!

您指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：

实例：

给标题添加阴影:

h1 { text-shadow: 5px 5px 5px #FF0000; }

7.2：CSS3 box-shadow属性

CSS3 中 CSS3 box-shadow 属性适用于盒子阴影

实例：

div { box-shadow: 10px 10px 5px #888888; }

7.3：给阴影添加颜色

实例：

div { box-shadow: 10px 10px grey; }

7.4：给阴影添加一个模糊效果

实例：

div { box-shadow: 10px 10px 5px grey; }

7.5：阴影的一个使用特例是卡片效果

实例：

div.card { width: 250px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); text-align: center; }

7.6：CSS3 Text Overflow属性

CSS3文本溢出属性指定应向用户如何显示溢出内容

实例：


p.test1 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: clip; 
}
 
p.test2 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: ellipsis; 
}

7.7:CSS3的换行

如果某个单词太长，不适合在一个区域内，它扩展到外面：

CSS3中，自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字

CSS代码如下：

实例：


允许长文本换行:
 
p {word-wrap:break-word;}

7.8：CSS3 单词拆分换行

CSS3 单词拆分换行属性指定换行规则

CSS代码如下：

实例：


p.test1 {
    word-break: keep-all;
}
 
p.test2 {
    word-break: break-all;
}

7.9：新文本属性

属性	描述	CSS
hanging-punctuation	规定标点字符是否位于线框之外。	3
punctuation-trim	规定是否对标点字符进行修剪。	3
text-align-last	设置如何对齐最后一行或紧挨着强制换行符之前的行。	3
text-emphasis	向元素的文本应用重点标记以及重点标记的前景色。	3
text-justify	规定当 text-align 设置为 "justify" 时所使用的对齐方法。	3
text-outline	规定文本的轮廓。	3
text-overflow	规定当文本溢出包含元素时发生的事情。	3
text-shadow	向文本添加阴影。	3
text-wrap	规定文本的换行规则。	3
word-break	规定非中日韩文本的换行规则。	3
word-wrap	允许对长的不可分割的单词进行分割并换行到下一行。	3

八：CSS3 2D转换

CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸

它是如何工作？

转换的效果是让某个元素改变形状，大小和位置

您可以使用 2D 或 3D 转换来转换您的元素

8.1：translate() 方法

Translate

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。


div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。

8.2：rotate() 方法

Rotate

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。


div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

rotate值（30deg）元素顺时针旋转30度。

8.3：scale() 方法

Scale

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：


-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */

scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。

8.4：skew() 方法

transform:skew( [,]);

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

skewX();表示只在X轴(水平方向)倾斜。
skewY();表示只在Y轴(垂直方向)倾斜。

实例

div { transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ }

尝试一下 »

skew(30deg,20deg) 元素在 X 轴和 Y 轴上倾斜 20 度 30 度。

matrix() 方法

Rotate

matrix()方法和2D变换方法合并成一个。

matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

Opera

Safari

Chrome

Firefox

Internet Explorer

实例

利用matrix()方法旋转div元素30°

div { transform:matrix(0.866,0.5,-0.5,0.866,0,0); -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */ }

尝试一下 »

新转换属性

以下列出了所有的转换属性:

Property	描述	CSS
transform	适用于2D或3D转换的元素	3
transform-origin	允许您更改转化元素位置	3

2D 转换方法

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

相关阅读:
5个高质量的自用原型设计工具分享！
D. Radio Towers(斐波那契+逆元)
【计算机网络】网络编程接口 Socket API 解读（7）
关于c++源文件与头文件的编译规则总结
 融合差分进化和混合多策略的麻雀搜索算法
 LightDB兼容Oracle table_exists_action功能
 ts枚举的两种类型是什么？
如何选择最适合您需求的数据恢复工具？适用于 Windows 的 7 大数据恢复工具
 关于数据迁移，测试应该做什么？
CTF-sql注入(X-Forwarded-For)【简单易懂】
原文地址：https://blog.csdn.net/weixin_63925896/article/details/133468073