css

来源：互联网发布：十面埋伏音乐知乎编辑：程序博客网时间：2024/06/11 21:04

1. 编辑文字样式，在head的style里定义，body中直接调用即可

<html>
<head>
<style>
body {background-color:lightgrey}
h1 {color:blue}
p {color:green}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

2. Styling HTML with CSS 三种方式

Inline, Internal, External

3. Inline

<body>
<h1 style="color:blue">This is a Blue Heading</h1>
</body>

4. Internal

<head>
<style>
body {background-color:lightgrey}
h1 {color:blue}
p {color:green}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

5. External

<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

6. color, font-family, font-size

h1 {
color:blue;
font-family:verdana;
font-size:300%;
}
p {
color:red;
font-family:courier;
font-size:160%;
}

7. box

border:1px solid grey 框的粗细，填充程度和颜色

8. box里的空间大小

border:1px solid grey;

padding:10px;

9. box外的空间大小

border:1px solid grey;

padding:10px;

margin:30px;

10. id 定义一句话

<head>
<style>
p#p01 {
color: blue;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p id="p01">I am different.</p>
</body>

11. class 定义多句话

<head>
<style>
p.error {
color:red;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p class="error">I am different.</p>
<p>This is a paragraph.</p>
<p class="error">I am different too.</p>
</body>

12. Use id to address single elements. Use class to address groups of elements. (未理解)

13. Deprecated Tags and Attributes in HTML5 （未理解）

In older HTML versions, several tags and attributes were used to style documents.

These tags and attributes are not supported in HTML5!

Avoid using the <font>, <center>, and <strike> elements.

Avoid using the color and bgcolor attributes.

0 0