兄弟元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
为span后的一个p元素设置一个背景颜色为黄色
后一个兄弟元素选择器
作用：可以选中一个元素后紧挨着的指定的兄弟元素
语法：前一个 + 后一个
*/
/* span + p{
background-color: aqua;
} */
/* 选中后边所有的兄弟元素 */
span ~ p{
background-color: black;
}
</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 lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
为所有的p元素设置一个背景颜色为黄色，出来class值为hello的
否定伪类：
作用：可以从已经选中的元素中剔除某些元素
语法：
:not(选择器)
*/
p:not(.hello){
background-color: blue;
}
/* 剔除id为p1 */
p:not(#p1){
background-color: blue;
}
</style>
</head>
<body>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p class="hello">我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
</body>
</html>
继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<!--
像儿子可以继承父亲的遗产一样，在CSS中，祖先元素上的样式，也会被他的后代元素所继承
利用继承，可以经一些基本的样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式
并不是所有的样式都会被子元素所继承，比如：背景相关的样式都不会被继承
-->
<p style="font-size: 30px;">
我是p标签中的文字<br>
<span>我是span中的文字</span>
</p>
<span>我是p标签外的文字</span>
<p style="background-color: yellow;">
我是p标签中的文字<br>
<span>我是span中的文字</span>
</p>
<span>我是p标签外的文字</span>
</html>
选择器的优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=p, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/*
当使用不同的选择器，选中同一个元素时并且设置相同的样式时，
这时样式之间产生冲突，最终到底采用哪个选择器定义的样式，由选择器的优先级（权重）决定
优先级高的优先显示
优先级规则
内联样式，优先级1000
id选择器，优先级100
类和伪类，优先级10
元素选择器，优先级1
通配*，优先级0
继承的样式，没有优先级
*/
/* .p1{
background-color: yellow;
}
p{
background-color: violet;
}
#p2{
background-color: tomato;
} */
*{
font-size: 50px;
}
p{
font-size: 30px;
}
</style>
</head>
<body>
<p class="p1" id="p2" style="background-color: blue;">
我是一个p标签<br>
<span>我是p标签中的span</span>
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=p, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/*
当使用不同的选择器，选中同一个元素时并且设置相同的样式时，
这时样式之间产生冲突，最终到底采用哪个选择器定义的样式，由选择器的优先级（权重）决定
优先级高的优先显示
优先级规则
内联样式，优先级1000
id选择器，优先级100
类和伪类，优先级10
元素选择器，优先级1
通配*，优先级0
继承的样式，没有优先级
当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后再比较，
但是注意，选择器的优先级计算不会超过他的最大的数量级,如果选择器的优先级一样，则使用靠后的样式
并集选择器的优先级是单独计算
div,p,#p1,.hello{}
可以在样式的最后，添加一个!important,则此时该样式将会获得一个最高的优先级，
将会优先于所有的样式显示甚至超过内联样式，但是在开发中尽量避免使用!important
不方便后期的维护
*/
#p2{
background-color: blue !important;
}
p#p2{
background-color: red;
}
.p1{
background-color: rosybrown;
}
.p3{
background-color: slateblue;
}
</style>
</head>
<body>
<p class="p1" id="p2" ">
我是一个p标签<br>
<span>我是p标签中的span</span>
</p>
</body>
</html>
a的伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/*
涉及到a的伪类一共有四个
:link
:visited
:hover
:active
而这四个优先级选择器的优先级是一样的
:link和:visited之间没有顺序，可以颠倒顺序
:hover和:active之间有顺序，不能颠倒顺序
:link和:visited要放在:hover和:active之前才有效
*/
a:link{
color: slateblue;
}
a:visited{
color: slategray;
}
/* 鼠标移入 */
a:hover{
color: springgreen;
}
/* 正在被点击 */
a:active{
color: tomato;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">访问过的链接</a>
<br>
<a href="http://www.baidu12344444444.com">未访问过的链接</a>
</body>
</html>
文本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/*
<em>和<strong>
em标签用于表示一段内容中的着重点（语气上的强调）
strong标签用于表示一个内容的重要性（内容上的强调）
这两个标签可以单独使用，也可以一起使用
通常em显示为斜体，而strong显示为粗体
*/
</style>
</head>
<body>
<p>
<strong>警告：任何情况下不要接近僵尸</strong>
他们只是<em>看起来</em>很友好，实际上他们是为了吃你的胳膊
</p>
<!--
em和strong都表示一个强调的内容，有语义
em主要表示语气上的强调，em在浏览器中默认使用斜体显示
strong表示强调的内容，比em语气更强烈，默认使用粗体显示
-->
<p>
今天天气<em>真不错</em>!
</p>
<p>
<strong>
注意：如果你不好好听课，你就找不到好工作！
</strong>
</p>
<p>
<!--
i标签中的内容会以斜体显示
b标签中的内容会以粗体显示
i和b标签都没有语义
h5规范中规定，对于不需要着重的内容而是单纯的加粗或者斜体，
就可以使用b和i标签
-->
<i>我是i标签中的内容</i>
<b>我是b标签中的内容</b>
<!--
small标签中的内容会比他的父元素中的文字要小一些
在h5中使用small标签来表示一些细则一类的内容
比如：合同中的小字，网站中的版权声明都可以放到small
-->
<p>
我是p标签中的内容<small>我是samll标签中的内容</small>
</p>
<p>
我是p标签中的内容<big>我是big标签中的内容</big>
</p>
<!--
网页中所有的加书名号的内容都可以使用cite标签，表示参考的内容
比如：书名 歌名 话剧名 电影名...
-->
<p>
<cite>《论语》</cite>是我最喜欢的一本书
</p>
<!--
q标签表示一个短的引用（行内引用）
q标签引用的内容，浏览器会默认加上引号
-->
<p>
子曰：<q>学而时习之不亦说乎！</q>
</p>
<!--
blockquote标签表示一个长引用（块级引用），独占一行
-->
<div>
子曰：
<blockquote>
有朋自远方来，乐呵乐呵！
</blockquote>
</div>
<!--
使用sup标签来设置一个上标
-->
<p>2<sup>2</sup></p>
<p>赵薇<sup><a href="#">[1]</a></sup></p>
<!--
使用sub标签来设置一个下标
-->
<p>H<sub>2</sub>O</p>
<!--
使用del标签来表示一个删除的内容
del标签中的内容，会自动添加删除线
-->
<p>
<del>17.75</del><br>
15.54 <br>
</p>
<!--ins表示一个插入的内容(填空)-->
<p>
我们老师真<ins>好啊</ins>！
</p>
<!--
需要在页面中直接编写一些代码
pre是一个预格式标签，会将代码中的格式保存，不会忽略多个空格（怎么写的就怎么打印出来）
-->
<pre>
window,onload = function(){
alert("hello");
};
</pre>
<!--
code专门用来表示代码
我们一般结合pre和code来表示一段代码
寄写入了代码，又保持了格式
-->
<pre>
<code>
window,onload = function(){
alert("hello");
};
</code>
</pre>
</p>
</body>
</html>
列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/*
去掉项目符号
*/
ul{
list-style: none;
}
</style>
</head>
<body>
<!--
列表就相当于去超市购物时的那个购物清单
在HTML中也可以创建列表，在网页中一共有三种列表
1.无序列表
2.有序列表
3.定义列表
-->
<!--
无序列表
使用ul标签创建一个无序列表
使用li在ul中创建一个列表项
一个li就是一个列表项
通过type属性可以修改无须列表的项目符号
可选值：
disc，默认值，实心的圆点
square，实心的方块
circle，空心的圆圈
注意：默认的项目符号我们一般都不使用！！！,因为在不同的浏览器中表现不同
如果需要设置项目符号，则可以采用为li设置背景图片的方式来设置
新闻，浏览器导航
ul 和li都是块元素
type属性，可以指定序号的类型
可选值：
1.默认值，使用阿拉伯数字
2.a/A,采用小写或者大写字母作为序号
3.i/I,使用小写或者大写的罗马数字作为序号
-->
<ul type="circle">
<li>孙悟空</li>
<li>赵悟空</li>
<li>钱悟空</li>
<li>李悟空</li>
<li>周悟空</li>
<li>宋悟空</li>
</ul>
<!--
有序列表和无序列表类似，只不过它使用ol来代替ul
有序列表使用有序的序号作为项目符号
ol也是一个块元素
-->
<ol type="I">
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<!--
列表之间都是可以互相嵌套的，可以在无序列表中放个有序列表
也可以在有序列表中放一个无序列表
-->
<p>菜谱</p>
<ul>
<li>
鱼香肉丝
<ol>
<li>鱼</li>
<li>香</li>
<li>肉丝</li>
</ol>
</li>
<li>
宫保鸡丁
<ul>
<li>宫保</li>
<li>鸡丁</li>
</ul>
</li>
<li>青椒肉丝</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
定义列表用来对一些词汇或内容进行定义
使用dl来创建一个定义列表
dl中有两个子标签
dt：被定义的内容
dd：对定义内容的描述
同样dl和ul和ol之间都可以互相嵌套
-->
<dl>
<dt>武松</dt>
<dd>景阳冈打虎，战斗力99.99</dd>
<dd>后打死猩猩</dd>
<dt>武大</dt>
<dd>著名餐饮企业家，战斗力0</dd>
</dl>
</body>
</html>
单位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/* 快捷方式：
div.box回车
div#box回车
长度单位
像素px
像素是我们在网页中使用的最多的一个单位，
一个像素就相当于我们屏幕中的一个小点，
我们的屏幕实际上就是由这些像素点构成的
但是这些像素点是不能直接看见的
不同的显示器一个像素的大小也不相同
显示效果越好越清晰，像素就越小，反之像素越大
百分比%
也可以将单位设置为一个百分比的形式，
这样浏览器将会根据其父元素的样式来计算该值
使用百分比的好处是，当父元素的属性值发生变化时
子元素也会按照比例发生改变
在我们创建一个自适应的页面时，经常使用百分比作为单位
em
em和百分比类似，他是相对于当前元素的字体大小来计算的
1em = 1font-size
使用em时，当字体大小发生改变时，经常会使用em
*/
.box{
500px;
height: 500px;
background-color: red;
/* }
.box1{
50%;
height: 50%;
background-color: yellow;
} */
}
.box1{
font-size: 100;
1em;
height: 50%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">大小</div>
</div>
</body>
</html>
字体的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.p1{
/* 设置字体颜色，使用color来设置文字的颜色 */
color: red;
/*
设置文字的大小,浏览器中一般默认的文字大小都是16px
font-size设置的并不是文字本身的大小
在页面中，每个文字都是处在一个看不见的框中的
我们设置的font-size实际上是设置格的高度，并不是字体的大小
一般情况下文字都要比这个格要小一些，有时也会比格大
根据字体的不同，显示效果也不同
*/
font-size: 50px;
/*
通过font-family可以指定文字的字体
当采用某种字体时，如果浏览器支持则使用该字体
如果浏览器不支持，则使用默认字体（微软雅黑）
该样式可以同时指定多个字体，多个字体之间使用，分开
当采用多个字体时，浏览器会优先使用前边的字体
如果前面的字体不支持再尝试下一个
浏览器使用的字体默认就是计算机中的字体，
如果用户计算机中有，则使用，如果没有不用，使用下一个
在开发中，如果字体太奇怪，用的太少了，尽量不要使用
有可能用户的电脑没有，就不能达到预期的效果
*/
/* font-family: 微软雅黑; */
/* font-family: 华文彩云，arial,微软雅黑; */
/* 设置字体背景颜色 */
background-color: rgb(26, 2, 48);
}
</style>
</head>
<body>
<p class="p1">
我是一个p标签,fgvbhnj
</p>
</body>
</html>
字体样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.box1{
100px;
height: 100px;
/*
颜色单位
在CSS中可以直接使用颜色的单词来表示不同的颜色
红色red，蓝色blue，绿色green
也可以使用RGB值来表示不同的颜色
所谓的RGB值指的是通过red，green，blue三原色
通过这三种颜色不同的浓度，来表示不同的颜色
例子：rgb(红色的浓度，绿色的浓度，蓝色的浓度)
颜色的浓度需要一个0-255之间的值，255表示最大，0表示没有
浓度也可以采用一个百分数来设置，小一个0% - 100%之间的数字来表示
使用百分数最终也会转换为0-255之间的数
0% 表示0
100% 表示255
*/
/* background-color: red; */
/* background-color: rgb(200, 0, 0); */
/* background-color: rgb(255, 50, 0); */
background-color: rgb(50%, 100%, 100%);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
字体的分类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体分类</title>
<style type="text/css">
p{
font-family: arial,微软雅黑，华文彩云，serif;
}
</style>
</head>
<body>
<!--
在网页中将字体分为5大类：这是一个大的分类
serif（衬线字体）(笔画拐弯)
sans-serif(非衬线字体)（横平竖直）
monospace(等宽字体)(代码常用)
cursive(草书字体)
fantasy（虚幻字体）（广告）
可以将字体设置为这些大的分类，当设置为大的分类以后
浏览器会自动选择指定的字体并应用样式，我们不能通过这种方式指定字体
不同浏览器对字体的理解不同，显示的效果不同
一般会将字体的大分类，指定为font-family后面的最后一个字体，作为兜底
-->
<p style="font-size: 50px;font-family: serif;">衬线字体，我是一段文字，gwfrgrh</p>
<p style="font-size: 50px;font-family: sans-serif;">非衬线字体，我是一段文字，gwfrgrh</p>
<p style="font-size: 50px;font-family: monospace;">等宽字体，我是一段文字，IHgwfrgrh</p>
<p style="font-size: 50px;font-family: cursive;">草书字体，我是一段文字，gwfrgrh</p>
<p style="font-size: 50px;font-family: fantasy;">虚幻字体，我是一段文字，gwfrgrh</p>
</body>
</html>
字体的其他样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体的其他样式</title>
<style type="text/css">
.p1{
color: red;
font-size: 30px;
font-family: 微软雅黑;
/*
font-style可以用来设置文字的斜体
可选值：
normal,默认值，文字正常显示
italic，文字会以斜体显示
oblique，文字会以倾斜显示
大部分浏览器都不会对倾斜和斜体作区分
也就是说我们设置italic和oblique他们的效果往往是一样的，
可以认为italic=oblique，一般只会使用italic
*/
/* font-style: italic; */
/* font-style: oblique; */
/*
font-weight可以用来设置文本的加粗效果
可选值：
nomal，默认值，文字正常显示
bold，文字加粗显示
该样式也可以指定100-900之间的9个值，
但是由于用户的计算机往往没有这么多级别的字体，所以达不到我们想要的效果
也就是说200有可能比100粗，也可能是一样的
*/
/* font-weight: bold; */
font-weight: 900;
/* font-weight: bold; */
/*
font-variant可以用来设置小型大写字母
可选值
nomal，默认值，文字正常显示
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 60px "微软雅黑"
}
</style>
</head>
<body>
<p class="p1">我是一段文字，gvwDGTRgwrg</p>
<p class="p2">我是一段文字，gvwDGTRgwrg</p>
<p class="p3">我是一段文字，gvwDGTRgwrg</p>
</body>
</html>
行间距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行间距</title>
<style type="text/css">
/*
在CSS中并没有为我们提供一个直接设置行间距的方式
我们只能通过设置行高来间接的设置行间距，行高越大行间距越大
使用line-height来设置行高
行高类似于我们上学使用的单线本，单线本是一行一行，线与线之间的距离就是行高
网页中的文字实际上也是写在一个看不见的线中的，而文字会默认在行高中垂直居中显示
行间距=行高-字体大小（默认是16）
负数就重叠
*/
.p1{
/*
通过line-height可以间接的设置行高
可以接受的值
1.直接就接收一个大小px
2.可以指定一个百分数，相对于字体的大小去计算行高（100%无间距）
3.可以直接传一个数值（正数 负数 小数），
则行高会设置字体大小相应的倍数
*/
font-size: 20px;
/* line-height: 50px; */
/* line-height: 200%; */
line-height: 2;
}
/*
对于单行文本来说，可以将行高设置为和父元素的高度一致
这样可以使单行文本在父元素中垂直居中
*/
.box{
200px;
height: 200px;
background-color: #bfa;
line-height: 200px;
}
.p2{
/*
在font中也可以指定行高
在字体大小后可以添加/行高，来指定行高，
该值是可选的，如果不指定则会使用默认值（28）
CSS中字体的加粗，斜体，行高等，如果重复指定的话（要考虑默认值），后面的覆盖前面的
*/
font: 30px/28px "微软雅黑";
line-height: 200px;
}
</style>
</head>
<body>
<div class="box">
<a href="200px">我是一个超链接</a>
</div>
<p class="p1">
【环球网报道】继22日发表声明并于当晚会见记者后，24日，香港特区行政长官林郑月娥在
脸书发文，第三次谈及全国人民代表大会将审议
《全国人民代表大会关于建立健全香港特别行政区维护国家安全的法律制度
和执行机制的决定（草案）》一事。
林郑月娥表示，她和她的团队会尽全力向公众宣传和解释这次为国家安全立法的重要性，
以抗衡反华势力和反政府人士正动员的无理攻击和肆意诋毁。林郑月娥说，“我相信香港绝大多数
市民的眼睛是雪亮的，他们不会被这股破坏社会安宁的势力所蒙骗”。
</p>
<p class="p2">
【环球网报道】继22日发表声明并于当晚会见记者后，24日，香港特区行政长官林郑月娥在
脸书发文，第三次谈及全国人民代表大会将审议
《全国人民代表大会关于建立健全香港特别行政区维护国家安全的法律制度
和执行机制的决定（草案）》一事。
</p>
</body>
</html>
文本的修饰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.p1{
/*
text-transform可以用来设置文本的大小写
可选值
none 默认值，该怎么显示就怎么显示
capitalize 单词的首字母大写（以空格或TAB为分隔符，识别单词）
uppercase 所有的字母都大写
lowercase 所有的字母都小写
*/
/* text-transform: none; */
/* text-transform: capitalize; */
}
.p2{
/*
text-decoration可以用来设置文本的修饰
可选值
none：不添加任何修饰，正常显示
underline:为文本添加下划线
overline:为文本添加上划线
line-through:为文本添加删除线
*/
/* text-decoration: none; */
/* text-decoration:underline; */
/* text-decoration:overline; */
text-decoration:line-through;
}
a{
/* 超链接会默认添加下划线，也就是超链接的test-decoration的默认值是underline
如果需要去除超链接的下划线则需要将该样式设置为none
*/
text-decoration: none;
}
</style>
</head>
<body>
<a href="#">我是超链接</a>
<p class="p2">
configure arguments: --prefix=/etc/nginx
--sbin-path=/usr/sbin/nginx --modules-path=/usr/lib64/nginx/modules
--conf-path=/etc/nginx/nginx.conf
--error-log-path=/var/log/nginx/error.log
--http-log-path=/var/log/nginx/access.log --pid-path=/var/run/nginx.pid
--lock-path=/var/run/nginx.lock
--http-client-body-temp-path=/var/cache/nginx/client_temp
</p>
<p class="p1">
configure arguments: --prefix=/etc/nginx --sbin-path=/usr/sbin/nginx --modules-path=/usr/lib64/nginx/modules --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --pid-path=/var/run/nginx.pid --lock-path=/var/run/nginx.lock --http-client-body-temp-path=/var/cache/nginx/client_temp
</p>
</body>
</html>
字符与单词的间距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style text/css>
.p3{
/*
letter-spacing可以指定字符间距
*/
/* letter-spacing: 10px; */
/*
word-spacing可以设置单词之间的间距
实际上就是设置词于词之间空格的大小（空格）
*/
word-spacing: 20px;
}
</style>
</head>
<body>
<p class="p3">
configure arguments: --prefix=/etc/nginx --sbin-path=/usr/sbin/nginx
--modules-path=/usr/lib64/nginx/modules --conf-path=/etc/nginx/nginx.conf
--error-log-path=/var/log/nginx/error.log
--http-log-path=/var/log/nginx/access.log --pid-path=/var/run/nginx.pid
--lock-path=/var/run/nginx.lock
--http-client-body-temp-path=/var/cache/nginx/client_temp 哈哈哈
</p>
</body>
</html>
文本样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首行缩进</title>
<style text/css>
.p3{
/*
text-align用于设置文本的对齐方式
可选值
lift：默认值，文本靠左对齐
right:文本靠右对齐
center：文本居中
justify:文本两边都对齐
通过调整文本之间的空格（中间的）的大小，来达到一个两端对齐的目的
text-indent:用于设置首行缩进（32px表示2个中文字符的间距）
当给他指定一个正值时，会自动缩进指定的像素
如果为他指定一个负值时，则会向左移动指定的像素
通过这种方式可以将一些不想显示的文字隐藏起来，
这样浏览器可以找到，用户不会看到
单位px会受到字体大小的影响
单位em不会受到字体大小的影响，中文可以设置2em，英文设置1em
*/
/* text-align: left; */
/* text-align: right; */
/* text-align: center; */
/* text-align: justify; */
/* text-indent: 32px; */
/* text-indent: 2em; */
text-indent: -999999999px;
}
</style>
</head>
<body>
<h1 class="p3">我是一个h1</h1>
<p class="p3">
configure arguments: --prefix=/etc/nginx --sbin-path=/usr/sbin/nginx
--modules-path=/usr/lib64/nginx/modules --conf-path=/etc/nginx/nginx.conf
--error-log-path=/var/log/nginx/error.log
--http-log-path=/var/log/nginx/access.log --pid-path=/var/run/nginx.pid
--lock-path=/var/run/nginx.lock
--http-client-body-temp-path=/var/cache/nginx/client_temp 哈哈哈 嘿嘿嘿
</p>
</body>
</html>
盒子模型--边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型</title>
<style type="text/css">
/*
盒子模型，也可以叫框模型，盒模型，box model
CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里
如果把所有的元素都想象成盒子，那么我们对网页的布局就相当于是摆放盒子
我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局
所有的元素都是盒子
一个网页由大盒子和里面的小盒子组成
一个盒子模型分成四个部分：
内容区：
内边距：
边框：
外边距：
*/
/*
使用width来设置盒子内容区的宽度
使用height来设置盒子内容区的高度，
widhth和heigth只是设置的盒子内容区的大小，而不是整个盒子的大小
盒子的可见框的大小由内容区，内边距和边框共同决定
*/
.box1{
100px;
height: 100px;
/* 设置背景颜色 */
background-color:#bfa;
/*
为元素设置边框
要为一个元素设置边框必须指定三个样式
border-边框的宽度
border-color:边框的颜色
border-style:边框的样式
*/
/* 设置边框的宽度 */
/* border- 10px; */
/*
使用border-width可以分别指定四个边框的宽度
如果在border-width指定了四个值，
则四个值会分别设置给 上 右 下 左 ，按照顺时针的方式设置的
如果在border-width指定了三个值，
则三个值会分别设置给 上 左右 下
如果在border-width指定了二个值，
则二个值会分别设置给 上下 左右
如果在border-width指定了一个值 ，
则一个值会分别设置给 上下左右
除了border-width。CSS中还提供了四个border-xxx-width
xxx的值可能是 top right bottom left,表示四个方向
专门用来设置指定边的宽度
*/
/* border- 10px 20px 30px 40px; */
/* border- 10px 20px 30px; */
/* border- 10px 20px; */
/* border- 10px; */
/* 设置边框的颜色
和宽度一样，color也提供四个方向的样式，可以分别指定颜色
border-xxx-color
*/
border-color: red yellow orange blue;
border-color: red yellow orange;
border-color: red yellow;
border-color: red;
/*
设置边框的样式
可选值：
none,默认值，没有边框
solid，实线
dotted，点状边框。在大多数浏览器中呈现为实线
dashed,虚线
double，双线边框
style也可以分别指定四个边的边框样式，规则和width一致，
同时它也提供border-xxx-style四个样式，来分别设置四个边
*/
border-style: solid dotted dashed double;
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.box{
200px;
height: 200px;
background-color: #bfa;
/*
设置边框
大部分浏览器中，边框的宽度和颜色都是有默认值，而边框的样式的默认值都是none，不写样式就没有边框
*/
/* border- 10px;
border: red;
border-style: solid; */
/*
border
边框的简写样式，通过他可以同时设置四个边框的样式，宽度，颜色
而且没有任何顺序要求
dorder一指定就是四个边，不能分别指定
border-top（上） border-right（右） border-bottom（下） border-left（左边）
可以单独设置四个边的样式，规则和border一样，只不过他只对一个边生效
*/
/* border: 10px red solid; */
/* border-top: solid red 10px; */
/* border-left: red solid 10px; */
/* border-bottom: solid red 10px; */
border: orange solid 10px;
border-right: none;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.box1{
200px;
height: 200px;
background-color: #bfa;
/* 设置边框 */
border: 10px red solid;
/*
内边距，指的是盒子的内容区与盒子边框之间的距离(火狐默认是3px)
一共有四个方向的内边距，可以通过：
padding-top（上）
padding-right（右）
padding-bottom（下）
padding-left（左）
来设置四个方向的内边距
内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距
盒子的大小由内容区，内边距和边框共同决定
盒子的可见框的宽度= border-left-width + padding + width + padding-right +border-right-width
盒子的可见框的高度= border-top-width + padding-top + height + padding-bottom + border-bottor-width
*/
/* 设置上内边距 */
/* padding-top: 100px; */
}
/*
创建一个子元素box2占满box1
修改内边距会改变盒子的大小
*/
.box2{
/* 100%;
height: 100%;
background-color: green; */
/* 设置上内边距 */
padding-top: 100px;
/* 设置右内边距 */
padding-right: 100px;
/* 设置下内边距 */
padding-bottom: 100px;
/* 设置左内边距 */
padding-left: 100px;
/*
使用padding可以同时设置四个边框的样式，规则和border-width一致
*/
/* padding: 100px; */
/* padding: 100px 200px; */
padding: 100px 200px 300px;
padding: 100px 200px 300px 400px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.box1{
200px;
height: 200px;
background-color: #bfa;
border: solid 10px red;
/*
外边距指的是盒子与其他盒子之间的距离
他不会影响可见框的大小，而是会影响到盒子的位置
盒子有四个方向的外边距
margin-top
margin-right
margin-bottom
margin-left
由于页面中的元素都是靠左靠上摆放的
所以注意，当我们设置上和左外边距的时候，会导致盒子自身的位置发生改变
而如果设置右和下外边距会改变其他盒子的位置
*/
/*
设置box1的上边距，盒子上边距和其他的盒子的距离
*/
/* margin-top: 100px; */
/*
设置box1的上边距，盒子左边距和其他盒子的距离
*/
/* margin-left: 100px; */
/*
设置box1的右边距，盒子右边距和其他盒子的距离
*/
/* margin-right: 100px; */
/*
设置box1的下边距，盒子下边距和其他盒子的距离
*/
/* margin-bottom: 100px;
/*
外边距也可以指定为一个负值
如果外边距设置的是负值，则元素会向反方向移动
内边距只能是一个正值
*/
/* margin-left: -100px;
margin-top: -100px; */
/*
margin还可以设置为auto，auto一般只设置给水瓶方向的margin
如果只指定，左外边距或右边距的margin为auto则会将外边距设置为最大值
如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值
就可以使元素自动在父元素中居中，所以经常将左右外边距设置为auto
以使子元素在父元素中水平居中
*/
/* margin-left: auto;
margin-right: auto; */
/* 垂直方向设置外边距=0 */
margin-top: auto;
/* .box2{
200px;
height: 200px;
background-color: yellow; */
} */
/*
外边距同样可以使用简写属性margin，可以同时设置四个方向的外边距
规则和padding一样
*/
margin：10px 20px 30px 40px;
margin：10px 20px 30px；
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
垂直外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.box1{
100px;
height: 100px;
background-color: yellow;
/*
为上边的元素设置一个下外边距
*/
margin-bottom: 100px;
}
/*
垂直外边距的重叠
在网页中相邻的垂直方向的外边距会发生外边距的重叠
所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是求和
如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素
*/
.box2{
100px;
height: 100px;
background-color: violet;
/*
为下边的元素设置一个上外边距
*/
margin-top: 100px;
}
.box3{
200px;
height: 200px;
background-color: yellow;
/* 为box3设置一个上边框 */
/* border-top: 1px red solid; */
/* padding-top: 1px; */
padding-top: 100px;
}
.box4{
100px;
height: 100px;
background-color: yellowgreen;
/*
给子元素设置一个上外边距，使子元素的位置下移
*/
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box4"></div>
a
<div class="box3"></div>
<div class="box1"></div>
a
<div class="box2"></div>
</body>
</html>
浏览器的默认样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/*
浏览器为了在页面中没有样式时，也可以让页面有一个比较好的显示效果
所以为很多的元素都设置了一些默认的margin和padding
而他的这些默认样式，正常情况下我们是不需要使用的
所以我们往往在编写样式之前需要将浏览器中默认的margin和padding统统去掉
*/
/* 清除浏览器的默认样式 */
*{
margin: 0;
padding: 0;
}
.box1{
100px;
height: 100px;
background-color: #bfa;
}
p{
background-color: yellow;
}
body{
margin: 0;
}
p{
margin: 0;
}
ul{
margin: 0;
padding: 0cm;
}
</style>
</head>
<body>
<div class="box1"></div>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
</body>
</html>
内联元素的盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
span{
background-color: yellow;
}
.box1{
100px;
height: 100px;
background-color: red;
}
.s1{
/*
盒模型：
内容区，内边距，边框，外边框
*/
/*
内联元素不能设置wedth和height
*/
100px;
height: 100px;
/*
设置水平内边距,内联元素可以设置水平方向的内边距
*/
padding-left: 100px;
padding-right: 100px;
/* 垂直方向内边距,内联元素可以设置垂直方向内边距，但是不会影响页面的布局 */
/* padding-top: 100px;
padding-bottom: 100px; */
/*
为元素设置边框
内联元素可以设置边框，但是垂直的边框不会影响到页面的布局
*/
border: red 1px solid;
/*
水平外边距
内联元素
*/
margin-left: 100px;
margin-right: 100px;
.s2{
/*
为右边的元素设置一个左外边距
水平方向的相邻外边距不会重叠，而是求和
*/
margin-bottom: 200px;
/*
内联元素不支持垂直外边距
*/
/* margin-top :200px; */
/* margin-bottom:200px; */
}
}
</style>
</head>
<body>
<!--所有元素都是盒子-->
<span class="s1">我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
<div class="box1"></div>
</body>
</html>
元素的隐藏和显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
a{
background-color: red;
/* 将一个内联元素变成块元素
通过displsy样式可以修改元素的类型
可选值
inline:可以将一个元素作为内联元素显示
block：可以将元素设置块元素显示
inline-block:将一个元素转换为行内块元素
可以使一个元素既有行内元素的特点又有块元素的特点
既可以设置宽高，又不会独占一行（图片）
none：不显示元素，并且元素不会在页面中继续占有位置
*/
/* display: block; */
display: inline-block;
/* 为期设置宽和高,内联元素不支持宽和高 */
500px;
height: 500px;
}
/*
display:none
使用该方式隐藏的元素，不会在页面中显示，并且不再占据页面的位置
*/
.box{
100px;
height: 100px;
background-color: red;
display: none;
}
/*
visibility
可以用来设置元素的隐藏和显示的状态
可选值：
visible默认值，元素默认会在页面显示
hidden 元素会隐藏，不显示
使用visibility: hidden;隐藏的元素虽然不会在页面中显示，
但是他的位置会依然保持
*/
visibility: hidden;
</style>
</head>
<body>
<div class="box"></div>
<a href="#">我是一个大大的超链接</a>
<span>hellow</span>
</body>
</html>