【CSS】基础css(二)

发布于:2023-02-03 ⋅ 阅读:(490) ⋅ 点赞:(0)

目录

文本样式

内容溢出处理

后代选择器

完全匹配选择器E[attr="value"]


文本样式

        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 ">

本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到