目录
3.2：CSS Fonts属性用于定义字体系列、大小、粗细和文本样式（如粗体）
5.3：CSS3 的 background-origin 属性
一：CSS简介
CSS的主要使用场景就是美化网页，布局页面的
1.1：HTML的局限性
HTML只关心内容的语义，而不关心样式的丑与美
1.2：CSS-网页的美容师
CSS是层叠样式表（Cascading Style Sheets）的简称，有时也称之为CSS样式表或级联样式表
CSS也是一种标记语言
CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式
CSS可以使我们的网页更加丰富多彩，布局更加灵活自如
1.3：CSS语法规范
CSS规则由两个主要的部分构成：选择器以及一条或多条声明
选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
属性和属性值以“键值对”的形式出现
属性是指对指定的对象设置的样式属性，例如字体大小、文本颜色等
属性和属性值之间用英文“:”分开
多个键值对之间用“;”进行区分
1.4：CSS代码风格
1.4.1：样式格式书写
①紧凑格式
所有属性写在一行
②展开格式
一个属性写一行
1.4.2：样式大小写风格
推荐样式选择器、属性名、属性值关键字全部使用小写字母，特殊情况除外
1.4.3：样式空格规范
①属性值的前面，冒号后面，保留一个空格
②选择器（标签）和大括号中间保留空格
二：CSS基础选择器
2.1：CSS选择器的作用
选择器（选择符）就是根据不同需求把不同的标签选出来，这就是选择器的作用
2.2：选择器分类
选择器分为基础选择器和复合选择器两个大类
基础选择器：由单个选择器组成的
基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器
2.3：标签选择器
标签选择器（元素选择器）是指用HTML标签作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式
<!DOCTYPE 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：类选择器
如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器
注意：
①类选择器使用"."（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）
②可以理解为给这个标签起了一个名字
③长名称或词组可以使用短横线来为选择器命名
④不要使用纯数字、中文等命名，尽量使用英文字母来表示
⑤命名要有意义，尽量使别人一眼就知道这个类名的目的
<!DOCTYPE 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>江南Style</li>
</ul>
<div class="red">我也想变红色</div>
</body>
</html>2.5：类选择器-多类名
我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签
简单理解：一个标签有多个名字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多类名的使用方式</title>
<!--
1：可以把一些标签元素相同的样式放到一个类里面
2：这些标签都可以调用这个公共的类，然后再调用自己独有的类
3：这种方法节省了CSS的代码量，统一修改，非常方便
-->
<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选择器以"#"来定义
<!DOCTYPE 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"。 |
| font-style |
| 可选。定义字体的样式。默认是 "normal"。 |
| font-weight |
| 可选。定义字体的粗细。默认是 "normal"。 |
| unicode-range | unicode-range | 可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。 |
3.2：CSS Fonts属性用于定义字体系列、大小、粗细和文本样式（如粗体）
<!DOCTYPE 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><!DOCTYPE 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 中使用图片创建边框:
实例：
在 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（表示到最远的角落）。
径向渐变的实例：
语法：
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()方法，根据左(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()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}rotate值（30deg）元素顺时针旋转30度。
8.3：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(<angle> [,<angle>]);
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
- skewX(<angle>);表示只在X轴(水平方向)倾斜。
- skewY(<angle>);表示只在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() 方法
matrix()方法和2D变换方法合并成一个。
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。=
新转换属性
| 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 轴。 |
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
