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

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

二、代码

<!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会在后面出相关文章。

有更好更多的理解或疑问,敬请留言!

谢谢关注!


你可能感兴趣的:(css)