css不常见属性总结

1、text-transform:控制文本的大小写

<div id="demo1"> abcdefg hijklmn</div>
<div id="demo2"> ABCDEFG </div>
#demo1{
    text-transform: capitalize;  /*Abcdefg Hijklmn*/
    text-transform: uppercase;   /*ABCDEFG HIJKLMN*/
}
#demo2{
    text-transform: lowercase;	/*abcdefg*/
}

属性值	描述
capitalize	将文本中的每个单词变成大写字母开头
uppercase	将文本（无论大小写）全部变成大写字母
lowercase	将文本（无论大小写）全部变成小写字母

2、text-indent：规定文本块中首行文本的缩进

3、letter-spacing：设置字符间距

4、word-spacing：设置字间距

5、direction：设置文本方向

<div>默认文字方向</div>
<div class="rtl">Right-to-left 方向</div>

.rtl{
   direction: rtl;
}

属性值	描述
ltr	默认 文本方向从左到右
rtl	文本方向从右到左

6、white-space：设置元素中空白的处理方式

属性值	描述
normal	默认 空白会被浏览器忽略
pre	空白会被浏览器保留
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 标签为止
pre-wrap	保留空白符序列，但是正常地进行换行
pre-line	合并空白符序列，但是保留换行符

7、font-variant：以小型大写字体或者正常字体显示文本

font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小

<div class="normal">I love China</div>
<div class="small">I love China</div>

.normal{
	font-variant: normal;
}
.small{
	font-variant: small-caps;
 }

属性值	描述
normal	默认值 浏览器会显示一个标准的字体
small-caps	浏览器会显示小型大写字母的字体

8、list-style：列表样式

list-style：list-style-type list-style-image list-style-position

属性值	描述
list-style-type	设置列表项标志的类型
list-style-image	将图像设置为列表项标志
list-style-position	设置列表中列表项标志的位置

9、outline：CSS 轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。CSS outline 属性规定元素轮廓的样式、颜色和宽度（outline-color、outline-style、outline-width）。

10、display(显示) 与 visibility（可见性）

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

11、清除浮动

.clearfix:after{
	display: block;
	content:'';
	clear: both;
	height:0;
}
// 浮动子元素超过父元素高度移出解决方案
.clearfix {
    overflow: auto;
}

12、CSS 组合选择符

• 后代选择器(以空格分隔)

 div p

• 子元素选择器(以大于号分隔）

 div>p

• 相邻兄弟选择器（以加号分隔）

 div+p

• 后续兄弟选择器（以"~"分隔）

 div~p

13、css属性选择器

1、属性选择器

[title]{
    color:blue;
}

2、属性与值选择器

[title=hello]{
    border:5px solid green;
}

3、属性和值的选择器 - 多值

[title~=hello] { 
	color:blue;
}

<h2>将适用:</h2>
<h1 title="hello world">Hello world</h1>

表单例子：

input[type="text"]{
    width:150px;
    display:block;
    margin-bottom:10px;
    background-color:yellow;
}

14、CSS 计数器

body {
  counter-reset: section;
}
 
h1 {
  counter-reset: subsection;
}
 
h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}
 
h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

<h1>HTML 教程:</h1>
<h2>HTML 教程</h2>
<h2>CSS 教程</h2>

<h1>Scripting 教程:</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>

<h1>XML 教程:</h1>
<h2>XML</h2>
<h2>XSL</h2>

属性	描述
content	使用 ::before 和 ::after 伪元素来插入自动生成的内容
counter-increment	递增一个或多个值
counter-reset	创建或重置一个或多个计数器