目录
文本样式
1.text-transform:英文字母大小写之间的转换
uppercase 全部大写
lowercase 全部小写
capitalize 首字母大写
2.text-decoration:文本装饰效果
underline 文字下划线
overline 文字加上划线
line-through· 文字中划线或者删除线
3.text-indent:首行缩进或悬挂
2em/32px 首行缩进两个格
-2em/-32px 首行想做悬挂两个格
4.text-align: 文本水平对齐方式
left 左对齐
center 居中对齐
right 右对齐
justify 两端对齐(英文文本使用较多)
5.字体间的间距
英文文本
letter-spacing字母和字母间距: normal /数值
word-spacing单词和单词间距
中文文本
letter-spacing字和字之间的间距
内容溢出处理
1.overflow:visible 可视化
2.overflow: scroll 滚动条
3.overflow: auto 超出区域浏览器自动处理
4.<nobr>文本内容</nobr>强制不换行(段落中)
5.white-space:nowrap 强制不换行
6.overflow: hidden 隐藏
7.text-overflow:ellipsis 溢出部分化成小数点存在
8.white-space:pre 空格被保留
后代选择器
父元素和子元素:(con是box的子元素)
<div class="box">
<div class=""con>
<div class="d1"></div>
</div>
<span></span>
<span></span>
</div>
css实现中,.box .con .d1 三者之间要用空格隔开
.box>.con 箭头代表只能选到直接子元素
.box>con+span 选择的是第一个span 兄弟选择题
E~F{} 指的是E选择器后所有的兄弟选择器F 通用兄弟选择器
.left>a:nth-of-type(3):(选择的是第三个a,数字是几就是第几个)
<div class="left">
<a href="#"><span>中国大陆</span></a>
<a href="#" class="left1">亲,请登录</a>
<a href="#">免费注册</a>
</div>
完全匹配选择器E[attr="value"]
input[class="box"]{
只能选到第一个,类名为box的元素,选不到box item
}
input[class~="box"]{
class中有box的都可以选到
}
<input type="text" name="name" class=" box">
<input type="text" name="name" class=" box item ">