前端三剑客之Css---day3

1.css导入方式：

css的导入方式有三种：内联样式，内部样式，外部样式。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Css 导入方式</title>
    <link rel="stylesheet" href="./css/style.css">
    <style>
        p {
            color: blue;
            font-size: 26px;
        }
        h2{
            color: green;
        }
    </style>
</head>
<body>
    <p>这是应用了css样式的文本</p>
    <h1 style="color: blue;">这是一个一级标题标签，使用内联样式</h1>
    <h2>这是一个二级标题，应用内部样式</h2>
    <h3>这是一个三级标题，应用外部样式</h3>
</body>
</html>

1.内联样式：

内联样式就是在标签中使用style实现的属性，比如上述代码中的一级标题标签使用内联样式让颜色变为蓝色。实现方式：style="key:value;key1:value2"

2.内部样式：

内部样式指在该html文件中在<head>标签中使用<style>标签实现的样式。

在上述代码中，如果是对标签使用样式就直接：标签名{key:value;key1:value2;}

此外还可能对含有name和id属性的标签进行样式实现。

对于name，使用.[name名称]{key:value;key1:value2;}

对于id，使用#[id名称]{key:value;key1:value2;}

3.外部样式：

外部样式则通过在<head>中使用<link rel="stylesheet" href="#">

其中rel指定是css样式，href指向该文件外的css样式代码。

在css代码文件中，和内部样式无差别，使用：标签名{key:value;key1:value2;}

【三种导入方式的优先级：内联样式>内部样式>外部样式。优先级高的会覆盖优先级低的。】

2.css选择器：

css选择器其实就是对标签，类，id，或者其他的进行样式美化。根据不同的选择器去对相应的代码去实现样式美化。

1.元素选择器：

对标签进行样式美化，比如h2，p等。

html 复制代码

/* 元素选择器 */
        h2{
            color: blue;
        }
<h2>这是一个元素选择器示例</h2>

2.类选择器：

对类进行美化，在有class指定的值时可以使用：

html 复制代码

/* 类选择器 */
        .highlight{
            background-color: yellow;
        }
<h3 class="highlight">这是一个类选择器</h3>

3.id选择器：

对id指定的标签进行美化，在有指定的id时可以使用：

html 复制代码

/* id选择器 */
        #header{
            font-size: 35px;
            color: red;
        }
<h4 id="header">这是一个ID选择器示例</h4>

4.通用选择器：

指对所有内容实现的样式美化

html 复制代码

/* 通用选择器 */
        *{
            font-family: "KaiTi";
            font-weight: bolder;
        }

5.子元素选择器：

在父元素有子元素的时候可以对子元素进行选择器选择，因为也是类，所以使用.类名表示，然后>指向父元素。

html 复制代码

/* 子元素选择器示例 */
        .father> .son{
            color: yellowgreen;
        }
<div class="father">
        <p class="son">这是一个子元素选择器示例</p>
    </div>

6.后代选择器：

和子元素选择器不同，这个是指父元素下的所有后代。

【注意：在样式表中，优先级id>类>标签名，所以class="son"的样式美化因为优先级高，没有实现这个后代选择器的美化。】

html 复制代码

/* 后代选择器 */
        .father p{
            color:  brown;
            font-size: larger;
        }
<div class="father">
        <p class="son">这是一个子元素选择器示例</p>
        <div>
            <p class="grandson">这是一个后代选择器</p>
        </div>
    </div>

7.相邻元素选择器：

紧跟之后的一个元素选择器，h3后面的一个p标签拥有美化，而前面的没有。

html 复制代码

/* 相邻元素选择器：紧跟之后的一个元素选择器 */
        h3 + p{
            background-color: red;
        }
<p>这是一个普通的p标签</p>
    <h3>这是一个相邻选择器示例</h3>
    <p>这是另一个p标签</p>

3.css属性：

1.复合属性：

html 复制代码

<h1 style="font: bolder 50px 'KaiTi';">这是一个font复合属性</h1>

在这个当中，font为一个复合属性，包括了bolder，50px，'KaiTi'，三个属性。通过内联样式导入。

实现效果：

2.块元素属性：

之前提到了块元素和行内元素的区别。块元素占据一整行，行内元素只占据所需的大小。

html 复制代码

.block{
            background-color: red;
            width: 150px;
            height: 100px;
        }
<div class="block">这是一个块元素</div>

3.行内元素属性：

html 复制代码

.inline{
            background-color: blue;
        }
<span class="inline">这是一个行内元素</span>

【注意：除了块元素和行内元素之外，还有一种元素叫做行内块元素。在这里在顺一遍知识。

块元素：从新行开始，占据整行的宽度，可以包含其它块元素和行内元素。

行内元素：不会独占一行，只占据所需空间大小，不可包含块元素，可以包含行内元素。

行内块元素：水平方向上排列，可以设置宽度和高度，可以包含块元素和行内元素。

通常使用display属性：

inline行内元素。block块元素。inline-block行内块元素。还有none属性用来不显示。

】

4.块元素转行内元素属性：

html 复制代码

.div-inline{
            display: inline;
            background-color: aquamarine;
        }
<div class="div-inline">这是一个转换为行内元素的div标签</div>

5.行内元素转行内块元素属性：

html 复制代码

.span-inline-block{
            display: inline-block;
            background-color: purple;
            width: 300px;
        }
<span class="span-inline-block">这是一个转换为行内块元素的行内元素</span>

4.css盒子模型：

盒子模型就是通过标签和样式在前端进行显示，大多通过div标签所以显示出来像盒子，就叫盒子模型。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Css 盒子模型</title>
    <style>
        .demo{
            background-color: blue;
            display: inline-block;
            border: 5px solid yellowgreen;
            padding: 50px;
            margin: 40px;
        }
        .border-demo{
            background-color: yellow;
            width: 100px;
            height: 200px;
            border-style: solid;
            border-width: 10px;
            border-color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="demo">
            你好，我的世界。
    </div>
    <div class="border-demo">这是一个边框示例</div>
</body>
</html>

图4.1 盒子模型显示

就是使用div和css在前端进行显示，展现盒子模型。

盒子模型的属性：

content：内容，盒子包含的实际内容，比如文本，图片等。

padding：内边距，内容和边框之间的空间。

border：边框，内边距的外部，盒子的边界。

margin：外边距，围绕在边框的外部，盒子和其他元素之间的空间。

图4.2 盒子模型展示

总之，内容>内边距>边框>外边距。其中除了content外都是复合属性，可以通过这一个属性来定义多个样式。

5.浮动：

实现了各种盒子模型之后，我们想要将盒子模型进行排版美化。离不开两个方式，一个是浮动，一个是定位。接下来说这两个方式。

实现浮动的前提，在父元素中有多个子元素。之前我们了解到div是块元素，在一个块元素充当父元素的时候如果创建了多个块元素，它会按照每一个div一行进行排版。但是如果父容器设置了固定的大小，此时空间不够的容器就会被挤出去。

而浮动可以让子容器在父容器中合理的使用空间，一般浮动有左浮动和右浮动。在我们给子容器添加浮动后，子容器就会在父容器中紧挨着排版，一个设置左浮动，一个设置右浮动的时候就会一个靠父容器的左边，一个靠近右边。

浮动：相对于父元素进行浮动，只会在父元素的内部进行移动。float：left，right，none。

浮动三大特性：脱标，脱离标准流；一行显示，顶部对齐；具备行内块元素的特性。

清除浮动：对父元素使用overflow：hidden。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动</title>
    <style>
        .father{
            background-color:aquamarine;
            height: 150px;
        }
        .left-son{
            width: 100px;
            height: 100px; 
            background-color: yellowgreen;
            float: left;
        }
        .right-son{
            width: 100px;
            height: 100px;
            background-color: yellow;
            float:right;    
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="left-son">左浮动</div>
        <div class="right-son">右浮动</div>
    </div>
</body>
</html>

实现效果：

图5.1 不设置浮动的div

图5.2 设置浮动的div

6.定位：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位</title>
    <style>
        .box1{
            height: 350px;
            background-color: aquamarine;
        }
        .box-normal{
            width: 100px;
            height: 100px;
            background-color: purple;
        }
        .box-relative{
            /* 相对定位 */
            width: 100px;
            height: 100px;
            background-color: pink;
            position: relative;
            left: 120px;
            top: 40px;
        }
        .box2{
            height: 350px;
            background-color: yellow;
            margin-bottom: 300px;
        }
        .box-absolute{
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: yellowgreen;
        }
        .box-fixed{
            background-color: brown;
            width: 100px;
            height: 100px;
            position: fixed;
            right: 0;
            top: 300px;
        }
    </style>
</head>
<body>
    <h1>相对定位</h1>
    <div class="box1">
        <div class="box-normal"></div>
         <div class="box-relative"></div>
          <div class="box-normal"></div>
    </div>

    <h1>绝对定位</h1>
    <div class="box2">
        <div class="box-normal"></div>
         <div class="box-absolute"></div>
          <div class="box-normal"></div>
    </div>

    <h1>固定定位</h1>
    <div class="box3">
        <div class="box-fixed"> </div>
    </div>
</body>
</html>

1.相对定位relative：

相对定位：相对于元素在文档流中的固定位置进行定位。

在父容器中有三个子容器，其中一个容器设置了position:relative。并且通过left和top来指定对上下左右的距离。【left左，right右，top上，bottom底】

实现效果：

图6.1 相对定位

ps：这里为什么粉色的块距离父容器那么远，是因为三个子容器都是div容器，div容器是块元素，会占据整行，所以这里的top实际上是指对上面第一个子容器的距离。

2.绝对定位absolute：

绝对定位：相对其最近的已定位祖先元素进行定位，不占据文档流。

实现效果：

图6.2 绝对定位

ps：代码里有三个div块，但是这里只有两个是为什么？是因为属性为绝对定位的块不占据文档流，所以和第三个块重复了，又因为是div块，所以在下排列。

3.固定定位fixed：

固定定位：相对于浏览器窗口进行定位，不占据文档流，不随滚动而滚动。

这个就更好理解了，根据left，right，top，bottom来定位该块的位置。