[前端] CSS不常用的属性及选择器

最新推荐文章于 2023-03-14 18:28:06 发布

天空还下着雪

最新推荐文章于 2023-03-14 18:28:06 发布

阅读量695

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/u010081689/article/details/45194995

版权

前端专栏收录该内容

154 篇文章 0 订阅

订阅专栏

一、介绍（所有知识及要点都在代码里了）

二、代码

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>css不常用属性</title>
    <style type="text/css">
    .box {
        background-attachment: fixed; /* 设置背景图像是否固定或者随着页面的其余部分滚动 参数：scroll fixed inherit */

        outline: #006600 dotted thick; /* 轮廓,是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用 */

        direction: ltr; /* 规定文本的方向 / 书写方向 参数：ltr  rtl  inherit （left to right）*/

        letter-spacing: 10px; /* 加或减少字符间的空白（字符间距）参数：normal length inherit */

        text-transform: capitalize; /* 控制文本的大小写 参数：none  capitalize  uppercase  lowercase inherit */

        word-spacing: 10px; /* 调用单词间距 参数： normal  length  inherit */

        font-stretch: normal; /* 可对当前的 font-family 进行伸缩变形 参数：normal  wider narrower 其他 */

        font-variant: small-caps; /* 置小型大写字母的字体显示文本  参数：normal  small-caps  inherit */

        list-style-image: url(image/solid.png); /* 使用图像来替换列表项的标记 */

        content: "hello"; /* 创建内容 一般与 :before :after 伪元素配合使用 */

        content-reset: section; /* 创建或重置一个或多个计数器。 */

        counter-increment: section; /* 递增或递减一个或多个计数器 */

        quotes: '"' '"' "'" "'"; /* 设置嵌套引用（embedded quotation）的引号类型 参数：none  string  inherit */

        clip: rect(0px, 60px, 200px, 0px); /* 剪裁绝对定位元素 shape  auto  inherit */

        visibility: hidden; /* 规定元素是否可见 参数：visible  hidden  collapse inherit */

        page-break-after: auto; /* 设置元素后的 page-breaking 行为 参数：auto  always avoid  left right inherit */

        page-break-before: always; /* 同上但相反 */

        page-break-inside: avoid; /* 设置元素内部的 page-breaking 行为 参数：auto  avoid  inherit */

        border-collapse: collapse; /* 定是否合并表格边框 参数：separate collapse inherit */

        border-spacing: 10px 50px; /* 设置相邻单元格的边框间的距离（仅用于“边框分离”模式） 参数：length  inherit */

        caption-side: bottom; /* 设置表格标题的位置 参数：top bottom inherit */

        empty-cells: hide; /* 设置是否显示表格中的空单元格（仅用于“分离边框”模式）参数：hide  show  inherit */

        table-layout: fixed; /* 用来显示表格单元格、行、列的算法规则 参数：automatic  fixed  inherit */
    }
    /*  选择器：
        :active    向被激活的元素添加样式。
        :focus 向拥有键盘输入焦点的元素添加样式。
        :hover 当鼠标悬浮在元素上方时，向元素添加样式。
        :link  向未被访问的链接添加样式。
        :visited   向已被访问的链接添加样式。
        :first-child   向元素的第一个子元素添加样式。
        :lang  向带有指定 lang 属性的元素添加样式。
    */

    /*  伪元素：
        :first-letter  向文本的第一个字母添加特殊样式。
        :first-line    向文本的首行添加特殊样式。
        :before    在元素之前添加内容。
        :after 在元素之后添加内容。 
    */
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

三、总结

其实在CSS中还有很多不常用的属性及选择器，在这里只是概述了css1 css2的部分内容，具体css3会在后面出相关文章。

有更好更多的理解或疑问，敬请留言！

写到最后，欢迎关注作者：http://www.techshare100.com/