CSS-text_css text 顶部-优快云博客

本文链接：https://blog.youkuaiyun.com/Codee174/article/details/139679612

宽高自适应

html,body {height: 100%;}

css强制转化文本（text-transform）

此处只对英文生效,对中文没有效果

属性值：

uppercase 文本全部转换为大写

lowercase 文本全部转换为小写

capitalize 每个单词首字母转换为大写

html:

css:

文本对齐（text-align）

属性值：

1、left 左对齐

2、center 居中对齐

3、right 右对齐

4、justify 每一行都被拉长，使每一行都有相等的宽度且左右边距对齐，类似杂志和报纸的排版

首行缩进（text-indent）

1、绝对单位（px）

2、相对单位（em）

3、百分比缩进（根据父元素的宽度计算得到，很少用）

中文或者英文字母之间的间隙（letter-spacing）

单位px

设置行高（line-height）

属性值：

1、normal 默认值，根据当前字符大小自动设置一个行高

2、一个数字，该数字与当前行高相乘得到新的行高

3、绝对值，如20px、-5px设置固定行间距

4、还可以设置文本在垂直方向上居中，把绝对值设置为50px即可

单词间距（word-spacing）

设置一个值即可，但仅对英文有效

处理元素内部空白（white-space）

属性值：

nowrap 不管文本的宽度为多少，文本都不换行，直到出现<br>标签为止

垂直对齐方式（vertical-align）

属性值：

1、basline 基线对齐

2、text-top 与文本顶部对齐

3、text-bottom 与文本底部对齐

4、sub 下角标对齐

5、super 上角标对齐

给文本添加修饰线条（text-decoration-line）

属性值：

1、overline 在文本上方添加

2、line-through 在文本中添加

3、underline 在文本下方添加装饰线（添加了超链接的文本就不要再添加有下划线了）

给文本设置装饰线颜色（text-decoration-color）

属性值：

颜色

为装饰线设置风格（text-decoration-style）

属性值：

1、soild 实线

2、double 双实线

3、dotted 圆点线

4、dashed 虚线

5、wavy 波浪线

为装饰线设置厚度（text-decoration-thickness）

属性值：

1、auto 默认值

2、px 填写一个像素大小

3、% 是一个相对值，是根据文字的高度计算出来的

给文本添加多个线条(p{text-decoration:})

每个属性值之间用空格隔开

p{text-decoration:overline linethrough}

设置装饰线颜色（text-decoration-color）

写颜色就行

去除超链接下划线

a {

text-decoration: none;

}

文本装饰线简写方式(p{text-decoration: })

每个属性值之间用空格隔开

p{ text-decoration：underline red double 80%}

其中text-decoration-line的属性值必须定义，其他的可以不写，不写则为默认值

字体名称（font-family）

属性值：

1、serif 有衬线字体，附带小笔画的字体

2、sans-serif 无衬线字体

3、monospace 单空格字体/等宽字体，所有字母都有固定距离

4、cursive 草书字体

5、fantasy 幻想字体，艺术字

如果浏览器里面没有所写字体可以添加备选字体，加在引号里面，需要注意的是先声明的字体会先生效

cursive优先于serif

设置字号（font-size）

1、绝对大小

数字px

2、相对大小

如若没有设置页面的font-size，就会采用浏览器的默认字号16px

此处就是相对浏览器默认字号的相对大小

文本倾斜（font-style）

属性值：

1、normal 正常显示

2、ltalic 文本倾斜显示

3、oblique 文本倾斜显示（支持度较低）

字体加粗（font-weight）

属性值：

1、lighter细体对应100px

2、normal正常显示对应400px

3、bold加粗对应700px

4、bolder更粗对应900px

5、也可以输入100-900px 对应的九个数值

小型大小字符显示（font-variant）

只对英文生效

属性值：

1、normal 正常显示

2、small-caps 设置小型大写字母

文本风格简写方法

font-size和font-family两个是必须的，其他的可以写可以不写，不写则为默认值

p {

font:italic 100 small-caps 30px/30px

{

css边框（border-style）

属性值：

dotted点状边框

dashed虚线边框

solid实现边框

none无边框

hidden隐藏边框

1、可以单独设置某个方向上的边线

border-方位-style

top

bottom

left

right

2、可以设置混合写法

border-style：dotted hidden double dashed

按顺时针顺序点状隐藏双边框虚线

上右下左

3、三个值的写法

上左右下

4、两个值的写法

上下左右

5、一个值

border-style：solid

上下左右

边框宽度（border-width）

可以以px、em为单位

thin 薄

medium 中

thick 厚

同样也可以设置简写和border-type一样

边框颜色（border-color）

颜色名称

transparent 设置为透明

同样也可以设置简写和border-type一样

设置边框属性简写

可以再一个style中同时设定以上关于边框的属性，不同属性之间用空格隔开

其中border-style必须声明其他可以省略，默认为1和黑色实线

样式中给元素设置的宽高，是不包含边框的宽高的，他只包含元素内容的宽高

css列表（list-style-type）

属性值

circle 空心圆

disc 实心圆

square 实心方块

decimal 数字

upper-roman 大写罗马数字

lower-roman 小写罗马数字

upper-alpha 大写字母

lower-alpha 小写字母

list-style-type:decimal-leading-zero; 零开头的数字（只针对0-9）

list-style-type: none 取消列表项

图片作为列表标记项（list-style-image）

属性值：

url（）

括号内写图片路径 */

一般用背景图来设置

设置标记的位置（list-style-position）

outside 表示标记在列表项之外

inside 表示标记在列表项内部

简写列表项

每一项用空格隔开

a{list-style:}

颜色

添加到ol、ul上的属性会影响整个列表

添加到li的标签上的属性只会影响单个列表项

css背景（background-image：）

属性值：url（）

里面填图片地址

背景图片

默认在标签范围水平垂直平铺占满

路径的引号是可以省略掉的

背景图片的显示优先级高于背景颜色

背景图片不能撑开标签的范围，用来修饰标签范围的

背景透明度（rgba）

background-color: rgba(0,255,0, 0.5);

rgba可以通过调整a(取值为0-1)的值来调整背景颜色的不透明度

图片重复出现（background-repeat:）

属性值:

repeat 重复出现，默认平铺

no-repeat 不重复出现，取消平铺

repeat-x 在水平方向上平铺

repeat-y 在垂直方向上平铺

背景图片的位置（background-position:）

1、需要写入两个值

水平方向垂直方向

left top

center center

right bottom

两个值用空格隔开

2、数字+像素单位：左上角为原点（0 0）可以取负值

3、百分比

background-position: 50% 100%;

盒子的水平方向上的宽度（px）-图片水平方向上的宽度（px）所得的值×50% 就是背景图在水平方向上移动了多少个像素单位，垂直方向上的同理

4、混用

background-position: 10px bottom;

页面滚动时文字、图片的滚动方式（background-attachment:）

fixed 图片固定

scroll 同时滚动

精灵图

所定义区域无法显示全部图片则以图片左上角为原点来定义移动横向纵向移动多少个像素使得图片某个位置上的信息显示出来。

精灵图使用步骤：

1、创建一个盒子div

2、通过ps量取图片大小，将图片宽高设置给盒子

3、将精灵图设置为盒子的背景图片

4、通过ps测量小图片左上角坐标，分别取负值设置给盒子的background-position:x y

5、使用精灵图调整位置的时候，取值永远是负值

原图为：

现在写入-735px，-155px使得q显示在区域内

背景尺寸（background-size: ;）

1、等比例缩放图片知道占满盒子为止

background-size: cover;

2、等比例缩放图片知道有一边占满盒子就停止

background-size：contain；

3、百分比

background-size: 50% 100%;

此时百分比为当前容器宽的50%，参照的是当前标签的宽高

4、像素单位

background-size: 100px 150px

5、background也可以连写，每个属性值用空格隔开，取值不分先后

单独书写一组数字+px单位的取值代表背景的位置，出现两组数字+px单位的取值，用/分隔，前面代表位置，后面代表图片尺寸。

如想把cover写进去无论图片是否需要移动都要加px px/cover

不需要移动则为0px 0px/cover

溢出处理（overflow）

属性值：

visible：默认值，溢出内容没有被剪掉，会在元素的框外呈现

hidden：溢出的内容会被剪掉，溢出内容不可见

scroll：溢出内容被剪掉，并且增加一个滚动条来看其余内容

auto：类似于scroll但只在必要时添加滚动条

overflow-x ：scroll只在水平方向上滚动

overflow-y ：scroll只在垂直方向上滚动

text-overflow：ellipsis可以实现文字过多用省略号的形式表现

定位（position）

静态定位（默认值）

相对定位（relative）

特点:

1.相对于自己之前的位置定位

2.需要配合方向词(相对方向的方向词同时出现，优先执行left top)

3.没有脱标

使用场景:

标签位置的微调

绝对定位（absolute）

特点：

1、脱标，在网页中不占位置

2、参照有定位的父辈级（不包括静态定位）进行位置移动，如果父辈级身上全部没有定位的话，默认参照浏览器视口进行位置的移动

3、配合方向词移动，相对方向的方向词出现优先执行 left top

父相子绝

特点：

当父辈级元素有定位时，其子辈元素定位会参照其父辈元素进行定位

此处父辈元素为相对定位，子辈元素为绝对定位

显示的优先级别：

标准流<浮动<定位

兄弟集之间没有参照

特殊情况：（当父辈已经有定位）

若想达到父相子绝的效果，无需强制修改父辈元素为相对定位，直接定义子辈为绝对定位即可达到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: blue;
            position: relative;
        }
        .son {
            width: 150px;
            height: 150px;
            background-color: green;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        /* 当父辈级身上已经有了定位的时候无需强制修改为父相子绝的关系 */
        .grandson {
            width: 50px;
            height: 50px;
            background-color: orange;
            position: absolute;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
            <div class="grandson">

            </div>
        </div>
    </div>
</body>
</html>

定位的层级（z-index：）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
            position: relative;
        }
        .son1 {
            width: 80px;
            height: 80px;
            background-color: green;
            position: absolute;
            right: 0;
            top: 0;
            /* 设置显示层级-取值为纯数字，代表显示的级别，数值越大级别越高
                只有定位上用 */
            z-index: 1;
        }
        .son2 {
            width: 80px;
            height: 80px;
            background-color: blue;
            position: absolute;
            right: 20px;
            top: 20px;
        }
    </style>
</head>
<body> 
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
    <!-- 后来者居上 -->
</body>
</html>

如不设置层级则按后来者居上的原则，后面写的会覆盖前面的

定位居中

1、标签水平居中


.box {
            width: 350px;
            height: 150px;
            background-color: pink;
            position: relative;
        }
        .box1 {
            width: 100px;
            height: 80px;
            background-color: blue;
            position: absolute;
            /* 让标签水平居中 */
            /*left: 100px; */
            /* 取值为百分比的话，参照当前父级标签进行移动 */
            left: 50%;
            /* 位移 */
            /* 取值为百分比的话，参照自己的尺寸进行移动 */
            transform: translate(-50%); 
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
    </div>
</body>

取值为百分比的话，参照当前父级标签进行移动

2、标签垂直居中

以百分比的方式写

top: 50%;（参照的是父级元素移动）

transform: translateY(-50%);（参照的是自己移动）

3、水平垂直正居中

这样写会层叠

transform: translateX(-50%);

transform: translateY(-50%);

所以使用连写

transform: translate(-50%,-50%);

水平方向,垂直方向

中间用逗号隔开

遮罩

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 1226px;
            height: 600px;
            background-color:pink;
            margin: auto;
            position: relative;
        }
        p {
            height: 150px;
            width: 100%;
            background-color: rgba(0, 0, 0,0.5);
            position: absolute;
            /* 通常两个点确定一个确切位置 */
            bottom: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div>
        <img src="./original_1718865449530_205f34d17997b6ab01d5685bc9fb90e8.jpg" alt="">
        <p>
            这是文本介绍
        </p>
    </div>
</body>
</html>

实现如下效果