CSS

目录

• CSS
• 1 CSS的定义
• 2 CSS的注释
• 3 CSS的语法结构
• 4 CSS的三种引入方式
• 5 CSS选择器
  • 5.1 基本选择器
    • 5.1.1 id选择器
    • 5.1.2 类选择器
    • 5.1.3 元素(标签)选择器
    • 5.1.4 通用选择器
  • 5.2 组合选择器
    • 5.2.1 后代选择器
    • 5.2.2 儿子选择器
    • 5.2.3 毗邻选择器
    • 5.2.4 弟弟选择器
  • 5.3 属性选择器
  • 5.4 伪类选择器
  • 5.5 伪元素选择器
  • 5.6 选择器的分组与嵌套
  • 5.7 选择器优先级
• 6 css属性相关
  • 6.1 高度、宽度属性
  • 6.2 字体属性
  • 6.3 文字属性
  • 6.4 背景图片
  • 6.5 边框
  • 6.6 display属性
  • 6.7 盒子模型
  • 6.8 浮动
  • 6.9 解决浮动带来的影响
  • 6.10 溢出属性
  • 6.11 定位
    • 6.11.1 静态static
    • 6.11.2 相对定位 relative
    • 6.11.3 绝对定位absolute (常用)
    • 6.11.4 固定定位fixed (常用)
  • 6.12 验证浮动和定位是否脱离文档流(原来的位置是否还保留)
  • 6.13 z-index模态框
  • 6.14 透明度opacity

CSS

1 CSS的定义

css就是层叠样式表(Cascading Style Sheets)

它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力

简单地说就是给HTML标签添加样式，让它变的更加的好看

2 CSS的注释

# 注释
/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/

通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对应的css代码也会很多)
/*这是博客园首页的css样式文件*/
/*顶部导航条样式*/
...
/*左侧菜单栏样式*/
...
/*右侧菜单栏样式*/
...

3 CSS的语法结构

# css的语法结构
选择器 {
  属性1:值1;
  属性2:值2;
  属性3:值3;
  属性4:值4;
}

4 CSS的三种引入方式

# css的三种引入方式

1.style标签内部直接书写
  <style>
        h1  {
            color: burlywood;
        }
  </style>
    
    
2.link标签引入外部css文件(最正规的方式 解耦合)
  <link rel="stylesheet" href="mycss.css">
    
    
3.行内式(一般不用)
  <h1 style="color: green">老板好 要上课吗?</h1>

5 CSS选择器

5.1 基本选择器

5.1.1 id选择器

/*id选择器*/

/*找到id是d1的标签 将文本颜色变成绿黄色*/

#d1 {color: greenyellow;}

5.1.2 类选择器

/*类选择器*/

/*找到class值里面包含c1的标签*/

.c1 {color: red;}

5.1.3 元素(标签)选择器

/*元素(标签)选择器*/

/*找到所有的span标签*/

span {color: red;}

5.1.4 通用选择器

/*通用选择器*/

/*将html页面上所有的标签全部找到*/

* {color: green;}

5.2 组合选择器

"""
在前端 我们将标签的嵌套用亲戚关系来表述层级
  <div>div
        <p>div p</p>
        <p>div p
            <span>div p span</span>
        </p>
        <span>span</span>
        <span>span</span>
  </div>
  div里面的p span都是div的后代
  p是div的儿子
  p里面的span是p的儿子 是div的孙子
  div是p的父亲
  ...
"""

5.2.1 后代选择器

/*后代选择器*/
div span {color: red;}

5.2.2 儿子选择器

/*儿子选择器*/
div>span {color: red;}

5.2.3 毗邻选择器

/*毗邻选择器*/

/*同级别紧挨着的下面的第一个*/

div+span {color: aqua;}

5.2.4 弟弟选择器

/*弟弟选择器*/

/*同级别下面所有的span*/

div~span {color: red;}

5.3 属性选择器

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

/*将所有 含有属性名username 的标签 背景色改为红色*/
[username] {background-color: red;}



/*找到所有 含有属性名username 并且 属性值是jason 的标签*/
[username='jason'] { background-color: orange;}



/*找到所有 含有属性名username 并且属性值是jason的input标签*/
/*注意: input后不能加空格*/
input[username='jason'] {background-color: wheat;}

5.4 伪类选择器

/*网址访问前的状态: 		a:link */
a:link {color: yellow}


/*鼠标悬浮在a标签上时的状态: 		a:hover*/
/*需要记住*/
a:hover {color: darkgray}


/*鼠标点击a标签后未松的状态:		a:active*/
a:active {color: aqua}


/*网址浏览后的状态:			a:visited*/
a:visited {color: red}


/*其他标签也能使用悬浮态*/
p:hover {color: blue;}


/*input框获取焦点 状态		(鼠标点击,进入了input框的状态)*/
input:focus {color: yellow;background-color: aqua}

5.5 伪元素选择器

/*修改第一个字的样式,部分符号不算第一个字,即可能连特殊符号和第一个字一起改变样式*/
p:first-letter {font-size: 48px;color: orange;}


/*在p标签开头 用css添加内容   该内容无法选中*/
p:before {content: '你说的对';color: blue;}


/*在p标签末尾 用css添加内容   该内容无法选中*/
p:after {content: '雨露均沾';color: orange;}



ps:before和after通常都是用来清除浮动带来的影响:父标签塌陷的问题(后面马上讲)

5.6 选择器的分组与嵌套

/*分组*/
/*逗号表示并列关系*/
div,p,span {color: yellow;}

d1,.c1,span {color: orange;}

/*嵌套*/

div p span {color: yellow;}
/*div标签内的p标签内的span标签 文字改成黄色*/

d1 .c1 span {color: orange;}
/*id为d1的标签内的属于c1类的标签内的span标签 文字改成橘色*/

5.7 选择器优先级

1.选择器相同 使用不同方式选中同一个标签时:
    就近原则:谁离标签更近就听谁的
    因为多次规定同一个标签的样式会产生覆盖的效果
    
    
2.选择器不同 都选中了同一个标签时:
    行内 > id选择器  > 类选择器 > 标签选择器
    精确度越高越有效

6 css属性相关

6.1 高度、宽度属性

/*块儿级标签能设置高度和宽度*/
p {
    background-color: red;
    height: 200px;
     400px;
}



/*行内标签无法设置长宽 就算写了 也不会生效*/
span {
    background-color: green;
    height: 200px;
     400px;
}

6.2 字体属性

字体类型,字体大小,字体粗细,字体颜色

p {
    /*字体类型设置*/
    font-family: "Arial Black","微软雅黑","..."; 
    /*如果第一个不生效,就使用第二个字体类型  可以写多个备用*/
    
    
    
    /*字体大小设置*/
    font-size: 24px;  
    
    
    
    /*字体粗细设置*/
    font-weight: inherit;  
    /*bolder粗 lighter细 也可以写100~900的数字 inherit继承父元素的粗细值*/
    
    
    
    /*字体颜色设置*/
    color: red;      /*1. 直接写颜色英文*/
    color: #ee762e;  /*2. 颜色编号*/
    color: rgb(128,23,45);  /*3. 三基色 数字  范围0-255*/
    color: rgba(23, 128, 91, 0.9);  /*4. 第四个参数是颜色的透明度 范围是0-1*/
    }
    
    
    /*
    
    当你想要查看某种颜色,可以利用现成的工具
        1 pycharm提供的取色器
        2 qq或者微信截图功能
        3 多软件结合使用 
        
    */

6.3 文字属性

文本居中,左对齐,右对齐,两端对齐

文本添加下划线,上划线,删除线,取消装饰线

文本字体大小,文本首行缩进

注意: a标签删除链接的下划线方法

p {
    /*文本居中*/
    text-align: center; 
    /*文本右对齐*/
    text-align: right;
    /*文本左对齐*/
    text-align: left;
    /*文本两端对齐*/
    text-align: justify;
    
    /*文本添加下划线*/
    text-decoration: underline;
    /*文本添加上划线*/
    text-decoration: overline;
    /*文本添加删除线*/
    text-decoration: line-through;
    /*文本取消所有装饰线*/
    text-decoration: none;
    
    /*在html中 有很多标签渲染出来的样式效果是一样的*/
    
    /*文本字体大小*/
    font-size: 16px;
    /*文本首行缩进*/
    text-indent: 32px;   /*缩进32px*/
    }



/*主要用于给a标签链接去掉自带的下划线  需要掌握*/
a {text-decoration: none;}

6.4 背景图片

background-image: url("222.png");

#d1 {
    height: 500px;
    background-color: red;
	}

#d2 {
    height: 500px;
    background-color: green;
	}

#d3 {
    height: 500px;
    /*添加背景图片	background-image: url("222.png");	*/
    background-image: url("222.png");
    
    /*产生高级效果*/
    background-attachment: fixed;
	}

#d4 {
    height: 500px;
    background-color: aqua;
	}


<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>

6.5 边框

设置 上下左右 边框的 宽度,颜色,边框类型

p {
    background-color: red;
    border- 5px;
    border-style: solid;
    border-color: green;
}


div {
    border-left- 5px;
    border-left-color: red;
    border-left-style: dotted;

    border-right- 10px;
    border-right-color: greenyellow;
    border-right-style: solid;

    border-top- 15px;
    border-top-color: deeppink;
    border-top-style: dashed;

    border-bottom- 10px;
    border-bottom-color: tomato;
    border-bottom-style: solid;
    border: 3px solid red;  /*三者位置可以随意写*/
}


#d1 {
    background-color: greenyellow;
    height: 400px;
     400px;
    border-radius: 50%;  /*直接写50%即可 长宽一样就是圆 不一样就是椭圆*/
}




<p>穷人  被diss到了  哭泣.png</p>
<div>妈拉个巴子,妈拉个巴子,妈拉个巴子,妈拉个巴子</div>
<div id="d1"></div>

6.6 display属性

#d1 {
    display: none;    /*隐藏标签不展示到前端页面并且原来的位置也不再占有了 但是还存在于文档上*/
    display: inline;  /*将标签设置为行内标签的特点*/
    display: block;  /*将标签设置成块儿级标签的特点*/
    display: inline-block;  /*标签即可以在一行显示又可以设置长宽*/
}

#d2 {
    display: inline;
}

#d1 {
    display: block;  /*将标签设置成块儿级标签的特点*/
}

#d2 {
    display: block;
}

#d1 {
    display: inline-block;
}

#d2 {
    display: inline-block;  /*标签即可以在一行显示又可以设置长宽*/
}



注意:
<div style="visibility: hidden">单纯的隐藏 位置还在</div>  
这个和display: none;的隐藏不一样



<div style="display: none">div1</div>
<div>div2</div>
<div>div4</div>
<div id="d1" style="height: 100px; 100px;background-color: red">01</div>
<div id="d2" style="height: 100px; 100px;background-color: greenyellow">02</div>
<span id="d1" style="height: 100px; 100px;background-color: red">span</span>
<span id="d2" style="height: 100px; 100px;background-color: greenyellow">span</span>

<div id="d1" style="height: 100px; 100px;background-color: red">01</div>
<div id="d2" style="height: 100px; 100px;background-color: greenyellow">02</div>

6.7 盒子模型

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

body {
    margin: 0;  /*上下左右全是0*/
    margin: 10px 20px;  /* 第一个上下 第二个左右*/
    margin: 10px 20px 30px;  /*第一个上  第二个左右  第三个下*/
    margin: 10px 20px 30px 40px;  /*上 右 下 左*/
}
p {
    margin-left: 0;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
}

#d1 {
    margin-bottom: 50px;
}


#d2 {
    margin-top: 20px;  /*不叠加 只取大的*/
}

#dd {
    margin: 0 auto;  /*只能做到标签的水平居中*/
}
p {
    border: 3px solid red;
    padding-left: 10px;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 50px;

    padding: 10px;
    padding: 10px 20px;
    padding: 10px 20px 30px;
    padding: 10px 20px 30px 40px;  规律和margin一模一样
}





<p style="border: 1px solid red;" id="d1">ppp</p>
<p style="border: 1px solid orange;" id="d2">ppp</p>
<div style="border: 3px solid red;height: 400px; 400px">
<div id='dd' style="border: 1px solid orange;height: 50px; 50px;background-color: blue;"></div>
</div>

<p>ppp</p>

6.8 浮动

"""浮动的元素 没有块儿级一说 本身多大浮起来之后就只能占多大"""
只要是设计到页面的布局一般都是用浮动来提前规划好

body {
    margin: 0;
}
#d1 {
    height: 200px;
     200px;
    background-color: red;
    float: left;  /*浮动  浮到空中往左飘*/
}
#d2 {
    height: 200px;
     200px;
    background-color: greenyellow;
    float: right;   /*浮动 浮到空中往右飘*/
}



ps:浏览器是优先展示文本内容的
    如果下层标签中的文本内容被上层标签遮盖住,可能会自动改变形状大小,使文本能被用户看到

6.9 解决浮动带来的影响

# 浮动带来的影响:
# 会造成父标签塌陷的问题

"""
解决浮动带来的影响 推导步骤
	第一种.自己加一个div设置高度
	太麻烦
	
	
	第二种.利用clear属性
		#d4 {
            clear: left;  /*该标签的左边(地面和空中)不能有浮动的元素*/
        }
     还可以改进



通用的解决浮动带来的影响方法:
  	在写html页面之前 先提前写好处理浮动带来的影响的 css代码
  	.clearfix:after {
            content: '';
            display: block;
            clear:both;
        }
    之后只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可
    上述的解决方式是通用的 到哪都一样 并且名字就叫clearfix
"""

6.10 溢出属性

标签的内容超出标签的大小时会出现溢出的问题

可以使用overflow属性对超出部分进行设置

p {
height: 100px;
 50px;
border: 3px solid red;
overflow: visible;  /*默认就是可见 溢出还是展示*/
overflow: hidden;  /*溢出部分直接隐藏*/
overflow: scroll;  /*设置成上下滚动条的形式*/
overflow: auto;		/*自动设置(滚动条)*/
}

6.11 定位

定位可以有三种定位方法

在未定位前是静态,定位后是另一个状态

left: 20px 左边留20px

right: 20px 右边留20px

top: 20px 上边留20px

bottom: 20px 下边留20px

position: static 无法修改位置

position: relative 相对该标签的原来位置修改 不脱离文档流(不浮动)

position: absolute 以该标签的父类为基准修改 脱离文档流(浮动)

position: fixed 以整个显示页面为基准修改,固定不动 脱离文档流(浮动)

6.11.1 静态static

所有的标签默认都是静态的static，无法改变位置

6.11.2 相对定位 relative

相对于标签原来的位置做移动relative

6.11.3 绝对定位absolute (常用)

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

eg:小米网站购物车

注意点: 使用绝对定位时, 父标签必须定位过(除了body),不能是静态

当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签左定位

6.11.4 固定定位fixed (常用)

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

eg:右侧小广告

/*相对定位*/

#d1 {
    height: 100px;
     100px;
    background-color: red;
    left: 50px;  /*从左往右   如果是负数 方向则相反*/
    top: 50px;  /*从上往下    如果是负数 方向则相反*/
    /*position: static;  !*默认是static无法修改位置*!*/
    position: relative;
    /*相对定位,以当前标签位置为参照
    标签由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标签
    虽然哪怕没有动 但是性质也已经改变了
    */
}



#d2 {
    height: 100px;
     200px;
    background-color: red;
    position: relative;  /*父标签已经定位过了*/
}



/*绝对定位*/
#d3 {
    height: 200px;
     400px;
    background-color: yellowgreen;
    position: absolute;  /*以父标签为参照*/
    left: 200px;
    top: 100px;
}



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

    height: 50px;
     100px;
    background-color: white;
    border: 3px solid black;
}

6.12 验证浮动和定位是否脱离文档流(原来的位置是否还保留)

"""
验证浮动和定位是否脱离文档流
    浮动
    相对定位
    绝对定位
    固定定位
"""

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

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

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

6.13 z-index模态框

eg:百度登陆页面 其实是三层结构
  1.最底部是正常内容(z=0)   最远的
  2.黑色的透明区(z=99)  	 中间层
  3.白色的注册区域(z=100)   离用户最近

<!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;
        }
        .cover {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.5);
            z-index: 99;
        }
        .modal {
            background-color: white;
            height: 200px;
             400px;
            position: fixed;
            left: 50%;
            top: 50%;
            z-index: 100;
            
            /*调完50%后会发现div标签的左上角处于屏幕中间*/
            margin-left: -200px;
            margin-top: -100px;

        }
    </style>
</head>
<body>
<div>这是最底层的页面内容</div>
<div class="cover"></div>
<div class="modal">
    <h1>登陆页面</h1>
    <p>username:<input type="text"></p>
    <p>password:<input type="text"></p>
    <button>点我点我~</button>
</div>
</body>
</html>

6.14 透明度opacity

# 它不单单可以修改颜色的透明度还同时修改字体的透明度
rgba只能影响颜色 
而opacity可以修改颜色和字体

opacity: 0.5;