一个不小心,我们已经创建了很多CSS样式了
随着CSS样式,越来越多,就变成了“面向过程”的大文件!
作为新时代的五好青年,这种事情,我是拒绝滴~(不要问我,哪五好,自行度娘)
为了,使用“面向对象”的编程形式,我们把CSS和HTML代码分开来放!
就是所谓的,样式文件
别看名字挺厉害,其实就是xxx.html目录下,新建xxx.css格式文件,来存放CSS的设置。
然后通过在xxx.html文件中,调用就行。
看一下CSS代码:
/*用来制定样式文件的编码格式*/
charset"UTF-8";html,body{
height:%;
color:#FF;
font-family:sans-serif;
}
body{
background:url(background.jpg)centercenter;
background-size:cover;
margin:0;
padding:0;
position:relative;
}
#container{
width:%;
text-align:center;
position:absolute;
top:50%;
transform:translateY(-50%);
}
h1{
font-size:66px;
margin-bottom:22px;
}
p{
font-size:33px;
margin-bottom:22px;
}
a{
font-size:55px;
color:#33FFFF;
border:1pxsolid#33FFFF;
border-radius:10px;
padding:10px66px;
text-decoration:none;
}
现在,在html文件中,去掉style标签,利用link标签来调用CSS就行。
!doctypehtml
html
head
metacharset="utf-8"
title欢迎来到HTML世界/title
linkhref="CSS.css"rel="stylesheet"
/head
body
divid="container"
h1我爱鱼C/h1
pWWW.FihsC.