html 基本CSS示例：边距，字体大小，颜色，文本对齐，文本修饰，背景颜色
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 基本CSS示例：边距，字体大小，颜色，文本对齐，文本修饰，背景颜色相关的知识，希望对你有一定的参考价值。
<!-- Basic CSS Example -->
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Basic CSS Example</title>
<!-- Introducing the Style Tag! -->
<!-- ========================== -->
<!-- Now you can customize the look of your sites. Each rule in the style tag changes the appearance of its associated element (notice how each rule names an element from the HTML body). -->
<style>
/*
NOTE: Commenting is a bit different in CSS.
They start with forward-slash + asterisk
and end with back-slash + asterisk.
*/
/* h1 heading tag */
h1 {
/* Put a 15-pixel margin at the bottom of the heading. */
margin-bottom: 15px;
/* Change the size of your font to 60 pixels high. */
font-size: 60px;
/* This will color the heading font white. */
color: white;
/* Align the text to the center of its enclosing element (e.g. div). */
text-align: center;
/* Underline the text. */
text-decoration: underline;
/* The background of the heading element will now be black. */
background-color: black;
}
/* h2 heading tags */
h2 {
/* Put a 15-pixel margin at the top of all h2 headings. */
margin-top: 15px;
margin-bottom: 15px;
font-size: 40px;
text-align: center;
}
/* h3 heading tags */
h3 {
margin-top: 15px;
font-size: 20px;
text-align: center;
}
/* All img tags */
img {
/*
Center a block element in the middle of its enclosing tag.
When you use the "auto" rule on both left and right margins,
your browser will do the math necessary to center a block element.
*/
margin-left: auto;
margin-right: auto;
/* Block display (more on this later) */
display: block;
}
/* All p tags */
p {
text-align: center;
font-size: 20px;
/* Bold the text. */
font-weight: bold;
}
/* All unordered list tags */
ul {
text-align: center;
font-size: 35px;
/* Give an element a solid border. */
border-style: solid;
/* Render the border 5 pixels thick. */
border-width: 5px;
/* Include bullets in the content flow. */
/* More info here: http://www.w3schools.com/cssref/pr_list-style-position.asp */
list-style-position: inside;
}
</style>
</head>
<body>
<h1>Awesome Header</h1>
<h2>Smaller Awesome Header</h2>
<h3>Even Smaller Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem consequatur unde aut dolores odio hic, accusamus recusandae ipsam illum enim voluptatibus obcaecati totam tempora eum quod sapiente. Corporis, quidem, culpa?</p>
<img src="https://pbs.twimg.com/media/BsgYfMQCQAAWVKH.jpg" alt="Awesome" width="25%">
<h3>Menu Links</h3>
<ul>
<li><a href="https://www.google.com">Google</a></li>
<li><a href="https://www.facebook.com">Facebook</a></li>
<li><a href="https://www.twitter.com">Twitter</a></li>
</ul>
</body>
</html>以上是关于html 基本CSS示例：边距，字体大小，颜色，文本对齐，文本修饰，背景颜色的主要内容，如果未能解决你的问题，请参考以下文章