山西农业大学20240926

Jia_dongyao

已于 2024-09-26 17:07:15 修改

阅读量758

点赞数 13

分类专栏：山西农业大学文章标签： html5

于 2024-09-26 11:37:25 首次发布

本文链接：https://blog.csdn.net/2401_86991268/article/details/142543069

版权

山西农业大学专栏收录该内容

22 篇文章 2 订阅

订阅专栏

一. 文字文本的渲染

1. 字体属性

1.1 字体大小

文字的尺寸, 可以设置为单位 px, pt, rem, em, vw,vh…
属性:font-size
谷歌浏览器(PC)默认: font-size: 16px — 默认

rem和em单位

单位	参照	描述
em	父元素	指父元素字号的倍数
rem	html元素	指html元素的字号倍数

1.2 字体字重

渲染文字的粗体和细体, 有些标签的文字会被标签默认的字重渲染(比如: 标题标签)
属性: font-weight
取值:

blod 粗体
lighter 细体
normal 正常

数值: 100-900之间跨100的数字

100-300 细体
400-500 正常
600-900 粗体

1.3 字体系列

一般情况下, 字体系列, 默认字号, 颜色等有继承性; 写给body标签居多
能展现出来的字体都是电脑的字库里存在的字体, 字体的名字一般情况下是字库中字体的标题
字体系列的取值可以有多个, 按照书写顺序, 从前向后读取, 遇到没有的就向后读,第一个读取成功则应用在页面上
属性: font-family
规则: 凡遇到中文, 或多个单词组成的文字, 用双引号包裹

1.4 字体样式

一般情况下默认都是正常字体, 有特殊的需要可以将字体修改为斜体
属性: font-style: italic;

1.5 字体简写

可以将多个font相关的属性写到一起,但是注意简写是有顺序的
不可更改的顺序:

font: 字体样式字重字号字体系列
极简写法:
font: 字号字体系列

1.6 字体颜色

属性: color
取值: 颜色值; 字体颜色具有继承性, 色值可以是十六进制颜色值, rgb(),英文颜色等
特殊: a 标签

由于a标签具有:link伪类, 继承了祖先的字体颜色, 但是仍然会保持伪类的颜色, 除非自定义a标签的字体颜色

2. 文本属性

2.1 文本的水平对齐方式

块级元素能够让其中的文字以左中右的方式对齐, 因为内联元素(含行内块元素) 和文字是同一个级别的, 因为也可以让内联元素和行内块元素在其块级父元素中使用对齐方式
属性: text-align:
取值:

left; 居左对齐
right; 居右对齐
center; 居中对齐

注意: 该属性只能写给块级元素; 但不能让其中的块级元素居中
区别: margin:auto; 居中效果, 让块级元素中的块级子元素居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本属性</title>
    <style>
        .d1{
            background-color: red;
            color:#fff;
            /* 在div块级元素中, 文本居中对齐*/
            text-align: center;
        }
        .d2{
            background-color: #8EE1FF;
            /* 在div块级元素中, 内联元素居中对齐*/
            text-align: center;
        }
        .d3>img{width: 300px}
        .d3{
            background-color: yellow;
            /* 在div块级元素中, 行内块元素居中对齐 */
            text-align: center;
        }

    /*
        区别: margin:auto; 居中效果
             块级元素中块级子元素,在其父元素居中对齐

    */
    </style>
</head>
<body>
    <h2>文本的水平对齐方式</h2>
    <div class="d1">坚如磐石的信心、只争朝夕的劲头、坚韧不拔的毅力。</div>
    <div class="d2">
        <span>以美为媒，美美与共。</span>
    </div>
    <div class="d3">
        <img src="./img/overflow01.jpg" alt="">
    </div>
</body>
</html>

2.2 文本的行高

文本行高,可以是文本上下空出来一定的行间距, 行间距的撑开可能导致有宽高属性的元素打开一个高度
属性: line-height:
应用: 如果块级元素有宽高, 需要让"单行文本"垂直居中, 可以使用行高 == 高度,就可以保证文本垂直居中

<style>
	.d4{
            height: 200px;
            background-color: lime;
            line-height: 50px;
        }
</style>
<h2>文本的行高</h2>
    <div class="d4">人生会有高光瞬间，也会有低谷时刻人生会有高光瞬间，也会有低谷时刻人生会有高光瞬间，也会有低谷时刻人生会有高光瞬间，也会有低谷时刻人生会有高光瞬间，也会有低谷时刻人生会有高光瞬间，也会有低谷时刻人生会有高光瞬间，也会有低谷时刻人生会有高光瞬间，也会有低谷时刻人生会有高光瞬间，也会有低谷时刻人生会有高光瞬间，也会有低谷时刻</div>

2.3 文本的修饰线

属性: text-decoration:
取值:

underline; 下划线
overline; 上划线
line-through; 删除线
none; 无线条 ; 去掉a标签的下划线可以使用无线条

2.4 首行缩进

属性 : text-indent: 2em; 一般用于中文,段落的第一行前两个子向后缩进两个字符的大小

2.5 文本溢出省略

必须让文本溢出,限制父元素的宽高
文本溢出不能换行显示
省略标记
溢出内容隐藏

.d6{
            width: 240px;
            height: 24px;
            background-color: #EBAD7D;
        /*    不能让文字自动换行*/
            white-space: nowrap;
        /*    省略标记*/
            text-overflow: ellipsis;
        /*    溢出部分隐藏 */
            overflow: hidden;
}

2.6 文本垂直对齐方式

经常用于设置图片或者表单(行内块元素)和文字的对齐方式
属性: vertical-align
取值:

baseline; 基线对齐
top; 顶部对齐
middle; 中线对齐
bottom; 底线对齐

.box>img{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            /* 图片和文字默认的对齐方式为 基线对齐*/
            vertical-align: baseline;
            /* 图片和文字的对齐方式为 顶部对齐*/
            vertical-align: top;
            /* 图片和文字的对齐方式为 底部对齐  */
            vertical-align: bottom;
            /* 图片和文字的对齐方式为 中线对齐  */
            vertical-align: middle;
        }

二. 元素的修饰

1. 光标的设置

光标的形态, 当光标进入到元素时, 有默认的形态, 但是我们可以修改形态
.d1{cursor: default;}
.d2{cursor:text;}
.d3{cursor: pointer;}
.d4{cursor: wait;}
.d5{cursor: crosshair;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素修饰</title>
    <style>
        .d1{cursor: default;}
        .d2{cursor:text;}
        .d3{cursor: pointer;}
        .d4{cursor: wait;}
        .d5{cursor: crosshair;}
    </style>
</head>
<body>
<h2>光标的设置</h2>
<div class="d1">箭头</div>
<div class="d2">文本</div>
<div class="d3">手型</div>
<div class="d4">等待</div>
<div class="d5">十字加号</div>
</body>
</html>

2. 轮廓的设置

outline: none; 清除轮廓线
在边框线的外侧, 当鼠标在input标签上获取焦点时,会自动触发轮廓线的出现
一般情况下, 不需要轮廓线
outline: 宽度样式颜色;

.inp{width: 500px;height: 30px;outline: none;}

3. 列表标识符

ul和ol都是列表, li是列表标签, 列表会自带标识符给每一个列表项, 可以通过css样式自定义或者去掉标识符
属性: list-style

list-style: none; 取消标识符
list-style: “❤”; 自定义标识符
list-style-position: outside; 标识符的位置默认在li的外边
list-style-position: inside; 标识符的位置修改li的里边

.list{
            /* 取消标识符 */
            list-style: none;
            list-style: "❤";
            /* 标识符的位置 默认在li的外边*/
            list-style-position: outside;
            /*标识符的位置 修改li的里边*/
            list-style-position: inside;
        }

4. 胶囊型输入框

<style>
	.inp1{
            width: 350px;
            height: 30px;
            /*
            当圆角设置为高度(包含元素高度以及元素的上下边框和上下内边距)的一半时,
            会形成胶囊型的输入框
            */
            border-radius: 18px;
        }
</style>
<h2>输入框的形状: 胶囊型输入框</h2>
<input type="text" class="inp1">

三. 浮动

1. 文档流

页面中元素的排列的默认方式, 对块级元素, 行内元素, 行内块元素都会按照其特性进行排列

1.1 书写顺序

块级元素: 先写的元素排在上面, 顺序是从上向下排列
行内(行内块)元素: 先写的元素排在左边, 顺序是从左向右排列

1.2 换行

块级元素: 独占一行
行内(行内块)元素: 受内容影响, 填满一行(父元素), 自动向下折行

1.3 占位

当一个元素在页面中消失(display:none) , 后面紧挨着的兄弟会向前一个兄弟元素的位置占位

2. 浮动属性

2.1 目的

块级子元素在父元素中浮动可以让子元素横向排列, 浮动的终极目的就是让块级元素可以横向排列, 完成更负责的页面布局效果

2.2 浮动的语法

float: left; 左浮动; 让子元素在父元素的左侧对齐(脱离文档流)
float:right; 右浮动; 让子元素在父元素的右侧对齐(脱离文档流)
浮动属性写给需要横向排列的元素

2.3 脱离文档流

脱离文档流的元素会导致原文档流规则失效
影响:

遮盖兄弟: 因为元素浮动, 下一个兄弟如果还在文档流中, 会被浮动的元素遮盖; 浮动元素会到达页面文档流的上层
文字环绕浮动元素: 文字和内联元素是在同层的, 在正常的文档流块级元素的上边;当元素浮动时, 就会和下层的文档流块元素中的文字和内联元素卡在相当的位置, 会把文字卡住,挡住兄弟元素
父级元素高度坍塌: 父元素没有设置高度, 在文档流中会被其子元素的累加高度撑起, 获得撑开的高度, 但是不是自己设置高度; 此时一旦子元素发生浮动,脱离文档流, 就不会给父级撑高度了, 导致父元素高度坍塌; 以至于影响父元素的兄弟元素, 最后布局混乱