CSS基础整理【更新中】-一一网

CSS是什么？

Cascading Style Sheets【层叠样式表】
是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。主要用来设计网页的样式，美化网页，静态或动态的修饰页面元素的样式

CSS的引入方式

【行内样式】
- 优先级最高，可以覆盖同意元素的其他引入的样式
- 作为标签的属性存在
- 代码量大，分离度较低，维护困难，冗余度高
【内嵌】
- 写在本HTML当中的head中的style标签当中
- 读取速度相较于两种导入比较快，同步的
【外链导入】
- 外部单独创建一个css样式表，通过link标签引入
- 异步加载的，而且是等到同步任务完成后，再去渲染加载回来的外链样式文件
【导入式】【何时渲染的问题？】
- 在style标签内使用@import 文件路径来引入
- 还可在外联样式表.css文件中在引入样式表，不过需要放在整个代码的最上面，不然会被后来的重复样式覆盖

CSS的语法

元素的划分
- 块级元素
  - 写宽高可以起作用
  - 独占一行
    - 【此特点决定了】 排列方式：上下排列
- 行内元素
  - 写宽高不起作用，其大小由其内部内容撑开并决定。
  - 共占一行
    - 【此特点决定了】 排列方式：左右排列
  - 【特殊行内元素】 行内块元素
    - 写宽高可以起作用
    - 共占一行
    - 排列方式：左右
  - 【判断方式】
    - 与行内元素放在一起，若测试的元素没有和行内元素共占一行，则一定是块级元素
    - 若在一行，则通过改变测试元素宽高，来判断是【不变：行内元素】还是【变了：行内块元素】
- 元素标签的总结
  - 行内元素：
    - span、a、b、strong、i、em、s、del、u、ins
  - 块级元素：
    - div、h1 – h6、p、ul、li、ol、dl、dt、dd
  - 行内块：
    - img、video、audio
元素特性的转换display
1. 转换为块级元素
  - display:block
  - 【特性】
    1. 不设置宽度就会充满其父元素
    2. 不设置高度，就由内容能撑开多少决定
2. 转换为行内元素【基本不使用】
  - display:inline
3. 转换为行内块元素
  - display:inline-block
4. 隐藏该元素
  1. display:none
    - 【彻底消失，不占位置】
  2. visibility:hidden 【可视程度】
    - 【元素还在，占着位置，只不过看不见】
  3. opacity:% 【透明度】
    - 【元素还在，占着位置，只不过看不见】
  4. z-index 【定位的元素可以以此控制层级】
    - margin【控制无内容容器离开视口（无内容适用）】
    - 宽高【减为0（无内容适用）】

选择器

通配符选择器【所有元素】

    <style>
        *{
            margin:0;
            padding:0;
        }
    </style>
复制代码

标签选择器【指定的标签】

    <style>
        ul,li{
            list-style:none;
        }
    </style>
复制代码

id选择器【指定的id】

    <style>
        #id{
            margin:0;
            padding:0;
        }
    </style>
    <body>
        <div id='id'></div>
    </body>
复制代码

类选择器【指定的类】

    <style>
        .class{
            margin:0;
            padding:0;
        }
    </style>
    <body>
        <div class='class'></div>
    </body>
复制代码

分组选择器
- 可以将公用的样式提取出来，降低代码冗余，精简代码
- 示例
```
    <style>
    div,span{
        ....
    }
    </style>
复制代码
```

CSS样式

清除默认样式

清除全局元素的margin和padding

    <style>
        *{
            margin:0;
            padding:0;
        }
    </style>
复制代码

清除列表的默认样式

    <style>
        ul,li{
            list-style:none;
        }
    </style>
复制代码

清除a标签的默认样式

    <style>
        a{
            <!-- 删除下划线 -->
            text-decoration:none;
            <!-- 修改字体大小 -->
            font-size:100px;
            <!-- 清除默认字体颜色 -->
            color:#333;
        }
    </style>
复制代码

常用样式

宽高

        <style>
            *{
                height:100px;
                width:100px;
            }
        </style>
复制代码

背景颜色

        <style>
            *{
                background-color:#fff;
                <!-- 复合样式 -->
                background:#fff;
            }
        </style>
复制代码

文字

字体font-family
- 可设置多种字体，用逗号间隔，如果没有字库就顺延使用，都没有就使用默认
- 字体名若由多个单词组成，则用引号括住
```
    <style>
        *{
            font-family:"微软雅黑";
        }
    </style>
复制代码
```

字号font-size

可以先总体设置大部分字字号，然后再去单独设置不同字号的字

   <style>
       *{
           font-size:16px;
       }
   </style>
复制代码

颜色color

设置字体颜色

        <style>
            *{
                color:black;
            }
        </style>
复制代码

粗细font-weight

400->normal
700->bold

900->bolder

    <style>
        *{
            /* 正常 */
            font-weight:400;
            font-weight:normal;
            /* 加粗 */
            font-weight:700;
            font-weight:bold;
            /* 更粗 */
            font-weight:900;
            font-weight:bolder;
        }
    </style>
复制代码

倾斜&正常font-style

倾斜 italic

正常 normal

    <style>
         *{
            font-style:italic;
            font-style:normal;
         }
    </style>
复制代码

块级元素快速水平居中

margin:0 auto;

    <style>
         div{
            margin:0 auto;
         }
    </style>
复制代码

行高line-height

三部分组成：上间距，元素，下间距

上下间距是相等的,元素处于中间

    <style>
         div{
            line-height:100px;
         }
    </style>
复制代码

高度height

高度就是容器的高度

配合行高可以实现元素的垂直居中

让行高等于容器的高度

    <style>
         div{
            height:100px;
         }
    </style>
c
复制代码

文字对齐text-align
- left，center，right居左，居中，居右
- 不管是对什么元素使用，都是对其中的文字元素起作用
```
    <style>
         p{
            text-align:center;
         }
复制代码
```

首行缩进

会对文本块中首行文本的缩进。

        <style>
            p{
                <!-- 首行缩进，em单位自动适应 -->
                text-indent:2em;
            }
        </style>
        <body>
            <p>
                这是一段文字
            </p>
复制代码

使用案例

        <style>
            body{
                <!-- 可设置多种字体，用逗号间隔，如果没有字库就顺延使用，都没有就使用默认 -->
                font-family:"Times New Roman",Times,serif;
                font-family:"宋体","楷书","微软雅黑";

                font-size:10px;

                //正常
                //font-weight:400px;
                font-weight:normal;
                //加粗
                //font-weight:700px;
                font-weight:bold;
                //更粗
                //font-weight:900px;
                font-weight:bolder;

                //倾斜&恢复正常
                font-style:italic;font-style:normal;
                color:#eee;
            }
            div{
                <!-- 快速水平居中 -->
                margin:0 auto;

            }
            #jvzhong{
                height:300px;
                line-height:300px;

            }
            p{
                line-height:10px;
                text-align:center;
                // text-align:left;
                // text-align:right;
            }
        </style>
        <body>

            <p>
                这是一段文字
            </p>
            <div>块元素水平居中</div>
            <div id="jvzhong">
                <p>
                    垂直居中
                </p>
            </div>

            
        </body>
复制代码

边框border

border:宽度样式颜色;
- 还可以单独控制
  - border-width【单独控制宽度】
  - border-left-width【单独控制每条边宽度】
  - border-style 【单独控制样式】
    - solid 实线
    - dashed 虚线
  - border-color 【单独控制颜色】

        <style>
            div{    
                border:2px solid black;
                border-width:10px;
                border-left-width:10px;
                border-style:dotted;
                border-color:pink;
            }
        </style>
复制代码