一 字体属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
/*字体粗细:normal,b*/
font-weight: 900;
/*font-style:文字风格*/
font-style: italic;
/*font-size:文字大小*/
font-size: 12px;
/*font-family:文字字体*/
font-family: "Arial";
color: rgb(255,0,0);
/*简写为:*/
/*font: bolder italic 50px 'serif','微软雅黑'; */
}
</style>
</head>
<body>
<p>Need you,I m fish🐟</p>
</body>
</html>
二 文本属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
background-color: beige;
/*文本水平对齐的方式*/
text-align: center;
/*行高line-height、中线middle-line*/
line-height: 200px;
/*文本装饰*/
text-decoration: underline;
/*首行缩进*/
text-indent: 32px;
}
</style>
</head>
<body>
<div>
需要你,我是一只🐟
</div>
<p>水里的空气,是你小心眼和坏脾气</p>
</body>
</html>
三 背景属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
width: 1200px;
height: 1200px;
/*背景颜色*/
background-color: gold;
/*背景图片*/
background-image: url("source/美女1.jpeg");
/*背景图大小*/
background-size: 100px;
/*不重复:no-repeat*/
background-repeat: no-repeat;
/*x轴重复:repeat-x*/
/*background-repeat: repeat-x;*/
background-position: center top;
/*默认*/
/*background-attachment: scroll;*/
/*跟随*/
background-attachment: fixed;
}
.box2{
width: 200px;
height: 200px;
}
.box3 img{
position: center;
}
</style>
</head>
<body>
<div class="box1">
box1
</div>
<div>
<img src="beauty.jpg" alt="">
</div>
</body>
</html>
练习(背景嵌套,开始游戏按钮):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
width: 1200px;
height: 700px;
background-image: url("source/winter-wonderland-wide.jpg");
background-size: 1200px 700px;
background-repeat: no-repeat;
}
.box2{
width: 1200px;
height: 700px;
background-position: center bottom;
background-image: url("source/start.png");
background-size:300px;
background-repeat: no-repeat;
}
.index{
background-image: url("source/dht.png");
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
</div>
</div>
</body>
</html>
效果展示:
值得注意的是:
1、导航栏用的是重复花纹背景时,可以传输一部分,然后进行x/y-repeat, 达到减少数据传输量的效果.
2、 同时,一些小的图片,在一个网页中反复使用到的,例如vip标志, 微博认证标志等, 一般使用精灵图(一张图整合很多小的图片),根据像素点切割需要的部分,来达到减少i/o操作的目的.
四 盒子模型
什么是盒子模型:
HTML文档中的每个元素都被比喻成矩形盒子, 盒子模型通过四个边界来描述:margin(外边距),border(边框),padding(内填充),content(内容区域),如果把一个盒子比喻成一个壁挂相片,那么
#外边距margin ===== 一个相框与另外一个相框之间的距离
#边框border ====== 边框指的就是相框
#内边距padding ===== 内容/相片与边框的距离
#宽度width/高度height ===== 指定可以存放内容/相片的区域
提示:可以通过谷歌开发者工具查看盒子的各部分属性
边框border和 内边距 padding( 用于调父盒和子盒的位置)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*边框*/
.box1{
width: 200px;
height: 200px;
background: yellowgreen;
border: dotted ;
/*单个边设置宽度,颜色:顺序是上右下左*/
border-width: 1px 2px 3px 4px;
border-color: red white black goldenrod;
/*边角的弧度*/
border-radius: 80px 80px 80px 80px;
/*圆形*/
/*border-radius: 50%;*/
}
div{
height: 150px;
width: 150px;
}
.box2{
/*不改变原始大小*/
box-sizing: border-box;
border: 1px solid red;
padding-top: 20px;
}
.box3{
border: 1px solid black;
padding-right: 20px;
}
.box4{
border: 1px solid green;
padding-bottom: 20px;
}
.box5{
border: 1px solid green;
padding-bottom: 20px;
}
</style>
</head>
<body>
<div class="box1">
我是一只鱼
</div>
<hr>
<div class="box2">
box2
</div>
<hr>
<div class="box3">
box3
</div>
<hr>
<div class="box4">
box4
</div>
</body>
</html>
外边距margin (用于调整子盒与子盒的位置)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 150px;
height: 150px;
}
/*外边距多用来调整盒子与盒子之间的距离*/
.box1 {
border: 1px solid red;
margin-bottom: 50px;
}
.box2 {
border: 1px solid green;
/*竖直方向不会相加,取最大的*/
margin-top: 30px;
}
.box3 {
border: 1px solid black;
margin-right: 50px;
/*在一行显示*/
display: inline-block;
}
.box4 {
border: 1px solid indigo;
/*水平方向会叠加,与竖直方向不同*/
margin-left: 30px;
display: inline-block;
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
<div class="box4">
</div>
</body>
</html>
盒子居中与内容居中:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子居中和内容居中</title>
<style>
.son {
width: 300px;
height: 300px;
background-color: red;
/*多行内容水平居中与单行一样*/
text-align: center;
/*多行内容垂直居中*/
line-height: 30px;
padding-top: 120px;
box-sizing: border-box;
/*盒子本身水平居中*/
margin: 0 auto;
}
.father {
width: 500px;
height: 500px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
我是文字我是文字我是文字我是文字我是文字我是文字我是文字
</div>
</div>
</body>
</html>
清除默认边距:
#1、为什么要清空默认边距(外边距和内边距)
浏览器会自动附加边距,在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等
编写代码之前的第一件事情就是清空默认的边距
#2、如何清空默认的边距
* {
margin: 0px;
padding: 0px;
}
#3、注意点:
通配符选择器会找到(遍历)当前界面中所有的标签,所以性能不好,参考:https://yuilibrary.com/yui/docs/cssreset/
拷贝代码:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
可以查看京东,bat主页也是这么做的,在企业开发中也应该像上面这么写