CSS创建类样式 |css 图片和文字并排

.myClass {
font-size: 16px;
color: #333;
background-color: #fff;
 }

上面的代码展示了如何创建一个名为“myClass”的类样式。在代码块中的属性和属性值将被应用到所有使用该类样式的元素上。大家可以通过为元素添加一个class属性来指定使用哪个类样式。

<p class="myClass">这是一段使用了myClass类样式的文字</p>
 <div class="myClass">这是一个使用了myClass类样式的块级元素</div>

上述代码中，p元素和div元素都使用了myClass类样式，因此它们将共享font-size、color和background-color属性的值。

除此之外，大家还可以在样式文件中为不同的类样式设置继承关系：

.myClass2 {
font-size: 18px;
font-weight: bold;
 }
 .myClass3 {
text-align: center;
vertical-align: middle;
 }
 .myClass4 {
font-style: italic;
 }
 .myClass5 {
color: #ff0000;
 }
/* 定义类样式之间的继承关系 */
 .myClass2 {
@extend .myClass1; /* 继承myClass1的所有属性和属性值 */
 }
 .myClass3 {
@extend .myClass1; 
 }
 .myClass4 {
@extend .myClass1;
@extend .myClass2; /* 继承myClass1和myClass2的所有属性和属性值 */
 }
 .myClass5 {
@extend .myClass2;
 }

在上面的代码中，大家定义了五个类样式，分别为myClass1、myClass2、myClass3、myClass4和myClass5。然后，大家通过@extend指令为它们之间建立了继承关系，这样myClass2、myClass3、myClass4和myClass5就从myClass1和myClass2中继承了一部分属性和属性值。这种方式可以帮助大家在代码中减少冗余，提高代码复用率。