btn和primary是两个类名(class),它们被用来定义和区分不同样式的按钮。
btn类:
这个类定义了一个通用的按钮样式,适用于所有使用btn类的HTML元素。
通过CSS,btn类设置了按钮的显示方式、内边距、外边距、文本对齐、鼠标指针样式、圆角、边框和背景颜色等样式属性。
primary类:
这个类是用来定义一个特殊样式的按钮,通常用于表示主要或重要的操作。
primary类继承了btn类的所有样式,但通过CSS覆盖了文本颜色和背景颜色,使其与普通的btn按钮有所区别。
普通按钮
主要按钮
这样,第一个按钮将具有btn类的样式,而第二个按钮将具有btn primary类的样式,即primary类的样式会覆盖btn类的样式,使得第二个按钮的文本颜色为白色,背景颜色为#218de6。
在HTML中,你可以将这些类应用于元素,以创建具有不同外观的按钮。
内联块级元素(inline-block)是CSS中的一个显示属性,它结合了内联元素(inline)和块级元素(block)的特点。
内联元素:内联元素不会独占一行,而是在一行内逐个显示。它们的宽度和高度由内容决定,并且不能设置宽度和高度。内联元素的常见例子有、、等。
块级元素:块级元素会独占一行,并且可以设置宽度和高度。块级元素的常见例子有
、
到
等。
内联块级元素的特点如下:
可以设置宽度和高度:与内联元素不同,内联块级元素可以设置宽度和高度。
不会独占一行:与块级元素不同,内联块级元素不会独占一行,而是在一行内逐个显示。
可以设置内边距(padding)和外边距(margin):内联块级元素可以设置内边距和外边距,这使得它们在布局上更加灵活。
默认情况下,垂直方向上的对齐方式是基线对齐:这意味着如果内联块级元素的内容高度不一致,它们会以基线对齐。
主要按钮
.btn { display: inline-block; padding: .36em .8em; margin-right: .5em; line-height: 1.5; text-align: center; cursor: pointer; border-radius: .3em; background: #c78484; color: #333; } .btn.primary { color: #ce1d1d; background: #000204; }
对于这段代码我的理解:首先用按钮类btn 定义第一个按钮
其次利用 btn primary类定义第二个按钮,可继承第一个按钮所带有的性质
其次在style中对上述两个类进行解=定义解释,其中定义了大小,边框,是否大带有圆角等等性质,btn.primary类继承了btn中的一部分性质,更加方便