CSS简介
- CSS：Cascading Style Sheets，层叠样式列表
- 对某些对象可以进行分层次地设置。
CSS的作用
- 结构与样式分离的方式，便于后期维护与改版；
- 可以用多套样式，使网页有任意样式切换的效果；
- 使页面载入得更快、降低服务器的成本。
CSS语法格式、选择器及分类
CSS样式文件结构
- 样式选择器可以是HTML中的任何一个标签，称为标签选择器，代表的是把该类都进行选中，之后进行格式设置和样式改变。
- 如果CSS样式内容放在html文件内部，则称之为内部样式表，如果放在专门的文件中则称为外部样式表。下面的代码是内部样式表的一个示例代码：
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<!-- 内部样式表 -->
<style type="text/css">
/* 标签选择器 */
p{
background-color: red;
font-size: 40px;
}
</style>
</head>
<body>
<script src="" async defer></script>
<p>https://www.imooc.com</p>
<p>慕课网</p>
<p>上海大学2019级本科新生数据“大揭秘”,上海大学2019级本科新生数据大揭秘,梯方在线-上海家长都在选择的在线互动小班课,专注小升初中高考升学辅导,一对一在线辅导补习</p>
</body>
</html>
选择器
- 作用：用来选择（找到）需要添加样式的位置。
- 常用选择器：标签选择器、（归）类选择器
- 选择器用法代码示例如下：
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style type="text/css">
/* 标签选择器 */
p{
background-color: red;
font-size: 40px;
}
.p1{
font-family: 隶书;
font-size: 35px;
}
</style>
</head>
<body>
<script src="" async defer></script>
<p>https://www.imooc.com</p>
<p>慕课网</p>
<!-- 加入的类选择器 -->
<p class="p1">上海大学2019级本科新生数据“大揭秘”,上海大学2019级本科新生数据大揭秘,梯方在线-上海家长都在选择的在线互动小班课,专注小升初中高考升学辅导,一对一在线辅导补习</p>
<!-- 上面这段话用了两种样式，一个是p段落标签指定的样式，另一个是class指定的样式，体现了多层次样式叠加的特点 -->
</body>
</html>
使用内部样式表实现背景设置
- 背景层叠样式的设置示例代码
body{
background-color: aquamarine;
background-image: url("../image/3.png");
background-attachment: fixed;
background-position: top center;
}
使用外部样式表实现设置
- 外部样式表：外部样式表是新建一个文档，里面全写CSS，然后再通过link插入到html代码中。
- 所用：使网页的表示层和结构层彻底分离
- 将背景设置，修改为外部样式表
- 注意：除了link进行外部样式表的连接，还有其他的方法
- 引用外部样式表的示例代码
<link rel="stylesheet" href="index.css">
CSS基础样式
CSS颜色设置
- 颜色的设置有三种方法，第一种是直接用颜色的单词进行设置，第二种是通过16进制代码进行表示，第三种是通过rgb(78,12,23)的形式来表示。
CSS文本样式
- 示例代码
p {
color: rgb(255, 255, 255);
direction: rtl;
letter-spacing: 10px;
line-height: 50px;
text-align: justify;
text-indent: 2em;
}
- 其中，
direction和text-align的区别仅仅是对阿拉伯语（包括阿拉伯数字）有区别，对于其他的语种来说没有区别。对于阿拉伯语（包括阿拉伯数字）来说，direction : rtl会进行逆序输出。另外，1em这个单位代表的是一个字符的宽度。
CSS字体样式
- 字体样式：
font-style、font-family等 - 作用：定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如大写小写字母）。
CSS列表样式
CSS的伪类
通常情况下，超级链接上设置的样式，称为伪类
作用：设置超级链接的4中状态
注意：1. 伪类是用在超链接上的下过比较多，但超链接不是伪类。2. 伪类是选择器。
伪类用法示例代码
a:link {
color: red;
}
a:visited {
color: green;
}
a:hover {
color: yellow;
font-size: 30px;
}
a:active {
color: blue;
}
label:hover {
color: blueviolet;
}
伪类的分类
- 状态伪类
- 结构性伪类
子孙选择器以及其他选择器
div段落标记：相当于容器，把代码进行分割- 可以通过div编号进行选择，这种选择器称为子孙选择器。
/* 子孙选择器 */
#div1 p{
color = red;
}
/* 子选择器，只选择直接属于div1的p标签 */
#div1>p{
color = red;
}
/* 相邻兄弟选择器，只找和div1平级的p标签 */
#div1+p{
color = red;
}
/* 属性选择器，只选择class属性是p1的p标签 */
#div1[class="p1"]p{
color = red;
}
CSS选择器的优先级
div{
width: 200px;
height: 200px;
background-color: red;
}
.div1{
background-color: yellow!important;
}
#div2{
background-color: blue;
}
CSS浮动
DIV样式设置
DIV设置大小、位置、背景
div{
background-color: yellow;
width: 100px;
height: 100px;
position: absolute;
top: 200px; //x坐标
left: 200px; //y坐标
overflow: scroll; //溢出设置
outline: dashed; //边框效果设置
border-left: solid; //左边框效果
border-right: solid;//右边框效果
border-top: solid; //顶边框效果
border-bottom: solid; //底边框效果
}
盒子模型
- width、height、border、margin(外边距)、padding
- 作用：用于页面布局
- 实例
/*对象和对象之间的距离*/
margin: 10px/*上*/ 10px/*右*/ 10px/*下*/ 10px/*左*/
/*对象和边框之间的距离*/
padding: 10px/*上*/ 10px/*右*/ 10px/*下*/ 10px/*左*/
行级元素和块级元素
- 行级元素会分享一行
- 块级元素会独占一行
定位机制
文档流、脱标流（脱离标准文档流、浮动）
文档流特点：
- 会产生空白折叠现象（在HTML换行的回车显示为一个小空格）；
- 高矮不齐，底边对齐
- 自动换行，一行写满之后就要换行书写
float属性设置
CSS定位
相对定位
- 相对定位的偏移参考元素是元素本身，不会使元素脱离文档流。元素的初始位置占据的空间会被保留。
position: relative;
绝对定位
- 相对于已定位的最近的祖先元素，如果没有已定位的最近的祖先元素，那么它的位置就相对于最初包含块（如body）
position: absolute;
- z-index：数值越大，越靠上
z-index: 40;
固定定位
- 相对于浏览器的位置是不改变的
position: fixed;
其他定位
使用中遇到的问题
overflow问题
- 在使用css操作div的时候，经常会遇到例如设定了子div的浮动与高度，但父div的高度并没有被子div撑起来，这时，就需要使用到
overflow: hidden的操作来清除浮动。各种情况如下图所示。
实现水平居中、垂直居中的方法
- 经常会遇到需要居中的情况，可以使用如下操作进行居中设置。
