Ⅰ 什么是CSSCSS全叫作Cascading Style Sheet层叠样式表,是专用用来为HTML标签添加样式的。样式指的是HTML标签的表示效果,例如换行、宽高、颜色等等层叠属于CSS的三大特性之一,咱们将在后续内容中间商绍表指的是咱们能够将样式统一收集起来写在一个地区或一个CSS文件里Ⅱ 为么要用CSS /*这是注释*/ 在无CSS之前,咱们想要修改HTML标签的样式则必须为每一个HTML标签单独定义样式属性,如下<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1 align="center">
<font color="pink" size="5">Beyand The Game</font>
</h1>
<p align="center">
<font color="pink" size="5">头上有包视野好,车身低矮隐蔽强</font>
</p>
<p align="center">
<font color="pink" size="5">天下高伤出我辈,一入神教岁月催</font></p>
<p align="center">
<font color="pink" size="5">雄图霸业燃烧中,所向之处皆炮灰</font>
</p>
<p align="center">
<font color="pink" size="5">一代版本一代神 ,代代都有查狄伦</font></p>
</body>
</html>
这么做的缺点是记忆困难:必须记忆每一个标签的所有样式关联属性,倘若标签无某个样式关联的属性,那样设置了亦无效果代码耦合度高:HTML语义与样式耦合到一块扩展性差:当某一类样式必须修改时,咱们必须找到所有设置了该样式标签进行修改于是CSS应运而生,很好地处理了以上三个问题<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1,p {
color: pink;
font-size: 24px;
text-align: center;
}
</style>
</head>
<body>
<h1>Beyand The Game</h1>
<p>头上有包视野好,车身低矮隐蔽强</p>
<p>天下高伤出我辈,一入神教岁月催</p>
<p>雄图霸业燃烧中,所向之处皆炮灰</p>
<p>一代版本一代神,代代都有查狄伦</p>
</body>
</html>
Ⅲ 怎样运用CSS语法选取器声明声明由属性和值构成,多个声明之间用分号分隔四种引入方式行内式行内式是在标签的style属性中设定CSS样式。这种方式无表现出CSS的优良,不举荐运用。<p style="color: red;font-size: 50px;text-align: center">"IS-7"是一个非常了不起的车</p> 嵌入式嵌入式是将CSS样式集中写在网页<head></head>标签内的的<style></style>标签对中<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
color: red;
font-size: 50px;
text-align: center
}
</style>
</head>
<body>
<p>"ST-II"是一个有两根的人</p>
</body>
</html>
导入式新建外边样式表,而后运用导入式和链接式引入首要在与html文件同级目录下有一个css文件夹,该文件夹下新建一个外边样式表mystyle.css,内容为
p {
color: red;
font-size: 50px;
text-align: center
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
/*形式一:*/
/*@import "css/mystyle.css";*/
/*形式二:*/
@import url("css/mystyle.css");
</style>
</head>
<body>
<p>"705工程A"是一个非常挺人</p>
</body>
</html>
链接式(举荐运用)<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/mystyle.css"></head>
<body>
<p>"260工程"是一个非常尖的人</p>
</body>
</html>
导入式与链接式的区别<link/>标签属于XHTML,@import是属于CSS2.1特有的,针对不兼容CSS2.1的浏览器来讲便是没效的导入式的缺点导入式会在全部网页装载完后再装载CSS文件,因此呢这就引起了一个问题,倘若网页比很强则会儿显现先表示没样式的页面,闪烁一下之后,再显现网页的样式。这是导入式固有的一个缺陷,用户体验差链接式的优点运用链接式时与导入式区别的是它会在网页文件主体装载前装载CSS文件,因此呢表示出来的网页从一起始便是带样式的效果的,它不会象导入式那样先表示没样式的网页,而后再表示有样式的网页,这是链接式的优点Ⅴ 重视重要点style标签必要放到head内 ,type="text/css"表率文本类型的csstype属性其实能够不消写,默认便是type="text/css"设置样式时必要根据固定的格式来设置,key:value;其中 ; 不可省略,最后一个属性其实能够省略,但咱们能够简单地统一记成不可省略就行了
|