css中框架名称采用默认值

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

在CSS框架中,通常会有一些内置样式以及名称,这些名称采用默认值。这样做的好处之一是可以避免重复定义,提高代码的可读性。下面将会介绍几种常见的采用默认框架名称的情况。 /* 1. normalize.

在CSS框架中,通常会有一些内置样式以及名称,这些名称采用默认值。这样做的好处之一是可以避免重复定义,提高代码的可读性。下面将会介绍几种常见的采用默认框架名称的情况。

 /* 1. normalize.css */
    normalize.css 是一份常见的 CSS reset 文件,它通过重设浏览器的默认样式来创建更一致的样式表。normalize.css 中采用的框架名称都是默认值,如:
    html {
        line-height: 1.5;
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
    }

    /* 2. Bootstrap */
    Bootstrap 是一个流行的响应式前端开发框架,它使用了大量的预定义类名和样式,并且采用的框架名称也大多数使用了默认值,如:
    .btn {
        display: inline-block;
        font-weight: 400;
        color: #212529;
        text-align: center;
        vertical-align: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-color: transparent;
        border: 1px solid transparent;
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        line-height: 1.5;
        border-radius: 0.25rem;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    /* 3. Semantic UI */
    Semantic UI 是另一个流行的 CSS 框架,它的设计理念是让 HTML 代码更加语义化,它也采用了默认的框架名称,如:
    .ui.button {
        display: inline-block;
        min-height: 1em;
        outline: 0;
        border: none;
        vertical-align: baseline;
        background: #e0e1e2 none;
        color: rgba(0,0,0,.6);
        font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
        margin: .78571429em 0em;
        padding: .78571429em 1.5em .78571429em;
        text-transform: none;
        text-shadow: none;
        font-weight: 700;
        line-height: 1em;
        font-style: normal;
        text-align: center;
        text-decoration: none;
        border-radius: .28571429rem;
        box-shadow: none;
        -webkit-box-shadow: none;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -ms-touch-action: manipulation;
            touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        font-size: 1rem;
    } 

以上是三个比较流行的 CSS 框架,在采用默认框架名称的同时,他们也具有自己独特的风格和设计,适用于不同的应用场景。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中框架名称采用默认值

粉丝

0

关注

0

收藏

0

已有0次打赏