css复习总结

最新推荐文章于 2024-05-03 15:15:35 发布

MichstaBe-IMUT

最新推荐文章于 2024-05-03 15:15:35 发布

阅读量235

点赞数 1

分类专栏： # css 文章标签： css

本文链接：https://blog.csdn.net/Ulrica_Amaris/article/details/107767005

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

定义

1.css：样式表的定义
2.css：（Cascading Style Sheets）层叠样式表。

位置

1.内部样式head区域style标签里面

<head>
 <style type="text/css" >
</style>
</head>

2.外部样式-link调用,外部样式表可以极大提高工作效率,外部样式表通常存储在 CSS 文件中：

<link rel=”stylesheet” type=”text/css” href=”my.css”(href表示路径)>

3.内联样式-标签元素里面：

<p style="color:red;"></p>

4.优先级：外部样式表 < 内部样式表 < 内联样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*
        1.选择器针对性越强，优先级越高

        2.选择器权值
        * 0

        标签 1

        类 10

        属性 10

        伪类/伪元素 10

        id 100

        important 1000

        3.原则：选择器权值加在一起  大的优先 权值相同后定义的优先

        4.优先级排序：
        important > 内联 > id > 类 / 伪类 / 伪元素 / 属性 > * > 继承
        */
        p#box{ /* 权值 1+100=101*/
            color: yellow;
        }
        p.text1{ /* 权值 1+10=11*/
            color:black;
        }
        #box{ /* 权值 100*/
            color: red;
        }
        .text2{ /* 权值 10*/
            color: blue;
        }
        p{
            color: cyan !important;
        }
    </style>
</head>
<body>
    <p id="box" style="color: green" class="text1 text2">445646546</p>
</body>
</html>

注释

/*注释内容*/

语法

1.CSS规则由两个主要的部分构成：
要添加样式的盒子名或者标签名

要添加的样式。
例：

h1{
	color:blue;
	font-size:12px
}

几种颜色的表示方法

1.颜色名表示:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,olive, orange, purple, red, silver, teal, white, yellow.

2.十六进制的颜色值:16进制颜色

3.rgb(r,g,b)函数：rgb

4.rgba(r,g,b,a)函数：
a表示的是改颜色的透明度，取值范围是0~1，0代表完全透明。

css选择器

1.选择器：css选择器就是要改变样式的对象。
选择器{属性:值;属性:值;}
（1）标签选择器：页面中所有的标签都是一个选择器

 p{color:red;}

（2）ID选择器：选择id命名的元素以 # 开头

 #p1{color:#0f0;}

（3）类选择器：class选择器，选择clas命名的元素以.开头

.first{color:#00f;}

（4）群组选择器：选择多个元素,以逗号隔开

#main,.first,span,a,h1{color:red;}

（5）包含选择器：选择某元素的后代元素，也称后代选择器，父类与子类间以空格隔开

p span{color:red;}

（6）属性选择器：选择包含某一属性的元素：
选择包含title的a标签:

a[title]{color:red;}

选择包含title和href的a标签:

 a[title][href]{color:red;}

（7）> + 选择器子类选择器：只选择子元素（只选择儿子）（相当于包含元素）

p > span{color:red;}

（8）相邻兄弟选择器：只选择后面的相邻兄弟元素

p + span{color:red;}

伪类选择器

1.同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”：

静态伪类：只能用于超链接的样式。如下：
:link 超链接点击之前
:visited 链接被访问过之后

动态伪类：针对所有标签都适用的样式。如下：
:hover “悬停”：鼠标放到标签上的时候
:active “激活”：鼠标点击标签，但是不松手时。
:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）。

2.<a>伪类选择器：
a:link {color:#FF0000;} / 未访问的链接 / （只用于a标签）

a:visited {color:#00FF00;} / 已访问的链接 / （只用于a标签）

a:hover {color:#FF00FF;}/* 鼠标移动到链接上
*/（可和其他标签结合一起用）
a:active {color:#0000FF;} / 选定的链接 /

3.输入伪类选择器（针对表单）：
input:focus{color:red;} / 键盘输入焦点 /

4.其他伪类选择器：
p:first-child{color:red;} /* 第一个p */

:before 在元素之前添加内容。
:after 在元素之后添加内容。

5.优先级：内联样式表-> ID 选择器—> Class 类选择器->标签选择器。

背景属性

1.背景颜色的添加:

background:red;
backgronnd-color:red;

2.背景图片的添加：

background:url(“images/1.jpg”);
backgronnd-image:url(“images/1.jpg”);

3.背景的平铺：平铺就是图片重复出现。
不平铺：background-repeat:no-repeat;
水平方向平铺：background-repeat:repeat-x;
垂直方向平铺：background-repeat:repeat-y;
完全平铺：默认为完全平铺。
4.背景图片的定位：可以设置显示背景图片的位置，通过属性background-position来实现：
（1）background-positon的英文单词取值：
top left top center top right
center left center center center right
bottom left bottom center bottom right
（2）background-positon的数值取值：

background-position:x y;

（3）positon的百分值取值：

background-position:x% y%;

5.背景图片的大小：可以通过属性background-size来设置。
background-size的数值取值
background-size:x y;

在这里插入代码片

background-size的百分值取值

background-size:x% y%;

6.背景图片的滚动：是否随着内容的滚动而滚动由background-attachment设置：
background-attachment:fixed; 固定，不随内容的滚动而滚动。
background-attachment:scroll; 滚动，随内容的滚动而滚动。

文字文本属性

1.文字属性：
color:red; 文字颜色
font-size:12px; 文字大小
font-weight:“bold” 文字粗细(bold/normal)
font-family:“宋体” 文字字体
font-variant:small-caps小写字母

2.文本属性：
text-align:center; 文本对齐(right/left/center)
line-height:10px; 行间距(可通过它实现文本的垂直居中)
text-indent:20px; 首行缩进
text-decoration:none;

文本线(none/underline/overline/line-through)
letter-spacing: 字间距

盒子模型

1.盒子模型就是一个有高度和宽度的矩形区域。
2.组成部分：
自身内容：width、height 宽高
内边距： padding
盒子边框： border 边框线
与其他盒子距离： margin外边距
内容+内边距+边框+外边距=面积。
3.border 边框：
（1）常见写法 border:1px solid #f00;
（2）单独属性：

border-width:

border-style:

dotted 点状虚线
dashed（虚线）
solid（实线）
double（双实线）
border-color (颜色)
4.padding 内边距：像素/厘米等长度单位、百分比。
（1）方向问题
padding:10px; 上下左右
padding:10px 10px; 上下左右
padding:10px 10px 10px; 上左右下
padding:10px 10px 10px 10px; 上右下左（设置4个点–>顺时针方向）
（2）单独属性：

padding-top:
padding-right:
padding-bottom:
padding-left:

（3）当设置内边距的时候会把盒子撑大，为了保持盒子原来的大小，应该高度和宽度进行减小，根据width和height减小。
5.margin 外边距：
值：与padding相同
单独属性：与padding相同
外边距合并：两个盒子同时设置了外边距，会进行一个外边距合并。

块元素、行元素与溢出

1.块级元素：
（1）默认情况下独占一行的元素，可控制宽高、上下边距；两个块级元素连续编辑时，会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素
（2）块级元素一般作为容器出现，用来组织结构，但并不全是如此。有些块级元素，如只能包含块级元素
（3）DIV 是最常用的块级元素，元素样式的display:block都是块级元素。它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。
2.行内元素：
（1）默认情况下一行可以摆放多个的元素，不可控制宽高和上下边距
（2）行内元素一般都是基于语义级(semantic)的基本元素，只能容纳文本或其他内联元素，常见内联元素 “a”。
（3）比如 SPAN元素，IFRAME元素和元素样式的display : inline的都是行内元素。例如文字这类元素，各个字母之间横向排列，到最右端自动折行。
3.行块转换：
display:none; 不显示
display:block; 变成块级元素
display:inline; 变成行级元素
display:inline-block; 以块级元素样式展示，以行级元素样式排列。
4.溢出：
overflow:hidden; 溢出隐藏
overflow:scroll; 内容会被修剪，浏览器会显示滚动条
overflow:auto; 如果内容被修剪，则产生滚动条
5.文本不换行：white-space:nowrap
6.长单词换行：word-wrap:break-word
7.block（块）元素的特点:
①、总是在新行上开始；
②、高度，行高以及外边距和内边距都可控制；
③、宽度缺省是它的容器的100%，除非设定一个宽度。
④、它可以容纳内联元素和其他块元素。
8.inline(行）元素的特点：
①、和其他元素都在一行上；
②、高，行高及外边距和内边距不可改变；
③、宽度就是它的文字或图片的宽度，不可改变
④、内联元素只能容纳文本或者其他内联元素。
9.对行内元素，注意:
（1）设置宽度width 无效。设置高度height无效，可以通过line-height来设置。设置margin
（2）只有左右margin有效，上下无效。
（3）设置padding只有左右有效，上下则无效。元素范围是增大了，但是对元素周围的内容是没影响的。

常见的块状元素

address – 地址
blockquote – 块引用
center – 举中对齐块
dir – 目录列表
div – 常用块级容易，也是CSS layout的主要标签
dl – 定义列表
fieldset – form控制组
form – 交互表单
h1 – 大标题
h2 – 副标题
h3 – 3级标题
h4 – 4级标题
h5 – 5级标题
h6 – 6级标题
hr – 水平分隔线
isindex – input prompt
menu – 菜单列表
noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容
noscript – 可选脚本内容（对于不支持script的浏览器显示此内容）
ol – 有序表单
p – 段落
pre – 格式化文本
table – 表格
ul – 无序列表

常见的行内元素

a – 锚点
abbr – 缩写
acronym – 首字
b – 粗体(不推荐)
bdo – bidi override
big – 大字体
br – 换行
cite – 引用
code – 计算机代码(在引用源码的时候需要)
dfn – 定义字段
em – 强调
font – 字体设定(不推荐)
i – 斜体
img – 图片
input – 输入框
kbd – 定义键盘文本
label – 表格标签
q – 短引用
s – 中划线(不推荐)
samp – 定义范例计算机代码
select – 项目选择
small – 小字体文本
span – 常用内联容器，定义文本内区块
strike – 中划线
strong – 粗体强调
sub – 下标
sup – 上标
textarea – 多行文本输入框
tt – 电传文本
u – 下划线

可变元素

1.可变元素为根据上下文语境决定该元素为块元素或者内联元素。
applet - java applet
button - 按钮
del- 删除文本
iframe - inline frame
ins - 插入的文本
map - 图片区块(map)
object - object对象
script - 客户端脚本

定位

浮动

W3C解释浮动：浮动1
通俗易懂的浮动：浮动2

框架

1.<frameset>框架：用来定义一个框架；双标签不能和一起使用.
2.rows、cols属性:
<rows> 定义行表示框架有多少行（取值 px/%/ * ）
<cols> 定义列表示框架有多少列（取值px/ %/ * ）
3.frame子框架:
<frame> —- 表示框架中的某一个部分；单标签，要跟结束标志

src 显示的网页的路径
name 框架名
frameborder 边框线（取值 0 / 1）
<noframes>属性

<noframes> 提供不支持框架的浏览器显示body的内容；双标签.

<frameset>
     <frame  src=“”  />
     <frame  src=“” />
     <frame  src=“” />
     <noframes>
      <body>内容</body>
     </noframes>
</frameset>

4.<iframe>内联框架:iframe元素会创建包含另外一个文档的内联框架（即行内框架）允许和 body 一起使用
width 宽（取值 px / %）
height 高（取值 px / %）
name 框架名
frameborder 边框线（取值 0 / 1）
src 显示的网页的路径.

高度塌陷

父元素高度自适应，子元素 float 后，造成父元素高度为0，称为高度塌陷问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            border:10px solid red;
            
         }
         #box2{
             width: 200px;
             height: 200px;
             background-color: blue;

             float: right;
         }
         #box3{
             height: 200px;
             background-color: yellow;
         }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
    <div id="box3"></div>
</body>
</html>

在这里插入图片描述

解决方法1

#box1{
            border:10px solid red;

            overflow: hidden;  /*第一种解决方案*/
            
         }
         #box2{
             width: 200px;
             height: 200px;
             background-color: blue;

             float: right;
         }
         #box3{
             height: 200px;
             background-color: yellow;
         }

解决方法2

<div id="box1">
        <div id="box2"></div>
        <div style="clear:both"></div> <!-- 第二种解决方法 -->
    </div>
    <div id="box3"></div>

解决方法3

#box1{
            border:10px solid red;
            
         }
         #box2{
             width: 200px;
             height: 200px;
             background-color: blue;

             float: right;
         }
         #box3{
             height: 200px;
             background-color: yellow;
         }
         .clearfix::after{  /*第三种解决方法*/
             content: '';
             display: block;
             clear: both;
         }

正常显示：
在这里插入图片描述
优缺点

垂直外边距重叠

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            border:10px solid red;
            
         }
         #box2{
             width: 200px;
             height: 200px;
             background-color: blue;

             float: right;
         }
         #box3{
             height: 200px;
             background-color: yellow;
         }

         #box4{
             width: 400px;
             height: 400px;
             background-color: green;

         }
         #box5{
             width: 100px;
             height: 100px;
             background-color: cyan;

             margin-top: 200px;  /*因为外边距重叠，所以整个box4盒子会整体下移*/
         }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
    <div id="box3"></div>

    <div id="box4">
        <div id="box5"></div>
    </div>
</body>
</html>

解决方法1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            border:10px solid red;
            
         }
         #box2{
             width: 200px;
             height: 200px;
             background-color: blue;

             float: right;
         }
         #box3{
             height: 200px;
             background-color: yellow;
         }

         #box4{
             width: 400px;
             height: 400px;
             background-color: green;

         }
         #box5{
             width: 100px;
             height: 100px;
             background-color: cyan;

             margin-top: 200px;  /*因为外边距重叠，所以整个box4盒子会整体下移*/
         }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
    <div id="box3"></div>

    <div id="box4">
        <table></table> <!-- 可以解决外边距重叠问题 -->
        <div id="box5"></div>
    </div>
</body>
</html>

解决方法2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            border:10px solid red;
            
         }
         #box2{
             width: 200px;
             height: 200px;
             background-color: blue;

             float: right;
         }
         #box3{
             height: 200px;
             background-color: yellow;
         }

         #box4{
             width: 400px;
             height: 400px;
             background-color: green;

         }
         #box5{
             width: 100px;
             height: 100px;
             background-color: cyan;

             margin-top: 200px;  /*因为外边距重叠，所以整个box4盒子会整体下移*/
         }
         .clearfix::before{
             content: '';
             display: table; /*此时box5距离box4顶部就有了200px*/
         }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
    <div id="box3"></div>

    <div id="box4" class="clearfix">
        <!-- <table></table>  这也是解决外边距重叠的一种方法 -->
        <div id="box5"></div>
    </div>
</body>
</html>

rem

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。

同样rem也有很多实现方式，不过都是根据rem特性，基于根（html）的font-size大小来做.

当1rem = 10px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html{
            font-size: 10px;  /* 1rem = 10px */
        }
        #box1{
            width: 20rem;
            height: 10rem;
            background-color: red;
            font-size: 5rem;
        }
        #box2{
            width: 20rem;
            height: 10rem;
            background-color: blue;
            font-size: 3rem;
        }
    </style>
</head>
<body>
    <div id="box1">1</div>
    <div id="box2">2</div>
</body>
</html>

在这里插入图片描述
当1rem = 30px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html{
            font-size: 30px;  /* 1rem = 30px */
        }
        #box1{
            width: 20rem;
            height: 10rem;
            background-color: red;
            font-size: 5rem;
        }
        #box2{
            width: 20rem;
            height: 10rem;
            background-color: blue;
            font-size: 3rem;
        }
    </style>
</head>
<body>
    <div id="box1">1</div>
    <div id="box2">2</div>
</body>
</html>

在这里插入图片描述

圣杯布局

圣杯布局就是 两边定宽，中间自适应的三栏布局
代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;

        }
        .content{
            min-width: 400px;
            height: 200px;
            background-color: blue;
            padding: 0 200px;
            /*这里的padding 是为了给left 和 right 留下空间*/
        }
        .main,.left,.right{
            float: left;
            /*三者都要左浮动*/
        }
        .main{
            width: 100%;
            height: 200px;
            background-color: cyan;
        }
        .left{
            width: 200px;
            height: 200px;
            background-color: yellow;
            margin-left: -100%;
            /*这里是最难理解的
            1.此时left盒子是在mian下面
            2.当设置margin-left：100%以后 
            相当于把left盒子向左移动100%  
            3.所以left盒子就会浮到main里 
            4.相当于整体往上移动了200的距离  
            */
            position: relative;
            left: -200px;
            /*因为content 左右padding为200
            所以需要开启相对定位把left移动到最左侧
            */

        }
        .right{
            width: 200px;
            height: 200px;
            background-color: red;
            margin-left: -200px;
            /*
            right盒子 width为200 
            设置margin-left:-200px 相当于把盒子整体移动到main末尾
            */
            position: relative;
            right: -200px;
            /*因为content 左右padding为200
            所以需要开启相对定位把right移动到最右侧
            */
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

在这里插入图片描述

双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;

        }
        .content{
            min-width: 400px;
            height: 200px;
            background-color: blue;
            
        }
        .main,.left,.right{
            float: left;
            /*三者都要左浮动*/
        }
        .main{
            width: 100%;
            height: 200px;
            background-color: cyan;
        }
        .content{
            margin: 0 200px;
        }
        .left{
            width: 200px;
            height: 200px;
            background-color: yellow;
            margin-left: -100%;
            
        }
        .right{
            width: 200px;
            height: 200px;
            background-color: red;
            margin-left: -200px;
            
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="main">
            <div class="content"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

在这里插入图片描述

2D变形-移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: blue;
            transition: all 2s linear;
        }
        div:active{
            transform: translate(100px ,300px);
        }
    </style>
</head>
<body>
    <div class="box">fsdfd</div>
</body>
</html>

2D变形-缩放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: blue;
            margin: 100px auto;
            transition: all 2s linear;
            
        }
        div:hover{
            transform: scale(2,2);
        }
    </style>
</head>
<body>
    <div class="box">fsdfd</div>
</body>
</html>

2D变形-旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            margin: 200px;
            border: 10px solid red;
            border-radius: 50%;
            
            /* 过渡效果 */
            transition: all 1s linear;

            /* 改变中心点 */
            /* transform-origin: left top 左上角 */
            transform-origin: 100px 20px;

        }
        img:active{
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div class="section">
        <img src="../智能垃圾分类系统/images/1.jpg" alt="">
    </div>
</body>
</html>

2D变形-变形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            transition: all 1s linear;
        }
        img:hover{
            /* transform: skewX(60deg);
            transform: skewY(60deg); */
            transform: skew(60deg,60deg);
        }
    </style>
</head>
<body>
    <img src="images/1.jpg" alt="" width = "60%">
</body>
</html>

2D变形-透视

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            perspective: 300px;
        }
        img{
            margin: 100px;
            transition: all 1s linear;
        }
        img:hover{
            transform: rotate3d(100,100,100,360deg);
        }
    </style>
</head>
<body>
    <img src="images/1.jpg" alt="" width = "60%">
</body>
</html>

MichstaBe-IMUT

关注

1
点赞
踩
3

收藏

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

基础知识1.css：样式表的定义2.css：（Cascading Style Sheets）层叠样式表。位置1.内部样式head区域style标签里面<head> <style type="text/css" ></style></head>2.外部样式-link调用,外部样式表可以极大提高工作效率,外部样式表通常存储在 CSS 文件中：<link rel=”stylesheet” type=”text/css” href=”my.c
复制链接

扫一扫