FFan丶Blog / CSS / / 强制覆盖文章正文内联CSS

强制覆盖文章正文内联CSS

分类:CSS 发布时间:2026-09-24 15:54:14来源:FFan丶Blog
/* =========================================================    文章正文统一样式    强制覆盖文章 HTML 内联 CSS    ========================================================= */...

/* =========================================================

   文章正文统一样式

   强制覆盖文章 HTML 内联 CSS

   ========================================================= */

.article-content {

    width: 100% !important;

    max-width: 100% !important;

    margin: 0 auto !important;

    padding: 0 !important;

    font-family: inherit !important;

    font-size: 16px !important;

    font-weight: 400 !important;

    line-height: 1.9 !important;

    color: #333 !important;

    text-align: left !important;

    word-break: break-word !important;

    overflow-wrap: break-word !important;

}

/* =========================

   段落

   ========================= */

.article-content p {

    margin: 0 0 20px !important;

    padding: 0 !important;

    font-family: inherit !important;

    font-size: 16px !important;

    font-weight: 400 !important;

    line-height: 1.9 !important;

    color: #333 !important;

    text-align: left !important;

}

/* =========================

   标题

   ========================= */

.article-content h2 {

    margin: 32px 0 18px !important;

    padding: 0 0 10px !important;

    font-family: inherit !important;

    font-size: 24px !important;

    font-weight: 600 !important;

    line-height: 1.5 !important;

    color: #222 !important;

    text-align: left !important;

    border-bottom: 1px solid #eee !important;

}

.article-content h3 {

    margin: 28px 0 15px !important;

    padding: 0 !important;

    font-family: inherit !important;

    font-size: 20px !important;

    font-weight: 600 !important;

    line-height: 1.5 !important;

    color: #333 !important;

    text-align: left !important;

}

.article-content h4 {

    margin: 24px 0 12px !important;

    padding: 0 !important;

    font-family: inherit !important;

    font-size: 18px !important;

    font-weight: 600 !important;

    line-height: 1.5 !important;

    color: #333 !important;

}

/* =========================

   图片

   ========================= */

.article-content img {

    display: block !important;

    width: auto !important;

    max-width: 100% !important;

    height: auto !important;

    margin: 20px auto !important;

    padding: 0 !important;

    border: 0 !important;

    border-radius: 4px !important;

    box-sizing: border-box !important;

}

/* 防止内联 width / height 造成移动端溢出 */

.article-content img[width] {

    max-width: 100% !important;

}

.article-content img[height] {

    height: auto !important;

}

/* =========================

   链接

   ========================= */

.article-content a {

    color: #1677ff !important;

    text-decoration: none !important;

    font-weight: inherit !important;

}

.article-content a:hover {

    color: #0958d9 !important;

    text-decoration: underline !important;

}

/* =========================

   加粗

   ========================= */

.article-content strong,

.article-content b {

    font-weight: 600 !important;

    color: inherit !important;

}

/* =========================

   列表

   ========================= */

.article-content ul {

    margin: 0 0 20px !important;

    padding-left: 24px !important;

    list-style: disc !important;

}

.article-content ol {

    margin: 0 0 20px !important;

    padding-left: 24px !important;

    list-style: decimal !important;

}

.article-content li {

    margin: 0 0 8px !important;

    padding: 0 !important;

    font-family: inherit !important;

    font-size: 16px !important;

    line-height: 1.9 !important;

    color: #333 !important;

}

/* =========================

   引用

   ========================= */

.article-content blockquote {

    margin: 20px 0 !important;

    padding: 15px 20px !important;

    background: #f7f8fa !important;

    border-left: 4px solid #1677ff !important;

    font-size: 15px !important;

    line-height: 1.8 !important;

    color: #666 !important;

}

/* =========================

   表格

   ========================= */

.article-content table {

    width: 100% !important;

    max-width: 100% !important;

    margin: 20px 0 !important;

    padding: 0 !important;

    border-collapse: collapse !important;

    border-spacing: 0 !important;

    table-layout: auto !important;

    font-size: 15px !important;

    line-height: 1.6 !important;

}

.article-content th,

.article-content td {

    padding: 10px 12px !important;

    border: 1px solid #ddd !important;

    font-family: inherit !important;

    font-size: inherit !important;

    line-height: 1.6 !important;

    color: #333 !important;

    text-align: left !important;

    vertical-align: middle !important;

}

.article-content th {

    font-weight: 600 !important;

    background: #f5f5f5 !important;

}

/* =========================

   水平线

   ========================= */

.article-content hr {

    margin: 30px 0 !important;

    border: 0 !important;

    border-top: 1px solid #eee !important;

}

/* =========================

   pre / code

   ========================= */

.article-content pre {

    max-width: 100% !important;

    margin: 20px 0 !important;

    padding: 15px !important;

    overflow-x: auto !important;

    box-sizing: border-box !important;

    background: #f6f8fa !important;

    border-radius: 6px !important;

    font-size: 14px !important;

    line-height: 1.6 !important;

}

.article-content code {

    font-family: Consolas, Monaco, monospace !important;

    font-size: 14px !important;

}

/* =========================

   iframe / video

   ========================= */

.article-content iframe,

.article-content video {

    display: block !important;

    max-width: 100% !important;

    margin: 20px auto !important;

}

/* =========================

   防止正文元素撑破页面

   ========================= */

.article-content * {

    max-width: 100%;

    box-sizing: border-box;

}

/* =========================

   强制清除常见内联样式

   ========================= */

.article-content [style] {

    font-family: inherit !important;

    color: inherit !important;

}

/* =========================

   移动端

   ========================= */

@media (max-width: 767px) {

    .article-content {

        font-size: 15px !important;

        line-height: 1.85 !important;

    }

    .article-content p {

        margin-bottom: 16px !important;

        font-size: 15px !important;

        line-height: 1.85 !important;

    }

    .article-content h2 {

        margin: 25px 0 15px !important;

        padding-bottom: 8px !important;

        font-size: 20px !important;

        line-height: 1.5 !important;

    }

    .article-content h3 {

        margin: 22px 0 12px !important;

        font-size: 18px !important;

    }

    .article-content h4 {

        margin: 20px 0 10px !important;

        font-size: 17px !important;

    }

    .article-content img {

        width: auto !important;

        max-width: 100% !important;

        height: auto !important;

        margin: 15px auto !important;

    }

    .article-content table {

        display: block !important;

        width: 100% !important;

        overflow-x: auto !important;

        -webkit-overflow-scrolling: touch !important;

        white-space: nowrap !important;

    }

    .article-content th,

    .article-content td {

        padding: 8px 10px !important;

        font-size: 14px !important;

    }

    .article-content blockquote {

        margin: 15px 0 !important;

        padding: 12px 15px !important;

        font-size: 14px !important;

    }

    .article-content pre {

        font-size: 13px !important;

    }

}

上一篇:多行内容超出隐藏

下一篇:没有了

猜你喜欢

  • 小鸟云85折优惠券:GHDY83

    其他2020-01-15
  • 文章列表 文章标题:<!--{$article_list.title}--> 文章链接:<!--{$article_list.url}--> 图片属性:pic="true" 随机排序:orderby="rand" 行号 (从1开始):<!--{$article_list.rownum}--> 

    ICMS2020-01-15
  • .pagelist a,.pagelist span {border-style: solid;border-width: 1px;border-color: #e91e63;margin: 5px;padding: 4px 10px;} .pagelist span.page_nowindex {background-color: #e91e63;}

    ICMS2020-01-15
  • 获取 10个分类下 每个分类最新的10篇文章<!--{iCMS:category:list loop="true" row="10"}--> <a href="<!--{$category_list.url}-->"><!--{$category_list.title}--></a>  <!--{iCMS:article:list loop="true" row="10" cid="$category_list.cid"}-->    <a href="<!--{$article_list.url}-->&quo

    ICMS2020-01-20
  • 一般的文字截断(适用于内联与块):.text-overflow {     display:block;/*内联对象需加*/     width:31em;/*指定宽度*/     word-break:keep-all;/* 不换行 */

    CSS2020-04-13