CSS学习

一瓢凉水爽

# 1、什么是CSS

如何学习

1. CSS是什么
2. CSS怎么用（快速入门）
3. CSS选择器（重点+难点）
4. 美化网页（文字，阴影，超链接，列表，渐变....）
5. 盒子模型
6. 浮动
7. 定位
8. 网页动画（特效效果）

 

## 1.1、什么是CSS

Cascading Style Sheet层叠级联样式表

CSS：表现（美化网页）

字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动....


 

## 1.2、发展史

CSS1.0

CSS2.0 DIV(块) + CSS，HTML与CSS结构分离的思想，网页变得简单，SEO

CSS2.1 浮动，定位

CSS3.0 圆角，阴影，动画.....浏览器兼容~


 

## 1.3、快速入门

style

**基本入门**

```html

我是标题

```

建议使用这种规范


 

css的优势

1. 内容和表现分离
2. 网页结构表现统一，可以实现复用
3. 样式十分丰富
4. 建议使用独立于html的css文件
5. 利用SEO，容易被搜索引擎收录！

 

## 1.4、CSS的3种导入方式

```html

我是标题

```

拓展：外部样式两种写法

- 链接式：

html

```html


```

- 导入式：

@import 是 CSS2.1特有的

```html


```

 

# 2、选择器

> 作用：选择页面上的某一个或某一类元素

 

## 2.1、基本选择器

1. 标签选择器：选择一类标签 标签{}

```html

学Java

学Java

斯嘉学

```

2. 类选择器 class：选择所有class属性一致的标签，跨标签 .class名{}

```html

标题1

标题2

标题3

P标签

```

3. id选择器：全局唯一！ #id名{}

```html

标题1

标题2

标题3

标题4

标题5

```

 

优先据：id > class > 标签

 

## 2.2、层次选择器

1. 后代选择器：在某个元素的后面 祖爷爷 爷爷 爸爸 你

```css
/*后代选择器*/
body p{
background: red;
}
```

2. 子选择器：一代 儿子

```css
/*子选择器*/
body>p{
background: #009688;
}
```

3. 相邻兄弟选择器：同辈

```css
/*相邻兄弟选择器：只有一个（向下）*/
.active + p{
background: aqua;
}
```

4. 通用选择器

```css
/*通用兄弟选择器，当前选中元素的向下的所有兄弟*/
.active~p{
background: yellow;
}
```

 

## 2.3、结构伪类选择器

 

```css

p1

p2

p3

• li1


• li2


• li3

```


## 2.4、属性选择器(常用)

id + class结合~

```html

1
2
3
4
5
6
7
8
9
10

```


```
=
*=
^=
$=
```

 

# 3、美化网页元素

## 3.1、为什么要美化网页

1、有效的传递页面信息

2、美化网页，页面漂亮，才能吸引用户

3、凸显页面的主题

4、提高用户的体验

 

span标签：重点要突出的字，使用 span 套起来

```html

欢迎学习 Java

```

## 3.2、字体样式

 

```html


```

## 3.3、文本样式

1、颜色 color rgb rgba

2、**文本对齐方式 text-align = center**

3、**首行缩进 text-indent: 2em**

4、**行高 line-height: 单行文字上下居中！** line-height=height

5、装饰 text-decoration

6、文本图片水平对齐：vertical-aling:middle;

```html

光伏发电和规范化风格和德国

123

123123123

123123123

123123123

 

故事介绍

平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。

在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。

Bill is a math teacher.In the morning,he usually goes to work by subway.After lunch,he reads neawspapers.And sometimes,he goes home at 5:30.In the evening,he always waches TV.At 10:00,he goes to bed.

```

 

## 3.4、阴影

```css
/*text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/
#price{
text-shadow: #1fccdc 10px -10px 2px;
}
```

 

## 3.5、超链接伪类

正常情况下，a，a:hover

```css
/*默认的颜色*/
a{
text-decoration: none;
color: #000000;
}
/*鼠标悬浮的状态(只需要记住:hover)*/
a:hover{
color: #009688;
font-size: 50px;
}
```

 

## 3.6、列表

```css
/*ui li*/
/*
list-style:
none 去掉圆点
circle 空心圆
decimal 数字
square 正方形
*/
/*ul{*/
/* background: whitesmoke;*/
/*}*/

ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
```

 

## 3.7、背景

背景颜色

背景图片

```css

```

练习：


## 3.8、渐变

```css
background-color: #85FFBD;
background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
```

 

# 4、盒子模型

## 4.1、什么是盒子模型


margin：外边距

padding：内边距

boeder：边框

 

## 4.2、边框

1、边框的粗细

2、边框的样式

3、边框的颜色

```css

```

 

## 4.3、内外边距

```css

会员登录

用户名：

密码：

邮箱：

```

 

盒子的计算方式：你这个元素到底多大


margin + border + padding + 内容宽度

 

## 4.4、圆角边框

4个角

```html

```

 

## 4.5、盒子阴影

```html

```

 

# 5、浮动

## 5.1、标准文档流

 

块级元素：独占一行

```
h1~h6 p div 列表...
```

 

行内元素：不独占一行

```
span a img strong...
```

行内元素 可以被包含在块级元素中，反之，则不可以

 

## 5.2、dispaly

```html


```

1、这个也是一种实现行内元素排列的方式，但是我们很多情况都是用float

## 5.3、float

1、左右浮动 float

```css
div{
margin:10px;
padding:5px;
}
#father{
border:1px #000 sold;
}
.lsyer01{
border:1px #F00 dashed;
dispaly:inline-block;
float:righr;
}
.lsyer02{
border:1px #00F dashed;
dispaly:inline-block;
float:righr;
}
.lsyer03{
border:1px #660 dashed;
dispaly:inline-block;
float:righr;
}
.lsyer04{
border:1px #666 dashed;
font-size:12px;
line-height:23px;
dispaly:inline-block;
float:righr;
}
```

 

## 5.4、父级边框塌陷的问题

clear

```csss
/*
clear: right; 右侧不允许有浮动元素
clear: left; 左侧不允许有浮动元素
clear: both; 两侧不允许有浮动元素
clear: none;
*/
```

 

解决方案：

1、增加父级元素的高度~

```css
#father{
border: 1px #000 solid;
height:800px
}
```

2、增加一个空div标签，清除浮动

```css

.clear{
clear: both;
marin: 0;
padding: 0;
}
```

3、overflow

```
在父级元素中增加一个 overflow: hidden;
```

4、父级添加一个伪类：after

```css
#father:after{
content: '';
dispaly: block;
clear:both;
}
```

 

**小结：**

1. 浮动元素后面增加空div

简单，代码中尽量避免div

2. 设置父元素高度

简单，元素假设有了固定的高度，就会被限制

3. overflow

简单，下拉的一些场景避免使用

4. 父级添加一个伪类：after（推荐）

写法稍微复杂一点，但是没有副作用，推荐使用。

 

## 5.5、对比

* display

方向不可以控制

* float

浮动起来会脱离标准文档流，所以要解决父级边框塌陷的问题。

 

# 6、定位

## 6.1、相对定位

```html

第一个盒子

第二个盒子

第三个盒子

```

相对定位：postion: relative

相对于原来的位置，进行指定的偏移，相对定位的话，它任然在标准文档流中，原来的位置会被保留

```css
top: -20px;
left: 20px;
bottom: -10px;
right: 20px;
```

### 6.1.1、练习

```html

百度
博客
山河
QQ音乐
网易云

```

效果图：


 

## 6.2、绝对定位

定位：基于xxx定位，上下左右

1、没有父级元素定位的前提下，相对于浏览器定位

2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移

3、在父级元素范围内移动

相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留

```html

第一个盒子

第二个盒子

第三个盒子

```

 

 

## 6.3、固定定位 fixed

```html

div1

div2

```

 

## 6.4、z-index


 

图层~

z-index：默认是0，最高无限~999

```html

• 


• 害怕区一姐，找欣小萌




• 时间：2031-01-01


• 地点：火星一号基地

```

 

opacity: 0.5;/*背景透明度*/

 

```css
#content{
width: 380px;
padding: 0px;
margin: 0px;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px solid #009688;
}
ul,li{
padding: 0px;
margin: 0px;
list-style: none;
}
/*父级元素相对定位*/
#content ui{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width: 380px;
height: 25px;
top: 223px;
}
.tipText{
/*z-index: 999;*/
color: white;
}
.tipBg{
background: black;
opacity: 0.5;/*背景透明度*/
filter: opacity(0.5);/*背景透明度*/
}
```

 

 

# 7、动画

 

# 8、总结

 

 

 

 

 

来源：https://www.cnblogs.com/sijiawork/p/15376470.html