一、背景
1、背景简写
| 属性名 | background |
| 属性值 | color image repeat position |
| 默认值 | 每个属性的默认值 |
| 描述 | 设置背景图片是否随内容滚动 |
CSS3支持背景半透明的写法语法格式是:
```css
background: rgba(0,0,0,0.3);
```
最后一个参数是alpha 透明度 取值范围 0~1之间
注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不收影响。
2、背景缩放
标记：background-size
/* 使用像素
background-size: 1000px 600px;
/* 设置contain会自动调整缩放比例，保证图片始终完整显示在背景区域 */
background-size: contain;
/* 设置cover会自动缩放比例，使图片始终填充背景区域，如有溢出部分会自动隐藏，我们平时用cover最多 */
background-size: cover;
3、原神官网导航联系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
text-decoration: none;
color: #fff;
}
.nav {
background-color: rgba(17, 17, 17, 0.75);
height: 66px;
text-align: center;
}
.nav a {
font-size: 17px;
display: inline-block;
width: 100px;
height: 66px;
text-align: center;
line-height: 66px;
}
.nav a:hover {
text-shadow: 0 0 10px #69e0ff, 0 0 20px #69e0ff, 0 0 40px #69e0ff;
}
</style>
</head>
<body>
<div class="nav">
<a href="">首页</a>
<a href="">新闻</a>
<a href="">角色</a>
<a href="">世界</a>
<a href="">漫画</a>
<a href="">社区</a>
<a href="">赛事</a>
<a href="">充值中心</a>
</body>
</div>
</html>二、字体图标
- 可以做出跟图片一样可以做的事情,改变透明度、旋转度，等..
- 但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等...
- 本身体积更小，但携带的信息并没有削减。
- 几乎支持所有的浏览器
- 移动端设备必备良药...
**阿里icon font字库**
http://www.iconfont.cn/
这个是阿里巴巴M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。
得到压缩包之后，最后一步，是最重要的一步了， 就是字体文件已经有了，我们需要引入到我们页面中。
1. 首先把 以下4个文件放入到 fonts文件夹里面。 通俗的做法
##### 第一步：在样式里面声明字体： 告诉别人我们自己定义的字体
```css
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
```
##### 第二步：给盒子使用字体
```css
span {
font-family: "icomoon";
}
```
##### 第三步：盒子里面添加结构
```css
span::before {
content: "\e900";
}
或者
<span></span>
```
三、list-style属性
ul {
/* 1、去掉ul小圆点 使用最多*/
list-style-type: none;
/* 2、disc默认 */
/* 3、空心圆 */
list-style-type: circle;
/* 4、方形 */
list-style-type: square;
/* 文本环绕 */
list-style-position: inside;
/* 自己设置图片 */
list-style-image: url();
}
四、CSS三属性
1、层叠性
- 所谓层叠性是指多种CSS样式的叠加,就是css处理冲突的能力。
**一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。**
当同一个元素被两个选择器选中时，CSS会根据选择器的权重决定使用哪一个选择器。权重低的选择器效果会被权重高的选择器效果覆盖（层叠）。
可以这样理解权重：这个选择器对于这个元素的重要性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 当同一个元素被多个选择器选中时，css会根据权重决定选择哪一个选择器 */
#hot {
color: orange;
}
.con {
color: blue;
}
.con {
color: brown;
}
</style>
</head>
<body>
<div class="con" id="hot">王者荣耀策划道歉</div>
</body>
</html>2、继承性
所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。
> 注意：
>
> 1.**所以对于字体、文本属性等网页中通用的样式可以使用继承。**例如，字体、字号、颜色、行距等可以在body元素中统一设置，然后通过继承影响文档中所有文本。
>
> 2.并不是所有的CSS属性都可以继承，例如，下面的属性就不具有继承性：边框、外边距、内边距、背景、定位、元素高属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 继承：字体大小 颜色可以继承 a标签除外 a标签的颜色不继承 line-height */
/* 不具有继承性：边框、外边距、内边距、背景、定位、元素高属性 */
.father {
font-size: 50px;
color: red;
line-height: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">div元素</div>
<a href="son2">链接a元素</a>
</div>
</body>
</html>3、优先级
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题,即考虑权重的问题。
**!important>行内样式表>ID选择器>类选择器>标签选择器>通配符>继承的样式>浏览器默认样式**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 浏览器默认样式<继承的样式<通配符选择器<标签选择器<id选择器<行内样式<!important*/
div {
color: red !important;
}
* {
color: yellow;
}
.father {
color: blue;
}
#main {
color: blueviolet;
}
</style>
</head>
<body>
<div class="father">
<div class="con" id="main" style="color: aqua;">你是否在深夜辗转难眠-你在思考？你的人生？你的灵魂伴侣？还是接下来的路</div>
</div>
</body>
</html>4、css的权重
在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：
- 继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
- 行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
- 权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
- CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。
| 继承或者* 的贡献值 | 0,0,0,0 |
| ------------------------ | -------- |
| 每个元素（标签）贡献值为 | 0,0,0,1 |
| 每个类，伪类贡献值为 | 0,0,1,0 |
| 每个ID贡献值为 | 0,1,0,0 |
| 每个行内样式贡献值 | 1,0,0,0 |
| 每个!important贡献值 | ∞ 无穷大 |
**权重是可以叠加的**
比如的例子：
| 选择器 | 权重 |
| ---------- | ------- |
| div ul li | 0,0,0,3 |
| .nav ul li | 0,0,1,2 |
| a:hover | 0,0,1,1 |
| .nav a | 0,0,1,1 |
| #nav p | 0,1,0,1 |
> 注意:
>
> 1.数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。
>
> 2.继承的权重是 0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 标签 0,0,0,1 */
/* div ul li 0,0,0,3*/
/* 类 0,0,1,0 */
/* .main 0,0,1,0 */
/* id 0,1,0,0 */
/* .main ul li span 0,0,1,3 */
/* 行内 1,0,0,0 */
ul li a span {
/* 0,0,0,4 */
color: red;
}
*/ ul li a {
/* 0,0,0,3 */
color: blue;
}
/* 当鼠标悬停时字体颜色为蓝色 */
ul li span:hover {
/* 0,0,1,3 */
color: aqua;
}
.nav li a span {
/* 0,0,1,3 */
color: rgb(16, 230, 127);
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><span><a href="">你好</a></span></li>
</ul>
</div>
<ul class="nav">
<li>
<a href="">
<span>业务展示</span>
</a>
</li>
</ul>
</body>
</html>五、盒子模型（css重点）
其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。
1、盒子模型的组成部分
盒子模型组成部分：content（宽高） padding（内边距） border（边框） margin（外边距）
2、边框
```
border : border-width || border-style || border-color
```
属性值：
实线：solid
虚线：dashed
点线：dotted
双实线：double
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 100px;
}
.con {
/* 粗细 边框样式 边框颜色 */
/* 实线 */
border: 10px solid red;
}
.con1 {
/* 虚线 */
border: 10px dashed blue;
}
.con2 {
/* 点线 */
border: 10px dotted yellow;
}
.con3 {
/* 双实线 */
border: 10px double green;
}
</style>
</head>
<body>
<div class="con">边框样式1</div>
<div class="con1">边框样式2</div>
<div class="con2">边框样式3</div>
<div class="con3">边框样式4</div>
</body>
</html>边框的四个方向
border-top \ border-left \ border-right \ border-bottom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 100px;
margin: 20px;
background-color: pink;
}
.con1 {
/* 上 */
border-top: 2px solid red;
}
.con2 {
/* 左 */
border-left: 2px solid red;
}
.con3 {
/* 右 */
border-right: 2px solid red;
}
.con4 {
/* 下 */
border-bottom: 2px solid red;
}
</style>
</head>
<body>
<!-- .con${边框$}*4 -->
<div class="con1">边框1</div>
<div class="con2">边框2</div>
<div class="con3">边框3</div>
<div class="con4">边框4</div>
</body>
</html>圆角边框
```css
border-radius: 左上角 右上角 右下角 左下角;
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 100px;
margin: 20px;
background-color: pink;
}
.con1 {
/* border-radius: 10px 10px 10px 10px ; */
/* 左上 右上 右下 左下 */
border-radius: 10px;
}
.con2 {
border-radius: 10px 20px 30px 40px;
}
.con3 {
width: 200px;
height: 200px;
/* 圆 */
border-radius: 50%;
}
</style>
</head>
<body>
<div class="con1">con1</div>
<div class="con2">con2</div>
<div class="con3">con3</div>
</body>
</html>3、内边距
padding属性用于设置内边距。 **是指 边框与内容之间的距离。**
```css
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.con {
width: 200px;
height: 100px;
margin: 20px;
background-color: pink;
/* 1个值：上下左右都一样 */
padding: 20px;
/* 2个值：上下 左右 */
padding: 10px 20px;
/* 3个值：上 左右 下 */
padding: 10px 20px 30px;
/* 4个值：上 右 下 左 */
padding: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div class="con">内边距</div>
</body>
</html>未完待续。。。
扫一扫
615
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
