CSS(Cascading Style Sheets)美化样式
三种写法：
1.内部样式表
2.行内样式表（内联样式）
3.外部样式表（外链式）
行内样式表：
style="color=pink; font-size:15px；" //color控制其颜色（以后默认的灰色用#ccc），font-size修改字号大小
内部样式表：
卸载文件的头标签中，一般写在title标签后（书写规范），也可以写在任意位置
语法格式：
<head>
<style type="text/css">
选择器 1 {属性1:值;属性2:值;属性3:值;}
选择器2 {属性1:值;属性2:值;属性3:值;}
选择器 3 {属性1:值;属性2:值;属性3:值;}
/style>
</head>
外部样式表（外链式）（重点）
外链式样式表是把所有的样式写在另外的一个css中，后HTML通过link标签把css链入进来。它的语法格式是：
注意：link是个单标签，放在头标签中且需要写三个属性：
herf：定义所链接外部样式表文件的URL，可以是相对路径也可以是绝对路径；
rel：定义当前文档与被链接文档之间的关系，这里指定为stylesheet，表明被链接的是一个样式表；
type（可省略）：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
三种样式表总结（位置）
自学日记第三天2019.8.29
1、明白CSS如何控制样式（可以自主做出新闻的综合案例）
2、学会画盒子，彻底明白标签就是盒子容器的概念（借助a伪类能完成导航案例）
选择器（重点）：
标签选择器（元素选择器）：能把一类的标签全部选出来；
类选择器：格式：上面(头标签)点声明，下面（body）class调用
语法格式：
多类名选择器
语法格式：
.a{属性:值;}
.b{属性:值;}
<body>
<div class="a b">blabla</ div>
</ body>
注：
- 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
- 各个类名中间用空格隔开。
id选择器：
基本语法：
#定义，id调用
类似于类选择器。类选择器可以使用多次，但是id选择器只能使用一次
通配符选择器（使用较少）
用*表示，*代表所有标签的意思
通配符：
*：所有
？：一个字符
CSS的 字体样式属性
**font-size：**设置字号大小，一定要记住带单位
font-family：设置字体
网页中常用的字体有宋体、微软雅黑等，语法格式为：
*{font-family:“宋体”; }
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器如果不支持第一个字体，则会尝试下一个，直到找到合适的字体。
常用技巧
1、现在网页中普遍使用14px+；
2、尽量使用偶数的数字字号。ie6等老式浏览器奇数会有bug；
3、各种字体之间必须使用英文状态下的逗号隔开；
4、中文字体需要加英文状态下的引号，英文字体一班不需要加引号。当需要设置英文字体时，英文字体必须位于中文字体名之前；
5、如果字体包含==空格、#、$==等符号，则改字体必须加英文状态下的单引号或双引号，例如font-family:“Times New Roman”;；
6、尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
Unicode字体
在文件编码不匹配时会产生乱码的错误，为了避免这种错误，有时候我们采用Unicode编码来写字体名称
font-weight：控制字体粗细
字体加粗除了用b和strong标签之外，可以使用CSS来实现，但是CSS是没有语义的。
其属性值有：normal、bold、bolder、lighter、100~900（100的整数倍）。
注：数字400等价于normal，而700等价于bold。我们一般喜欢用数字。
font-style：字体风格
属性值：normal、italic（斜体）、oblique（基本不用了）
字体连写
可以对font属性进行综合设置，但是属性顺序不能换，没有的可以不写，但是有两个属性必须要写：font-size；fant-family；其基本语法格式如下：
选择器{ font: font-style font-weight font-size/line-height font-family; }
CSS外观样式
color：文本颜色，其取值方式有以下3种：
1.预定义的颜色值，如red，green，blue等。
2.十六进制，如#FF0000，#FF6600，#29D794等（按照红绿蓝三种颜色排放#rrggbb，例如#FF0000就是红色[ff红最大00绿没有bb蓝也没有]）。实际工作中，十六进制是最常用的定义颜色的方式。
3.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。
line-height行间距
语法格式：line-height:28px;
单位有px,em,%,实际工作中用的最多的就是px。一般情况下，行距比字号大7.8像素左右就可以了。
text-align:水平对齐方式
属性值：left/right/center
**text-indent：**段落首行缩进
单位：em
语法格式：
text-indent:2em;
一个em表示一个字节
text-decoration 文本修饰
属性值：
none:取消修饰；
underline：下划线；
line-through:删除线；
开发者工具：
Chrome中点击F12可以进入开发者工具模块，在里面点击任何东西
左边是HTML元素结构，右边是CSS样式；
Ctrl+滚轮可以放大代码；
右边CSS样式可以改动数值和颜色查看更改后效果
复合选择器
后代选择器（重点）
用空格隔开，选取子孙后代
语法格式：
<head>
XX1 XX2 { }
</head>
<body>
<XX1>
<XX2>
</XX2>
</XX1>
</body>
子代选择器
用>隔开，仅选择亲儿子
子代选择器，子指的是亲儿子，大于号分割，此时的a一定是li的亲儿子；
后代选择器 所有的后代的意思 用的最多。
交集选择器
div.a{} //既是div又是a标签时才使用；符号用"."隔开
并集选择器（）重点
div,p,span,h1{} //以上标签集体声明相同样式；符号用","号隔开
伪类选择器
符号为":"
属性值：
:link //未访问的链接
:visited //已访问的链接
:hover //鼠标移动到链接上
:active //选定的链接
注意：书写时，顺序不能变 ||记忆法：lv hao
实际开发中，直接写类的属性，之后再写hover，其他几个基本不写；
几个Sublime的快捷键
1、生成标签，直接输入标签名，按Tab键即可
2、如果想生成多个相同的标签，在后面加上就可以了，比如div3+Tab就可以生成3个div
3、如果有父子级关系的标签，可以用>，比如ul>li就可以自动生成一个无序列表
4、如果有兄弟关系（即同级）标签，用+就可以了；
5、如果生成带有类名或者带id名字的，直接写.demo或者#two+Tab键就可以了
标签显示模式
块级元素（block-level）：每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。 可以通过line-height=height使文本居中
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。
行内元素（inline-level）：行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。
行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。（a特殊）
注意：
1、只有 文字才 能组成段落 因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
2、链接里面不能再放链接。
行内块元素（inline-block）
在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。
注意：
1、行内元素只能放行内元素或文字；
2、块级元素既能放块级元素又能放行内元素；
3、但是<p><h1><dt> 元素除外他们都是文字标签里面不能放其他块级元素；
4、链接里面不能再放链接；
5、a里面可以放块级元素。
行内元素、行内块元素我们可以看成是文本，可以让盒子居中对齐；
CSS书写规范
开始就形成良好的书写规范，是你专业化的开始。
空格规范
【强制】 选择器 与 { 之间必须包含空格。
示例： .selector { }
【强制】 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。
示例：font-size: 12px;
选择器规范
【强制】 当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。
示例：
/* good */
.post,
.page,
.comment {
line-height: 1.5;
}
/* bad */
.post, .page, .comment {
line-height: 1.5;
}
【建议】 选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。
示例：
/* good */
#username input {}
.comment .avatar {}
/* bad */
.page .header .login #username input {}
.comment div * {}
属性规范
【强制】 属性定义必须另起一行。
示例：
/* good */
.selector {
margin: 0;
padding: 0;
}
/* bad */
.selector { margin: 0; padding: 0; }
【强制】 属性定义后必须以分号结尾。
示例：
/* good */
.selector {
margin: 0;
}
/* bad */
.selector {
margin: 0
}
行高的测量
可以使用浏览器的检查看出该盒子的高宽
行高由四条线组成，分别是顶线、中线、基线和底线；一般测行高是测基线到基线的距离；
如果简化行高，可以分成上下距离和内容高度；盒子内元素的位置=（行高-元素高度）/2；这是其距离顶端的距离
如果行高等于height 高度 ，文字会垂直居中
如果行高大于高于，文字会偏下
如果行高小于高度，文字会偏上
行高会继承
CSS三大样式
1、层叠性
一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准（即最靠近样式的）。
- 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
- 样式不冲突，不会层叠
2、继承性
所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。
注意：
恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（一般跟文本相关的都可以继承text-，font-，line-这些元素开头的都可以继承，以及color属性）
而height等不可继承；
3、优先级
继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。
权重是可以叠加的、
div ul li -----> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1
#nav p -----> 0,1,0,1
注意：
数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。
继承的权重是 0 （即子元素要是有定义，则以自己的定义为准 ），*的权重为0，0，0，0
总结优先级：
- 使用了 !important声明的规则。
- 内嵌在 HTML 元素的 style属性里面的声明。
- 使用了 ID 选择器的规则。
- 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
- 使用了元素选择器的规则。
- 只包含一个通用选择器的规则。
- 同一类选择器则遵循就近原则。
总结：权重是优先级的算法，层叠是优先级的表现
CSS背景background
**background的几个属性值：**
1、background-color：背景颜色
2、background-image：背景图片地址
3、background-repeat：是否平铺
4、background-position：背景位置
5、background-attachment：背景固定还是滚动
背景的合写（复合属性）：
background：背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
背景图片：
background-image: url(图片地址);
背景是否平铺：
属性值：repeat(平铺); no-repeat(不平铺); repeat-x(横向平铺); repeat-y(纵向平铺)
background-repeat: repeat //系统默认平铺
背景位置：
background-position: X Y;
XY方位名词：top:上; bottom:下; left:左; right:右
//方位名词位置可以不管XY的顺序；如果只写一个方位名词，另一个则是默认居中的
XY还可以是值（px） //px一定要按XY顺序写，有顺序；如果只写一个，另外一个也是默认居中的
背景固定还是滚动：
background-attachement:scroll; //默认是滚动的
属性值：scroll(背景图像是随对象内容滚动);
fixed(背景图像固定);
背景半透明
background: rgba(0,0,0,0.6); //rgba:(red green blue alpha[value:0-1])
盒子模型（重点）
盒子边框（boder）
语法：boder:boder-width||boder-style||boder-color //缺一不可
盒子样式：boder-style():
none:无边框;
solid:实现边框;
dashed:虚线边框;
dotted:点线边框;
double:双实线 ;
盒子连写：
boder: 1px solid red; //宽度 样式 颜色
盒子四边线刻分开写：
boder-top/bottom/left/right:1px solid red;
表格的细线边框：
collapse单词是合并的意思；
boder-collapse:collapse表示相邻边框合并在一起。
内边距（padding）:
给一下不适合规定宽度的元素增加宽度；
padding：上下左右内边距
padding-left/right：左右内边距；
左右连写：
padding: 0 XXpx; //上下内边距是0，左右内边距是XXpx
padding-top/botto：上/下内边距（少用）
外边距（margining）
给一个盒子增加外边距；
语法跟padding类似；
外边框实现盒子居中对齐
让一个盒子实现水平居中，需要满足以下两个条件：
1、必须是块级元素；
2、盒子必须指定了宽度（width）
然后给左右的外边距都设置为auto，就能使块级元素水平居中
margin: 0 auto; //通俗写法，盒子可以水平居中，即上下为0px，左右充满；
auto：充满；
margin-left: auto; //盒子左边充满
margin-right:auto; //盒子右边充满
盒子中内容对齐：text-align: center;
盒子外边距合并问题：
若是上面的盒子有个下外边距，下面的盒子有个上外边距，则最终两个盒子之间的距离以他们最大的外边距为准；
例如上面的盒子下外边距为100px，下面的盒子上外边距为50px，最终两盒子之间的距离为100px。
盒子嵌套元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
解决方案：
- 可以为父元素定义1像素的上边框或上内边距。
- 可以为父元素添加overflow:hidden。 //overflow:hidden(溢出隐藏)
padding不会撑开盒子的情况
当盒子给了定值，给盒子定padding会撑开盒子；
若盒子未给定值用默认大小，盒子给padding则不会撑开盒子。一般适用于有父集的子盒子
盒子圆角问题：
boder-radius: 10px; //像素越大就越圆，只有正方形能变成正圆
单位可以是px也可以是%；
也可是
boder-radius: 1px 2px 3px 4px；左上 右上 右下 左下；
boder-radius:1px 0px; 左上右下1px，右上左下0px；
一般变正圆的话就boder-radius: 50%;
盒子阴影（box-shadow）:
box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影；
box-shadow: 0 15px 30px rgba(0,0,0,0.1); //一般的阴影设置
浮动（float）
CSS的定位机制有3种：普通流（标准流）、浮动和定位
最早的浮动是用来控制图片，已达到其他元素（特别是文字）实现环绕图片的效果。
后来，我们发现浮动有个很有意思的事情：就是让任何盒子可以一行排列,因此我们就慢慢的偏离主题，用浮动的特性来布局了。
属性值:
选择器 {float: 属性值;}
left：元素向左浮动；
right：元素向右浮动；
none：元素不浮动（默认）
浮动内幕特性：
1、只有左右浮动（左对齐右对齐）
2、浮动首先创建包含块的概念（包裹）。就是说， 浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。
3.一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。
4.元素添加浮动后，不管他是行内元素还是行内块元素或是块元素，都有大小宽高；
总结： 浮动 —>
浮动的目的就是为了让多个块级元素同一行上显示。 最核心的关键点就是 怎么排列的， 是否占有位置
float 浮 漏 特
浮： 加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。
漏： 加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏 给了标准流的盒子。
特： 特别注意，首先浮动的盒子需要和标准流的父级搭配使用， 其次 特别的注意浮动可以使元素显示模式体现为行内块特性。
版心和布局流程
“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。
布局流程
为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：
1、确定页面的版心（可视区）。
2、分析页面中的行模块，以及每个行模块中的列模块。
3、制作HTML结构 。
4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。
清除浮动
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。
清楚浮动的本质叫做闭合浮动，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。
在CSS中，clear属性用于清除浮动，其基本语法格式如下：
选择器 {clear: 属性值;} clear 清除
属性值 描述
left 不允许左侧有浮动元素
right 不允许右侧有浮动元素
both 同时清除左右两侧浮动的影响 （用的最多）
清除浮动的四种方法
1、额外标签法：
通过浮动元素末尾添加一个空的标签，例如<div style="clear:both"> </div>，或则其他标签br等亦可。
2、父级添加overflow属性方法
可以通过触发BFC的方式，实现清除浮动
可以给父级添加：overflow为hidden|auto|scroll都可以实现
3、伪元素清楚浮动
使用after伪元素清楚浮动
格式：选择器: after { }
.clearfix:after {
content: “”; //规定写法，意思：？
display: block; //伪元素属于行内元素，需要转换为块级元素
height: 0; //
clear: both; //清楚浮动
visibility: hidden; //
}
.clearfix {zoom: 1;} / IE6、7 专有 /一般要加
// ""只有ie6、ie7识别，其他浏览器直接跳过
4、双伪元素清除浮动
.clearfix:before, .clearfix:after {
content:"";
display:table;
/* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */
}
.clearfix:after {
clear:both;
}
.clearfix: {*zoom: 1;}
定位
background-position //背景定位
定位主要用来做特效
元素的定位属性主要包括定位模式与边偏移两部分
边偏移：
也就说，以后定位要和这边偏移搭配使用了， 比如 top: 100px; left: 30px; 等等
定位模式（定位的分类）
语法格式：选择器 {position: 属性值;}
几种属性值：
static： 静态定位（自动定位（默认定位方式））
relative： 相对定位（相对于其原文档流的位置进行定位）
absolute： 绝对定位（相对于其上一个已经定位的父元素进行定位）
fixed： 固定定位（相对于浏览器窗口进行定位）
static静态定位
唯一的用处就是取消定位：
position:static;
relative相对定位（以自己的基准）
- 相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。
- 其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）
就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。（相对定位不脱标）
如果说浮动的主要目的是 让多个块级元素一行显示，那么定位的主要价值就是 移动位置， 让盒子到我们想要的位置上去。
absolute绝对定位
若所有父元素都没有定位，以浏览器当前屏幕为准对齐(document文档)。
绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。
[注意] 如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。
当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。
注意： 绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。（类似于float）
子绝父相
浮动与绝对定位的区别：
浮动不能超出盒子与内边距，定位可以
在使用定位、浮动之后，margin: 0 auto;失效
那么如何实现在定位浮动之后实现水平垂直居中呢？
left: 50%； //水平左边居中
margin-left: -(半个盒子的像素)px; //使盒子水平居中
top: 50%; //竖直居中
margin-top: -(半个盒子的像素)px; //使盒子竖直居中
fixed固定定位（只以浏览器为准，不影响布局）
position: fixed;
脱标不占位置，不随着浏览器的滚动而滚动
（ie6等低版本浏览器不支持固定定位）
定位模式转换
浮动与定位（absolute/fixed）会将行内元素自动转换位行内块元素，行内块的宽度和高度跟内容有关系，因此比如行内元素如果添加了 绝对定位或者 固定定位后 浮动后，可以不用转换模式，直接给高度和宽度就可以了。
z-index（叠放次序）
只有有定位的元素才有z-index
- z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
- 如果取值相同，则根据书写顺序，后来居上。
- 后面数字一定不能加单位。
- 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。
四种定位的总结
812
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
