CSS基本语法和选择器用法示例

2021年4月9日16:35:28 发表评论 306 次浏览

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基本语法和选择器用法示例1

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>

输出如下:

CSS基本语法和选择器用法示例2

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>

输出如下:

CSS基本语法和选择器用法示例3

类选择器:

.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>

输出如下:

CSS基本语法和选择器用法示例4

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: