day55 前端学习~

　　css入门

　　一、架构分析

　　　　页面 => div的层级结构 => 具有采用哪些功能标签显示内容

　　　　结构层 > 位置层(布局层) > 内容层

　　二、css引入

　　　　行间式

<div style="width: 100px; height: 100px">
</div>
<!-- 简单直接，针对性强 -->

　　　　内联式

<head>
    <style>
        选择器 {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<!-- 解耦合了，可读性强 -->

　　　　外联式

/* index.css */
选择器 {
        width: 100px;
        height: 100px;
}
/* 适合团队高效率开发，耦合性低，复用性强 */

<!-- index.html -->
<link rel='stylesheet' type='text/css' href='./index.css'>

　　三、三种引入“优先级”分析

1.没有优先级
2.不同的属性样式协同操作，相同的样式采用覆盖机制，选择逻辑最下方的
3.行间式一定是逻辑最下方的样式

　　四、基础选择器

* | div | . | #
通配 < 标签 < 类 < id (优先级：同一标签同一属性)
标签：一般用于最内层样式修饰
类：使用返回最广，布局的主力军
id：唯一标识的布局，不能重复

　　五、文本样式

/*字体样式*/
        
.box {
    /*字族*/
    /*STSong作为首选字体, 微软雅黑作为备用字体*/
    font-family: "STSong", "微软雅黑";
    /*字体大小*/
    font-size: 40px;
    /*字重*/
    font-weight: 900;
    /*风格*/
    font-style: italic;
    /*行高: 某一段文本在自身行高中可以垂直居中显示 => 文本垂直居中*/
    line-height: 200px;

    /*字体整体设置*/
    /*字重 风格 大小/行高 字族  (风格可以省略) ***** */
    font: 100 normal 60px/200px "STSong", "微软雅黑";
}
i {
    /*normal清除系统字体风格*/
    font-style: normal;
}

.box {
    /*水平居中: left | center | right ***** */
    /*text-align: center;*/
    /*字划线: overline | line-through | underline  */
    text-decoration: overline;
    /*字间距*/
    letter-spacing: 2px;
    /*词间距*/
    word-spacing: 5px;
    /*缩进*/
    /*1em相当于一个字的宽度*/
    text-indent: 2em;
}
a {
    /*取消划线*/
    text-decoration: none;
}

　　六、display

.box {
    /*block: 块级标签, 独占一行, 支持所有css样式*/
    /*display: block;*/

    /*inline: 内联(行级)标签, 同行显示, 不支持宽高*/
    /*display: inline;*/

    /*inline-block: 内联块标签, 同行显示, 支持所有css样式*/
    display: inline-block;

    /*标签的嵌套规则*/
    /*①*/
    /*block可以嵌套所有显示类型标签, div | h1~h6 | p*/
    /*注: hn与p属于文本类型标签,所有一般只嵌套inline标签*/
    /*②*/
    /*inline标签只能嵌套inline标签, span | i | b | sup | sub | ins */
    /*③*/
    /*inline-block可以嵌套其他类型标签, 但不建议嵌套任意类型标签 img | input*/
}

猜你喜欢