CSS3——注释 id 和 class 选择器 css创建(外部、内部、内联样式表)

时间:2022-08-13 04:00:02

注释

/*         注释内容          */

id 和 class 选择器

id   ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用

<style>
#para1
{
text-align:center;
color:red;
}
</style>
... <body>
<p id="para1">Hello World!</p>
</body>

class

<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
</body>

用于特定的元素

<style>
p.xxx
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="xxx">这个标题不受影响</h1>
<p class="xxx">这个段落居中对齐。</p>
</body>

CSS3——注释   id 和 class 选择器 css创建(外部、内部、内联样式表)

CSS3——注释   id 和 class 选择器 css创建(外部、内部、内联样式表)

属性选择器、包含选择器、子选择器、兄弟选择器等等    【戳上方链接进入】

CSS创建

外部样式表

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式表

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式

颜色属性将被继承于外部样式表,而文字排列(text-alignment)和字体尺寸(font-size)会被内部样式表中的规则取代

CSS3——注释   id 和 class 选择器 css创建(外部、内部、内联样式表)

多重样式的优先级

内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式

CSS3——注释   id 和 class 选择器 css创建(外部、内部、内联样式表)