【代码笔记】Web-HTML-CSS

时间:2023-01-25 17:20:04

一,效果图。

【代码笔记】Web-HTML-CSS

二,代码。

【代码笔记】Web-HTML-CSS
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>html css</title>
<!--html使用样式-->
<style type="text/css">
h1 {
color: red;
} p {
color: blue;
}
</style>
<!--链接到一个外部样式表-->
<link rel="stylesheet" type="text/css" href="styles.css">
<!--内部样式表-->
<style type="text/css">
body {
background-color: yellow;
} p {
color: blue;
}
</style>
<!--外部样式表-->
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head> <body style="">
<h1>This is heading</h1>
<p>This is paragraph</p>
<!--style属性制作一个没有下划线的链接-->
<a href="http://www.baidu.com" style="text-decoration:none">百度</a>
<h1>I am formatted with an external style sheet</h1>
<p>Me too</p>
<!--内联样式-->
<p style="color:blue;margin-left=20px;">this is a paragraph</p>
<!--背景颜色-->
<h2 style="">this is a heading</h2>
<p style="">this is a paragraph.</p>
<!--字体,字体颜色,字体大小-->
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
<!--文本对齐方式-->
<h1 style="text-align:center;">Center-aligned heading</h1>
<p> this is a paragraph</p>
</body> </html>
【代码笔记】Web-HTML-CSS

参考资料:《菜鸟教程》