1.css简介
css是一种用于描述网页样式和布局的样式表语言。它与HTML结合使用，用于控制网页中各个元素的外观和排版。
2.css样式引入方式
2.1 行内样式
行内优先级最高，针对当前标签
2.2 行外头部引入
行外头部：style，针对当前的html的对应多个标签，行内最高，距离越近优先级越高
2.3 从html外部引入
html使用link从外部引入一个样式，外部的样式使用css编写，可以针对多个html，写样式时要先导入外部样式。
3.css选择器
3.1 通配、标签、类名和id选择器
* 通配选择器，所有的标签都可以选择到，书写形式*{}
标签选择器，标签选择器，如p或者span标签，p{}
. class 类名选择器 在样式中的书写形式.类名{}
# id选择器 书写形式#id名{}
继承的选择器优先级最低
3.2 符号选择器
| ,逗号 | 满足逗号左右一个就行,如span,p，是标签span或者p颜色都是红色 |
| 空格 | 子孙选择器，在其里面的标签 如body span，选择body里的所有span标签 |
| >子选择器 | 子选择器，只选择子，里层的不选 如body>span，只选择子span标签，即span3和span4，里层的span1和span2不选 |
| + | 相邻下一个 如#p5+span，类名为p5的下一个是span，选择该span |
| ~ | 选择后续的 如#p5~span，选择id为p5的后续的span，不用相邻 |
3.3 属性选择器
| [attr] | 拥有属性 |
| [attr=] | 拥有且值相等,如[id="p3"]，拥有id属性且属性为p3 |
| [attr^=] | 拥有且以值开头，如[id^="p"]，拥有id属性且以p开头 |
| [attr$=] | 拥有且以值结尾，如[id$="3"]，拥有id属性且以3结尾 |
3.4 伪类选择器
伪类选择器在正常选择器之后使用
状态：普通样式 鼠标滑入:hover 鼠标点击:active
通常先写普通样式，在写鼠标划入的样式，最后写鼠标点击的样式，顺序不能相反
顺序：
| :first-of-type | 第一个 |
| :last-of-type | 最后一个 |
| :nth-of-type(n) | 正数第n个 |
| :nth-last-of-type(n) | 倒数第n个 |
| :nth-of-type(odd) | 从1开始的奇数 |
| :nth-of-type(even) | 从1开始的偶数 |
4.css包围盒
css 中的包围盒（Box Model）是指用来描述 HTML 元素在页面上所占空间的模型。
4.1 内容区域（Content Area）
内容区域是元素实际包含内容的区域，比如文本、图片等。内容区域的大小可以通过设置元素的宽度（width）和高度（height）来控制。
4.2 内边距（Padding）
内边距是内容区域与边框之间的空白区域，用于控制元素内容与边框之间的距离。可以通过设置 padding 属性来控制内边距的大小。
4.3 边框（Border）
边框是包围在内容区域和内边距周围的线条或者边界，用于界定元素的边界。可以通过设置 border 属性来定义边框的样式、宽度和颜色。
4.4 外边距（Margin）
外边距是元素边框与相邻元素之间的空白区域，用于控制元素与其他元素之间的距离。可以通过设置 margin 属性来定义外边距的大小。
更改包围盒计算方式：box-sizing: border-box 给定宽高包含边框和内补。
5.css样式属性
5.1 font字体
| font-family | 字体 如黑体、楷体、仿宋，默认使用的是系统有的字体，如果系统没有默认使用微软雅黑 |
| font-size | 字体大小 |
| font-weight | 字体粗细 400默认，700bold |
| font-style | 字体样式 斜体italic normal正常 |
5.2 text文本相关
| transform | capitalize首字母大写 lowercase全小写 uppercase全大写 |
| align | left靠左 right靠右 center居中 |
| indent | 缩进 2em代表缩进两个当前的字体大小 |
| decoration | 常用none 去掉下划线，如a(是一个链接，会有下划线)标签的文本百度这两个字，将下划线去掉) |
5.3 背景
| background-color | 背景色 | |
| background-image | 背景图 | 使用了url()函数，背景图片，优先级高 |
| background-repeat | 重复 | 常用no-repeat，图片小，可以重复可以repeat-x和repeat-y，但通常都使用一个图片，大的图片没有必要重复 |
| background-position | 位置 | 支持left right top bottom center 也支持像素 100px 200px |
| background-size | 大小 | 100%铺满，contain长边完全展示短边补空，cover 短边完全展示长边隐藏 |
5.4 列表
list-style：
type：circle空心圆，disc实心圆
square方块，lower-alpha小写字母，lower-roman罗马数字
position：outside外侧，inside内侧
list-style:none 去除所有样式(常用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体文本背景列表</title>
<style>
/* *通配符选择器，所有标签都可以选择上 */
/* *{
font-family: "仿宋", "黑体";
font-size: 20px;
font-weight: 400;
font-style: italic;
} */
/* 标签选择器，span标签可以选择 */
/* span:nth-of-type(1){
font-family: "楷体";
font-weight: bold;
}
span:nth-last-of-type(2){
font-family: "黑体";
font-size: 25px;
font-style: normal;
} */
/* p:nth-of-type(1){
text-transform: uppercase;
text-align: center;
text-indent: 2em;
}
a{
text-decoration: none;
} */
/* .container{
width: 300px;
height: 300px;
background-color: aqua;
background-image: url(./img/img1.png);
background-repeat:no-repeat;
background-position: center;
background-size: contain;
} */
ul,ol,li{
list-style-type: lower-alpha;
list-style-position: inside;
/* list-style: none; */
}
</style>
</head>
<body>
<!-- <span>span1</span>
<span>span2</span>
<span>span3</span>
<p>hello1</p>
<p>hello2</p>
<p>hello3</p>
<p>hello4</p>
<p>hello5</p>
<a href="">百度</a> -->
<p class="container"></p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<ol>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ol>
</body>
</html>6.css的显示display
| inline | 行内，不能给宽高 |
| block | 块，可以给宽高 |
| inline-block | 多个块在一行，块可以给宽高 |
| none | 隐藏 |
7.css的定位
position定位
| relative | 相对定位 参考文档流，就是参考静态定位 |
| absolute | 绝对定位 参考位置是外层的第一个非静态 |
| fixed | 固定定位 参考浏览器窗口 |
| sticky | 粘性定位 没有达到粘性位置-相当于静态定位 达到粘性位置，相当于固定定位 |
| z-index | 距离眼睛的位置，该块显示的优先级 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位</title>
<style>
div{
/* 默认为静态定位：从上到下，从左到右 */
width: 100px;
height: 100px;
background-color: aqua;
}
.relative{
width: 90px;
height: 90px;
background-color: blue;
position: relative;
left: 10px;
bottom: 20px;
}
.relative1{
width: 50px;
height: 50px;
background-color: brown;
position: relative;
left: 20px;
top: 10px;
}
.abs{
width: 50px;
height: 50px;
background-color: burlywood;
position: absolute;
}
.abs2{
width: 20px;
height: 20px;
background-color: cadetblue;
position: absolute;
left: 10px;
bottom: 30px;
}
.fixed{
width: 100%;
height: 60px;
background-color: lightpink;
position: fixed;
left: 0;
top: 0;
z-index: 1000;
}
.sticky{
width: 100%;
background-color: plum;
position: sticky;
bottom: 20px;
top: 60px;
z-index: 555;
}
</style>
</head>
<body>
<div class="fixed">fixed</div>
<!--
position
静态：static
相对定位：relative，参考文档流，就是参考静态定位
绝对定位：absolute，参考位置是外层的第一个非静态
fixed 固定定位，参考浏览器窗口
sticky 粘性定位 没有达到粘性位置-相当于静态定位；达到粘性位置，相当于固定定位
z-index 距离眼睛的位置，该块显示的优先级
-->
<div>static</div>
<div>static</div>
<div>static</div>
<div>static</div>
<div>static</div>
<div>static</div>
<div>static</div>
<div>static</div>
<div>static</div>
<hr>
<div class="sticky">sticky</div>
<hr>
<div class="relative">rel1</div>
<div class="relative relative1">rel2</div>
<div class="abs">abs1
<div class="abs abs2">abs2</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>8.css的浮动与清除
浮动：float：left 左浮动-上一个左浮动的右侧
right 右浮动-上一个右浮动的左侧
清除：clear：left 左边不能有左浮动
right 右边不能有右浮动
both 清除左右浮动，一般使用一个标签清除浮动，且该标签不占用位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动与清除</title>
<style>
div{
width: 100px;
height: 100px;
background-color: aquamarine;
text-align: center;
}
.div1{
float: left;
background-color: lightcoral;
text-align: center;
}
.div2{
float: left;
background-color: lightcoral;
text-align: center;
clear: left;
}
.div3{
float: left;
background-color: lightcoral;
text-align: center;
clear: left;
}
.div4{
float: right;
background-color: lightcoral;
text-align: center;
clear: left;
}
.div5{
float: right;
background-color: lightcoral;
text-align: center;
clear: right;
}
.div6{
float: right;
background-color: lightcoral;
text-align: center;
clear: right;
}
.clear{
width: 0;
height: 0;
clear: both;
}
</style>
</head>
<body>
<!--
浮动 float
left 左浮动-上一个左浮动的右侧
right 右浮动-上一个右浮动的左侧
clear清除
left 左边不能用左浮动
right 右边不能有右浮动
both 清除左右浮动，一般使用一个标签清除浮动，且该标签不占用位置
-->
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
<div class="div5">div5</div>
<div class="div6">div6</div>
<div class="clear"></div>
<div>div7</div>
</body>
</html>9. css自定义字体
在头部样式：@font-face 自定义字体名，定义字体名字和字体路径
.自定义的字体名，使用自定义字体
使用外部字体：<link rel="stylesheet" href="css文件路径">
然后可以直接使用类名来调用(要写上两个类名iconfont和使用的图标名)相应的字体
如果想要变色，可以设置鼠标划上的颜色span:hover{color:lihhtcoral;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义字体</title>
<link rel="stylesheet" href="./font/iconfont.css">
<style>
/* @font-face {
font-family:"python2401" ;
src: url();
}
.myfont{
font-family: "python2401" !important;
font-size: 60px;
color: lightcoral;
} */
span:hover{
color: lightcoral;
}
</style>
</head>
<body>
<!--
字体是有版权的
可以使用iconfont阿里的免费字体，下载代码，使用的是.css和font文件
有三种方式：unicode font class
unicode不支持多色，使用@font-face来自定义字体，包括字体名字和字体路径，
然后使用.myfont来使用自定义字体
第三种使用方便，在外边<link rel="stylesheet" href="css文件路径">，
然后可以直接使用类名来调用(要写上两个类名iconfont和使用的图标名)相应的字体，如果想要变色，可以设置鼠标划上的颜色span:hover{color:lihhtcoral;}
-->
<span class="iconfont icon-shouyebeifen"></span>
<span class="iconfont icon-shouye"></span>
</body>
</html>10. css的渐变
transition 如：transition: all 0.5s linea，all所有属性，0.5s时间，linear匀速
transform旋转，rotate()旋转度数，trandlateX()X方向偏移多少，scale()缩放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渐变</title>
<style>
.div1{
width: 100px;
}
.d1{
height: 20px;
background-color: lightblue;
}
.d2{
height: 0px;
background-color: lawngreen;
/* 渐变 all所有属性 0.5s内完成 linear匀速 */
transition: all 0.5s linear;
}
.d1:hover~.d2{
height: 150px;
/* transform旋转 rotate()旋转度数 不能写多个 trandlateX()X方向偏移多少*/
/* transform: rotate(90deg); */
/* transform: translateX(200px); */
/* scale()缩放 */
transform: scale(2);
}
</style>
</head>
<body>
<div class="div1">
<div class="d1"></div>
<br><br><br><br><br><br><br><br><br><br>
<div class="d2"></div>
</div>
</body>
</html>11. css旋转
自定义旋转
@keyframes 自定义旋转名，中间的百分之几、旋转多少度都是自定义
使用旋转，animation: 自定义选择的名字 时间 linear匀速 infinite无限(不写只旋转一次持续旋转) reverse(不写是顺时针)反方向选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转</title>
<style>
.animation{
width: 100px;
}
/* 自定义旋转 @keyframes 名字 中间的百分之几、旋转多少度都是自定义的 */
@keyframes myrotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.animation{
width: 48px;
height: 48px;
/* 使用旋转animation: 自定义选择的名字 时间 linear匀速 infinite无限(不写只旋转一次持续旋转) reverse(不写是顺时针)反方向选择*/
animation: myrotate 1s linear infinite reverse;
}
</style>
</head>
<body>
<div class="animation">
<img src="../img/taiji.png" alt="">
</div>
</body>
</html>12.css弹性容器
css弹性容器是指通过 CSS Flexbox（弹性盒子布局）属性来控制其子元素的布局方式的容器。Flexbox 是一种弹性布局模型，可以让容器内的子元素能够以灵活的方式排列、对齐和分布空间。
12.1 display
设置为display: flex 的元素会变成一个弹性容器，其子元素会按照 Flexbox 规则进行布局。另外，display: inline-flex; 也可以创建一个行内的弹性容器。
12.2 flex-direction
指定弹性容器内子元素的排列方向。常见的取值包括row（水平方向）、colum（垂直方向）、row-reverse（反转水平方向）和colum-reverse（反转垂直方向）。
12.3 justify-content
定义了弹性容器内子元素沿着主轴（Flexbox 的排列方向）的对齐方式。常见的取值包括flex-start（起始位置）、flex-end结束位置）、center（居中）、space-between（两端对齐，项目之间的间隔相等）和space-around（每个项目两侧的间隔相等）。
12.4 align-items
定义了弹性容器内子元素沿着交叉轴（与 Flexbox 的排列方向垂直的方向）的对齐方式。常见的取值包括flex-start（起始位置）、flex-end（结束位置）、center（居中）。
12.5 align-content
仅在有多行的情况下生效，定义了多根轴线（Flexbox 的排列方向的垂直方向）的对齐方式。常见的取值包括flex-start、flex-end、center、space-between、space-around 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性容器</title>
<style>
.container{
width: 300px;
height: 300px;
/* border: 1px solid blue; */
display: flex;
/* 主轴方向: 默认是column列排序 column-reverse 行排序row row-reverse*/
/* flex-direction: column; */
/* flex-direction: column-reverse; */
flex-direction: column;
/* flex-direction: row-reverse; */
/* nowrap wrap wrap-reverse */
/* flex-wrap: wrap; */
/* justify-content 主轴 flex-start主轴开始位置 flex-end主轴结束位置 center主轴居中
space-between中间有空白 space-around两边中间都有空白
align-items交叉轴 flex-start交叉轴起始位置 flex-end交叉轴结束 center居中
*/
/* justify-content: center; */
/* align-items: center; */
justify-content: space-around;
align-items: center;
}
/* .container div{
width: 100px;
height: 100px;
line-height: 60px;
text-align: center;
background-color: lightcoral;
} */
.container .c1{
/* c1是一个容器，容器的展示为flex，将flex-directon设为行，再设置位置 */
/* 块在容器中移动位置 */
width: 300px;
height: 100px;
display: flex;
flex-direction: row;
border: 1px solid blue;
justify-content: flex-start;
}
.container .c2{
width: 300px;
height: 100px;
display: flex;
flex-direction: row;
justify-content: center;
border: 1px solid blue;
}
.container .c3{
width: 300px;
height: 100px;
display: flex;
flex-direction: row;
justify-content: flex-end;
border: 1px solid blue;
}
.container .c1 div{
width: 100px;
height: 100px;
background-color: lightcoral;
}
.container .c2 div{
width: 100px;
height: 100px;
background-color: lightcoral;
}
.container .c3 div{
width: 100px;
height: 100px;
flex-direction: row;
background-color: lightcoral;
}
</style>
</head>
<body>
<!--
display:flex
主轴
交叉轴
-->
<div class="container">
<div class="c1">
<div>1</div>
</div>
<div class="c2">
<div>2</div>
</div>
<div class="c3">
<div>3</div>
</div>
</div>
</body>
</html>
扫一扫
2020
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
