XML关联CSS
XML（可扩展标记语言）则是一种用于描述数据和文档格式的标记语言。为了让网页看起来更加美观我们通常将XML和CSS联合起来使用。需要在XML文件中使用一些特定的语法。我们可以使用以下代码段将CSS文件导入到XML文件中：
<?xml-stylesheet type="text/css" href="file.css"?>在这个代码段中，我们使用xml-stylesheet标记指定了文档类型为“text/css”。然后，我们指定了CSS文件的路径，让浏览器能够正确加载文件。
一旦XML文件引用了CSS文件，我们就可以开始为我们的XML元素定义样式了。比如，我们可以这样定义一个标签：
<person>
<name>John</name>
<age>32</age>
</person>这个标签定义了一个人的信息，包括他的姓名和年龄。我们可以使用以下代码来定义这个标签的样式：
person {
border: 1px solid #cccccc;
padding: 10px;
background-color: #f0f0f0;
}
name {
font-weight: bold;
}
age {
color: #888888;
}我们为name标签定义了一个粗体字样式，为age标签定义了一个灰色的文本颜色。这样，我们的XML元素就具有了很好的样式。
CSS三种不同引用方式
1.行内样式表（行内式引入）
在标签的开始标签里面添加style属性，属性值中添加css样式代码
<div style="color:red;background-color: blue;">
两岸猿声啼不住，轻舟已过万重山。
</div>2.内部样式表（嵌入式引入）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
color: red;
background-color: pink;
}
</style>
</head>
<body>
<div>.两岸猿声啼不住，轻舟已过万重山。</div>
</body>
</html>3.外部样式表（外部引入）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/外部样式.css">
</head>
<body>
<div>.两岸猿声啼不住，轻舟已过万重山。</div>
</body>
</html>div {
color: red;
background-color: pink;
}
/* css文件 */选择器（Selector）
选择器由 HTML 元素的 id、class 属性或元素名本身以及一些特殊符号构成，用来指定要为哪个 HTML 元素定义样式，分为标签选择器、类选择器、id选择器。
（1）标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 标签选择器，通过标签名找到指定标签 -->
<style>
p{
color: red;
}
div{
color: green;
}
</style>
</head>
<body>
<p>吼吼吼吼或或或或或或或</p>
<div>1112665456455645456</div>
</body>
</html>（2）类选择器（class选择器）
类选择器：通过标签上的class名找到相应的标签，从而使不同类型的标签可以提取公共样式。
格式： .class名{
属性：属性名；
属性：属性名；
属性：属性名；
……
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 类选择器
格式： .class名{
属性：属性名；
属性：属性名；
属性：属性名；
……
}
-->
<style>
.op{
color: red;
}
.od{
background-color: pink;
}
.op.od{
font-size: 30px;
}
</style>
</head>
<body>
<p class="op od">朝辞白帝彩云间</p>
<p class="od">千里江陵一日还</p>
<p class="op os od">两岸猿声啼不住</p>
<div class="op">轻舟已过万重山</div>
</body>
</html>（3） id选择器
id选择器： 通过标签上的id名找到指定标签；
id是唯一的，只能找到页面中指定标签。
格式：#id名{
属性：属性值；
属性：属性值；
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#p1{
font-size: 50px;
}
</style>
</head>
<body>
<p id="p1">千里江陵一日还</p>
<p>两岸猿声啼不住</p>
<div>轻舟已过万重山</div>
</body>
</html>浮动（float）
浮动原则：1.上方元素不浮动，则浮动元素上不去。2.浮动元素脱离原来的文档流。3.下方元素占据浮动元素位置。4.浮动会对后续元素有影响。
左浮动：
float: left;右浮动：
float: right;清除浮动：
为了消除浮动的影响，使浮动的元素也能撑起父盒子。于是就有了清除浮动。
清除浮动的方法：
在最后一个子盒子后添加一个空盒子，给这个盒子设置clear属性。
- clear：
left; 清除前面的左浮动元素带给我的影响 - clear:
right;清除前面的右浮动元素带给我的影响 - clear:
both;同时清除前面的左右浮动元素带给我的影响. 一般情况下选择这个值比较方便。
给父盒子添加after为元素：
fa::after {
display: block;
clear: both;
content: '';
}同层级之间清除浮动：在需要清除浮动盒子的相邻盒子设置clear属性。
定位（position）
固定定位（fixed）
设置固定定位后元素完全脱离标准文档流。
相对定位relative
position: relative;
相对定位也可以通过偏移量移动位置。相对定位是相对与他本身在标准文档流中的位置进行定位。
虽然相对定位依旧会覆盖在其它盒子之上。但并没有完全脱离文档流，其它元素不会顶替它的位置。
绝对定位
position: absolute;
绝对定位是相对于最近的有定位属性的父级进行定位。 如果所有的祖先元素都没有定位属性，就相对于浏览器的窗口进行定位。
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
260
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
