复制下面的代码，创建html文件，用浏览器打开，可以看到完整演示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Arthur`s CSSnotes</title>
<link rel="stylesheet" href="reset.css">
<style>
#red{
color:red;
}
.blue{
color:blue !important;
}
.font{
font: size 30px;
}
div.red{
font-size: 50px;
}
.a.b.c{
color: cadetblue;
}
.abc,def{
color: chartreuse;
}
div1 > span1{
color:cornflowerblue;
}
div2 span2{
color: cyan;
}
p3 + span3{
color: darkgoldenrod;
}
p3 ~ span3{
color: darkorchid;
}
p[title = abc]{
color:rgb(201, 197, 190);
}
p[title^=abc]{
color:rgb(179, 179, 96)
}
p[title$=abc]{
color: rgb(133, 66, 54);
}
p[title*=jkl]{
color: teal;
}
ul > li:first-child{
color: red;
}
ul > li:nth-child(even){
color: blue;
}
/* ul > li:not(:last-of-type){
color: burlywood;
} */
a:link{
color:red;
}
a:vistied{
color:royalblue;
}
a:hover{
color:salmon;
}
a:active{
color:springgreen;
}
b::first-letter{
font-size: 50px;
}
b::first-line{
background-color: cadetblue;
}
b::selection{
background-color: greenyellow;
}
b::before{
content: '"';
}
b::after{
content:'"';
}
ancestors{
color:red;
}
.box1{
width:200px;
height:200px;
background-color: cadetblue;
}
.box2{
width:50%;
height:50%;
background-color: forestgreen;
}
.box3{
font-size:20px;
width:10em;
height:10em;
background-color: fuchsia;
}
.box4{
width:10rem;
height:10rem;
background-color: gold;
}
.box5{
font-size: large;
width: 100px;
height:100px;
background-color:red;
background-color: rgb(255,10,2);
background-color: rgba(106,106,106,.3);
background-color: #ff00ff;
}
.box6{
width: 200px;
height: 200px;
background-color: black;
border:solid 5PX red;
padding:10px;
}
.inner{
width:100%;
height:100%;
background-color: yellow;
}
.box7{
width:200px;
height: 200px;
background-color: cadetblue;
overflow:auto;
}
/* *{
margin:0;
padding:0;
list-style: none;
} */
/* 盒子的大小 */
.box8{
width: 100px;
height: 100px;
background-color: #bfa;
padding: 10px;
border: 10px red solid;
box-sizing: border-box;
}
.box9:hover{
width: 200px;
height: 200px;
background-color: cornflowerblue;
outline:10px red solid;
}
.box10{
width: 200px;
height: 200px;
background-color: cornflowerblue;
box-shadow: 0px 0px 50px rgba(0,0,0,.4);
}
.box11{
width: 200px;
height: 200px;
background-color: orange;
border-radius: 50%;
}
</style>
</head>
<body>
<h1>CSS简介</h1>
<p>
<br>使用CSS来修改元素的样式：
<br>第一种方式(内联样式，行内样式)
<br> -在标签内部通过style属性来设置元素样式
<br><br>
第二种方式(内部样式表)
<br> -将样式编写到head中的style标签里，然后通过css的选择器来选中元素并为其设置各种样式
<br> -内部样式表更加方便对样式进行复用
<br><br>
第三种方式(外部样式表) 最佳
<br> -可以将css样式编写到一个外部的css文件中，然后通过link标签进行引入外部css文件
<br> -外部样式表需要通过link标签进行引
入，这样可以使样式在不同页面之间进行复用，节约开发时间;
<br> -将样式编写到外部的css文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验;
<!-- <br><link rel="styleheet" href="./style.css"> -->
<br><special>Everything is possibl！</special>
</p>
<br>
<p>
<h1> CSS的基本语法：</h1>
<br> 选择器 声明块
<br> 选择器，通过选择器可以选中页面中的指定元素
<br> 比如special的作用是选中页面中所有的special元素
</p>
<p>
<br>元素选择器
<br> 作用：根据标签名来选中指定的元素
<br> 语法：标签名{}
<br> 例子：p{} h1{} div{}
</p>
<p>
<br>id选择器
<br> 作用：根据元素的id属性选中一个元素
<br> 语法：#id属性值{}
<br> 例子：#box{} #red{}
<p id="red">Everything is possible！</p>
</p>
<p>
<br>类选择器
<br> 作用：根据元素的class属性选中一组元素
<br> 语法：.class
<p class="blue" class=".font">Everything is possible！</p>
<p class="blue" class=".font">Nothing is impossible！</p>
</p>
<p>
<br>并集选择器
<br> 作用：选中同时符合多个条件的元素
<br> 语法：选择器1 选择器2 选择器n{}
<br> 注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头
<div class="red">Everything is possible！</div>
<div class="red a b c">Nothing is impossible！</div>
</p>
<p>
<br>选择器分组(交集选择器)
<br> 作用：同时选择多个选择器对应的元素
<br> 语法：选择器1 选择器2 选择器n{}
<br> 注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头
<br><def>Nothing is impossible！</def>
</p>
<h1>关系选择器</h1>
<p>
<br>子元素选择器
<br> 作用：选中指定父元素的指定子元素
<br> 语法：父元素 > 子元素
<div1>
<br>我是一个div
<p1>
<br>我是div中的p元素
<br><span1>我是p元素中的span</span1>
</p1>
<br><span1>我是div中的span</span1>
</div1>
</p>
<p>
<br>后代元素选择器
<br> 作用：选中指定元素内的指定后代元素
<br> 语法：祖先 后代
<div2>
<br>我是一个div
<p2>
<br>我是div中的p元素
<br><span2>我是p元素中的span</span2>
</p2>
<br><span2>我是div中的span</span2>
</div2>
</p>
<p>
<br>兄弟元素选择器
<br> 作用：选择下一个兄弟;选择后面所有的兄弟
<br> 语法：前一个 + 后一个
<br> 语法：前一个 ~ 后一个
<div3>
<br>我是一个div3
<p3>
<br>我是div3中的p3元素
<br><span3>我是p3元素中的span3<br></span3>
</p3>
<span3><br>我是p3元素的兄弟1</span3>
<span3><br>我是p3元素的兄弟2</span3>
<span3><br>我是p3元素的兄弟3</span3>
</div3>
</p>
<h1>属性选择器</h1>
<p>
<br>[属性] 选择含有指定属性的元素
<br>[属性名=属性值] 选择含有指定属性和属性值的元素
<br>[属性名^=属性值] 选择属性值以指定值开头的元素
<br>[属性名$=属性值] 选择属性值以指定值结尾的元素
<br>[属性名*=属性值] 选择属性值中含有某值的元素
<br><br>
<p title="abc">同穴窅冥何所望</p>
<p title="abcdef">他生缘会更难期</p>
<p title="defabc">惟将终夜长开眼</p>
<p title="dejklf">报答平生未展眉</p>
</p>
<h1>伪类选择器</h1>
<p>
<br>-伪类用来描述一个元素的特殊状态
比如：第一个子元素、被点击的元素、鼠标移入的元素、、、
<br>-伪类一般情况下使用开头
<br> :first-child 第一个子元素
<br> :last-child 最后一个子元素
<br> :nth-child() 任意一个子元素
<br> 特殊值：
<br> nth-child(n)表示第n个
<br> 2n或even 表示选中偶数位上的元素
<br> 2n+1或odd 表示选中奇数位上的元素
<br> :first-of-type
<br> :last-of-type
<br> :nth-of-type
<br> --这几个伪类与上述类似，
但他们只在同类型元素中进行排序
<br><br>
<ul>
<li><br>第一个</li>
<li><br>第二个</li>
<li><br>第三个</li>
</ul>
<br> :not() 否定伪类
<br> -将符合条件的元素从选择器中去掉
<br><br>
<ul>
<li><br>第一个</li>
<li><br>第二个</li>
<li><br>第三个</li>
</ul>
</p>
<h1>超链接的伪类</h1>
<p>
<br>1.访问过的链接
<br>2.未访问的链接
<br><br><br>
:link 用来表示没访问过的链接(正常的链接)
<br><br><br>
:vistied 用来表示访问过的链接，能修改链接的颜色
<br><br><br>
:hover 用来表示鼠标移入的状态
<br><br><br>
:active 用来表示鼠标点击
<br><br><br>
<a href="https://www.baidu.com">访问过的网站</a>
<br><br><br>
<a href="https://www.baidu.com">未访问过的网站</a>
</p>
<h1>伪元素选择器</h1>
<p>
<br>伪元素，表示页面中一些特殊的并不真实存在的元素(特殊的位置)
<br><br><br>
::first-letter 表示第一个字母
<br><br><br>
::first-line 表示第一行
<br><br><br>
::selection 表示选中的内容
<br><br><br>
::before 表示在元素的开始，与content结合，可在元素开头添加
<br><br><br>
::after 表示在元素的结尾，与content结合，可在元素结尾添加
<br><b>Everything is possible！</b>
</p>
<h1>继承</h1>
<p>
<span>样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上</span>
<span><br>继承是发生在祖先后代之间的</span>
</p>
<ancestors>
<br> 我是祖先
<child>
<span>我是后代</span>
</child>
</ancestors>
<br>继承的设计是为了方便我们的开发，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，
<br>这样只需设置一次即可让所有的元素都具有该样式
<br><br><br>
<br>注意：并不是所有的样式都会被继承:比如 背景相关的，布局相关的都不会被继承
<h1>选择器的权重</h1>
<p>
<br>样式冲突
<br><br><br>-当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，就会发生冲突
<br>
选择器的权重
<br><br><br>内联样式 1000
<br><br><br>id选择器 100
<br><br><br>类和伪类选择器 10
<br><br><br>元素选择器 1
<br><br><br>通配选择器(*) 0
<br><br><br>继承的样式 没有优先级
<br><br>
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则优先显示。
<br><br>
选择器的累加不会超过其最大的数量级，若优先级相同，次视则优先使用靠下的样式
<br><br>
可以在某一个样式的后边添加 <strong>!important</strong>,该样式会获取到最高的优先级，超过内联样式的优先级
<br><br>
<div id="red" >我的内联样式是div,id是red,类值是blue,根据语法规则会显示红色</div>
<div id="red" class="blue font">因为我在类选择器blue后添加了importan，所以显示为蓝色</div>
</p>
<h1>像素和百分比</h1>
<p>
长度单位
<br><br>
像素
<br>
-屏幕由一个一个的小点构成
<br>
-不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
<br>
所以同样的200px在不同的显示设备下显示效果不一样啊
<br><br>
百分比
<br>
-也可以将属性值为相对于其父元素属性的百分比
<br>
-设置百分比可以使子元素跟随父元素的改变而改变
<br><br>
em
- em是相对于元素字体大小来计算的
<br>
- 1em = 1 font-size
<br>
- em会根据字体大小的改变而改变
rem
- rem是相对于根元素字体大小来计算的
</p>
<div class="box1"><div class="box2"></div></div>
<br>
<div class="box3"></div>
<br>
<div class="box4"></div>
<h1>颜色单位RGB</h1>
<p>
<br><br>
在css中可以直接使用颜色名来设置各种颜色，但是直接使用颜色名并不方便
<br><br>
RGB值：
<br> - RGB通过三种颜色的不同浓度来调配出不同的颜色
<br> - R red;G green;B blue
<br> 每一种颜色的范围在0 - 255(0% - 100%)之间
<br> 语法:RGB(red,green,blue)
<br><br>
RGBA:
<br> - 就是在rgb的基础上增加了一个a表示不透明度
<br> - 需要四个值，前桑额和rgb一样，第四个表示不透明度
<br> 1 表示完全不透明;0 表示完全透明;.5表示半透明
<br><br>
十六进制的RGB值:
<br> - 语法:#红色绿色蓝色
<br> - 颜色浓度通过 00-ff
<br><br>
HSL值 HSLA值:
<br> - H 色相(0 - 360)
<br> - S 饱和度(0% - 100%)
<br> - L 亮度(0% - 100%)
<br> - A 透明度(0 - 1)
<br><br>
</p>
<div class="box5"></div>
<h1>文档流(normal flow)</h1>
<p>
<br>- 网页是一个多层的结构，一层摞着一层
<br>- 通过css可以分别为每一层设置样式
<br>- 作为用户只能看到最上面一层
<br>- 这些层中，最底下的一层被称为文档流，文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列
<br><br>
<br>- 元素有两个状态
<br> 在文档中
<br> 不在文档中(脱离文档流)
<br><br>
元素在文档流中有什么特点：
<br> - 块元素
<br> - 块元素会在页面中独占一行(自上向下垂直排列)
<br> - 默认宽度是父元素的全部(会把父元素撑满)
<br> - 默认高度是被内容撑开(子元素)
元素在文档流中有什么特点：
<br> - 行内元素
<br> - 行内元素不会在页面中独占一行，只占自身大小
<br> - 行内元素在页面中从左向右水平排列，如果一行中不能容纳所有内容，则元素会换到第二行继续自左向右排列
<br> - 行内元素的默认宽度和高度都是被内容撑开
</p>
<h1>盒子模型</h1>
<p>
盒模型、盒子模型、框模型(box、model)
<br>- css将页面中的所有元素都设置为了一个矩形的盒子
<br>- 将元素设置为举行的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置
<br>- 没一个盒子都由以下几个部分组成
<br> 内容区(content)
<br> 内边距(padding)
<br> 边框(border)
<br> 外边距(margin)
</p>
<p>
<br><br>
内容区(content)，元素中的所有的子元素和文本内容都在内容区中排列
<br>内容区的大小由width和height两个属性来设置
</p>
<p>
<br><br>
边框(border)，边框属于盒子边缘，边框的大小会影响到整个盒子的大小
<br>要设置边框需要至少设置三个样式：
<br> 边框的宽度 border-width
<br> 边框的颜色 border-color
<br> 边框的样式 border-style
<br><br>
border-width：
<br>默认值：一般都是3个像素
<br>border-width可以用来指定四个方向的边框的宽度
<br> 四个值：上 右 下 左
<br> 三个值：上 左右 下
<br> 两个值：上下 左右
<br> 一个值：上下左右
<br>
border-top(right、bottom、left)-width 用来单独指定某一个边的宽度
<br><br><br>
border-color：
<br>border-color 用来指定边框的颜色，同样可以分别指定四个边的边框，规则和border-width一样
<br>border-color也可以省略不写，如果省略了则自动使用color的颜色值
<br><br><br>
border-style 指定边框的样式
<br> solid 表示实线
<br> dotted 点状虚线
<br> dashed 虚线
<br> double 双线
<br><br><br>
border简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求
<br>也存在border-top(right、bottom、left)，用法同上
<br> 举例：border:solid 5PX red;
<div class="box6">
<div class="inner"></div>
</div>
</p>
<p>
内边距(padding)
<br> - 内容区和边框之间的举例是内边距
<br> - 一共四个方向的内边距
<br> padding-top
<br> padding-right
<br> padding-bottom
<br> padding-left
<br>一个盒子的可见框的大小，由内容区、内边距和边框共同决定
<br>padding-top(right、bottom、left)
<br>padding 内边距的简写属性，可以同时指定四个方向的内边距，规则同上
<br>举例：padding:10px 20px 30px 40px(上右下左)
</p>
<p>
外边距(margin)：
<br> - 外边距不会影响盒子可见框的大小
<br> - 外边距会影响盒子的位置
<br> - 一共有四个方向的外边距
<br> margin-top：上外边距，设置一个正值，盒子会向下移动
<br> margin-right：默认情况下设置margin-right没有效果
<br> margin-bottom：下外边距，设置一个正值，盒子下方的其他元素会向下移动
<br> margin-left：左外边距，设置一个正值，元素会向右移动
<br> - margin也可以设置负值，负值表示盒子向相反的方向移动
<br>
<br> - margin的简写属性：
<br> margin-top(right、bottom、left)，用法同border和padding
</p>
<h1>盒子的水平布局</h1>
<p>
元素在水平方向的布局：
<br> 元素在其父元素中水平方向的位置由以下几个属性共同决定：
<br> margin-left
<br> border-left
<br> padding-left
<br> width
<br> padding-right
<br> border-right
<br> margin-right
<br><br>
<br> 一个元素在其父元素中，水平布局必须满足以下的等式：
<br>margin-left + border-left + padding-left + width + padding-right + border-right = margin-right = 父元素的内容区的宽度
<br><br>
<br> 以上等式必须满足，若不满足则称为过渡约束，等式会自动调整
<br>
<br> - 若七个值中没有 auto，则浏览器自动调整margin-right值，以使等式满足
<br><br>
<br> 这七个值中有三个值可设置为auto
<br> width
<br> margin-left
<br> margin-right
<br> 如果某个值为auto，则会自动调整该值使得等式成立
<br> 如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0
<br> 如果将三个值都设置为auto，则外边距都是0，宽度最大
<br> 如果两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值，所以可以利用这一特点使一个元素在父元素中水平居中
</p>
<h1>盒子的垂直方向的布局</h1>
<p>
子元素是在父元素内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出。使用overflow属性来设置父元素如何处理溢出的子元素
<br><br>
可选值：
<br> visible，默认值 子元素会从父元素中溢出，在父元素外部的位置显示
<br> hidden 溢出内容将会被裁剪，不会显示
<br> scroll 生成两个滚动条，通过滚动条来查看完整的内容
<br> auto 根据需要生成滚动条
</p>
<div class="box7">秋夜<br>
在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。
这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他1仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹2着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。
我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩3地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。
枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚4着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。
鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了5。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑6的眼睛。
哇的一声，夜游的恶鸟飞过了。
我忽而听到夜半的笑声，吃吃7地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。
后窗的玻璃上丁丁8地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子9。
猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老10在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。
我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。
一九二四年九月十五日。</div>
<h1>盒子外边距的折叠</h1>
<p>
<br> - 相邻的垂直方向外边距会发生重叠现象
<br> - 兄弟元素：
<br> - 兄弟元素间的相邻垂直外边距两者之间的较大值(两者都是正值)
<br> 如果相邻的外边距一正一负，则取两者的和
<br> 如果相邻的外边距都是负值，则取两者中绝对值较大的
<br> - 兄弟元素之间的外边距的重叠对于开发是有利的，我们不需要进行处理
<br><br><br>
<br> - 父子元素：
<br> - 父子元素之间相邻外边距，子元素会传递给父元素(上外边距)
<br> - 父子外边距的折叠会影响到页面的布局
</p>
<h1>行内元素的盒模型</h1>
<p>
<br> - 行内元素不支持设置宽度和高度
<br> - 行内元素可以设置padding，但是垂直方向padding不会影响页面的布局
<br> - 行内元素可以设置border,垂直方向的border不会影响页面的布局
<br> - 行内元素可以设置margin，垂直方向的margin不会影响布局
<br><br><br>
display 用来设置元素显示的类型
<br> inline 将元素设置为行内元素
<br> block 将元素设置为块元素
<br> inline-block 将元素设置为行内块元素。
<br> table 将元素设置为一个表格
<br> none 元素不在页面中显示
<br><br><br>
visibility 用来设置元素的显示状态
<br> visible 默认值，元素在页面中正常显示
<br> hidden 元素在页面中隐藏 不显示，但是依然占据页面的位置
</p>
<h1>默认样式</h1>
<p>
- 通常情况下，浏览器都会为元素设置一些默认样式
<br>
- 默认样式的存在会影响到页面的布局，通常情况下编写网页时必须去除浏览器的默认样式是(pc端的页面)
<br>
- 重置样式表：专门用来对浏览器样式进行重置
<br>
reset.css直接去除了浏览器的默认样式
</p>
<h1>盒子的大小</h1>
<p>
默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定
<br><br>
box-sizing 用来设置盒子尺寸的计算方式(设置width和height的作用)
<br><br>
conten-box 默认值，宽度和高度用来设置内容区的大小
<br> border-box 宽度和高度用来设置整个盒子可见框的大小
<br> width和height指的是内容区和内边距和边框的总大小
<br>
用border-box的格式：
<div class="box8"></div>
</p>
<h1>轮廓阴影和圆角</h1>
<p>
轮廓：outline用来设置元素的轮廓线，用法和border一摸一样，轮廓不会影响到可见框的大小
<br><br>
<div class="box9"></div>
<br><br>
阴影(box-shadow)：用来设置元素的阴影效果，阴影不会影响页面布局
<br> 第一个值 水平偏移量 设置阴影的水平位置 正值正向移动 负值相反方向
<br> 第二个值 垂直偏移量 设置阴影的水平位置
<br> 第三个值 阴影的模糊半径
<br> 第四个值 阴影的颜色
<br><br>
<div class="box10"></div>
<br><br>
border-radius :用来设置圆角 圆角设置的圆的半径大小
<br> border-top-left(top-right,bottom-left,bottom-right)-radius 表示矩形的四个角
<br> border-radius 可以分别指定四个角的圆角
<br>
<br>
<div class="box11"></div>
</p>
</body>
</html>
CSS简介
使用CSS来修改元素的样式：
第一种方式(内联样式，行内样式)
-在标签内部通过style属性来设置元素样式
第二种方式(内部样式表)
-将样式编写到head中的style标签里，然后通过css的选择器来选中元素并为其设置各种样式
-内部样式表更加方便对样式进行复用
第三种方式(外部样式表) 最佳
-可以将css样式编写到一个外部的css文件中，然后通过link标签进行引入外部css文件
-外部样式表需要通过link标签进行引 入，这样可以使样式在不同页面之间进行复用，节约开发时间;
-将样式编写到外部的css文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验;
Everything is possibl！
CSS的基本语法：
选择器 声明块
选择器，通过选择器可以选中页面中的指定元素
比如special的作用是选中页面中所有的special元素
元素选择器
作用：根据标签名来选中指定的元素
语法：标签名{}
例子：p{} h1{} div{}
id选择器
作用：根据元素的id属性选中一个元素
语法：#id属性值{}
例子：#box{} #red{}
Everything is possible！
类选择器
作用：根据元素的class属性选中一组元素
语法：.class
Everything is possible！
Nothing is impossible！
并集选择器
作用：选中同时符合多个条件的元素
语法：选择器1 选择器2 选择器n{}
注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头
Everything is possible！
Nothing is impossible！
选择器分组(交集选择器)
作用：同时选择多个选择器对应的元素
语法：选择器1 选择器2 选择器n{}
注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头
Nothing is impossible！
关系选择器
子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素
我是一个div
我是div中的p元素
我是p元素中的span
我是div中的span
后代元素选择器
作用：选中指定元素内的指定后代元素
语法：祖先 后代
我是一个div
我是div中的p元素
我是p元素中的span
我是div中的span
兄弟元素选择器
作用：选择下一个兄弟;选择后面所有的兄弟
语法：前一个 + 后一个
语法：前一个 ~ 后一个
我是一个div3
我是div3中的p3元素
我是p3元素中的span3
我是p3元素的兄弟1
我是p3元素的兄弟2
我是p3元素的兄弟3
属性选择器
[属性] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值] 选择属性值中含有某值的元素
同穴窅冥何所望
他生缘会更难期
惟将终夜长开眼
报答平生未展眉
伪类选择器
-伪类用来描述一个元素的特殊状态 比如：第一个子元素、被点击的元素、鼠标移入的元素、、、
-伪类一般情况下使用开头
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 任意一个子元素
特殊值：
nth-child(n)表示第n个
2n或even 表示选中偶数位上的元素
2n+1或odd 表示选中奇数位上的元素
:first-of-type
:last-of-type
:nth-of-type
–这几个伪类与上述类似， 但他们只在同类型元素中进行排序
第一个
第二个
第三个
:not() 否定伪类
-将符合条件的元素从选择器中去掉
第一个
第二个
第三个
超链接的伪类
1.访问过的链接
2.未访问的链接
:link 用来表示没访问过的链接(正常的链接)
:vistied 用来表示访问过的链接，能修改链接的颜色
:hover 用来表示鼠标移入的状态
:active 用来表示鼠标点击
访问过的网站
未访问过的网站
伪元素选择器
伪元素，表示页面中一些特殊的并不真实存在的元素(特殊的位置)
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 表示在元素的开始，与content结合，可在元素开头添加
::after 表示在元素的结尾，与content结合，可在元素结尾添加
Everything is possible！
继承
样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上
继承是发生在祖先后代之间的
我是祖先 我是后代
继承的设计是为了方便我们的开发，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，
这样只需设置一次即可让所有的元素都具有该样式
注意：并不是所有的样式都会被继承:比如 背景相关的，布局相关的都不会被继承
选择器的权重
样式冲突
-当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，就会发生冲突
选择器的权重
内联样式 1000
id选择器 100
类和伪类选择器 10
元素选择器 1
通配选择器(*) 0
继承的样式 没有优先级
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则优先显示。
选择器的累加不会超过其最大的数量级，若优先级相同，次视则优先使用靠下的样式
可以在某一个样式的后边添加 !important,该样式会获取到最高的优先级，超过内联样式的优先级
我的内联样式是div,id是red,类值是blue,根据语法规则会显示红色
因为我在类选择器blue后添加了importan，所以显示为蓝色
像素和百分比
长度单位
像素
-屏幕由一个一个的小点构成
-不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
所以同样的200px在不同的显示设备下显示效果不一样啊
百分比
-也可以将属性值为相对于其父元素属性的百分比
-设置百分比可以使子元素跟随父元素的改变而改变
em - em是相对于元素字体大小来计算的
- 1em = 1 font-size
- em会根据字体大小的改变而改变 rem - rem是相对于根元素字体大小来计算的
颜色单位RGB
在css中可以直接使用颜色名来设置各种颜色，但是直接使用颜色名并不方便
RGB值：
- RGB通过三种颜色的不同浓度来调配出不同的颜色
- R red;G green;B blue
每一种颜色的范围在0 - 255(0% - 100%)之间
语法:RGB(red,green,blue)
RGBA:
- 就是在rgb的基础上增加了一个a表示不透明度
- 需要四个值，前桑额和rgb一样，第四个表示不透明度
1 表示完全不透明;0 表示完全透明;.5表示半透明
十六进制的RGB值:
- 语法:#红色绿色蓝色
- 颜色浓度通过 00-ff
HSL值 HSLA值:
- H 色相(0 - 360)
- S 饱和度(0% - 100%)
- L 亮度(0% - 100%)
- A 透明度(0 - 1)
文档流(normal flow)
-
网页是一个多层的结构，一层摞着一层
-
通过css可以分别为每一层设置样式
-
作为用户只能看到最上面一层
-
这些层中，最底下的一层被称为文档流，文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列
-
元素有两个状态
在文档中
不在文档中(脱离文档流)
元素在文档流中有什么特点：
- 块元素
- 块元素会在页面中独占一行(自上向下垂直排列)
- 默认宽度是父元素的全部(会把父元素撑满)
- 默认高度是被内容撑开(子元素) 元素在文档流中有什么特点：
- 行内元素
- 行内元素不会在页面中独占一行，只占自身大小
- 行内元素在页面中从左向右水平排列，如果一行中不能容纳所有内容，则元素会换到第二行继续自左向右排列
- 行内元素的默认宽度和高度都是被内容撑开
盒子模型
盒模型、盒子模型、框模型(box、model)
- css将页面中的所有元素都设置为了一个矩形的盒子
- 将元素设置为举行的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置
- 没一个盒子都由以下几个部分组成
内容区(content)
内边距(padding)
边框(border)
外边距(margin)
内容区(content)，元素中的所有的子元素和文本内容都在内容区中排列
内容区的大小由width和height两个属性来设置
边框(border)，边框属于盒子边缘，边框的大小会影响到整个盒子的大小
要设置边框需要至少设置三个样式：
边框的宽度 border-width
边框的颜色 border-color
边框的样式 border-style
border-width：
默认值：一般都是3个像素
border-width可以用来指定四个方向的边框的宽度
四个值：上 右 下 左
三个值：上 左右 下
两个值：上下 左右
一个值：上下左右
border-top(right、bottom、left)-width 用来单独指定某一个边的宽度
border-color：
border-color 用来指定边框的颜色，同样可以分别指定四个边的边框，规则和border-width一样
border-color也可以省略不写，如果省略了则自动使用color的颜色值
border-style 指定边框的样式
solid 表示实线
dotted 点状虚线
dashed 虚线
double 双线
border简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求
也存在border-top(right、bottom、left)，用法同上
举例：border:solid 5PX red;
内边距(padding)
- 内容区和边框之间的举例是内边距
- 一共四个方向的内边距
padding-top
padding-right
padding-bottom
padding-left
一个盒子的可见框的大小，由内容区、内边距和边框共同决定
padding-top(right、bottom、left)
padding 内边距的简写属性，可以同时指定四个方向的内边距，规则同上
举例：padding:10px 20px 30px 40px(上右下左)
外边距(margin)：
-
外边距不会影响盒子可见框的大小
-
外边距会影响盒子的位置
-
一共有四个方向的外边距
margin-top：上外边距，设置一个正值，盒子会向下移动
margin-right：默认情况下设置margin-right没有效果
margin-bottom：下外边距，设置一个正值，盒子下方的其他元素会向下移动
margin-left：左外边距，设置一个正值，元素会向右移动 -
margin也可以设置负值，负值表示盒子向相反的方向移动
-
margin的简写属性：
margin-top(right、bottom、left)，用法同border和padding
盒子的水平布局
元素在水平方向的布局：
元素在其父元素中水平方向的位置由以下几个属性共同决定：
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
一个元素在其父元素中，水平布局必须满足以下的等式：
margin-left + border-left + padding-left + width + padding-right + border-right = margin-right = 父元素的内容区的宽度
以上等式必须满足，若不满足则称为过渡约束，等式会自动调整
- 若七个值中没有 auto，则浏览器自动调整margin-right值，以使等式满足
这七个值中有三个值可设置为auto
width
margin-left
margin-right
如果某个值为auto，则会自动调整该值使得等式成立
如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0
如果将三个值都设置为auto，则外边距都是0，宽度最大
如果两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值，所以可以利用这一特点使一个元素在父元素中水平居中
盒子的垂直方向的布局
子元素是在父元素内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出。使用overflow属性来设置父元素如何处理溢出的子元素
可选值：
visible，默认值 子元素会从父元素中溢出，在父元素外部的位置显示
hidden 溢出内容将会被裁剪，不会显示
scroll 生成两个滚动条，通过滚动条来查看完整的内容
auto 根据需要生成滚动条
秋夜
在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他1仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹2着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩3地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚4着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了5。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑6的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃7地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁8地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子9。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老10在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
盒子外边距的折叠
-
相邻的垂直方向外边距会发生重叠现象
-
兄弟元素：
- 兄弟元素间的相邻垂直外边距两者之间的较大值(两者都是正值)
如果相邻的外边距一正一负，则取两者的和
如果相邻的外边距都是负值，则取两者中绝对值较大的
- 兄弟元素间的相邻垂直外边距两者之间的较大值(两者都是正值)
-
兄弟元素之间的外边距的重叠对于开发是有利的，我们不需要进行处理
-
父子元素：
- 父子元素之间相邻外边距，子元素会传递给父元素(上外边距)
- 父子外边距的折叠会影响到页面的布局
行内元素的盒模型
- 行内元素不支持设置宽度和高度
- 行内元素可以设置padding，但是垂直方向padding不会影响页面的布局
- 行内元素可以设置border,垂直方向的border不会影响页面的布局
- 行内元素可以设置margin，垂直方向的margin不会影响布局
display 用来设置元素显示的类型
inline 将元素设置为行内元素
block 将元素设置为块元素
inline-block 将元素设置为行内块元素。
table 将元素设置为一个表格
none 元素不在页面中显示
visibility 用来设置元素的显示状态
visible 默认值，元素在页面中正常显示
hidden 元素在页面中隐藏 不显示，但是依然占据页面的位置
默认样式
- 通常情况下，浏览器都会为元素设置一些默认样式
- 默认样式的存在会影响到页面的布局，通常情况下编写网页时必须去除浏览器的默认样式是(pc端的页面)
- 重置样式表：专门用来对浏览器样式进行重置
reset.css直接去除了浏览器的默认样式
盒子的大小
默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定
box-sizing 用来设置盒子尺寸的计算方式(设置width和height的作用)
conten-box 默认值，宽度和高度用来设置内容区的大小
border-box 宽度和高度用来设置整个盒子可见框的大小
width和height指的是内容区和内边距和边框的总大小
用border-box的格式：
轮廓阴影和圆角
轮廓：outline用来设置元素的轮廓线，用法和border一摸一样，轮廓不会影响到可见框的大小
阴影(box-shadow)：用来设置元素的阴影效果，阴影不会影响页面布局
第一个值 水平偏移量 设置阴影的水平位置 正值正向移动 负值相反方向
第二个值 垂直偏移量 设置阴影的水平位置
第三个值 阴影的模糊半径
第四个值 阴影的颜色
border-radius :用来设置圆角 圆角设置的圆的半径大小
border-top-left(top-right,bottom-left,bottom-right)-radius 表示矩形的四个角
border-radius 可以分别指定四个角的圆角
2057
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
