Laravel  
laravel
文档
数据库
架构
入门
php技术
    
Laravelphp
laravel / php / java / vue / mysql / linux / python / javascript / html / css / c++ / c#

css样式表

作者:穹上之月   发布日期:2025-08-21   浏览:85

/* 示例代码:一个简单的 CSS 样式表 */

/* 选择器:body,应用于整个页面的背景颜色 */
body {
    background-color: #f0f0f0; /* 浅灰色背景 */
}

/* 选择器:h1,应用于所有的标题1元素 */
h1 {
    color: #333; /* 深灰色文字 */
    font-family: Arial, sans-serif; /* 使用Arial字体,如果没有则使用无衬线字体 */
    text-align: center; /* 文字居中对齐 */
}

/* 选择器:p,应用于所有的段落元素 */
p {
    font-size: 16px; /* 字体大小为16像素 */
    line-height: 1.5; /* 行高为1.5倍 */
    margin: 20px; /* 外边距为20像素 */
}

/* 选择器:.highlight,应用于所有带有 highlight 类的元素 */
.highlight {
    background-color: yellow; /* 黄色背景 */
    padding: 5px; /* 内边距为5像素 */
}

/* 选择器:#special,应用于 ID 为 special 的唯一元素 */
#special {
    border: 2px solid red; /* 红色实线边框,宽度为2像素 */
    font-weight: bold; /* 加粗字体 */
}

解释说明:

  • body:设置整个页面的背景颜色。
  • h1:定义一级标题的样式,包括颜色、字体和对齐方式。
  • p:定义段落的样式,包括字体大小、行高和外边距。
  • .highlight:定义带有 highlight 类的元素的样式,如黄色背景和内边距。
  • #special:定义 ID 为 special 的元素的样式,如红色边框和加粗字体。

这段代码展示了如何使用 CSS 来控制网页中不同元素的外观。

上一篇:css 强制不换行

下一篇:css media

大家都在看

css好看的字体

css 红色

css 瀑布流布局grid

css文字超长省略号

css 渐变字体

css背景图片等比例缩放

css文字删除线

animation css3

css 自定义滚动条

css flex gap

Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3

Laravel 中文站