所在的位置: html >> html前景 >> HTMLCSS样式

HTMLCSS样式

北京最佳皮炎医院 https://m-mip.39.net/czk/mipso_8811252.html

一个不小心,我们已经创建了很多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.


转载请注明:http://www.aierlanlan.com/cyrz/485.html

  • 上一篇文章:
  •   
  • 下一篇文章: