一、css简介
1.1 什么是css
网页分为三部分:
结构（html）
表现（css）
行为（js）
css:层叠样式表
网页实质上是一个多层的结构，通过CSS来分别为网页的分一层设置样式，
而最终我们看到的是网页的最上一层。
1.2 css的性质
CSS的性质：层叠性 、继承性
1）层叠性
层叠性：
后来添加的css样式会覆盖原有的样式。即根据选择器的权重值进行覆盖。样式具有层叠性。
2）继承性
样式的继承：我们为一个元素设置了样式，同时也会应用到他的后代元素。
【继承是发生在祖先和后代之间】
1.继承的设置是为了方便我们的开发。
利用继承，我们可以将一些通用的样式设置到共同的祖先元素上。
这样只需设置一次即可，让所有的元素都具有该样式。
2.基本上关于文字的样式都有继承性。
但并不是所有的样式都会继承。比如：背景相关、布局相关的等样式都不会被继承。
body{
color:white;
font-size:14px;
}
>>>>>> 继承
从案例可知，p元素中的子元素都继承了字体颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
p{
color:red;
}
</style>
<body>
<p>
我是P元素
<span>
我是p元素中的span元素
<small>我是span元素中的small元素</small>
</span>
</p>
</body>
</html>
>>>>>> 并不是所有的元素都具有继承性
与背景相关、布局相关等样式都不会被继承。
p元素设置了背景颜色，不会被其子元素继承。但是由于元素默认的背景样式为透明，
所以才会有下面的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
p{
background-color:red;
}
</style>
<body>
<p>
我是P元素
<span>
我是p元素中的span元素
<small>我是span元素中的small元素</small>
</span>
</p>
</body>
</html>
二、css的基础
2.1 css的引入方式
1）行内式（只能用于本标签中，复用性较差，不推荐使用）
<p stype="color:red;font-size:40px;">少小离家老大回</p>
注意：开发时不推荐使用。由于css与html代码耦合性太高，维护比较麻烦。
2）内嵌式（只能用于本页面中，复用性不强）
<style type="text/css">
p{
color:red;
}
</style>
注意：style标签写在head里。
3）外链式
外链式引入外部css文件。有两种方式。
方式一： 使用link标签引入
外部样式文件:
p{
color:blue;
font-size: 30px;
font-weight: bold;
}
引入外部样式:
<link type="text/css" rel="stylesheet" href=“./js.js” />
方式二： 使用style标签引入
引入外部样式:
<style type="text/css" >
@import url("1.css") ;
</style>
2.2 css注释
+++ css注释：注释的内容会自动被浏览器忽略！
<style>
/*
css 注释
*/
</style>
+++ html注释
<!---注释内容--\>
2.3 css基本语法
css基本语法：
选择器 声明块
选择器:通过选择器可以选中页面中的元素。
声明块：通过声明块来为指定要为元素设置的样式。
声明块是由一个一个声明组成。
声明由键值对形式：
键：值;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
color:red;
}
</style>
</head>
<body>
<p >少小离家老大回</p>
</body>
</html>
三、CSS单位
3.1 像素的单位
1）像素和百分比的概念
像素
1.屏幕显示器实质由一个一个发光的小点构成。（每一个点展现出不同的颜色，构成了我们的屏幕）
这些正方形的小点我们称之为像素。
2.不同屏幕的像素大小是不同。
像素越小，显示的图片越清晰。（像素越小，展示的图片越细腻）
3.不同屏幕的像素大小是不同。所以200px在不同的显示屏展示效果是不同的。
（例如：200px在我的电脑是10cm。但是如果在高清屏上显示，则可能是5cm）
4.200px 表示200个小点。由于点的大小在不同屏幕上会不同，所以展示效果也不同。
案例：
百分比:
1.也可以将属性值设置为相对于父元素的百分比。
2.设置百分比，可以使子元素根据父元素的改变而改变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#b1{
width:100px;
height:100px;
background-color: red;;
}
#b2{
width:50%;
height: 50%;
background-color: blue;;
}
</style>
<body>
<div id="b1">
<div id="b2"></div>
</div>
</body>
</html>
2）像素单位 px、em 和 rem
px
1px代表一个像素。
em
1.em是相对于元素自身的字体大小来计算的。
2.1em=1font-size
font-size的默认值为16px。
所以10em = 10*16px=160px
3.em会根据元素字体大小的改变而改变。
rem
1.rem是相对于根元素的字体大小来计算的。
2.根元素就是html元素。
3）注意事项
>>>>>> em是根据元素自身的字体大小来计算的
em是根据元素自身的字体大小来计算的。
所以修改font-size的大小，元素的大小也会改变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#b1{
font-size:16px;
width:10em;
height:10em;
background-color: red;;
}
</style>
<body>
<div id="b1">
</div>
</body>
</html>
>>>>>> rem是相对于根元素的字体大小来计算的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
html{
font-size:20px;
}
#b1{
font-size:15px;
width:10rem;
height:10rem;
background-color: red;;
}
</style>
<body>
<div id="b1">
</div>
</body>
</html>
3.2 颜色单位
1）颜色单词、rgb、rgba、十六进制rgb
颜色单位：
1.在css中可以直接使用英文名来指定颜色。
如：white 、black 、red 、blue 、green ...
2.rgb值
1.rgb通过三种不同的颜色的浓度来调配出不同的颜色 。
2.r:红色 g：绿色 b：蓝色
3.每一种颜色的范围都在0-255（0%-100%）之间
4.语法:
rgb（255,255,255）
rgb（100%,100%,100%）
5.光的三原色调配:
rgb（0,0,0） 黑色
rgb（255,255,255） 白色
3.rgba值
1.rgba就是rgb的基础上增加了一个a,表示不透明度。
2.需要四个值，前三个和rgb一样，
第四个表示不透明度（0-1之间）。
1 表示完全不透明
0 表示完全透明
.5 表示半透明
3.语法:
rgba（255,255,255,.3）
rgba（255,255,255,0）
4.十六进制的rgb值
1.语法: #红色绿色蓝色
rgb:#00aa1f
rgb:#ff0000
2.颜色浓度范围:00-ff
3.如果颜色两位两位重复，可以简写。
如： #aabbcc --> #abc
如：rgb:#00aa11 ---> rgb:#0a1
5.HSL值、HSLA值
1. H 色相（0-360）
S 饱和度（0%-100%）
L 亮度（0%-100%）
2.hsl(50,100%,50%)
2）案例
>>>>>> 英语单词表示颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#b1{
width:50px;
height:50px;
background-color: red;;
}
</style>
<body>
<div id="b1">
</div>
</body>
</html>
>>>>>> rgb、rgba
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#b1{
width:50px;
height:50px;
background-color: rgb(0,250,250)
}
#b2{
width:50px;
height:50px;
background-color: rgba(0,250,250,0.521)
}
</style>
<body>
<div id="b1">
</div>
<div id="b2">
</div>
</body>
</html>
>>>>>> 十六进制rgb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#b1{
width:50px;
height:50px;
background-color: #00ff11;
}
#b2{
width:50px;
height:50px;
background-color: #11ffaa;
}
</style>
<body>
<div id="b1">
</div>
<div id="b2">
</div>
</body>
</html>
>>>>>> hsl 和hsla
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#b1{
width:50px;
height:50px;
background-color:hsl(50,50%,50%)
}
#b2{
width:50px;
height:50px;
background-color:hsla(50,50%,50%,0.251)
}
</style>
<body>
<div id="b1">
</div>
<div id="b2">
</div>
</body>
</html>
四、清除浏览器的默认样式
通常情况下，浏览器都会为元素设置一些默认样式。
默认样式会影响到页面布局，通常我们会去除默认样式。
*{
margin:0px;
padding:0px;
list-style:none;
}
2867
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
