中文名称:
作用:
语法规范:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<!-- CSS位置 -->
<style>
/* 写在style标签中 */
/* 选择器 */
p {
color: pink;
/* CSS属性 key:value */
background-color: aqua;
font-size: 18px;
/* 字体默认大小:16px */
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<p>我是字体</p>
</body>
</html>
实现效果:
➢ 内嵌式:CSS 写在style标签中,如上述方法
➢ 行内式:CSS 写在标签的style属性中
<p style="color: pink;">我是字体</p>
➢ 外联式:CSS 写在一个单独的.css文件中
使用基础选择器在 HTML 中选择元素
标签名+{CSS}
.类名+{CSS}
#id+{CSS}
*+{CSS}
效果·:
后代选择器:选择父元素 后代中 满足条件的元素(空格隔开
)
儿子选择器:选择父元素 子代中 满足条件的元素
并集选择器:同时选择多组标签,设置相同的样式
交集选择器:选中页面中 同时满足 多个选择器的标签(紧挨
)
hover伪类选择器:选中鼠标悬停在元素上的状态,设置样式
总结:
Emmet语法(vscode快捷写法):
值:数字 + px 谷歌浏览器默认文字大小是16px
值: (1)、normal(正常);bold(加粗);(<==常用) (2)、纯数字:100~900的整百数;
值:normal(正常);italic(倾斜·);
值:”Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等…… 字体系列:sans-serif、serif、monospace等…… 从左往右按照顺序查找,如果电脑中未安装该字体,则显示下一个字体,如果都不支持,此时会根据操作系统,显示最后字体系列的默认字体。
underline::下划线 line-througt:删除线 overline:上划线 none:无修饰线,例如去掉超链接下划线
值: (1)、数字px (2)、倍数(根据当前文字大小) line-height : 1 可以取消上下间距 注意:连写时size和line-height用’/‘隔开
颜色:
文字颜色:color
背景颜色:background-color
大盒子居中:margin: 0 auto
background-color
background-image: url('图片路径')
background-repeat:
background-position: 水平位置 垂直位置;
background:color image repeat position
background: url(./img/tb.gif) no-repeat left center;
1、 块级元素block
独占一行(一行只能显示一个) 宽度默认是父元素的宽度,高度默认由内容撑开 可以设置宽高
➢ 代表标签: div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……
2、行内元素inline
一行可以显示多个 宽度和高度默认由内容撑开 不可以设置宽高
➢ 代表标签:a、span 、b、u、i、s、strong、ins、em、del……
3、行内块元素inline-block
一行可以显示多个 可以设置宽高
➢ 代表标签:input、textarea、button、select……
4、元素显示模式转换
控制文字的都能继承
优先级:
权重:(行内,id,类,标签)
页面中的每一个标签,都可看做是一个 “盒子”,通过盒子的视角更方便的进行布局.浏览器在渲染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的称之为 盒子。
➢ CSS 中规定每个盒子分别由:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域( margin)构成,这就是 盒子模型
1.内容区域:content
2.边框区域:border
3.内边距区域:padding
4.外边距区域:margin
width 和 height 属性默认设置是盒子 内容区域 的大小
一般直接属性连写:如:border : 10px solid red;
当只给盒子的某个方向单独设置边框:border - 方位名词 : 10px solid red
例如,下面代码设置盒子模型:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
/* 边框线border */
border: 10px solid orange;
/* 内边框padding */
padding: 10px;
/* 外边框margin */
margin: 20px;
}
</style>
</head>
<body>
<div>Hello World</div>
<div>Hello CSS</div>
</body>
</html>
效果:
设置 边框 与 内容区域 之间的距离
➢ 给盒子设置四周 20px 的内边距
• padding : 20px ;
➢ 给盒子设置上下20px、左右30px的内边距
• padding : 20px 30px ;
➢ 给盒子设置左侧50px的内边距
• padding-left : 50px ;
/* 固定盒子尺寸 */
box-sizing: border-box;
清除内外边框:
* {
margin: 0;
padding: 0;
}
外边距折叠现象:
垂直布局的块级元素,上下margin会合并
塌陷现象(子的margin顶开了父)解决
:
overflow:hidden
行内元素加margin和padding只有水平生效
基础 HTML 界面:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.father {
height: 500px;
width: 500px;
background-color: pink;
margin: 0 auto;
}
.son {
height: 200px;
width: 200px;
background-color: aqua;
color: pink;
}
</style>
</head>
<body>
<div class="father">父盒子
<div class="son">俺是子盒子</div>
</div>
</body>
</html>
这里需要记住的是transform中translate使用百分比时相对的是自己的长宽,不是父盒子的。
.father {
position: relative;
}
.son {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
flex布局,设置水平与竖直方向的内容居中。
.father {
display: flex;
justify-content: center;
align-items: center;
}
.son {}
.father {
position: relative;
}
.son {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
display:table-cell;与vertical-align:middle 的作用是让子盒子在数值方向上居中
margin:auto;则让子盒子在水平方向居中,若只想让盒子在某个方向居中,去掉另一个就可以了。
.father {
display: table-cell;
vertical-align: middle;
/* 父盒子margin居中会消失 */
}
.son {
margin: auto;
}
这种方法只适合子盒子长宽固定的情况;
.father {
position: relative;
}
.son {
position: absolute;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -100px;
}
text-align:center 让子盒子水平居中,
line-height:500px 与 子盒子的vertical-align:middel共同作用使子盒子垂直居中。
.father {
line-height: 500px;
text-align:center;
}
.son {
display:inline-block;
vertical-align:middle;
line-height:1rem;
color:black;
/* 子盒子中内容会水平居中,父盒子有内容子盒子居中效果消失 */
}
为什么使用浮动?
当我们运行下面代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
display: inline-block;
}
.left {
background-color: aqua;
}
.right {
background-color: pink;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
我们希望得到的是两个行内块div,而且这两个div没有设置间距,但上面代码的效果却带了间距:
这是由于浏览器解析行内或行内块标签时,若标签换行,那么效果也出现一个换行的距离。
但是若不换行,全部标签放一行,大大降低了代码的可读性和难度。所以就引入了浮动。
根据元素在HTML中的结构关系查找元素,查找某父级选择器中的子元素.
小括号里的n可以为数学公式,例如:
n为0、1、2、3……
伪标签,由CSS创建
例如:
➢ 标准流:又称文档流,是浏览器在渲染显示网页内容时默认采用的一套排版规则,规定了应该以何种方式排列元素。
➢ 常见标准流排版规则:
例如word里的图片环绕文字四周。
float: left;让图片在左侧浮动
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
img{
width: 80px;
}
.img2{
float: left;
}
</style>
</head>
<body>
<img class="img1" src="./img/csdn_head.png" alt="">图片浮动例如word里的图片环绕文字四周......
<hr/>
<img class="img2" src="./img/csdn_head.png" alt="">图片浮动例如word里的图片环绕文字四......
</body>
</html>
效果:
现在运用到前端中,就需要让两个div一个在左端,一个在右端
特点:类似于图层的概念,脱离了标准流,像两张卡片,叠放在一起,不会影响原标签,一行可以有多个,可以设置宽高(行内块)
下一个浮动会挨着上一个浮动
浮动标签的margin: 0 auto;
居中失效,但可外面嵌套div实现
作用:清除浮动带来的影响
场景:父盒子不方便设置高度,子孩子有多少内容展示多少,父盒子高度变化不固定。
解决
clear:both
==>缺点:麻烦.clearfix::after{
content: '';
display: block;/*伪元素标签行内转块*/
clear: both;
/*下面两行是补充,为了一些浏览器的兼容性可以不写*/
/*height: 0;*/
/*visibility: hidden;*/
}
.clearfix::before,/*解决外边框塌陷*/
.clearfix::after{
content: '';
display: table;
}
.clearfix::after{
clear: both;
}
overflow: hidden;
网页常见的布局方式:
1.标准流
>
2.浮动
可以让原本垂直布局的 块级元素变成水平布局,子元素嵌入进父元素上方,父元素内容环绕浮动子元素,上方有介绍,类似于图层的概念或微软word中图片环绕文字四周概念。
3.定位
让元素摆放在网页的==任意位置==。一般用于盒子之间的叠层情况。
使用场景:
例如,完成下图的效果(盒子之间有叠层问题)需要什么步骤?
1.设置定位:
2.设置偏移量:水平+垂直就近各取一个
position:static;
默认就是静态定位,就是之前认为的标准流。不能通过方位属性进行移动。
position:relative;
配合方位属性,相对于自己原来位置进行移动。适用于小范围移动。移动后原来位置还存在。
例如,执行下面代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.div1{
width: 200px;
height: 200px;
background-color: pink;
}
.div2{
width: 200px;
height: 200px;
background-color: rgb(80, 226, 197);
position: relative;
left: 100px;
bottom: 100px;
}
</style>
</head>
<body>
<div class="div1">俺是div块级元素</div>
<div class="div2">俺是div块级元素</div>
<p>原来的div还在那占着位置</p>
</body>
</html>
得到的效果:
剖析:
注意: 添加了相对定位position:relative;后,当left和right都有,只有left会生效,当top和bottom都有,只有top会生效。 属性值可以为负数。 (后来者居上;div1添加
z-index: 1;
会让第一个块盖住第二个块)
position:absolute;
需要找父级(子绝对定位,父相对定位。—>子绝父相):
且具备了行内块特点,可设置宽高。
在页面中不占位置—>已经脱标。变成了行内块
注意: 绝对定位后的盒子不能使用
margin: 0 auto;
进行居中;但可以用如下方法:
position: absolute;//绝对定位
/*水平居中*/
left: 50%;
margin-left: -(盒子宽度/2);/*负的盒子宽度的一半*/
/*垂直居中同理*/
top: 50%;
margin-top: -(盒子高度/2);/*负的盒子高度的一半*/
上面的方法仔细观察没办法满足盒子宽高为奇数的情况,如宽 401px,像素不能设置成小数,所以可以用下面方法:
position: absolute;//绝对定位
left: 50%;
top: 50%;
/*位移:自己宽度高度的一半*/
transform: translate(-50%,-50%);
position:fixed;
相对于浏览器进行定位移动,配合四个方位属性使用。脱标(在页面中不占位置)。
例如:某些网页的导航固定在头部
小时候用英语本练英语时,都知道单词书写规范如下:
所以前端也是按照这样,处理行内块和行内元素时按照文字特点解析,以基线为基准对齐。
即鼠标光标在元素上时显示的样式。
属性名:border-radius
属性值:数字+px、百分比
原理:
>
赋值规则:从左上角开始赋值,然后顺时针赋值,没有赋值的看对角! 如:
/*只给左上、右上、右下进行了赋值*/
border-radius: 40px 80px 120px;
效果:
案例:
1.画圆圈:(盒子必须是正方形,边框圆角为盒子宽高一半)
添加属性:border-radius: 50%
源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 800px;
height: 300px;
background-color: rgb(247, 190, 190);
margin: 0 auto;
margin-top: 100px;
border-radius: 0 150px 150px 0;/*box右侧贴紧圆*/
}
.every {
width: 300px;
height: 300px;
background-color: rgb(248, 110, 110);
}
.box div:nth-child(1) {
float: left;
}
.box div:last-child {
float: right;
}
.circle {
border-radius: 50%
}
h1 {
display: inline-block;
text-align: center;
width: 200px;
height: 300px;
font-size: 80px;
color: aliceblue;
line-height: 300px;
}
</style>
</head>
<body>
<div class="box">
<div class="every">
</div>
<h1>==></h1>
<div class="circle every">
</div>
</div>
</body>
</html>
2.胶囊按钮:(盒子为长方形)
border-radius: 40px 40px;/*切割圆角,高度一半*/
源码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>胶囊按钮</title>
<style>
* {
margin: 0;
padding: 0;
}
.jiaonang {
display: block;
width: 200px;
height: 80px;
position: absolute;/*绝对定位,相对于浏览器*/
/*下面三行是设置绝对定位的居中*/
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: pink;
border: none;/*去除按钮原有的边框线*/
border-radius: 40px 40px;/*切割圆角,高度一半*/
color: blueviolet;
font-size: 20px;
}
.jiaonang:hover{
cursor: pointer;
color: aliceblue;
background-color: blueviolet;
}
</style>
</head>
<body>
<button class="jiaonang">点我</button>
</body>
<script>
const btn = document.getElementsByClassName('jiaonang');
btn[0].onclick = function () {
alert('点了我');
}
</script>
</html>
如下图,当盒子为固定高度,但里面的内容过多就会出现内容溢出情况。
解决:overflow
案例:
场景:例如某些网站的导航,当鼠标悬停会出现元素
常见属性:
visibility:hidden
/占位隐藏/display:none
/不占位隐藏/(常用)扩展标签:
元素整体透明度:opacity: +小数;
链接伪类选择器:
焦点伪类选择器:(用于表单控件)