html内联样式(表),外部样式表
内联样式:直接在元素开始标签中定义style
<!DOCTYPE html>
<html>
<body >
<h1>Look! Styles and colors</h1>
<p >This text is in Verdana and red</p>
<p >This text is in Times and green</p>
<p >This text is 30 pixels high</p>
</body>
</html>
内部样式表:在head标签中统⼀定义style,这样可以同时定义多个标签⾥⾯的相同属性。当和内联样式同时使⽤时优先使⽤内联样式,如下的第三个p的颜⾊显⽰为⿊⾊。
<!DOCTYPE html>
<html>
<head>
<title>This is title</title>
<style>
body{
background-color:PowderBlue;
}
p{
引用外部样式表的格式是color:red
}
</style>
</head>
<body>
<h1>Look! Styles and colors</h1>
<p >This text is in Verdana and red</p>
<p >This text is in Times and green</p>
<p >This text is 30 pixels high</p>
</body>
</html>
外部样式表:将样式表提到css⽂件中,多个html⽂件可以同时引⽤此css样式。CSS⽂件内容(⽂件名style.css)
body{
background-color:PowderBlue;
}
p{
color:red
}
html如何引⽤CSS
<!DOCTYPE html>
<html>
<head>
<title>This is title</title>
<link rel="stylesheet"href="style.css">
</head>
<body>
<h1>Look! Styles and colors</h1>
<p >This text is in Verdana and red</p>
<p >This text is in Times and green</p>
<p >This text is 30 pixels high</p>
</body>
</html>
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论