前端的学习笔记CSS_为什么hover只触发了第一个盒子-CSDN博客

本文链接：https://blog.csdn.net/Tang_xSong/article/details/107736427

CSS

HTML + CSS + JavaScript

结构 + 表现 + 交互

SASS：基于Ruby，通过服务端处理，功能强大。解析效率高。需要学习Ruby语言，上手难度高于LESS
LESS：基于NodeJS，通过客户端处理，使用简单。功能比SASS简单，解析效率也低于SASS，但在实际开发中足够了，所以我们后台人员如果需要的话，建议使用LESS
http://lesscss.cn//

1 介绍

学习路线：

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

Cascading Style Sheet层叠级联样式表

CSS：表现（美化网页）

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

在这里插入图片描述

1.1 发展史

CSS1.0

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

CSS2.1 浮动，定位

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

1.2 快速入门

基本入门：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>
<h1>
    Hello World
</h1>
</body>
</html>

CSS单独存储

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ik2a58Un-1596285890597)(C:\Users\Tangs\AppData\Roaming\Typora\typora-user-images\1596162954492.png)]$

CSS的优势

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

1.3 CSS的三种导入方式

优先级：遵循就近原则

直接在标签中添加style属性（行内样式）

外部样式：

连接式：

<link rel="stylesheet" href="CSS/style.css">

导入式
```
<style>
	<@import>
</style>
```

2 选择器

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

2.1 基本选择器

1、标签选择器

标签选择器会选择到页面上所有的指定标签的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="CSS/style.css">
    <style>
        h1{
            color: red;
            background: #121212;
            border-radius: 23px;
        }
    </style>
</head>
<body>
<h1>
    Hello World
</h1>
</body>
</html>

2、类选择器 class

可以多个标签归类，是同一个class，可以复用

格式：类选择器的格式 .class的名称{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="CSS/style.css">
    <style>
        .hello{
            color: red;
            background: #234532;
            border-radius: 3px;
        }
    </style>
</head>
<body>
<h1 class="hello">
    Hello World
</h1>
</body>
</html>

3、id选择器

格式：#id名称{}

不能被复用，全局唯一，只有单一的标签可以使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="CSS/style.css">
    <style>

        #world{
            color: aqua;
        }
    </style>
</head>
<body>
<h1 id="world">
    Hello World
</h1>
</body>
</html>

优先级：（不遵循就近原则）id选择器 > class选择器 > 标签选择器

2.2 层次选择器

后代选择器：在某个元素的后面太爷爷->爷爷->爸爸->你

<style>
    body p{
        color: blueviolet;
    }
</style>
<!--
	body中的字体都会变化
-->

子选择器

<style>
    body>p{
        color: blueviolet;
    }
</style>
<!--
	body中的一代（儿子）才有效
-->

相邻兄弟选择器

<style>
    .active + p{
        color: blueviolet;
    }
</style>
<!--
	.active 下面的P标签才有效
-->

通用选择器

<style>
    .active + p{
        color: blueviolet;
    }
</style>
<!--
	当前选中元素的向下所有兄弟元素
-->

2.3 结构伪类选择器

带冒号的是伪类

<style>
    ul li:last-child{
        color: #1ee731;
    }
    ul li:first-child{
        color: #767071;
    }
</style>

2.4属性选择器（常用）

/*
*=  代表包含
=   代表绝对等于
*/
a[class="links"]{
    /*        
    a标签中包含class，且class=links的元素才会有效
    */
}
a[href^=http]{
    /*
    选中href中以http开头的元素
    */
}
a[href$=pdf]{
    /*
    选中href中以pdf结尾的元素
    */
}

3 美化网页元素

3.1 为什么美化网页

有效传递页面信息
美化网页，页面漂亮，吸引客户
凸显页面主题
提高用户体验

**span标签：**重点突出的字用span标签套起来

3.2 字体样式

font-family：字体

font-size：字体大小

font-weight：字体粗细

color：字体颜色

3.3 文本样式

颜色

单词 red、green

RGB 0~F

RGBA A：0~1
文本对齐方式

text-align：排版居中

行高和块的高度一致，就可以上下居中
首行缩进

text-indent：2em（缩进两个字符）
划线

上下划线: text-decoration
图片

对齐需要有参照物：vertical-align：middle

3.4 超链接伪类

<style>

/* 鼠标悬浮状态 */
a:hover{
    color: orange
}
/* 鼠标按住未释放的状态 */
a:active{
    color: orange
}
</style>

3.5 列表

/*
	list-style:
		none	去掉原点
		circle	空心圆
		decimal	数字 
		square	正方形
*/
ul li{
    height:30px;
    list-style:none;
    text-indent:1em;
}

4 盒子模型

4.1 什么是盒子模型

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VRMUhvnd-1596285890599)(C:\Users\Tangs\AppData\Roaming\Typora\typora-user-images\1596193135019.png)]$

margin：外边距

padding：内边距

border：边框

5 浮动

5.1标准文档流

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jb6qNEQi-1596285890602)(C:\Users\Tangs\AppData\Roaming\Typora\typora-user-images\1596201900344.png)]$

块级元素：独占一行

h1~h6 p div 列表...

行内元素：不独占一行

span a img strong...

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

5.2 display

block 块元素

inline 行内元素

inline-block 是块元素，但是可以内联在一行

none

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

5.3 float

左右浮动
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动，下面的文本流将环绕在它左边：

5.4 父级边框塌陷的问题

由于浮动导致当前标签飘出了父级边框

解决办法：

增加父级元素的高度
```
#father{
    height:1000px;
}
```

overflow

在父级元素中增加一个overflow：hidden；

在父类添加一个伪类：after

#father:after{
    content:''
    display:block;
    clear:both 
}

小结

浮动元素后面增加空div

简单，代码中尽量避免空div
设置父元素的高度

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

简单，下拉的一些场景尽量避免使用
父类添加一个伪类：after（推荐）

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

5.5 对比

display

方向不可以控制
float

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

6 定位

6.1 相对定位

position relative属性

相对原来的位置，进行指定的偏移,相对定位的话，他仍然在标准文档流中，原来的位置会被保留。

top: -20px;
letf: 20px;
bottom: -10px;
right: 20px;

6.2 绝对定位

posotion absolute属性

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

没有父级元素定位的前提下，相对于浏览器定位
假设父级元素存在定位，我们通常会相对于父级元素进行偏移

6.3 固定定位 fixed

position fixed

定位：基于网页的固定不变，下拉网页位置也不会在显示中变化

6.4 z-index

opacity：背景透明度