实例:
h1{
color:blue;
font-size:12px;
}
实例解析:
CSS 注释实例:
/*这是一个注释*/
p{
/*文本居中对齐*/
text-align:center;
/*设置颜色为黑色*/
color:black;
/*设置字体为Arial*/
font-family:Arial;
}
id 选择器实例:
#fruit{
text-align:center;
color:green;
}
注意:id属性不能以数字开头,数字开头的 id 在Mozilla/FireFox浏览器中不起作用
class 选择器实例:
.cars{
text-align:center;
color:red;
}
注意:类名的第一个字符不能以数字开头,数字开头的 id 在Mozilla/FireFox浏览器中不起作用
引用外部样式表实例:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
使用内部样式表实例:
<head>
<style>
body{
background-image:url("images/background.jpg");
}
p{
margin-left:25px;
}
hr{
color:green;
}
</style>
</head>
内联样式实例:
<p style="color:red;margin-left:25px;">
这是一个使用了内联样式的段落
</p>
注意:如果外部样式放在内部样式的后面,那么外部样式将会覆盖内部样式
样式优先级实例:
<head>
<!--外部样式-->
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
/*内部样式*/
h3{
color:red;
}
</style>
</head>
<body>
<h3>
测试
</h3>
<p style="color:blue;">
这是一个使用内联样式的段落
</p>
</body>
原文:https://www.cnblogs.com/xdy-/p/13539060.html