CSS学习

藤藤_

已于 2022-03-08 10:54:22 修改

阅读量137

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： css css3 前端

于 2022-01-14 23:07:30 首次发布

本文链接：https://blog.youkuaiyun.com/mercury__/article/details/122492084

前端专栏收录该内容

4 篇文章

订阅专栏

CSS层叠样式表（Cascading Style Sheets）

语法规范
在这里插入图片描述

代码风格
在这里插入图片描述

注释
快捷键：ctrl+/
在这里插入图片描述

Chrome 调试工具
在这里插入图片描述

基础选择器

标签选择器（元素选择器）
类选择器

多类名使用：
id选择器
通配符选择器

基础选择器汇总：
在这里插入图片描述

<head>
    <style>
        /* 标签选择器 */
        p {
            color: blueviolet;
        }

        /* 类选择器 */
        .color {
            color: blue;
        }
        .size {
            font-size: large;
        }

        /* id选择器 */
        #p1 {
            color: burlywood;
        }

        /* 通配符选择器 */
        *{
            color: chartreuse;
        }
    </style>
</head>
<body>
    <p>演示</p>

    <p class="color">演示</p>

    <!-- 类选择器 多类名 -->
    <p class="color size">演示</p>

    <p id="p1">演示</p>
</body>

复合选择器
在这里插入图片描述

后代选择器
子选择器
并集选择器
伪类选择器

链接伪类选择器：

:focus伪类选择器：

复合选择器汇总：
在这里插入图片描述

字体属性

字体系列（font-family）
字体大小（font-size）
字体粗细（font-weight）
字体样式（font-style）
字体复合属性（font）

字体属性总结：
在这里插入图片描述

文本属性

文本颜色（color）
对齐文本（text-align）
装饰文本（text-decoration）
文本缩进（text-indent）
文字阴影（text-shadow）
行间距（line-height）

文本属性总结：
在这里插入图片描述

背景属性

背景颜色（background-color）
背景图片（background-image）
背景平铺（background-repeat）
背景图片位置（ background-position）
背景图像固定（background-attachment）
背景复合写法（background）
背景色半透明（background）

背景属性总结：
在这里插入图片描述

引入方式

行内样式表（行内式）
内部样式表（嵌入式）
（前面所写全部属于这种）
外部样式表（链接式）

引入方式总结：
在这里插入图片描述

元素显示模式
在这里插入图片描述

块元素
行内元素
行内块元素

元素显示模式汇总：
在这里插入图片描述
元素显示模式转换：

三大特性

层叠性
继承性
优先级

盒子模型
在这里插入图片描述
1、边框（border）

边框粗细（border-width）
边框样式（border-style）
边框颜色（border-color）
控制相邻单元格边框（border-collapse）
圆角边框（border-radius）

边框会影响实际盒子大小：
在这里插入图片描述

边框可上下左右分开写：
在这里插入图片描述

2、内边距（padding）
在这里插入图片描述

内边距会影响实际盒子大小：

若盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小（没指定width的话可以随意设左右内边距，没指定height的话可以随意设上下内边距，都不会撑大盒子）

3、外边距（margin）
在这里插入图片描述
外边距让块级盒子水平居中：

外边距的合并现象：

清除内外边距：
在这里插入图片描述
4、盒子阴影（box-shadow）

传统网页布局三种方式
在这里插入图片描述

标准流
浮动
为什么需要浮动：

什么是浮动：

浮动特性：
1、浮动元素会脱离标准流(脱标)
浮动的盒子不再保留原先的位置

2、浮动的元素会一行内显示并且元素顶部对齐

3、浮动的元素会具有行内块元素的特性

浮动布局注意点：

清除浮动：
1、为什么要清除浮动

2、清除浮动本质
清除浮动元素造成的影响，如果父盒子本身有高度，则不需要清除浮动。
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了
3、清除浮动策略
闭合浮动。（只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子）
4、清除浮动语法

5、清除浮动方法
a.额外标签法（隔墙法）

b.父级添加 overflow

c. :after 伪元素法

d.双伪元素清除浮动