day3
今天了解CSS
CSS
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
总结：
学习CSS的目的是为了更加方便的实现网页布局，以及元素的精准定位，以及达到美化元素的目的。
通过js也可以动态操作CSS样式。
HTML中如何引入CSS脚本
内嵌的方式 ( 行内样式 )
在HTML的标签中使用 style属性 嵌入CSS脚本的方式
<p style="background:pink">我好难啊</p>
内部样式
在HTML的head标签中 使用 <style></style> 的方式引入CSS脚本
<style type="text/css">
css脚本
</style>
外部方式 (实现CSS与HTML的分离)
1.在head标签中引入 link标签
<link href="#" rel="stylesheet" type="text/css">
2.在head标签中得style标签里面 使用 @import的方式引入CSS脚本
@import url("#")
CSS常用选择器
选择器的作用:编写好的CSS样式能通过选择器能够灵活控制你的选择器对哪些标签产生作用。
类选择器
类选择器的关键字是class 唯一标识符号是一个点 ·
基本格式:
.自定义的类名{
css脚本
}
在标签中通过class属性引入CSS类选择器。。。。
id选择器
id选择器的关键字是 id 唯一标识符是一个#
基本格式:
#自定义id名称{
css脚本
}
在标签中通过id属性引入CSS id选择器。。。
注意：
一般情况下 id代表唯一的含义 一个id选择器对应一个标签使用
这是一种设计规范。
id具有唯一性，虽然作用在多个选择器中会有效果,但是这种用法不规范，不推荐这样用
标记选择器
根据标签的名字 进行选择
基本格式: 标签名字{
}
使用 标记选择器 设置CSS属性 默认对当前HTML文档中所有的对应标签起作用。。。
p{
color:red; /*整个 HTML文档中所有的p段落全部变成红色字体 ，不灵活也不精确*/
}
选择器的组合:
将一些公共的属性抽取出来 减少代码冗余
选择器1，选择器2，选择器3，…{
设置CSS属性
}
如：
h1,a,p{
color:red;
}
/*h1，a，和p中所有字体颜色都会变成红色*/
层次选择器
父容器标签 子容器标签{
css属性设置
}
ul li{
color:red
}
<!--设置对ul里面的所有li起作用-->
还可以用类选择器，如：
.ul-1 li{
color:red
}
对应
<ul class="ul-1">
<li>层次选择器</li>
<li>层次选择器</li>
<li>层次选择器</li>
<li>层次选择器</li>
</ul>
如果有多个ul，只有被标记的ul中li颜色会变
过滤选择器
对特定的地方进行操作，使用nth-of-type（）或nth-last-of-type（）
/* nth-of-type（n）对结果集中的标签进行过滤选择设置
odd 对所有奇数行的标签起作用
even 对所有偶数行的标签起作用
n：对从上至下第n行起作用
*/
li:nth-of-type(odd){
color: green;
}
/*所有的奇数行变为绿色*/
li:nth-of-type(even){
color: red;
}
/*所有的偶数行变为红色*/
/* nth-last-of-type（n）对结果集中的标签进行过滤选择设置
n：对从下至上第n行起作用
*/
/*倒数第一行背景变为灰色*/
li:nth-last-of-type(1){
background: gray;
}
display属性
display 属性规定元素应该生成的框的类型。
块级别标签display的默认值是 : block
行级标签display的默认值是: inline
介于行级与块级之间的display的默认值是:inline-block，如图片。
隐藏元素的display的默认值是: none
块标签：与块标签之间会自动折行 而且块标签可以设置高度宽度。
行标签：与行标签之之间不会自动折行 也无法设置高度宽度。
inline-block: 可以设置高度以及宽度 而且不会自动折行。。
如果更改display属性就可以让原本框的类型改变，如：
<span>span1</span>
原本只是行标签
如果设置display属性为inline-block，就能改变宽高
span:{
background: red;
width: 100px;
height: 100px;
display: inline-block;
/*水平方向居中*/
![text-align: center;
/*设置文本行高设置等于标签的高度，文本会自动居中*/
line-height:100px ;]
}
