CSS基础

CSS介绍

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

CSS语法

一、CSS语法

每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

/*css语法结构*/

选择器 {
  属性1:值1;
  属性2:值2;
  属性3:值3;
  属性4:值4;
}

二、CSS注释

/*单行注释*/

/*
多行注释
*/

通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对应的css代码也会很多)

注释是代码之母。

三、CSS的几种引入方式

1、行内样式（基本不用）

行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。

<p style="color: red">Hello world.</p>

2、内部样式（教学使用）

嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

3、外部样式（最正规）

外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

CSS选择器

"""
css的学习流程
	1.先学如何查找标签
		css查找标签的方式你一定要学会
		因为后面所有的框架封装的查找语句都是基于css来的
		css选择器很简单很好学不要有压力!!!
	
	2.之后再学如何添加样式
"""

一、基本选择器

1、元素/标签选择器

p {	#找到所有的p标签，并修改其样式
	color: "red";
}

2、ID选择器

#i1 {	#找到id是i1的标签，并改变其样式
  background-color: red;
}

3、类选择器

.c1 {	#找到标签中calss属性为c1的标签，并修改其样式
  font-size: 14px;
}p.c1 {  color: red;}

注意：

样式类名不要用数字开头（有的浏览器不认）。

标签中的class属性如果有多个，要用空格分隔。

4、通用选择器（基本不用）

* {	#将html页面商所有的标签都修改样式
  color: white;
}

二、组合选择器

以下选择器都可以使用id、class属性进行指定操作

1、后代选择器

/*li内部的所有a标签设置字体颜色*/
li a {
  color: green;
}

2、儿子选择器

/*选择所有父级是 <div> 元素的 <p> 元素*/
div>p {
  font-family: "Arial Black", arial-black, cursive;
}

3、毗邻选择器

/*选择所有紧接着<div>元素之后的第一个<p>元素*/
div+p {
  margin: 5px;
}

4、弟弟选择器

/*i1后面所有的兄弟p标签*/
#i1~p {
  border: 2px solid royalblue;
}

三、属性选择器

"""
1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签
"""
# 属性选择器是以[]作为标志的

/*用于选取带有指定属性的元素。*/
p[title] {
  color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
  color: green;
}

/*找到所有title属性以hello开头的元素*/
[title^="hello"] {
  color: red;
}

/*找到所有title属性以hello结尾的元素*/
[title$="hello"] {
  color: yellow;
}

/*找到所有title属性中包含（字符串包含）hello的元素*/
[title*="hello"] {
  color: red;
}

/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
[title~="hello"] {
  color: green;
}

四、伪类选择器

/* 未访问的链接 */
a:link {
  color: #FF0000
}

/* 鼠标移动到链接上 */
a:hover {
  color: #FF00FF
} 

/* 选定的链接，鼠标点击不松开的状态 */ 
a:active {
  color: #0000FF
}

/* 已访问的链接 */
a:visited {
  color: #00FF00
} 

/*input输入框获取焦点时样式*/
input:focus {
  outline: none;
  background-color: #eee;
}

五、伪元素选择器

1、first-letter

常用的给首字母设置特殊样式：

p:first-letter {
  font-size: 48px;
  color: red;
}

2、before

/*在每个<p>文本内容之前插入内容*/
p:before {
  content:"*";	#插入的内容
  color:red;	#插入的内容的颜色
}

3、after

/*在每个<p>文本内容之后插入内容*/
p:after {
  content:"[?]";	#插入的内容
  color:blue;		#插入的内容的颜色	
}

before和after多用于清除浮动带来的影响:父标签塌陷的问题

六、选择器的优先级

我们上面学了很多的选择器，也就是说在一个HTML页面中有很多种方式找到一个元素并且为其设置样式，那浏览器根据什么来决定应该应用哪个样式呢？

其实是按照不同选择器的权重来决定的，具体的选择器权重计算方式如下图：

除此之外还可以通过添加 !important方式来强制让样式生效，但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护。

万不得已可以使用!important

1.选择器相同 书写顺序不同
	就近原则:谁离标签更近就听谁的
2.选择器不同 ...
	行内 > id选择器  > 类选择器 > 标签选择器
	精确度越高越有效

分组和嵌套

一、分组

当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

例如：

div, p {
  color: red;
}

上面的代码为div标签和p标签统一设置字体为红色。

通常，我们会分两行来写，更清晰:

div,
p {
  color: red;
}

二、嵌套

多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。

.c1 p {
  color: red;
}

CSS继承

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中。

body {
  color: red;
}

此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。

我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。

p {
  color: green;
}

此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。

CSS属性相关

一、宽和高

width属性可以为元素设置宽度。

height属性可以为元素设置高度。

块级标签才能设置宽度，内联/行内标签的宽度由内容来决定。

二、字体属性

1、文字字体

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。

简单实例：

body {
  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}

2、字体大小

p {
  font-size: 14px;
}

如果设置成inherit表示继承父元素的字体大小值。

3、字重（粗细）

font-weight用来设置字体的字重（粗细）。

值	描述
normal	默认值，标准粗细
bold	粗体
bolder	更粗
lighter	更细
100~900	设置具体粗细，400等同于normal，而700等同于bold
inherit	继承父元素字体的粗细值

4、文本颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

color: red;  /*直接写颜色英文*/

color: #ee762e; /*颜色编号*/

color: rgb(128,23,45);  /*三基色 数字  范围0-255*/
            
color: rgba(23, 128, 91, 0.9);  /*第四个参数是颜色的透明度 范围是0-1*/

/*当你想要一些颜色的时候 可以利用现成的工具
	1.pycharm提供的取色器
	2.qq或者微信截图功能
也可以多软件结合使用 
*/

三、文字属性

1、文字对齐

text-align 属性规定元素中的文本的水平对齐方式。

值	描述
left	左边对齐默认值
right	右对齐
center	居中对齐
justify	两端对齐

2、文字装饰

text-decoration 属性用来给文字添加特殊效果。

值	描述
none	默认，没有装饰，定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本的一条线。
inherit	继承父元素的text-decoration属性的值。

常用的为去掉a标签默认的自划线：

a {
  text-decoration: none;
}

3、首行缩进

将段落的第一行缩进 32像素：

p {
  text-indent: 32px;
}

四、背景属性

/*背景颜色*/
background-color: red;

/*背景图片*/
background-image: url('1.jpg');

/* 
背景重复 
repeat(默认):背景图片平铺排满整个网页 
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺 
no-repeat：背景图片不平铺

其实浏览器并不是一个平面，是一个三维立体结构
Z轴指向用户，初始值为0，值越大离用户越近
*/
background-repeat: no-repeat; 

/*背景位置*/
background-position: left top;
/*
background-position: 200px 200px;
    第一个200px控制左右
    第二个200px控制上下

background-position:center center;
	center于左右居中
	center于上下居中

	bottom：底
	top：顶
	left：左
	right：右
	center：居中
*/

/*背景图片锁定*/
backgroup-attachment: fixed;

支持简写：

background:#336699 url('1.png') no-repeat left top;

使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。

五、边框

边框属性

border-width：设置边框宽度
border-style：设置边框的样式
border-color：设置边框的颜色

#i1 {
  border-width: 2px;
  border-style: solid;
  border-color: red;
}

通常使用简写方式：

#i1 {
  border: 2px solid red;
}

边框样式

值	描述
none	无边框。
dotted	点状虚线边框。
dashed	矩形虚线边框。
solid	实线边框。

除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：

#i1 {
  border-top-style:dotted;
  border-top-color: red;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;
  
  	bottom：底
	top：顶
	left：左
	right：右
	center：居中
}

1、border-radius

用这个属性能实现圆角边框的效果。

将border-radius设置为长或高的一半即可得到一个圆形。

#d1 {
	backgroup-color: greenyellow;
	height: 400px;
    width: 400px;
    border-radius: 50%;
    /*border-radius: 200px 亦可*/

}

六、display属性

用于控制HTML元素的显示效果。

值	意义
display:"none"	HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block"	默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline"	按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block"	使元素同时具有行内元素和块级元素的特点。

display:"none"与visibility:hidden的区别：

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

CSS盒子模型

margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding: 用于控制内容与边框之间的距离；
Border(边框): 围绕在内边距和内容外的边框。
Content(内容): 盒子的内容，显示文本和图像。

看图吧：

例如快递盒子：

"""
盒子模型
	就以快递盒为例
		快递盒与快递盒之间的距离(标签与标签之间的距离 margin外边距)
		盒子的厚度(标签的边框 border)
		盒子里面的物体到盒子的距离(内容到边框的距离  padding内边距)
		物体的大小(内容 content)
	
	
	如果你想要调整标签与标签之间的距离 你就可以调整margin
	
	浏览器会自带8px的margin，一般情况下我们在写页面的时候，上来就会先将body的margin去除
	
"""

一、margin外边距

.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}

推荐使用简写：

.margin-test {
  margin: 5px 10px 15px 20px;
}

顺序：上右下左

常见居中：

.mycenter {
  margin: 0 auto;	#margin只用用于水平居中，竖直居中无法做到
}

二、padding内填充

.padding-test {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}

推荐使用简写：

.padding-test {
  padding: 5px 10px 15px 20px;
}

顺序：上右下左

补充padding的常用简写方式：

提供一个，用于四边；
提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边；

三、float

在 CSS 中，任何元素都可以浮动。

浮动元素没有块儿级一说，该框有多大就占多大，而不论它本身是何种元素。

关于浮动的两个特点：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

只要是设计到页面的布局一般都是用浮动来提前规划好

1、三种取值

left：向左浮动

right：向右浮动

none：默认值，不浮动

参考示例

四、clear

clear属性规定元素的哪一侧不允许其他浮动元素。

值	描述
left	在左侧不允许浮动元素，包括地面和空中
right	在右侧不允许浮动元素，包括地面和空中
both	在左右两侧均不允许浮动元素，包括地面和空中
none	默认值。允许浮动元素出现在两侧，包括地面和空中
inherit	规定应该从父元素继承 clear 属性的值，包括地面和空中

注意：clear属性只会对自身起作用，而不会影响其他元素。

四、父级标签塌陷

body{
     margin:0;
 }
 .box-1{
     width:300px;
     background-color:#333;
 }
 .box-2{
     float:left;
     width:200px;
     height:300px;
     background-color:#ccc;
 }
<div class="box-1">
      <div class="box-2"></div>
  </div>

'''
如果父级标签没有设置height属性，那么对于一个没有设置height属性的标签，他的高度是由内容撑开的

这意味着，如果子标签设置height: 300px，那么父级标签也应该显示 300px高度，但是因为浮动的原因，子标签脱离了文档流，所以父级标签无法获取到子标签的高度

从而引发了子标签浮动在父标签头上，引起父标签高度塌陷问题
'''

清除浮动的方法
	1. 在子元素的最后添加一个高度为0的子元素，并且让他清除浮动

body{
     margin:0;
 }
 .box-1{
     width:300px;
     background-color:#f00;
 }
 .box-2{
     float:left; 
     width:200px;
     height:150px;
     background-color:#ff0;
 }
 .box-3{
     clear:both;
 }
<div class="box-1">
        <div class="box-2"></div>
        <div class="box-3"></div>
    </div>
    
    2. 给父级标签设置display: inline-block;
    3. 给父级标签设置overflow:hidden;
    '''
    上面这两种方法其实是根据BFC（块级格式化上下文），因为BFC会让父元素包含浮动的子元素，从而解决父元素高度坍塌问题，所以只要能触发BFC就行
    '''
    4. 给父级标签设置>=浮动子标签的高度即可（不建议）
    5. 利用伪类元素选择器，并且清除浮动、
    
body{
     margin:0;
 }
 .box-1{
     width:300px;
     background-color: red;
     overflow: hidden;
 }
 .box-1:after {
     content: "";
     clear: both;
     display: block;
 }
 .box-2{
     float:left;
     width:200px;
     height:300px;
     background-color:#ccc;
 }
<div class="box-1">
      <div class="box-2"></div>
    <div class="box-3"></div>
  </div>

五、overflow溢出属性

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且溢出内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会自动显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

overflow（水平和垂直均设置）
overflow-x（设置水平方向）
overflow-y（设置垂直方向）

1、圆形头像示例

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>圆形的头像示例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      background-color: #eeeeee;
    }
    .header-img {
      width: 150px;
      height: 150px;
      border: 3px solid white;
      border-radius: 50%;
      overflow: hidden;
    }
    .header-img>img {
      width: 100%;
    }
  </style>
</head>
<body>

<div class="header-img">
  <img src="https://pic.cnblogs.com/avatar/1342004/20180304191536.png" alt="">
</div>

</body>
</html>

六、定位（position）

静态（static）

所有的标签默认都是静态的static，无法改变位置
相对定位(了解)（relative）

相对于标签原来的位置做移动relative
绝对定位(常用)（absolute）

相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照)

eg:小米网站购物车

当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签左定位
固定定位(常用)（fixed）

相对于浏览器窗口固定在某个位置

eg:右侧小广告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;
        }
        #d1 {
            height: 100px;
            width: 100px;
            background-color: red;
            left: 50px;  /*从左往右   如果是负数 方向则相反*/
            top: 50px;  /*从上往下    如果是负数 方向则相反*/
            /*position: static;  !*默认是static无法修改位置*!*/
            position: relative;
            /*相对定位
            标签由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标签
            虽然你哪怕没有动 但是你的性质也已经改变了
            */
        }

        #d2 {
            height: 100px;
            width: 200px;
            background-color: red;
            position: relative;  /*已经定位过了*/
        }
        #d3 {
            height: 200px;
            width: 400px;
            background-color: yellowgreen;
            position: absolute;
            left: 200px;
            top: 100px;
        }

        #d4 {
            position: fixed;  /*写了fixed之后 定位就是依据浏览器窗口*/
            bottom: 10px;
            right: 20px;

            height: 50px;
            width: 100px;
            background-color: white;
            border: 3px solid black;
        }
    </style>
</head>
<body>
<!--    <div id="d1"></div>-->

<!--<div id="d2">-->
<!--    <div id="d3"></div>-->
<!--</div>-->

<div style="height: 500px;background-color: red"></div>
<div style="height: 500px;background-color: greenyellow"></div>
<div style="height: 500px;background-color: blue"></div>
<div id="d4">回到顶部</div>

</body>
</html>

ps:浏览器是优先展示文本内容的

5、是否脱离文档流

"""
浮动
相对定位
绝对定位
固定定位
"""
# 不脱离文档流
	1.相对定位
# 脱离文档流
	1.浮动
  	2.绝对定位
  	3.固定定位
  
<!--<div style="height: 100px;width: 200px;background-color: red;position: relative;left: 500px"></div>-->
<!--<div style="height: 100px;width: 200px;background-color: greenyellow"></div>-->

<!--<div style="height: 100px;width: 200px;background-color: red;"></div>-->
<!--<div style="height: 100px;width: 200px;background-color: greenyellow;position: absolute;left: 500px"></div>-->
<!--当没有父标签做定位 就参照与body-->
<!--<div style="height: 100px;width: 200px;background-color: blue;"></div>-->

<div style="height: 100px;width: 200px;background-color: red;"></div>
<div style="height: 100px;width: 200px;background-color: greenyellow;position: fixed;bottom: 10px;right: 20px"></div>
<div style="height: 100px;width: 200px;background-color: blue;"></div>

绝对定位

固定定位

上述例子可知：

脱离文档流：