CSS复习总结

最新推荐文章于 2021-11-15 15:10:00 发布

boonyaxnn

最新推荐文章于 2021-11-15 15:10:00 发布

阅读量334

点赞数

分类专栏： CSS3 面试所需

本文链接：https://blog.csdn.net/boonyaxnn/article/details/88919857

版权

本文详细回顾了CSS的重要概念，包括选择器的使用、盒模型、布局方式（如Flexbox和Grid）、响应式设计以及CSS动画。通过实例解析，深入理解CSS在网页样式控制中的关键作用，帮助提升网页设计能力。

摘要由CSDN通过智能技术生成

1.css介绍
层叠样式表   、级联样式表   、简称 样式表
文件后缀  .css

2.作用：
1）实现了内容与表现的分离
2）提高了代码的可重用性和可维护性

3.css语法
属性:属性值;

4.css特点
1）继承性
具有继承性的属性：
color、font-*、text-*、line-height、list-style-*等

不具有继承性的属性：
background-*、margin、padding等

2）层叠性
3）优先级
优先级高的样式生效，优先级相同，后写的样式生效

5.引入方式
1）行内样式、内联样式   只对当前元素生效
<div style="属性:属性值;"></div>
2）内部样式    只对当前页面生效
<head>
    <style>
        选择器{
            属性:属性值;
            属性:属性值;
        }
    </style>
</head>
3）外部样式  实现了内容与表现的分离，提高了代码的可重用性和可维护性
<head>
    <link rel="stylesheet" href="1.css"/>
</head>
4）导入式
<head>
    <style>
        @import "1.css";
    </style>
</head>

@import和link的区别：
1）@import先加载HTML文件，再加载css文件；link同时加载HTML和css文件
2）@import只能引入css，link还可以引入其他内容
3）@import有兼容性（IE5以上支持），link没有兼容性
4）但js操作DOM时，只能操作link引入的css文件
5）@import会增加页面的http请求

6.选择器
1）基本选择器
1、全局选择器、通用选择器
*{}
选中页面所有元素

2、元素选择器
div、a、b、i、span、img、input、button.....
选中页面所有指定的元素

3、类选择器
.className{}
选中所有class属性为className的元素
类型可以重复，一个元素可以有多个类名，用空格隔开

4、ID选择器
#idName{}
一个网页中的ID名字唯一

选择器的优先级：
行内样式>ID选择器>类选择器>元素选择器>全局选择器
权重：1000  100     10        1

5、合并选择器
选择器1,选择器2,...{

}

2）关系选择器
1、后代选择器
选择器1 选择器2{}
选中所有后代

2、子代选择器
选择器1>选择器2{}
选中所有直接子代

3、相邻兄弟选择器
选择器1+选择器2{}
下一个兄弟

4、通用兄弟选择器
选择器1~选择器2{}
后面所有兄弟


3）伪类选择器
:link   点击之前（只适用于a）
:visited  点击之后（只适用于a）
:hover    鼠标悬停（适用于所有元素）
:active   鼠标按下（适用于所有元素）
LVHA

css3新增
写在子元素上
:first-child  第一个子元素是...
:last-child   最后一个子元素是...
:only-child   唯一一个子元素
:nth-child(number|odd|even|倍数)   第几个子元素是....

:empty  空的子元素
:not(选择器)  否定

:focus    获取焦点
:checked  被选中


4）伪对象选择器
1、:before|::before{
    content:"";
}
2、:after|::after{
    content:"";
}

①插入文字
1、:before|::before{
    content:"text";
}
2、:after|::after{
    content:"text";
}

②插入图片
1、:before|::before{
    content:url("");
}
2、:after|::after{
    content:url("");
}

③自定义插入内容
1、:before|::before{
    content:"";
    display:block;
}
2、:after|::after{
    content:"";
    display:block;
}

5）属性选择器
元素[HTML的属性="属性值"]
元素[HTML的属性^="值"]   以什么开头
元素[HTML的属性$="值"]   以什么结尾
元素[HTML的属性*="值"]   包含

7.背景属性
1）背景颜色
background-color:transparent;

颜色的取值：
1、关键字  red、blue
2、十六进制   #000
3、rgb(0,0,0)
4、rgba(0,0,0,.5)

2）背景图片
background-image:url(""

最低0.47元/天解锁文章

boonyaxnn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS复习总结

1.css介绍层叠样式表、级联样式表、简称样式表文件后缀 .css2.作用：1）实现了内容与表现的分离2）提高了代码的可重用性和可维护性3.css语法属性:属性值;4.css特点1）继承性具有继承性的属性：color、font-*、text-*、line-height、list-style-*等不具有继承性的属性：background-*、mar...
复制链接

扫一扫

专栏目录