CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式:
<!DOCTYPE html> <html> <body> <div style="opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background-color:#40B3DF"></div> <div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;"> <div style="opacity:0.3;position:absolute;left:120px;width:100px;height:200px;background-color:#8AC007"></div> <h3>Look! Styles and colors</h3> <div style="letter-spacing:12px;">Manipulate Text</div> <div style="color:#40B3DF;">Colors <span style="background-color:#B4009E;color:#ffffff;">Boxes</span> </div> <div style="color:#000000;">and more...</div> </div> </body> </html>
效果：
CSS 可以通过以下方式添加到HTML中:
内联样式- 在HTML元素中使用"style" 属性
1、实例背景颜色：
<!DOCTYPE html> <html> <body style="background-color:yellow;"> <h2 style="background-color:red;">This is a heading</h2> <p style="background-color:green;">This is a paragraph.</p> </body> </html>
效果：
2、字体大小、颜色（使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式）
<!DOCTYPE html> <html> <body> <h1 style="font-family:verdana;">A heading</h1> <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p> </body> </html>
效果：
3、文本对齐（使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式）；
<!DOCTYPE html> <html> <body> <h1 style="text-align:center;">Center-aligned heading</h1> <p>This is a paragraph.</p> </body> </html>
效果：
在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
内部样式表(当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表) :
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
外部引用(当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观) - 使用外部 CSS 文件
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
时间： 2024-11-29 03:59:58