美文网首页
2022-07-30(二)

2022-07-30(二)

作者: 未路过 | 来源:发表于2022-07-30 13:56 被阅读0次

    1. link元素

    ◼ link元素是外部资源链接元素,规范了文档与外部资源的关系
     link元素通常是在head元素中
    ◼ 最常用的链接是样式表(CSS);
     此外也可以被用来创建站点图标(比如 “favicon” 图标);
    ◼ link元素常见的属性:
     href:此属性指定被链接资源的URL。 URL 可以是绝对的,也可以是相对的。
     rel:指定链接类型,常见的链接类型:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Link_types
     icon:站点图标;
     stylesheet:CSS样式;

    2.什么是SEO

    搜索引擎有自己的算法, 按照算法排序网站。
    搜索引擎优化:通过一些方法让我们的网站处于搜索位置的前面。(英语:search engine optimization,缩写为SEO)是通过了解搜索引擎的运作规则来调整网站,以及提高网站在有关搜索引擎内排名的方式。
    我们不知道算法但是通过元素语义化可以进行SEO。

    3.font

    3.1 font-decoration

    ◼ text-decoration用于设置文字的装饰线
     decoration是装饰/装饰品的意思;
    ◼ text-decoration有如下常见取值:
     none:无任何装饰线 ✓ 可以去除a元素默认的下划线
     underline:下划线
     overline:上划线
     line-through:中划线(删除线)
    ◼ a元素有下划线的本质是被添加了text-decoration属性

    3.2 text-indent

    用于设置第一行内容的缩进
    text-indent:2em:缩进两个文字

    3.3 text-align

    定义行内内容,如何相对它的块父元素对齐
     left:左对齐(默认)
     right:右对齐
     center:正中间显示
    text-align-last

    4.font

    4.1 font-size

    font-size决定文字的大小
    ◼ 常用的设置
     具体数值+单位
    ✓ 比如100px
    ✓ 也可以使用em单位(不推荐):1em代表100%,2em代表200%,0.5em代表50%。1em就是原有大小的1倍,2em就是原有大小的2倍。
     百分比
    ✓ 基于父元素的font-size计算,比如50%表示等于父元素font-size的一半

    3.2 font-family (重要, 不过一般仅设置一次)

    ◼ font-family用于设置文字的字体名称
     可以设置1个或者多个字体名称;
     浏览器会选择列表中第一个该计算机上有安装的字体;
     或者是通过 @font-face 指定的可以直接下载的字体。

    一般给body设置

    <style>
    body {
    font-family:'Franklin Gothic Medium','ArialNarrow'
    </style>
    

    4.3 font-weight(重要)

    ◼ font-weight用于设置文字的粗细(重量)
    ◼ 常见的取值:
    ◼ 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 :每一个数字表示一个重量
    ◼ normal:等于400
    ◼ bold:等于700

    4.4 line-height

    ◼ line-height用于设置文本的行高
    ◼ 行高可以先简单理解为一行文字所占据的高度

    image.png

    基线与基线的距离,也是一行文本的高度。
    也就是行距和文本本身的高度。
    如果line-height是40px,font是24px,那么顶部到顶线的距离是8px,文字24px,下面是8px。

    image.png

    4.5 font-style

    ◼ font-style用于设置文字的常规、斜体显示
    ◼ normal:常规显示
    ◼ italic(斜体):用字体的斜体显示(通常会有专门的字体)
    ◼ oblique(倾斜):文本倾斜显示(仅仅是让文字倾斜)

    4.6 font(缩写属性)

    ◼ font是一个缩写属性
     font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写;
     font-style font-variant font-weight font-size/line-height font-family
    ◼ 规则:
     font-style、font-variant、font-weight可以随意调换顺序,也可以省略
     /line-height可以省略,如果不省略,必须跟在font-size后面
     font-size、font-family不可以调换顺序,不可以省略

    12px/1.5 这里的1.5是指12的1.5倍是行高。

    6.选择器

    image.png image.png image.png image.png
    image.png image.png image.png image.png image.png image.png image.png

    如果字体过长超出div

    1.在div样式中加入:

    overflow:hidden属性

    禁止字体超出。

    2.在div样式中加入:

    word-break: break-all;word-wrap: break-word; 属性

    实现字体过长自动换行

    相关文章

      网友评论

          本文标题:2022-07-30(二)

          本文链接:https://www.haomeiwen.com/subject/mpwcwrtx.html