CSS语法:CSS样式规则由选择器, 属性及其值组成。选择器指向要在其中应用CSS样式的HTML元素。 CSS属性由分号分隔。
语法如下:
selector {
//CSS Property
}
例子:
<!DOCTYPE html>
<html>
<head>
<!-- Style of h1 selector -->
<style>
h1 {
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>lsbin</h1>
</body>
</html>
输出如下:
CSS选择器:CSS选择器用于根据HTML元素的元素名称, ID, 属性等选择元素。它可以同时选择一个或多个元素。
元素选择器:
CSS中的元素选择器用于选择需要设置样式的HTML元素。在选择器声明中, 有HTML元素的名称, 要应用于该元素的CSS属性写在方括号{}内。
语法如下:
element_name {
//CSS Property
}
例子:
<!DOCTYPE html>
<html>
<head>
<!-- Syntax of h1 selector -->
<style>
h1 {
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>lsbin</h1>
</body>
</html>
输出如下:
ID选择器:
#id选择器用于设置给定ID的样式。 id属性是HTML文档中的唯一标识符。 id选择器与#字符一起使用。
语法如下:
#id_name {
//CSS Property
}
例子:
<!DOCTYPE html>
<html>
<head>
<!-- Style of id selector -->
<style>
#heading {
color: green;
text-align: center;
font-size:40px;
font-weight:bold;
}
</style>
</head>
<body>
<div id = "heading">
lsbin
</h1>
</body>
</html>
输出如下:
类选择器:
.class选择器用于选择属于特定类属性的所有元素。要选择具有特定类别的元素, 请使用(。)字符并指定类别名称。类名主要用于将CSS属性设置为给定的类。
语法如下:
.class_name {
//CSS Property
}
例子:
<!DOCTYPE html>
<html>
<head>
<!-- Style of class selector -->
<style>
.heading {
color: green;
text-align: center;
font-size:40px;
font-weight:bold;
}
</style>
</head>
<body>
<div class = "heading">
lsbin
</h1>
</body>
</html>
输出如下: