一.引入css方式
现在的互联网前端分三层:
HTML：超文本标记语言。从语义的角度描述页面结构。
CSS：层叠样式表。从审美的角度负责页面样式。
JS：JavaScript 。从交互的角度描述页面行为
CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
CSS层叠样式表 作用：修饰网页结构
HTML的缺陷：
- 不能够适应多种设备
- 要求浏览器必须智能化足够庞大
- 数据和显示没有分开
- 功能不够强大
HTML的优点：
- 使数据和显示分开
- 降低网络流量
- 使整个网站视觉效果一致
- 使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css）
1.行内样式
行内样式的优先级是最高的
1 <div>2 ????<p style="color: green">我是一个段落</p>3 </div>
2.内接样式
<style type="text/css"> ???/*写我们的css代码*/ ???????????span{ ???color: yellow; ???}</style>3.外接样式--链接式
<link rel="stylesheet" href="./index.css">
4.外接样式--导入式
<style type="text/css"> ???????@import url(‘./index.css‘);</style>
二.CSS的选择器
包括 基本选择器和高级选择器
基本选择器包含:
1.标签选择器 选中的是页面中共性的标签
标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“
body{ ???color:gray; ???}/*标签选择器*/p{ ???color: red;}span{ ???color: yellow;}2.id选择器 选中的是特性 唯一的，不能重复
选中id
同一个页面中id不能重复。
任何的标签都可以设置id
id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA是两个不一样的属性值
1 #box{ 2 ????background:green; 3 } 4 ?????????????5 #s1{ 6 ????color: red; 7 } 8 ?9 #s2{10 ????11 }3.类选择器 选中的也是页面中共性的标签，类名可以有多个
所谓类：就是class . class与id非常相似 任何的标签都可以加类，但是类是可以重复,属于归类的概念。同一个标签中可以携带多个类，用空格隔开
类的使用，能够决定前端工程师的css水平到底有多牛逼？
玩类了，一定要有”公共类“的概念。
<style> .lv{ ????color: green; ?} .big{ ???? } .line{ ???text-decoration: underline; ?}</style> <div> ????????<p >段落1</p> ????????<p >段落2</p> ????????<p >段落3</p> </div>4.通配符选择器 通常是对页面进行重置样式表
总结:
不要去试图用一个类将我们的页面写完.这个标签要携带多个类,共同设置样式
每个类要尽可能的小,有公共的概念,能够让更多的标签使用
尽可能的用class.除非一些的特殊的可以用id
高级选择器包含:
1.后代选择器
使用空格表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style> ???????/*.father p{ ???????????color: red; ???????}*/ ???????.father .wu{ ???????????color: green; ???????} ???</style></head><body> ???<div > ???????<p>alex</p> ???????<ul> ???????????<li> ???????????????<p >wusir</p> ???????????</li> ???????</ul> ???</div> ???<p >日天</p> ???</body></html>2.子代选择器
使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style> ???????/*.father>p{ ???????????color: red; ???????}*/ ???????.father>ul>li{ ???????????width: 100px; ???????} ???????.container{ ???????????color: red; ???????} ???</style></head><body> ???<div > ???????<p>alex</p> ???????<p>alex</p> ???????<p>alex</p> ???????<p>alex</p> ???????<div > ???????????<p>wusir</p> ???????</div> ???????<ul> ???????????<li> ???????????????alex2 ???????????????<ul> ???????????????????<li>wusir</li> ???????????????</ul> ???????????</li> ???????</ul> ???</div> ???<div > ???????<p>日天</p> ???</div></body></html>3.并集选择器
多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素，可以使用并集选择器
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style> ???????/*body{ ??????????? ???????}*/ ???????/**{ ???????????padding: 0; ???????????margin: 0; ???????}*/ ???????body,div,p,a,span{ ???????????padding: 0; ???????????margin: 0; ???????} ???</style></head><body> ???<div> ???????alex ???</div> ???<p>alex2</p> ???<a href="#">日天</a> ???<span>wusir</span> ???</body></html>4.交集选择器
使用.表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器 语法：div.active
比如有一个<h4 class=‘active‘></h4>这样的标签。
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title></title> ???<style> ???????/*div{ ??????????? ???????} ???????.active{ ???????????color: green; ???????} ???????div.active{ ???????????text-decoration: underline; ???????}*/ ???????div{ ???????????color: red; ???????} ???????div.active{ ???????????color: green; ???????} ???</style></head><body> ???<div >alex</div> ???</body></html>它表示两者选中之后元素共有的特性。
5.属性选择器 input[type=‘text‘]
属性选择器，字面意思就是根据标签中的属性，选中当前的标签。
语法:
1 /*根据属性查找*/ 2 ????????????/*[for]{ 3 ????????????????color: red; 4 ????????????}*/ 5 ?????????????6 ????????????/*找到for属性的等于username的元素 字体颜色设为红色*/ 7 ????????????/*[for=‘username‘]{ 8 ????????????????color: yellow; 9 ????????????}*/10 ????????????11 ????????????/*以....开头 ?^*/ 12 ????????????/*[for^=‘user‘]{13 ????????????????color: #008000;14 ????????????}*/15 ????????????16 ????????????/*以....结尾 ??$*/17 ????????????/*[for$=‘vvip‘]{18 ????????????????color: red;19 ????????????}*/20 ????????????21 ????????????/*包含某元素的标签*/22 ????????????/*[for*="vip"]{23 ????????????????color: #00BFFF;24 ????????????}*/25 ????????????26 ????????????/**/27 ????????????28 ????????????/*指定单词的属性*/29 ????????????label[for~=‘user1‘]{30 ????????????????color: red;31 ????????????}32 ????????????33 ????????????input[type=‘text‘]{34 ????????????????background: red;35 ????????????}<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title></title> ???<style> ???????form input[type=‘text‘]{ ???????????background-color: red; ???????} ???????form input[type=‘password‘]{ ???????????background-color: yellow; ???????} ???????form #user{ ???????????background-color: green; ???????????????????} ???</style></head><body> ???????<form action=""> ???????<input type="text" > ???????<input type="password"> ???</form></body></html>6.伪类选择器
伪类选择器一般会用在超链接a标签中，使用a标签的伪类选择器，我们一定要遵循"爱恨准则" LoVe HAte
a:link 没有被访问的
a:visited 访问过后的
a:hover 鼠标悬停的时候
a:active 摁住的时候
1 ??????????????/*没有被访问的a标签的样式*/ 2 ????????.box ul li.item1 a:link{ 3 ?????????????4 ????????????color: #666; 5 ????????} 6 ????????/*访问过后的a标签的样式*/ 7 ????????.box ul li.item2 a:visited{ 8 ?????????????9 ????????????color: yellow;10 ????????}11 ????????/*鼠标悬停时a标签的样式*/12 ????????.box ul li.item3 a:hover{13 ????????????14 ????????????color: green;15 ????????}16 ????????/*鼠标摁住的时候a标签的样式*/17 ????????.box ul li.item4 a:active{18 ????????????19 ????????????color: yellowgreen;20 ????????}<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title></title> ???<style> ???????/*a:hover{ ???????????color: #ff6700 ???????}*/ ???????/*爱恨准则 LoVe HAte*/ ???????/*没有被访问的a标签的颜色*/ ???????a:link{ ???????????color: green; ???????} ???????/*访问过后的a标签的颜色*/ ???????a:visited{ ???????????color: yellow; ???????} ???????/*鼠标悬停的时候a标签的颜色*/ ???????a:hover{ ???????????color: red; ???????} ???????a:active{ ???????????color: blue; ???????} ???????span:hover{ ???????????color: red; ??????????? ???????????text-decoration: underline; ???????} ???????.child{ ???????????display: none; ???????} ???????.father:hover .child{ ???????????color: red; ???????????display: block; ???????} ???</style></head><body> ???<a href="#">百度一下</a> ???<span>alex</span> ???<div > ???????wusir ???????<p >alex</p> ???</div> ???</body></html>一种css3的选择器nth-child()
?????/*选中第一个元素*/ ???????div ul li:first-child{ ??????????? ???????????color: red; ???????} ???????/*选中最后一个元素*/ ???????div ul li:last-child{ ??????????? ???????????color: yellow; ???????} ???????????????/*选中当前指定的元素 ?数值从1开始*/ ???????div ul li:nth-child(3){ ??????????? ???????????color: purple; ???????} ???????????????/*n表示选中所有,这里面必须是n, 从0开始的 ?0的时候表示没有选中*/ ???????div ul li:nth-child(n){ ??????????? ???????????color: red; ???????} ???????????????/*偶数*/ ???????div ul li:nth-child(2n){ ??????????? ???????????color: gold; ???????} ???????/*奇数*/ ???????div ul li:nth-child(2n-1){ ??????????? ???????????color: yellow; ???????} ???????/*隔几换色 ?隔行换色 ????????????隔4换色 就是5n+1,隔3换色就是4n+1 ???????????*/ ???????????????div ul li:nth-child(5n+1){ ??????????? ???????????color: red; ???????}7.伪元素选择器
p:before 在...的前面添加内容 一定要结合content
p:after 在...的后面添加内容 与后面的布局有很大关系
/*设置第一个首字母的样式*/ ???????p:first-letter{ ???????????color: red; ??????????? ???????} ????/* 在....之前 添加内容 ??这个属性使用不是很频繁 了解 ?使用此伪元素选择器一定要结合content属性*/ ???????p:before{ ???????????content:‘alex‘; ???????} ???????????????/*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/ ???????p:after{ ???????????content:‘&‘; ???????????color: red; ??????????? ???????}<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style> ???????p:first-letter{ ???????????color: red; ??????????? ???????} ???????/*用伪元素 属性一定是content*/ ???????/*伪元素选择器与后面的布局有很大关系*/ ???????p:before{ ???????????content: ‘$‘ ???????} ???????p:after{ ???????????content: ‘.‘ ???????} ???????.box2{ ???????????/*需求：这个盒子一定是块级标签 ?span==>块 并且不再页面中占位置。未来与布局有很大关系 */ ???????????/*隐藏元素 不占位置*/ ???????????/*display: none;*/ ???????????display: block; ???????????????????????/*display: none;*/ ???????????/*隐藏元素 占位置*/ ???????????visibility: hidden; ???????????height: 0; ???????} ???</style></head><body> ???<p > ???????<span>alex</span> ???</p> ???<span >alex</span> ???<div>wusir</div> ???</body></html>三.CSS的继承性和层叠性
1.继承性
面向对象语言都会存在继承的概念，在面向对象语言中，继承的特点：继承了父类的属性和方法。那么我们现在主要研究css，css就是在设置属性的。不会牵扯到方法的层面。
继承：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。
注意:有一些属性是可以继承下来 ：color、font-*、text-*、line-*。主要是文本级的标签元素。
但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。
继承性： color、text-xxx、font-xxx、line-xxx的属性是可以继承下来。盒模型的属性是不可以继承下来的
a标签有特殊情况，设置a标签的字体颜色 一定要选中a，不要使用继承性
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style> ???????/*.box p span{ ???????????color: red; ???????}*/ ???????.box{ ???????????color: red; ???????} ???????.box a{ ???????????color: yellow; ???????} ???????.box p{ ???????????color: green; ??????????? ???????????line-height: 30px; ???????????background-color: red; ???????????text-align: right; ???????} ???????span{ ???????????background-color: transparent; ???????} ???</style></head><body> ???<div > ???????日天 ???????<a href="#">百度</a> ???????<p> ???????????wusir ???????????<span>alex</span> ???????</p> ???</div> ???</body></html>2.层叠性
层叠性： 权重的标签覆盖掉了权重小的标签，说白了 ，就是被干掉了
权重： 谁的权重大，浏览器就会显示谁的属性
数：id的数量 class的数量 标签的数量，顺序不能乱
（1）行内> id > class > 标签
1000 > 100 > 10 > 1
（2）数数 数 id class 标签
（3）先选中标签，权重一样，以后设置为主
（4）继承来的属性 它的权重为0 ，与选中的标签没有可比性
（5）如果都是继承来的属性，保证就近原则
（6）都是继承来的属性，选择的标签一样近，再去数权重
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style> ???/*css层叠性 ?权重 谁的权重大就会显示谁的样式*/ ???/*如何看权重 ?数数选择器 ?id ?class 标签*/ ???????????????/*1 0 0*/ ???????/*#box{ ???????????color: yellow; ???????}*/ ???????/*0 1 0*/ ???????.box{ ???????????color: green; ???????} ???????/*0 0 1*/ ???????div{ ???????????color: red; ???????} ???????/* ?id > 类 > 标签*/ ???</style></head><body> ???<div >猜猜我是什么颜色</div> ???</body></html><!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title> ???????????</title> ???<style> ???????/*1 3 0 */ ???????#father1 .box2 #father3 p{ ???????????color: yellow; ???????} ???????????????/*0 4 0*/ ???????/*.box1 .box2 .box3 .box4{ ???????????color: red; ???????}*/ ???????/*2 1 1*/ ???????#father1 #father2 .box3 p{ ???????????color: green; ???????} ???</style></head><body> ???<div > ???????<ul > ???????????<li > ???????????????<p >猜猜我的颜色</p> ???????????</li> ???????</ul> ???</div></body></html><!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title> ???????????</title> ???<style> ???/*继承来的属性 它的权重为0，跟选中的标签没有可比性*/ ???????#father1 #father2 #father3{ ???????????color: red; ???????} ???????#father1 .box2 .box3 p{ ???????????color: green; ???????} ???</style></head><body> ???<div > ???????<ul > ???????????<li > ???????????????<p >猜猜我的颜色</p> ???????????</li> ???????</ul> ???</div></body></html><!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title> ???????????</title> ???<style> ???/*继承来的属性 权重为0*/ ???/*如果是继承来的熟悉，就近原则，谁更深入谁厉害*/ ???????/*#father1 .box2{ ???????????color: red; ???????} ???????.box1{ ???????????color: green; ???????}*/ ???????/*都是继承来的 ，都一样深*/ ???????#father1 #father2 .box3{ ???????????color: red; ???????} ???????#father1 .box2 .box3{ ???????????color: green; ???????} ???</style></head><body> ???<div > ???????<ul > ???????????<li > ???????????????<p >猜猜我的颜色</p> ???????????</li> ???????</ul> ???</div></body></html>总结:
1.先看标签元素有没有被选中，如果选中了，就数数 （id,class,标签的数量） 谁的权重大 就显示谁的属性。权重一样大，后来者居上
2.如果没有被选中标签元素，权重为0。
3.如果属性都是被继承下来的 权重都是0 。权重都是0:"就近原则" ： 谁描述的近，就显示谁的属性
层叠性权重相同处理
第一种现象：当权重相同时，以后来设置的属性为准，前提一定要权重相同
#box2 .wrap3 p{ ???color: yellow;} ???????#box1 .wrap2 p{ ???color: red;}结果: 红色第二种现象： 第一个选择器没有选中内层标签，那么它是通过继承来设置的属性，那么它的权重为0。第二个选择器选中了内层标签，有权重。
所以 继承来的元素 权重为0。跟选中的元素没有可比性。
#box1 #box2 .wrap3{ ???color: red;}#box2 .wrap3 p{ ???color: green;}结果: 绿色第三种现象：如果都是继承来的属性，谁描述的近，显示谁的属性。‘就近原则‘
#box1 #box2 .wrap3{ ???color: red;} .wrap1 #box2{ ???color: green;}四.盒模型
在CSS中，"box model"这一术语是用来设计和布局时使用，然后在网页中基本上都会显示一些方方正正的盒子。我们称为这种盒子叫盒模型。
盒模型有两种：标准模型和IE模型。
1.盒模型的属性
width：内容的宽度
height: 内容的高度
padding：内边距，边框到内容的距离
border: 边框，就是指的盒子的宽度
margin：外边距，盒子边框到附近最近盒子的距离
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style> ???????.box{ ???????????width: 200px; ???????????height: 200px; ???????????background-color: red; ???????????padding: 50px; ???????????border: 10px solid green; ???????????/*margin-left: 50px;*/ ???????} ???</style></head><body> ???<!-- ????width:内容的宽度 ???height:内容的高度 ???padding:内边距 ???border:边框 ???margin:外边距 ????--> ????<div ></div> ???</body></html>2.盒模型的计算
如果一个盒子设置了padding，border，width，height，margin
盒子的真实宽度=width+2*padding+2*border
盒子的真实宽度=height+2*padding+2*border
标准盒模型，width不等于盒子真实的宽度。
另外如果要保持盒子真实的宽度，那么加padding就一定要减width，减padding就一定要加width。真实高度一样设置。
(1)padding(内边距)
padding：就是内边距的意思，它是边框到内容之间的距离
另外padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样。也就是说background-color这个属性将填充所有的border以内的区域
padding有四个方向，分别描述4个方向的padding。
描述的方法有两种
1、写小属性,分别设置不同方向的padding
?????离上边30padding-right: 30px; ???离右边30 ??离下边30padding-left: 30px; ????离左边30
2、写综合属性，用空格隔开
/*上 右 下 左*/padding: 20px 30px 40px 50px ;/*上 左右 ?下*/padding: 20px 30px 40px;/* 上下 左右*/padding: 20px 30px; ???????????/*上下左右*/padding: 20px;
一些标签默认有padding
比如ul标签，有默认的padding-left值。
我们现在初学可以使用通配符选择器
*{ ?padding:0; ?margin:0; ???}(2)border(边框)
border:边框的意思，描述盒子的边框
边框有三个要素： 粗细 线性样式 颜色
如果颜色不写，默认是黑色。如果粗细不写，不显示边框。如果只写线性样式，默认的有上下左右 3px的宽度,实体样式，并且黑色的边框。
border-width: 3px;border-style: solid;border-color: red;/*border-width: 5px 10px;border-style: solid dotted double dashed;border-color: red green yellow;*/
按照方向划分
border-top-width: 10px;border-top-color: red;border-top-style: solid;border-right-width: 10px;border-right-color: red;border-right-style: solid;border-bottom-width: 10px;border-bottom-color: red;border-bottom-style: solid;border-left-width: 10px;border-left-color: red;border-left-style:solid;
上面12条语句，相当于 bordr: 10px solid red;
border-top: 10px solid red;border-right: 10px solid red;border-bottom: 10px solid red;border-left: 10pxb solid red;
border:none；
border：0；
表示border没有设置样式。
使用border来制作小三角
/*小三角 箭头指向下方*/ ???????div{ ???????????width: 0; ???????????height: 0; ???????????border-bottom: 20px solid red; ???????????border-left: 20px solid transparent; ???????????border-right: 20px solid transparent; ???????}(3)margin
margin：外边距的意思。表示边框到最近盒子的距离。
/*表示四个方向的外边距离为20px*/margin: 20px;/*表示盒子向下移动了30px*//*表示盒子向右移动了50px*/margin-left: 50px;
(4)标准文档流
a.什么是标准文档流
宏观的将，我们的web页面和ps等设计软件有本质的区别，web 网页的制作，是个“流”，从上而下 ，像 “织毛衣”。而设计软件 ，想往哪里画东西，就去哪里画
b.空白折叠现象
多个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现每张图片之间有间隙，如果在一行内写img标签，就解决了这个问题，但是我们不会这样去写我们的html结构。这种现象称为空白折叠现象。
c.高矮不齐.,底边对齐
文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会发现底边对齐
d.自动换行
如果在一行内写文字，文字过多，那么浏览器会自动换行去显示我们的文字。
总结：如果保证盒模型的大小不变，加padding 就一定要减width或者减height
前提是：在标准文档流
padding：父子之间调整位置
margin: 兄弟之间调整位置
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style> ???????.box{ ???????????width: 180px; ???????????height: 180px; ???????????/*padding-left: 100px;*/ ???????????/*padding-left: 100px;*/ ???????????padding-left: 20px; ??????????? ???????????border: 1px solid red; ???????} ???????span{ ???????????background-color: green; ???????} ???????.ttt{ ???????????margin-left: 30px; ???????} ???</style></head><body> ???<!-- 202*202 --> ???<div > ???????<span>alex</span> ???????<span >alex</span> ???</div> ???<div > ???????<span>alex</span> ???</div></body></html>css
原文地址：https://www.cnblogs.com/chenxi67/p/9671187.html