CSS简介
- 层叠样式表（Cascading Style Sheets）
- css可以用来为网页创建样式表，通过样式表可以对网页进行装饰。
- 所谓层叠，可以将整个网页想象成一层一层的结构，层次高的将会覆盖层次低的。
- css就可以分别为网页的各个层次设置样式。
CSS样式
内联样式
- 可以将CSS样式编写到元素的style属性当中
- 将样式直接编写到style属性中，这种样式我们称之为内联样式
- 内联样式只对当前的元素的内容起作用，内联样式不方便复用，不推荐使用。
- 内联样式属于结构与表现耦合，不方便后期的维护，不推荐使用。
<!DOCTYPE html>
<html>
<head>
<mata charset="utf-8" />
<title>CSS</title>
</head>
<body>
<!--
内联样式：
可以将CSS样式编写到元素的style属性当中
将样式直接编写到style属性中，这种样式我们称之为内联样式
内联样式只对当前的元素的内容起作用，内联样式不方便复用，不推荐使用。
内联样式属于结构与表现耦合，不方便后期的维护，不推荐使用。
-->
<p style="color:red;font-size:20px;">剑气纵横三万里，一剑光寒十九州</p>
</body>
</html>
内部样式
- 可以将CSS样式编写到head中的style标签里
- 将样式表编写的style标签中，然后通过css选择器选中指定元素
- 然后可以同时为这些元素一起设置样式，这样可以进一步的复用
- 将样式表编写在style标签中，也可以使表现和结构进一步分离它也是我们推荐的使用方式
<!DOCTYPE html>
<html>
<head>
<mata charset="utf-8" />
<title>CSS</title>
<!--
内部样式：
可以将CSS样式编写到head中的style标签里
将样式表编写的style标签中，然后通过css选择器选中指定元素
然后可以同时为这些元素一起设置样式，这样可以进一步的复用
将样式表编写在style标签中，也可以使表现和结构进一步分离它也是我们推荐的使用方式
-->
<style type="text/css">
p{
color:red;
font-size:20px;
}
</style>
</head>
<body>
<p>剑气纵横三万里，一剑光寒十九州</p>
</body>
</html>
外部样式
- 还可以将样式表编写到外部的css文件中，然后通过link标签来将外部的css文件引入到当前页面中
- 这样外部文件中的css样式表将会应用到当前页面中
- 将css样式统一编写到外部的样式表中，完全使结构和表现分离，可以使样式表在不同的页面中使用
- 最大限度的使样式可以进行复用，将样式统一写在样式表中，然后通过link标签引入，可以利用浏览器缓存加快用户访问的速度提高了用户体验
css文件：style.css
p{
color:red;
font-size:20px;
}
html文件：demo.html
<!DOCTYPE html>
<html>
<head>
<mata charset="utf-8" />
<title>CSS</title>
<!--
还可以将样式表编写到外部的css文件中，然后通过link标签来将外部的css文件引入到当前页面中
这样外部文件中的css样式表将会应用到当前页面中
将css样式统一编写到外部的样式表中，完全使结构和表现分离，可以使样式表在不同的页面中使用
最大限度的使样式可以进行复用，将样式统一写在样式表中，然后通过link标签引入，可以利用浏览器缓存加快用户访问的速度提高了用户体验
-->
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<p>剑气纵横三万里，一剑光寒十九州</p>
</body>
</html>
CSS基本语法
注释
css的注释，作用和HTML注释类似，只不过它必须编写在style标签中，或者是css文件中
/* css的注释，作用和HTML注释类似，只不过它必须编写在style标签中，或者是css文件中*/
语法
选择器/声明块
选择器
通过选择器可以选中页面中指定的元素，并且将声明块的样式应用到选择器对应的元素上
声明块
- 声明块紧跟在选择器的后边，使用一对 {} 括起来
- 声明块中实际就是一组一组的名值对结构
- 这一组一组的名值对我们称之为声明
- 在一个声明块中科院写多个声明，多个声明直接使用 ; 隔开
- 声明的样式名和样式之间使用 : 来连接
常用选择器
元素选择器
- 作用：通过元素选择器可以选择页面中的指定元素
- 语法：标签名{ }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用选择器</title>
<style type="text/css">
/*为页面中的所有p元素，设置一个字体为红色*/
/*
* 元素选择器
* - 作用：通过元素选择器可以选择页面中的指定元素
* - 语法：
* 标签名{}
*/
p{
color: red;
}
h1{
color: red;
}
</style>
</head>
<body>
<h1>悯农</h1>
<p>锄禾日当午</p>
<p>锄禾日当午</p>
</body>
</html>
id选择器
- 作用：通过元素的id属性值选中唯一的一个元素
- 语法：#id属性值{ }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用选择器</title>
<style type="text/css">
/*
* id选择器
* - 通过元素的id属性值选中唯一的一个元素
* - 语法：
* #id属性值{}
*/
#p1{
font-size: 25px;
}
</head>
<body>
<h1>悯农</h1>
<p>锄禾日当午</p>
<p>锄禾日当午</p>
<p id="p1">锄禾日当午</p>
</body>
</html>
class选择器
- 作用： 通过元素的class属性值选中一组元素
- 语法：.class属性值{ }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用选择器</title>
<style type="text/css">
/*
* class选择器
* - 通过元素的class属性值选中一组元素
* - 语法：
* .class属性值{}
*/
.p2{
font-size: 15px;
}
.hello{
font-size: 35px
}
</style>
</head>
<body>
<h1>悯农</h1>
<p>锄禾日当午</p>
<p>锄禾日当午</p>
<!--
我们可以为元素设置class属性，class属性和id属性类似，只不过class属性可以重复
拥有相同class属性值的元素，我们说他们是一组元素
可以同时为一个元素设置多个class属性值，多个值之间用空格隔开
-->
<p class="p2 hello">锄禾日当午</p>
<p class="p2">锄禾日当午</p>
<p class="p2">锄禾日当午</p>
</body>
</html>
选择器分组
- 作用：通过选择器分组可以同时选中多个选择器对应的元素
- 语法：选择器1,选择器2,选择器N{ }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用选择器</title>
<style type="text/css">
/*
* 当id为p1的元素，class为p2的元素，还有h1，同时设置背景颜色为黄色
*/
/*
* 选择器分组
* - 通过选择器分组可以同时选中多个选择器对应的元素
* - 语法：
* 选择器1,选择器2,选择器N{}
*/
#p1,.p2,h1{
background-color: yellow;
}
</style>
</head>
<body>
<h1>悯农</h1>
<p>锄禾日当午</p>
<p>锄禾日当午</p>
<p id="p1">锄禾日当午</p>
<p class="p2 hello">锄禾日当午</p>
<p class="p2">锄禾日当午</p>
<p class="p2">锄禾日当午</p>
<p>锄禾日当午</p>
<p>锄禾日当午</p>
<p class="p3">锄禾日当午</p>
<span class="p3">汗滴禾下土</span>
</body>
</html>
通配选择器
- 作用：选中页面中的所有元素
- 语法：*{ }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用选择器</title>
<style type="text/css">
/*
* 通配选择器
* - 他可以用来选中页面中的所有元素
* - 语法：
* *{}
*/
*{
color: deepskyblue;
}
</style>
</head>
<body>
<h1>悯农</h1>
<p>锄禾日当午</p>
<p>锄禾日当午</p>
<p id="p1">锄禾日当午</p>
<p class="p2 hello">锄禾日当午</p>
<p class="p2">锄禾日当午</p>
<p class="p2">锄禾日当午</p>
<p>锄禾日当午</p>
<p>锄禾日当午</p>
<p class="p3">锄禾日当午</p>
<span class="p3">汗滴禾下土</span>
</body>
</html>
复合选择器
- 作用：可以选择同时满足多个选择器的元素
- 语法：选择器1选择器2选择器N{ }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用选择器</title>
<style type="text/css">
/*
* 为拥有class p3 span元素设置一个背景颜色为黄色
*/
/*
* 复合选择器（交集选择器）
* - 作用：
* - 可以选择同时满足多个选择器的元素
* - 语法：
* - 选择器1选择器2选择器N{}
*/
span.p3{
background-color: yellow;
}
/*
* 对于id选择器来说，不建议使用复合选择器
*/
p#p1{
background-color: red;
}
</style>
</head>
<body>
<h1>悯农</h1>
<p>锄禾日当午</p>
<p>锄禾日当午</p>
<p id="p1">锄禾日当午</p>
<p class="p2 hello">锄禾日当午</p>
<p class="p2">锄禾日当午</p>
<p class="p2">锄禾日当午</p>
<p>锄禾日当午</p>
<p>锄禾日当午</p>
<p class="p3">锄禾日当午</p>
<span class="p3">汗滴禾下土</span>
</body>
</html>
后代元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 为div d1中的span设置一个颜色为绿色
* 后代元素选择器
* - 作用：
* - 选中指定元素的指定后代元素
* - 语法：
* - 祖先元素 后代元素{}
*/
#d1 span{
color: green;
}
/*
* 选中id为d1的div中的p元素中的span元素
*/
#d1 p span{
font-size: 25px;
}
/*
* 选中div子元素span设置一个背景颜色为黄色
* 子元素选择器：
* - 作用：
* - 选中指定父元素的指定子元素
* - 语法：
* 父元素 > 子元素
* IE6 及以下不支持子元素选择器
*/
div > span{
background-color: yellow;
}
</style>
</head>
<body>
<!--
元素之间的关系
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素
-->
<div id="d1">
<span>我是div标签中的span</span>
<p>
<span>我是P标签中的span</span>
</p>
</div>
<div>
<span>我是body标签中的span</span>
</div>
</body>
</html>
伪类选择器
有四个伪类可以让你根据访问者与该链接的交互方式，将链接设置成4种不同的状态。
- 正常链接：
a:link
- 访问过的链接：
a:visited(只能定义字体颜色)
- 鼠标滑过的链接：
a:hover
- 正在点击的链接：
a:active
- 获取焦点：
:focus
- 指定元素前：
:before
- 指定元素后：
:after
- 选中指定元素：
::selection
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 伪类专门用来表示元素的一种特殊状态
* 比如：访问过的超链接、普通的超链接、获取焦点的文本框
* 当我们需要为处在这些特殊情况的元素设置样式时，就可以使用伪类
*/
/*
* 为没访问过的链接设置颜色为绿色
* :link
* - 表示普通链接（没访问过的链接）
*/
a:link{
color: yellowgreen;
}
/*
* 为访问过的链接设置颜色为红色
* ：visited
* - 表示访问过的链接
*
* 浏览器是通过历史记录来判断一个链接是否访问过
* 由于涉及到了用户隐私问题，所以使用visited伪类只能设置字体的颜色。
*/
a:visited{
color: red;
}
/*
* :hover 表示鼠标移入的状态
*/
a:hover{
color:deepskyblue;
}
/*
* :active表示的是超链接被点击的状态
*/
a:active{
color:black;
}
/*
* :hover和:active也可以为其他元素设置
* IE6不支持超链接以外的元素设置:hover和:active
*/
p:hover{
background-color: yellow;
}
p:active{
background-color: orange;
}
/*
* 文本框获取焦点以后，修改背景颜色为黄色
*/
input:focus{
background-color: red;
}
/*
* 为p标签中选中的内容使用样式
* 可以使用 ::selection伪类
* 注意，这个伪类在火狐中需要采用另一种方式编写
*/
/*兼容大多数浏览器*/
P::selection{
background-color: dodgerblue;
}
/*兼容火狐浏览器的*/
P::-moz-selection{
background-color: dodgerblue;
}
</style>
</head>
<body>
<a class="abc" href="http://www.baidu.com">这是一个访问过的链接</a>
<br />
<br />
<a class="bcd" href="http:///www.baidu.com">这是一个没访问过的链接</a>
<p>我是一个段落</p>
<!--使用input可以创建一个文本输入框-->
<input type="text" />
</body>
</html>
伪元素选择器
- 首字母
:first-letter
- 首行
:first-line
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 使用伪元素来表示元素中一些特殊的位置
*/
/*
* 为p的第一个字符来设置一个特殊的样式
*/
p:first-letter{
color: red;
font-size: 25px;
}
/*
* 为p中第一行来设置一个特殊样式
*/
p:first-line{
background-color: yellow;
}
/*
* :before表示元素最前边的部分
* 一般before都需要结合content这个样式一起使用
* 通过content可以向before或after的位置添加一些内容
*/
p:before{
content:"我会出现在整个段落最前面";
color:red;
}
/*
* :after表示段落最后面
*/
p:after{
content:"我会出现在整个段落最后面";
color:green;
}
</style>
</head>
<body>
<p>
第一段<br />
第二段
</p>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 为所有具体title属性的p元素，设置一个背景颜色为黄色
* 属性选择器
* - 作用：可以根据元素中的属性或属性的值来选取指定元素
* - 语法：
* [属性名] 选取含有指定属性的元素
* [属性名="属性值"] 选取含有指定属性值的元素
* [属性名^="属性值"] 选取属性值以指定内容开头的元素
* [属性名$="属性值"] 选取属性值以指定内容结尾的元素
* [属性名*="属性值"] 选取属性值包含指定内容的元素
*/
p[title]{
background-color: yellow;
}
/*
* 为title属性值是hello的元素设置背景颜色为绿色
*/
p[title="hello"]{
background-color: green;
}
/*
* 为title属性值以ab开头的元素设置一个背景颜色为蓝色
*/
p[title^="ab"]{
background-color: deepskyblue;
}
/*
* 为title属性值以e结尾的元素设置一个背景颜色
*/
p[title$="e"]{
background-color: orange;
}
/*
* 为title属性值包含e的元素设置一个背景颜色
*/
p[title*="e"]{
background-color: gray;
}
</style>
</head>
<body>
<!--
title属性，这个属性可以给任何标签指定
当鼠标移入到元素上时，元素中title属性将会作为提示文字显示
-->
<p title="hello">我是一个段落</p>
<p>我是一个段落</p>
<p title="abc">我是一个段落</p>
<p title="abdd">我是一个段落</p>
<p>我是一个段落</p>
<p title="cde">我是一个段落</p>
<p>我是一个段落</p>
<p title="我是title中的文字">我是一个段落</p>
</body>
</html>
子元素选择器
- :first-child ：选择第一个子标签
- :last-child：选择最后一个子标签
- :nth-child：选择指定位置的子元素
- :first-of-type
- :last-of-type
- :nth-of-type ：选择指定类型的子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 为第一个p标签设置一个背景颜色为黄色
* :first-child 可以选中父元素的第一个子元素（不考虑父元素是谁）
* :last-child 可以选中最后一个子元素
* :nth-child() 可以选中任意位置的子元素
* 该选择器后边可以指定一个参数，指定要选中的第几个子元素
* even表示偶数位置的子元素
* odd表示奇数位置的子元素
*/
body > p:first-child{
background-color: yellow;
}
p:last-child{
background-color: orange;
}
p:nth-child(even){
background-color: deepskyblue
}
/*
* :first-of-type
* :last-of-type
* :nth-of-type
* 和：first-child这些非常类似
* 只不过child，是在所有的子元素中排列
* 而type,是在当前类型的子元素中排列
*/
p:first-of-type{
background-color: yellow;
}
</style>
</head>
<body>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<div>
<p>我是DIV中的p标签</p>
</div>
<div>
<p>我是DIV中的p标签</p>
</div>
</body>
</html>
兄弟元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 为span后的一个p元素设置一个背景颜色为黄色
* 后一个兄弟元素选择器
* 作用：可以选中一个元素紧挨着的指定的兄弟元素
* 语法：前一个 + 后一个
*/
p + span{
background-color: deepskyblue;
}
/*
* 选中后边的所有兄弟元素
* 语法：前一个 ~ 后边所有
*/
span ~ p{
background-color: yellow;
}
</style>
</head>
<body>
<p>我是一个P标签</p>
<p>我是一个P标签</p>
<p>我是一个P标签</p>
<span>我是一个span</span>
<p>我是一个P标签</p>
<p>我是一个P标签</p>
<p>我是一个P标签</p>
<p>我是一个P标签</p>
</body>
</html>
否定伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 为所有的p元素设置一个背景颜色为黄色,除了class值为hello的
*
* 否定伪类
* 作用：可以从已选中的元素中剔除出其他元素
* 语法：
* :not(选择器){}
*/
p:not(.hello){
background-color: yellow;
}
</style>
</head>
<body>
<p>我是一个P标签</p>
<p>我是一个P标签</p>
<p>我是一个P标签</p>
<p>我是一个P标签</p>
<p class="hello">我是一个P标签</p>
<p>我是一个P标签</p>
<p>我是一个P标签</p>
<p>我是一个P标签</p>
</body>
</html>
a的伪类
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 设计到a标签的伪类一共有四个：
* :link
* :visited
* :hover
* :active
* 而这四个选择器的优先级是一样的
* 为了各个样式间互不干扰需要按 上述顺序编写
*/
a:link{
color: yellowgreen;
}
a:visited{
color: deepskyblue;
}
a:hover{
color: orange;
}
a:active{
color: gray;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">访问过的链接</a>
<br /><br />
<a href="http://www.qq.com">没访问过的链接</a>
</body>
</html>
样式的继承
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
font-size: 25px;
}
</style>
</head>
<body>
<!--
像儿子可以继承父亲的遗产一样，在CSS中，祖先元素上的样式，也会被他的后代元素所继承
利用继承，可以将一些基本的样式设置给祖先元素，这样所以的后代元素将自动继承这些样式
但是并不是所以样式都会被子元素所继承，比如：背景相关的样式、边框相关的样式、定位相关的样式
-->
<p style="font-size: 25px;">
我是p标签中的文字
<span>
我是p元素中的span
</span>
</p>
<span>
我是p元素外的span
</span>
</body>
</html>
可以点击 CSS background-color 属性 查看都有什么实体
注意：css默认背景是透明的所以会感觉继承了背景颜色，实际上并未继承
选择器优先级
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
background-color: yellow !important;
}
p{
background-color: greenyellow;
}
#p2{
background-color: deepskyblue;
}
p#p2{
background-color: red;
}
.p1{
color: yellow;
}
.p3{
color: green;
}
/*
* 使用不同的选择器选择同一个元素并且设置相同的样式时
* 这时样式之间产生了冲突
* 优先级高的优先显示
*
* 优先级的规则
* 内联样式：优先级1000
* id选择器：优先级100
* 类和伪类：优先级10
* 元素选择器：优先级1
* 统配* ：优先级0
* 继承的样式：没有优先级
*
* 当选择器中包含多种选择器时，需要将多个选择器的优先级相加后再比较
* 但是注意，选择器的优先级计算不会超过他的最大的数量级
* 如果优先级一样，则使用靠后的样式
*
* 并集选择器的优先级是单独计算的
* 可在样式的最后，添加一个!important，这个样式将会获得一个最高的优先级，
* 将会优先于所有样式显示，甚至超过内联样式。但是在开发中尽量避免使用!important
*/
*{
font-stretch: 50px;
}
p{
font-size: 25px;
}
</style>
</head>
<body>
<p class="p1 p3" id="p2" style="background-color: deepskyblue;">
我是一个段落
<span>我是p标签中的span</span>
</p>
</body>
</html>
大小单位
- 像素 px
- 像素是我们在网页找那个使用最多的一个单位
- 一个像素就相当于屏幕上的一个小店
- 我们的屏幕实际上就是由这些像素点构成的
- 但是这些像素点是不能直接看见的
- 不同的显示器一个像素的大小也不相同
- 显示效果越好越清晰，像素就越小，反之像素就越大
- 百分比 %
- 也可以将单位设置为一个百分比的形式
- 这样浏览器将会根据父元素的样式计算该值
- 使用百分比的好处是，当父元素的属性值发生变化时
- 子元素也会按照比例发生改变
- 在我们创建一共自适应的页面时，经常使用百分比做单位
- em:
- em和我们的百分比类似，它是相对于当前元素的字体大小来计算的
- 1em = 1font-size
- 使用em时，当字体大小发生改变时，em也会随之改变
- 当设置字体相关样式时，经常会使用em
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 长度单位
* 像素 px
* - 像素是我们在网页找那个使用最多的一个单位
* 一个像素就相当于屏幕上的一个小店
* 我们的屏幕实际上就是由这些像素点构成的
* 但是这些像素点是不能直接看见的
* - 不同的显示器一个像素的大小也不相同
* 显示效果越好越清晰，像素就越小，反之像素就越大
* 百分比 %
* - 也可以将单位设置为一个百分比的形式
* 这样浏览器将会根据父元素的样式计算该值
* - 使用百分比的好处是，当父元素的属性值发生变化时
* 子元素也会按照比例发生改变
* - 在我们创建一共自适应的页面时，经常使用百分比做单位
* em:
* - em和我们的百分比类似，它是相对于当前元素的字体大小来计算的
* - 1em = 1font-size
* - 使用em时，当字体大小发生改变时，em也会随之改变
* - 当设置字体相关样式时，经常会使用em
*/
.box{
width: 100px;
height: 100px;
background-color: red;
}
.box1{
font-size: 100px;
width: 2em;
height: 50%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
</div>
</div>
</body>
</html>
颜色单位
颜色单位：
- 在CSS可以直接使用颜色单词来表示不同的颜色
红色：red
蓝色：blue
绿色：green - 可以使用RGB值来表示不同的颜色
所谓RGB值指的是通过Red Green Blue三元色
通过这三种颜色不同的浓度，来表示不同的颜色
例子：rgb(红色的浓度，绿色的浓度，蓝色的浓度);
颜色的浓度需要一个0-255之间的值，255表示最大，0表示没有- 浓度也可以采用一个百分数来设置，需要一个0%-100%之间的数字
- 使用百分数最后也是转换为0-255之间的值
- 也可以使用十六进制的rgb值来表示颜色，原理和上边的RGB值一样
只不过使用十六进制数来表示，使用三组两位的数组来表示一个颜色
每组表示一个颜色,第一组红色，第二组绿色，第三组蓝色
语法：#红色绿色蓝色
十六进制：
0 1 2 3 4 5 6 7 8 9 a b c d e f
00 - ff- 00表示最小，相当于rgb中的0
- ff表示最大，相当于rgb中的255
例如：红色：#ff0000
像这种两位两位重复的颜色，可以重写
比如：#ff0000可以写成#f00
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
/*
* 颜色单位：
* 在CSS可以直接使用颜色单词来表示不同的颜色
* 红色：red
* 蓝色：blue
* 绿色：green
* 可以使用RGB值来表示不同的颜色
* -所谓RGB值指的是通过Red Green Blue三元色
* 通过这三种颜色不同的浓度，来表示不同的颜色
* -例子：rgb(红色的浓度，绿色的浓度，蓝色的浓度);
* - 颜色的浓度需要一个0-255之间的值，255表示最大，0表示没有
* - 浓度也可以采用一个百分数来设置，需要一个0%-100%之间的数字
* 使用百分数最后也是转换为0-255之间的值
* 也可以使用十六进制的rgb值来表示颜色，原理和上边的RGB值一样
* 只不过使用十六进制数来表示，使用三组两位的数组来表示一个颜色
* 每组表示一个颜色,第一组红色，第二组绿色，第三组蓝色
* 语法：#红色绿色蓝色
* 十六进制：
* 0 1 2 3 4 5 6 7 8 9 a b c d e f
* 00 - ff
* 00表示最小，相当于rgb中的0
* ff表示最大，相当于rgb中的255
* 红色：
* #ff0000
* 像这种两位两位重复的颜色，可以重写
* 比如：#ff0000可以写成#f00
*/
/* background-color: rgb(0,255,0);
* background-color: rgb(0%,100%,0%);
*/
background-color: #ff0000;
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
文本样式
字体颜色
使用 color 来设置文字的颜色
字体大小
font-size 设置的并不是文字本上的 大小
在页面中，每个文字都是处于一个看不见的框中
我们设置的font-size实际上是设置的格的高度，并不是字体的大小
一般情况下文字都比这个格要小一些，也有时会比格大
根据字体的不同，显示效果也不同
字体
通过 font-family 来指定文字的字体
当采用某种字体，如果浏览器支持则使用该字体，如果字体不支持，则使用默认字体
该样式可以同时指定多个字体，多个字体之间使用,分开。
如果采用多个字体时，浏览器会优先使用前边的字体，如果前边的不支持则采用下一个
浏览器使用的字体默认就是计算机中的字体。如果计算机中有，则使用，没有则不使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
/*设置字体颜色，使用color来设置文字的颜色*/
color: red;
/*设置文字的大小，浏览器一般默认文字的大小都是16px*/
/*
* font-size设置的并不是文字本上的 大小
* 在页面中，每个文字都是处于一个看不见的框中
* 我们设置的font-size实际上是设置的格的高度，并不是字体的大小
* 一般情况下文字都比这个格要小一些，也有时会比格大
* 根据字体的不同，显示效果也不同
*/
font-size: 30px;
/*字体*/
/*
* 通过font-family来指定文字的字体
* 当采用某种字体，如果浏览器支持则使用该字体
* 如果字体不支持，则使用默认字体
* 该样式可以同时指定多个字体，多个字体之间使用,分开，
* 如果采用多个字体时，浏览器会优先使用前边的字体，如果前边的不支持则采用下一个
*
*/
/*
* 浏览器使用的字体默认就是计算机中的字体
* 如果计算机中有，则使用，没有则不使用
*/
font-family: arial, "微软雅黑";
</style>
</head>
<body>
<p class="p1">
我是一个p标签 ABC123abc
</p>
</body>
</html>
字体分类
- serif（衬线字体）
- sans-serif（非衬线字体）
- monospace（等宽字体）
- cursive（草书字体）
- fantasy（虚幻字体）
可以将字体设置为这些大的分类。
当设置为大的分类后，浏览器会自动选择指定的字体并应用样式。
一般会使字体大类指定为font-family里最后一个字体。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
在网页中将字体分为5大类
* serif（衬线字体）
* sans-serif（非衬线字体）
* monospace（等宽字体）
* cursive（草书字体）
* fantasy（虚幻字体）
可以将字体设置为这些大的分类
当设置为大的分类后，浏览器会自动选择指定的字体并应用样式
一般会使字体大类指定为font-family里最后一个字体
-->
<p style="font-size: 50px; font-family: serif;">衬线字体：我是一个P标签 ABCDEFG123456</p>
<p style="font-size: 50px; font-family: sans-serif;">非衬线字体：我是一个P标签 ABCDEFG123456</p>
<p style="font-size: 50px; font-family: monospace;">等宽字体：我是一个P标签 ABCDEFG123456</p>
<p style="font-size: 50px; font-family: cursive;">草书字体：我是一个P标签 ABCDEFG123456</p>
<p style="font-size: 50px; font-family: fantasy;">虚幻字体：我是一个P标签 ABCDEFG123456</p>
</body>
</html>
斜体
font-style可以设置字体的斜体
可选值：
normal : 默认值，文字正常显示
italic : 斜体
oblique：文字会以倾斜的效果显示
注意：大部分浏览器都不会对倾斜和斜体做区分，也就是说我们设置italic和oblique它们的效果往往是一样的，一般我们只用italic。
加粗
font-weight可以用来设置文本的加粗效果
可选值：
normal : 默认值，文字正常显示
bold ： 文字加粗显示
该样式也可以采用100-900这之间的9个值来表示
注意：由于用户的计算机往往没有这么多级别的字体，所以很难达到我们想要的效果
也就是200有可能比100粗，也有可能是一样粗
大型小写字母
font-variant可以用来设置小型大写字母
可选值：
normal ： 默认值 文字正常显示
small-caps 文本以小型大写字母显示
小型大写字母：
将所以的字母以大写形式显示，但是小写字母大写，字体的大小上比字母的大写小一点
样式font
- 使用该样式可以同时设置字体相关的所有样式
- 可以将字体的样式的值，统一写在font样式中 不同值之间使用空格隔开
- 使用font设置字体样式时，斜体 加粗 小型大写字母 没有顺序要求 可写可不写
- 如果不写则使用默认值，但是要求文字大小和字体必须写
- 字体必须是最后一个样式，大小是倒数第二的样式
- 实际上使用简写属性也会有一个比较好的性能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
color: red;
font-size: 30px;
font-family: "微软雅黑";
/*
* font-style可以设置字体的斜体
* - 可选值：
* normal : 默认值，文字正常显示
* italic : 斜体
* oblique：文字会以倾斜的效果显示
* - 大部分浏览器都不会对倾斜和斜体做区分
* 也就是说我们设置italic和oblique它们的效果往往是一样的
* - 一般我们只用italic
*
*/
font-style: italic;
/*
* font-weight可以用来设置文本的加粗效果
* - 可选值：
* normal : 默认值，文字正常显示
* bold ： 文字加粗显示
*
* 该样式也可以采用100-900这之间的9个值
* 但是由于用户的计算机往往没有这么多级别的字体，所以很难达到我们想要的效果
* 也就是200有可能比100粗，也有可能是一样粗
*/
font-weight: 600;
/*
* font-variant可以用来设置小型大写字母
* - 可选值：
* normal ： 默认值 文字正常显示
* small-caps 文本以小型大写字母显示
*
* 小型大写字母：
* 将所以的字母以大写形式显示，但是小写字母大写，字体的大小上比字母的大写小一点
*/
font-variant: small-caps;
}
.p2{
font-size: 50px;
font-family: 华文彩云;
font-style: italic;
font-weight: bold;
font-variant: small-caps;
}
.p3{
/*
* 在CSS中还为我们提供了一个样式叫font
* 使用该样式可以同时设置字体相关的所有样式
* 可以将字体的样式的值，统一写在font样式中 不同值之间使用空格隔开
*
* 使用font设置字体样式时，斜体 加粗 小型大写字母 没有顺序要求 可写可不写
* 如果不写则使用默认值，但是要求文字大小和字体必须写
* 字体必须是最后一个样式，大小是倒数第二的样式
*
* 实际上使用简写属性也会有一个比较好的性能
*/
font:italic small-caps bold 60 px "微软雅黑"
}
</style>
</head>
<body>
<p class="p1">我是一个P标签 ABCDefg123456</p>
<p class="p2">我是一个P标签 ABCDefg123456</p>
<p class="p3">我是一个P标签 ABCDefg123456</p>
</body>
</html>
行间距
- 在CSS中并没有为我们提供一个直接设置行间距的方式
我们只能通过设置行高来间接设置行间距，行高越大间距越大
使用line-height来设置行高
行高类似於单线本，一行一行的，线与线之间的距离就是行距
网页中的文字实际上也是写在一个看不见的线中的，而文字默认会在行间距中居中显示
行间距 = 行高 - 字体大小 - 对於单行文本来说，可以将行高设置为和父元素的高度一致
这样可以使单行文本在父元素中垂直居中 - 在font中也可以指定行高
在字体大小后可以调节/行高，来指定行高，该值是可选的，若不指定则会使用默认值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 在CSS中并没有为我们提供一个直接设置行间距的方式
* 我们只能通过设置行高来间接设置行间距，行高越大间距越大
* 使用line-height来设置行高
* 行高类似於单线本，一行一行的，线与线之间的距离就是行距
* 网页中的文字实际上也是写在一个看不见的线中的，而文字默认会在行间距中居中显示
*
* 行间距 = 行高 - 字体大小
*/
.p1{
/*
* 通过设置line-height可以间接的调整行高
* 可以接收的值：
* 1.直接接收一个大小
* 2.可以指定一个百分数，则会相对于字体去计算行高
* 3.可以直接传一个数值，则行高会设置字体大小相应的倍数
*/
line-height: 40px;
/*line-height: 200%; */
/*line-height: 2; */
font-size: 25px;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
/*
* 对於单行文本来说，可以将行高设置为和父元素的高度一致
* 这样可以使单行文本在父元素中垂直居中
*/
line-height: 200px;
}
.p2{
/*
* 在font中也可以指定行高
* 在字体大小后可以调节/行高，来指定行高，该值是可选的，若不指定则会使用默认值
*
*/
font:30px/50px 微软雅黑;
}
</style>
</head>
<body>
<p class="p1">我们是别人故事里的殇，如那凋落的叶，随风飘零，找不到方向。大帝路上，有我们的足迹，却不在天堂，只是那一抹凄艳的红，诉说着血的哀凉。马踏星空，伟岸的身，惊艳的战，射下神月，打破万古神话，筑一曲帝路辉煌，成为绝唱。那是别人的荣光。彷徨，迷惘，我们在何方，挣扎，寻访，帝路上一堆白骨注释了我们的凄凉。</p>
<div class="box1">
<a href="#">我是一个超链接</a>
</div>
<p class="p2">我们是别人故事里的殇，如那凋落的叶，随风飘零，找不到方向。大帝路上，有我们的足迹，却不在天堂，只是那一抹凄艳的红，诉说着血的哀凉。马踏星空，伟岸的身，惊艳的战，射下神月，打破万古神话，筑一曲帝路辉煌，成为绝唱。那是别人的荣光。彷徨，迷惘，我们在何方，挣扎，寻访，帝路上一堆白骨注释了我们的凄凉。</p
</body>
</html>
文本的大小写
text-transform可以用来设置文本的大小写
可选值：
none 默认值 按原来样式处理
capitalize 单词首字母大写 通过空格来识别单词
uppercase 所有字母都大写
lowercase 所有字母都小写
文本的修饰
text-decoration可以用来设置文本的修饰
可选值：
none : 不添加任何修饰 正常显示
underline : 为文本添加下划线
overline : 为文本添加上划线
line-through:为文本添加删除线
注意：超链接默认自带下划线，也就是超链接的text-decoration的默认值是underline， 如果需要去除超链接的 下划线需要将该样式设置为none。
字符间距
letter-spacing可以指定字符间距
文本间距
word-spacing可以设置单词直接的间距
其实就是单纯的设置单词之间空格的大小
文本对齐
text-align:用来设置文本对齐的方式
可选值：
left 默认值 靠左对齐
right 文本靠右对齐
center 文本居中对齐
justify 两边对齐
通过调整文本之间空格大小，来达到一个两端对齐的效果
首行缩进
text-indent用来设置首行缩进
当给他一个正值时，会自动向右侧缩进指定的像素
当给他一个负值时，会自动向左侧移动指定的距离
通过这种方法可以将一些不想显示的文字给隐藏起来
这个一般都使用em作为单位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
/*
* text-transform可以用来设置文本的大小写
* 可选值：
* none 默认值 按原来样式处理
* capitalize 单词首字母大写 通过空格来识别单词
* uppercase 所有字母都大写
* lowercase 所有字母都小写
*/
text-transform: capitalize;
}
.p2{
/*
* text-decoration可以用来设置文本的修饰
* 可选值：
* none : 不添加任何修饰 正常显示
* underline : 为文本添加下划线
* overline : 为文本添加上划线
* line-through:为文本添加删除线
*/
text-decoration: overline;
}
a{
/*
* 超链接默认自带下划线，也就是超链接的text-decoration的默认值是underline
* 如果需要去除超链接的 下划线需要将该样式设置为none
*/
text-decoration: none;
}
.p3{
/*
* letter-spacing可以指定字符间距
*/
letter-spacing: 10px;
/*
* word-spacing可以设置单词直接的间距
* 其实就是单纯的设置单词之间空格的大小
*/
word-spacing: 5px;
}
.p4{
/*
* text-align:用来设置文本对齐的方式
* 可选值：
* left 默认值 靠左对齐
* right 文本靠右对齐
* center 文本居中对齐
* justify 两边对齐
* -通过调整文本之间空格大小，来达到一个两端对齐的效果
*/
text-align: center;
}
.p5{
/*
* text-indent用来设置首行缩进
* 当给他一个正值时，会自动向右侧缩进指定的像素
* 当给他一个负值时，会自动向左侧移动指定的距离
* 通过这种方法可以将一些不想显示的文字给隐藏起来
* 这个一般都使用em作为单位
*/
text-indent: 2em;
}
</style>
</head>
<body>
<p class="p1">don't understand the God who'd let us meet if we could never be together.When they ask me what I liked the best,I'll tell them "It was you".I would rather have had one breath of her hair,one kiss of her mouth,one touch of her hand than an eternity without it.I have a feeling there's something bigger out there.Bigger than we and bigger than you.I wait all day just hoping for one more minute with you.</p>
<p class="p2">我是一个p标签</p>
<a href="#">我是超链接</a>
<p class="p3">don't understand the God who'd let us meet if we could never be together.When they ask me what I liked the best,I'll tell them "It was you".I would rather have had one breath of her hair,one kiss of her mouth,one touch of her hand than an eternity without it.I have a feeling there's something bigger out there.Bigger than we and bigger than you.I wait all day just hoping for one more minute with you.</p>
<p class="p4">don't understand the God who'd let us meet if we could never be together.When they ask me what I liked the best,I'll tell them "It was you".I would rather have had one breath of her hair,one kiss of her mouth,one touch of her hand than an eternity without it.I have a feeling there's something bigger out there.Bigger than we and bigger than you.I wait all day just hoping for one more minute with you.</p>
<p class="p5">我们是别人故事里的殇，如那凋落的叶，随风飘零，找不到方向。大帝路上，有我们的足迹，却不在天堂，只是那一抹凄艳的红，诉说着血的哀凉。马踏星空，伟岸的身，惊艳的战，射下神月，打破万古神话，筑一曲帝路辉煌，成为绝唱。那是别人的荣光。彷徨，迷惘，我们在何方，挣扎，寻访，帝路上一堆白骨注释了我们的凄凉。</p>
</body>
</html>
盒子模型
内容区（content）
使用width设置盒子内容区的宽度
使用height设置盒子内容区的高度
边框（border）
要为一个元素设置边框必须指定三个样式(缺一不可)
border-width：边框的宽度
border-color：边框的颜色
border-style：边框的类型
none 默认值 没有边框
solid 实线
dotted 点状边框
dashed 虚线
double 双线
注意：可以分别指定四个边框的宽度、颜色、类型
- 如果是四个值：上右下左，顺时针的顺序
- 如果指定三个值：上 左右 下
- 如果指定两个值：上下 左右
- 如果一个值：四条边都是这个值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
/*
* 使用width设置盒子内容区的宽度
* 使用height设置盒子内容区的高度
*
* width和height只是设置盒子内容区的大小。而不是盒子的整个大小
* 盒子可见框的大小由内容区，内边距和边框共同决定
*/
width: 100px;
height: 100px;
/*
* 设置背景颜色
*/
background-color: yellow;
/*
* 为元素设置边框
* 要为一个元素设置边框必须指定三个样式(缺一不可)
* border-width：边框的宽度
* 可以分别指定四个边框的宽度 ，上右下左，顺时针的顺序
* 如果指定三个值，上 左右 下
* 如果指定两个值 上下 左右
* 如果一个值 四条边都是这个值
* border-color: 边框的颜色
* border-style: 边框的样式
*
* 除了border-width，CSS还提供了border-xxx-width
* xxx分别表示top right bottom left
* 专门设定指定的宽度
*/
border-width:10px 20px 30px 40px;
border-left-width: 40px;
border-color:red greenyellow orange deepskyblue;
/*
* 设置边框的样式
* 可选值
* none 默认值 没有边框
* solid 实线
* dotted 点状边框
* dashed 虚线
* double 双线
*/
border-style:solid dotted dashed double;
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
边框的简写样式
- border
- 边框的简写样式，通过他可以同时设置四个便看到样式，宽度，颜色， 而且没有任何顺序要求。
- 一旦指定就是同时指定四个边同时指定
- border-top、border-right、border-bottom、border-left
可以单独设置四个边的样式 规则和border一样 只不过它只不过对一个边生效
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: yellow;
/*设置边框*/
/*
* 大部分的浏览器中，边框的宽度和颜色都是有默认值，而边框的样式默认值都是none
*/
border-width: 10px;
border-color: red;
border-style: solid;
/*
* border
* 边框的简写样式，通过他可以同时设置四个便看到样式，宽度，颜色
* 而且没有任何顺序要求
* 一旦指定就是同时指定四个边同时指定
*
* border-top border-right border-bottom border-left
* 可以单独设置四个边的样式 规则和border一样 只不过它只不过对一个边生效
*/
border:red solid 20px;
border-top: blue solid 10px;
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
内边距（padding）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width:200px;
height: 200px;
background-color:#bfa;
border:red 10px solid;
/*
* 内边距（padding），指的是盒子的内容区与盒子的边之间的距离
* 一共有四个方向的内边距，可以通过：
* padding-top
* padding-right
* padding-bottom
* padding-left
* 来设置四个方向的内边距
*
* 内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距
* 盒子的大小由内容区、内边距和边框共同决定
* 盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width
* 可见框的高度 = border-bottom-width + padding-bottom + height + padding-top + border-top-width
*/
/*设置上边距*/
padding-top: 100px;
padding-right: 100px;
padding-bottom: 100px;
padding-left: 100px;
/*
* 使用padding可以同时设置四个边框的样式，规则和border-width一致
*/
padding:100px 200px 300px 400px
}
.box2{
width: 100%;
height: 100%;
background-color: deepskyblue;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
</div>
</div>
</body>
</html>
外边距（margin）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: #00BFFF;
border: 10px red solid;
/*
* 外边距指的是盒子与其他盒子之间的距离
* 他不会影响可见框的大小，而是影响盒子的位置
* 盒子有四个方向的外边距
* margin-top
* margin-right
* margin-bottom
* matgin-left
*
* 由于页面中的元素都是靠左摆放的
* 所以当我们设置上外边距和左外边距，会导致盒子自身的位置发生改变
* 而如果设置下边距和右外边距，会导致其他元素位置移动
*/
/*
* 设置box1外边距
*/
margin-top: 100px;
margin-left: 100px;
margin-bottom: 50px;
margin-right: 50px;
/*
* margin还可以设置为auto，auto一般只设置给水平方向的margin
* 如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值
* 垂直方向外边距如果设置auto，则外边距默认就是0
*
* 如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值
* 以示子元素在父元素中居住
*/
margin-left: auto;
margin-right: auto;
/*
* 外边距同样可以使用属性margin，可以同时设置四个方向
*/
margin:10px auto 30px auto
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*
* 外边距也可以指定为负值
* 如果外边距设置的是负值，则元素反方向移动
*/
margin-top: -100px;
margin-left: -100px;
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>
</html>