CSS小结
css：层叠样式表，主要用于渲染html页面,例如设置文字的颜色 大小等等
css与html整合的3种方式:
1.内联样式表
直接在标签里面使用style属性
例如： <xxx style="background-color: aquamarine;">天佑中华--内联</xxx>
注意:使用每个标签(元素)自带的style属性即可,但是一般不推荐这样使用,因为只能修改一个元素(标签的)样式
2.内部样式表
在<sytle></sytle>(该标签可以放在任意的位置,但是建议放在head标签中)中编写样式
例如： <xxx id/class="div1">天佑中华--内部</xxx>
注意:这里面不一定是只能使用id/class这种选择器;而是可以使用各种选择器
例如:
1 <div id="div1">天佑中华</div>
2 然后在head体里面引入该css样式表:
3 <head>
4 <sytle type="text/css">
5 .div1{ 7 background-color: white;
8 font-size: 10px;(最后的一个分号可以省略,但建议不要)
9 }
11 </sytle>
12 </head>
3.外部样式表
编写外部的css文件,编写的方式和在style里面的一致,并不需要添加什么头说明等等之类的东西
在head标签体里面使用<link/>引入即可 不需要存在于style标签中
例如： <link rel="stylesheet"(固定) href="./外部css.css"(路径) type="text/css"(固定)/>
选择器：常见的有以下这几种,各自有各自的优点
使用方式：
选择器{
属性1:值1;
属性2:值2;
}
1.id选择器(一般一个样式只出现一次就推荐使用id选择器)
1 要求：
2 1、html元素必须有id属性并且有值 例如：<div id="div1">
3 2.css样式中通过#引入，后面加上id名
4 例如:
5 <head>
6 <style>
7 #div1{
8 color:red;
9 font-size:16px;
10 }
11 <style>
12 </head>
13 <body>
14 <div id="div1">你好,世界</div>
15 </body>
2、class类选择器
1 要求：
2 1、html元素中必须有class属性并且有值 例如<div class="cls1">
3 2、css中通过”.“引入，后面加class名 例如： .cls1
4 注意:可以有多个元素的class属性相同;也就是说属于同一类
5 例如:
6 <head>
7 <style>
8 .cal1{
9 color:red;10 }
11 <style>
12 </head>
13 <body>
14 <div class="cal1">你好</div>
15 <div class="cal1">世界</div>
16 </body>
17 解释:这样两个div就可以拥有相同的样式;实现代码的复用
3、元素(标签)选择器
1 要求：
2 直接用元素（标签）名即可 例如：xxx{....}
3 例如:
4 <head>
<style>
5 div{
6 font-size:14px;
7 color:red;
8 }
</style>
9 </haed>
10 <body>
11 <div>你好</div>
12 <div>世界</div>
13 </body>
14 解释:这样所有的div就拥有了相同的样式;但是有特殊的用特殊的；特殊性在后面会有介绍
派生的选择器
1、属性选择器（在元素选择器的前提下进行筛选;特殊的元素选择器）
1 要求：
2 html标签必须有一个属性（无论什么属性且有值） <xxx nihao="wohenhao"/>
3 css中通过如下方式使用：
4 元素名[属性=”属性值“]{.....}
5 例如:
6 <head>
7 <style>
8 span [att="nihao"]{
9 color:red;10 }
11 <style>
12 </head>
13 <body>
14 <span att="nihao">你好</span>
15 </body>
2.后代选择器(作用于类)
1 用法：使用空格，用于选择指定标签元素下的后辈元素(所有，不分第几代)
2 例如:
3 <head>
4 .food li{
5 样式，作用于所有的food类下的li标签 即水果 香蕉 苹果 梨都会被作用
color:red;
6 }
7</head>
8 <body>
9 <ul class="food">
10 <li>水果
11 <ul>
12 <li>香蕉</li>
13 <li>苹果</li>
14 <li>梨</li>
15 </ul>
16 </li>
17 </ul>
18 </body>
3.子选择器 类的第一代（直接）指定的元(作用于类)
1 用法：使用>符号，用于选择指定标签元素的第一代元素
2 例如：
3 .food>li{
4 border:1px solid red;
5 }
6 <ul class="food">
7 <li>水果
8 <ul>
9 <li>香蕉</li>
10 <li>苹果</li>
11 <li>梨</li>
12 </ul>
13 </li>
14 <li>蔬菜
15 <ul>
16 <li>白菜</li>
17 <li>油菜</li>
18 <li>卷心菜</li>
19 </ul>
20 </li>
21 </ul>
22 解释：这种情况下，food下的元素li(水果，蔬菜)就会加入了样式 ;而里面的第二代就不会被作用到
4.通用选择器
1 使用*，匹配html下的所有标签元素
2 例如：
3 *{
4 color:red;
5 }
6 那么该head中的所有标签元素都加入了红色的样式
5.锚伪类选择器
允许给html不存在的标签(标签的某种状态)设置样式，比如说点击过后颜色改变
a:hover{
xxx 查看文档
}
选择器小结：
id选择器：是一个元素（标签）
class选择器：是一类元素
元素选择器：是一种元素
属性选择器：元素选择器的特殊用法
使用的时候注意：
若多个样式作用于一个元素的时候（样式就是说css里面的那些东西 “背景” “长度”等等）
（一个元素可以被多种css整合 内部 外部 可以同时存在）
不同的样式，会叠加 A说买辆车 B说买奔驰 没毛病
相同的样式 就近原则 A说买红色 B说买蓝色 看谁离的近（也就是谁最后说）
若多个选择器作用于一个元素的时候
越特殊的优先级越高 id选择器的最高 类>元素 属性>元素
ID选择器和类选择器的区别:
相同点:都可以应用于任何元素
不同点:
1.不同的标签可以是相同的类,但是id只能被一个标签使用,并且只能使用一次,即使是同一种标签也不能
可以这样写:(正确)
1 .stress{
2 color:red;
3 }
4 .bigsize{
5 font-size:25px;
6 }
7 <span class="stress bigsize">三年级</span>
8 上面代码的作用是为“三年级”三个文字设置文本颜色为红色并且字号为25px。
下面的代码是不正确的
1 #stressid{ 2 color:red; 3 } 4 #bigsizeid{ 5 font-size:25px; 6 } 7 <span id="stressid bigsizeid">三年级</span>
分组选择符：逗号
1 作用：可以为html中多个标签元素(也可以是各种选择器)设置同一样式，各个选择器之间使用逗号分隔就好了 2 例如： 3 span,h1{ 4 color:red; 5 } 6 相当于： 7 span{color:red} 8 h1{color:red}
继承：
css样式中有些是可以被继承，有些不可以被继承(可能具体使用的时候查看文档之类的吧)
1 例如： 2 p{ 3 color:red; 4 } 5 <p> 6 我是<span>你好世界</span> 7 </p> 8 颜色具有继承性，如果span自己没有指定颜色的样式，那么就会继承p的颜色样式，显示为红色 9 但是有些样式又不具有继承性： 10 例如：border:1px solid red; 边框为1像素，实线 红色
特殊性：
如果存在多个样式作用于一个标签元素上的时候，要选择哪个样式呢？
不同的选择器有不同的权值，选权值高的发挥作用
各种选择器权值：
继承的权值0.1
元素标签的权值为1
类选择符的权值为10
ID选择符的权值最高为100
例如：
1 p{color:red;} /*权值为1*/
2 p span{color:green;} /*权值为1+1=2*/
3 .warning{color:white;} /*权值为10*/
4 p span.warning{color:purple;} /*权值为1+1+10=12*/
5 #footer .note p{color:yellow;} /*权值为100+10+1=111*/
重叠：
在具有相同的权值的情况下，又该如何选择那个样式表呢? 根据就近原则：
内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
重要性：
权值不够，命令来凑
有些时候需要为某些样式设置最高的权值，就可以使用!important
1 例如：
2 p{
3 color:red
4 !important;
5 }
6 注意：!important要写在分号的前面
7 这种情况下，使用!important标注的样式一定会发挥作用
属性部分:(只是列出个大概，具体想要实现的就可以查其文档)
1 1.文字部分
2 字体:font-family
3 例如： bofy{
4 font-family:"宋体"
5 }
6 颜色:color
7 大小:font-size
8 粗体:font-weight
9 normal 正常
10 bold 加粗
11 bolder 更粗
12 lighter 更细
13 斜体：font-sytle
14 下划线：text-decoration:underline
15 删除线：text-decoration:line-through
16 段落排版——缩进：text-indent:2em 2个空格
17 段落行间距：line-height:1.5em 1.5倍行距
18 中文字间距，字母间距： letter-spacing:50px
19 段落排版--对齐： text-align:center
html元素分类：
块状元素： 具有盒子模型的特征
<div>、<p>、<hn>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 等等
特点：
1.每个块状元素都从新的一行开始，并且其后的元素也另起一行(大概就是每个一行)
2.元素的高度 宽度 行高以及顶和底边距都可以设置
3.元素宽度在不设置的情况下，和其父元素的宽度一致，除非自己设置一个宽度
内联元素(行内元素)：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>等等
特点：
1.和其他元素都在一行上
2.元素的高度 宽度 以及顶部和底部边距不可设置
3.元素的宽度就是它包含的文字或者图片的宽度，不可改变
4.内联元素之间有一个间距
内联块状元素：--同时具备内联元素和块状元素的特点
<img>、<input>等等
display:inline-block
特点：
1.和其他元素都在一行上
2.元素的高度 宽度 行高 以及顶和底边距都可以设置
内联--->块状
css样式中设置：display:block
盒子模型：
基本概念：
border 边框
margin 边界，两个盒子之间
padding 盒子与盒子内的东西的间距 填充
padding-left
padding-right
padding-top
padding-bottom
盒模型----边框：border
border-style:
dashed(虚线) dotted (点线) solid(实现)
border-color:颜色
border-width:边框宽度 用px单位
让边框的其中一条显示：
border-bottom:1px solid red;
bottom-top:1px solid red;
bottom-right:1px solid red;
bottom-left:1px solid red;
盒模型--宽度和高度
css盒模型中的高度和宽度并不是整个物体的高度和宽度，而是里面元素内容的高度和宽度
即css中设置的height和width都是里面的内容的大小
盒模型--填充padding
元素内容和边框之间的距离----填充 padding
分上下左右
可以合在一起写
padding:20px 10px 15px 30px ----顺时针
相当于分开每个写的一样的
如果上、右、下、左的填充都为10px;可以这么写
div{padding:10px;}
如果上下填充一样为10px，左右一样为20px，可以这么写：
div{padding:10px 20px;}
盒模型--边界margin
元素与其他元素之间的距离---边界margin
也是分上下左右
合在一起写：(顺时针)
div{margin:20px 10px 15px 30px;}
如果上右下左的边界都为10px;可以这么写：
div{ margin:10px;}
如果上下边界一样为10px，左右一样为20px，可以这么写：
div{ margin:10px 20px;}
布局模式：
html页面中布局模式主要有以下3种
1.流动模型(Flow)
2.浮动模型(Float)
3.层模型(Layer）
流动模型：
默认的网页布局模式
特点：
1.块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，
因为在默认状态下，块状 元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
2.内联元素都会在所处的包含元素内从左到右水平分布显示
浮动模型：
为了解决块状模型独自占用一行的情况----即可以把两个块状元素并排显示
特点：
任何的元素在默认的情况下是不可以浮动的，但是可以通过css定义成浮动
float:left; 向左边浮动
float:right 向左边浮动
层模型：
就像ps中的图层一样可以对每个图层精确定位操作
三种模式：
1.绝对定位 position:absolute
2.相对定位 position:relative
3.固定定位 position:fixed
绝对定位:
元素在整个界面中的绝对位置
需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，
然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。
如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口
例如：
1 <style>
2 #test{
3 position:absolute;
4 left: 90px;
5 top: 40px;
6 }
7 </style>
8 <div id="test">hello world</div>
相对定位：
这里的相对指的是相对于原来的位置
写法：
position:relative;
left top right bottom 这种来操作
然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，
偏移前的位置保留不动----这句话指
虽然我现在已经偏移了，但是我之前的位置然后有存在的，就是虽然看不到，但是那部分已经用不了
例如：
<div>xxx后面被改变</div> <span>仍然不能占用div被改变之前的位置</span>
固定定位：
这里的固定是相对于浏览器来说，相对于浏览器的位置不发生变化
就是说---就算我滑动滚动条，那么它还是在那个位置，不会随着滚动条改变而改变
写法：
position:fixed;
bottom top left right 这些跟在后面（一般只需要2个）
相对定位(relative)和绝对定位(absolute)结合使用：
解释：
绝对定位是实现被设置元素相对于浏览器(body)的绝对定位
然后我们现在使用绝对定位和相对定位的结合
来让绝对定位不再是相对于浏览器(body)的定位而可以相对于其他的元素进行绝对定位，
总而来说：使元素可以相对于其他的元素进行绝对定位
使用规则：
1.参照定位的元素(参照物)必须是绝对定位元素(自己)的前辈元素(例如：父元素)：
1 <div id="box1">
2 <div id="box2">xxx</div>
3 </div>
4 box1是box2的父元素
2.参照定位的元素(参照物)中必须加入position:relative(不需要设置上下左右)
1 #box1{
2 width:200px;
3 height:300px;
4 position:relative;
5 }
3.定位元素(自己)必须加入posiiton:absolute(然后加上上下左右)
1 #box2{
2 width:200px;
3 height:200px;
4 position:absolute;
5 top:20px;
6 left:20px;
7 }
实现这3步就完成了让元素相对于另外一个元素进行绝对定位！
缩写：(个人觉得还是乖乖写好，缩写啥缩写嘛)
盒模型
颜色
字体
颜色：
字体颜色:color
背景颜色:background-color
边框颜色:border
设置颜色的方式：
1.英语单词
red blue 等等
2.三种色调
R G B组合
3.16进制(建议)
相当于把三种色调的0-255变成 00-ff这种写法
例如：#00ffff
长度值：
px(像素) em %
居中：居中分2种，分别是水平居中和垂直居中
水平居中————定宽块状元素
当被设置元素为块状元素时用text-align:center（作用于行内元素）就不起作用了，
这时也分两种情况：定宽块状元素和不定宽块状元素
定宽块状元素:块状元素的宽度width为固定值
满足 定宽+块状的就可以通过
做法：
设置“左右margin”值为“auto” ---来实现居中
例如：
1 div{
2 width:200px; /*定宽*/
3 margin-left：auto;
4 mergin-right:auto;
5 }
注意：元素的上下margin是可以随意设置的
<div>我是定宽块状元素</div>
不定宽块状元素：
不定宽：即width不确定
居中方式（3种）：
1.加入table标签
2.设置display:inline
与第一种类似，显示类型设置为行内元素，进行不定宽元素的属性设置
3.设置position：relative和left:50%
利用相对定位，将元素向左偏移50%达到居中
1.加入table标签：
利用table标签的长度自适应性--
即不定义其长度也不默认父元素body的长度(table其长度根据其内文本长度决定)
有点像android中的wrap_conponet属性
因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。
步骤：
1.为需要设置居中的元素外面加入一个table标签(一定要包括<tbody> <tr> <td>)
2.为这个table设置“左右margin居中” ----(和定宽块状元素的方法一样)
例如：
1 table{
2 margin-left：auto;
3 mergin-right:auto;
4 }
5
6 <div>
7 <table>
8 <tbody>
9 <tr><td>
10 <ul>
11 <li>1111</li>
12 <li>2222</li>
13 <li>3333</li>
14 </ul>
15 </td></tr>
16 </tbody>
17 </table>
18 </div>
方式2：使用display:inline
这句话的意思是：把块状元素改变成行内元素
然后就可以使用行内元素居中的方式：text-align:center来处理
1 <body>
2 <div class="container">
3 <ul>
4 <li><a href="#">1</a></li>
5 <li><a href="#">2</a></li>
6 <li><a href="#">3</a></li>
7 </ul>
8 </div>
9 </body>
10
11 <style>
12 .container{
13 text-align:center;
14 }
15 /* margin:0;padding:0（消除文本与div边框之间的间隙）*/
16 .container ul{
17 list-style:none;
18 margin:0;
19 padding:0;
20 display:inline;
21 }
22 /* margin-right:8px（设置li文本之间的间隔）*/
23 .container li{
24 margin-right:8px;
25 display:inline;
26 }
27 </style>
优点：
不用像第一种方式那样增加无语义标签
缺点：
由于把块状元素改成了行内元素，缺少了一些功能 例如：设置长度值
方式3:设置position:relative方式
通过给父元素设置float,然后给父元素设置position:relative和left:50%，
子元素设置 position:relative 和 left: -50% 来实现水平居中。
垂直居中
分2种情况
父元素高度确定的单行文本
父元素高度确定的多行文本
父元素高度确定的单行文本：
通过设置父元素的height和line-height高度一致来实现的
(height:该元素的高度,line-height:顾名思义,行高(行间距)指在文本中行与行之间的基线间的距离)
line-height与font-size的计算值之差
在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部
1 写法：
2 height:100px;
3 line-height:100px
4 这两者达到相同的时候
注意：
这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。
父元素高度确定的多行文本：
方法1：
设置table标签(一定要包括tbody tr td),同时设置vertical-align:middle
css中有一个用于竖直居中的属性vertical-align,在父元素设置此样式时,会对inline-block类型的子元素都有用。
隐性改变display类型
不论之前是什么类型元素(display:none除外)设置以下2个句之一：
1.position : absolute
2.float:left或float:right
简单来说,只要html代码中出现以上两句之一
元素的display显示类型就会自动变为以display:inline-block(块状元素)的方式显示
当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。
