HTML基礎-05

来源:https://www.cnblogs.com/huaweimian/archive/2020/07/24/13334802.html
-Advertisement-
Play Games

字體 文本顏色:color:red;字體分類: 襯線字體serif --字體寬度各異,有襯線 --Times、Georgia、宋體 無襯線字體sans-serif --字體寬度各異,無襯線 --Helvetica、Verdana、Arial、微軟雅黑 等寬字體monospace --字體寬度一樣,一 ...


字體


文本顏色:color:red;
字體分類
  襯線字體serif
    --字體寬度各異,有襯線
    --Times、Georgia、宋體
  無襯線字體sans-serif
    --字體寬度各異,無襯線
    --Helvetica、Verdana、Arial、微軟雅黑
  等寬字體monospace
    --字體寬度一樣,一般用於代碼或表格
    --Courier  New、Consolas
  草書字體cursive
    --模仿人手寫的字體
    --Indie Flower、Comic Sans
  裝飾字體Fantasy
    沒有什麼統一特征,不屬於上述類別的字體
字體族:使用font-family來設置字體族
      font-family:sans-serif;
  可以同時指定多個字體,多個字體之間使用逗號隔開(若字體之間有空格或者特殊符號,使用引號)
      font-family:sans-serif,”Microsoft   YaHei”;

@font-face:字體本機有,其他人沒有,用戶可下載
  通過@font-face可以使瀏覽器自動應用伺服器上的字體文件
    @font-face{
          font-family:’myFont’;
          Src:url(‘./ZCOOLXW-R.ttf’)}
註:有些字體有版權,不建議使用

圖標字體:font-awesome.css
   1. 使用步驟:將css和fonts文件夾放到項目目錄

       引入CSS文件<link  rel=’stylesheet’  href=’css/font-awesome.min.css’>

    <body>
      <span class="fa fa-power-off s1"></span>
    </body>

    <style>

      .s1{font-size:120px;

      color:red;}

    </style>

  2. 將文件css和webfonts放在fa文件夾中

<link rel="stylesheet" href="fa/css/all.css">

使用時:<i class="fas fa-stroopwafel" style="font-size: 100px;"></i>

 

阿裡圖標字體:http://www.iconfont.cn

選中想要的圖標加入購物車,且添加到項目中,下載到本地,放入iconfont中,引入iconfont/iconfont.css

三種方法

 

   1.通過實體<span class=’iconfont’ style=’font-size:100px;color:red;’>&#xe63f;</span>

   2.通過類<span class=’iconfont icon-icon-test’ style =’ font-size:100px;color:red; ’> </span>

   3.通過偽類<p></p >

     <style>

       p::before{

         content:’\e63f’

         font-family:iconfont;

        font-size:100px;}

     </style>

 字體大小

1em=1font-size:em也是CSS中的一個單位,相當於一個字體大小

1rem=HTML的1font-size,預設16px,相對於根元素

修改:html{font-size:200px;}

 

行高(line height

行高指的是文字占有的實際高度。通過line-height來設置行高,行高可以指定一個大小(px,em),也可以直接設置整數(整數代表行高是字體的指定倍數)

 

為了使得文字垂直居中:行高設置和高度一樣  line-height=height;

行高還可以設置文字的行間距:行間距=行高-字體大小

 

字體框:字體存在的格子,設置font-size實際上就是設置字體框的高度。

行高會在字體框的上下平均分配。

 

字體的簡寫屬性

font同時設置字體相關的所有樣式,後面必須是字體大小和字體族,必須寫(空格隔開)

font:40px  ‘Times New Roman ’,Times

font:[加粗 斜體 變形]大小/行高 字體族

行高  可以省略不寫,如果不寫使用預設值

 

字重,字體加粗:font-weight:100-900;九個級別,但基本上沒有用

可選值:normal  預設值,不加粗

bold    加粗

 

字體樣式:font-style

可選值:normal  預設值,正常

italic    斜體

 

字體變形font-variant

可選值:small-caps(小型大寫字母)

 

文本樣式

text-align:設置文本的對齊方式

left 預設值,靠左對齊

right 靠右對齊

center 居中對齊

justify 兩端對齊

 

vertical-align:垂直對齊方式

baseline:基線對齊

top:和父元素頂部對齊

bottom:和父元素的底部對齊   可設置圖片對齊,使其不向基線對齊

super:上標

sub:下標

middle:居中

text-decoration:設置文本修飾

underline:下劃線

line-through:刪除線

overline:上劃線

none:沒有線

 

white-space:如何處理空白內容

normal 預設值,自動換行

nowrap 不換行

pre 保留文本的格式

text-overflow: 如何處理溢出的文本

ellipsis 使用省略號來表示溢出的內容


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1 #視圖 2 /* 3 含義:虛擬表,和普通表一樣使用 4 mysql5.1版本出現的新特性,是通過表動態生成的數據 5 6 比如:舞蹈班和普通班級的對比 7 創建語法的關鍵字 是否實際占用物理空間 使用 8 9 視圖 create view 只是保存了sql邏輯 增刪改查,只是一般不能增刪改 1 ...
  • Elastic search 趣簡史 安裝 基礎知識 核心概念 ...
  • 不管是做自媒體還是做電商或是工作素材採集,都離不開視頻,視頻比文字更好展示出產品、細節內容,就好比我們經常看的抖音、快手、火山、皮皮蝦之類的短視頻裡面就有很多優秀的素材,相信有採集過的朋友都會遇到平臺水印這個問題吧!今天小編就教大家如何快速批量下載無水印短視頻!一起來看看吧! 打開這個哼哼貓批量去水 ...
  • 教程 Flutter瀑布流及通用列表解決方案 Canonical 在 Linux 上提供 Flutter 桌面應用支持 插件 koukicons-flutter 🍪 Colorful Icons for your Flutter App fontify Converts SVG icons to ...
  • (一)三表 用途 list列表 整齊佈局 ul先到先得,ol有序排列,還有個自定義【dl>dt>dd】 table列表 展示數據結構 【caption table>th/tr>td(thead標題 tbody數據 tfoot腳註)】 【border/cellspacing/cellpadding表格 ...
  • 在安裝vue-awesome-swiper時報錯swiper/dist/css/swiper.min.css找不到,如下如: 有的回答安裝6.0版本的話需要引入另外一個css import 'swiper/swiper-bundle.css' 但是,我替換完css 之後又一個問題出現了,vue-aw ...
  • 在選擇的元素內: append() //後 prepend() //前 在選擇的元素外: after() //後 before() //前 舉例: ...
  • 首先需要搭建一個簡單的應用 前端部分不多贅述,如果確實沒接觸過 Vue 項目,可以參考我的《Vue 爬坑之路》系列 後端服務可以參考之前的文章《Node.js 蠶食計劃(六)—— MongoDB + Koa 入門》 完整的項目地址:https://github.com/wisewrong/Test- ...
一周排行
    -Advertisement-
    Play Games
  • Github / Gitee QQ群(1群) : 813100564 / QQ群(2群) : 579033769 視頻教學 介紹 MiniWord .NET Word模板引擎,藉由Word模板和數據簡單、快速生成文件。 Getting Started 安裝 nuget link : https:// ...
  • Array.Sort Array類中相當實用的我認為是Sort方法,相比起冗長的冒泡排序,它的出現讓排序更加的簡化 結果如下: 還可以聲明一個靜態方法用來專門調用指定數組排序,從名為 array 的一維數組中 a 索引處開始,到 b 元素 從小到大排序。 註意: a + b 不能大於 array 的 ...
  • 前言 在上一篇文章CLR類型系統概述里提到,當運行時掛起時, 垃圾回收會執行堆棧遍歷器(stack walker)去拿到堆棧上值類型的大小和堆棧根。這裡我們來翻譯BotR里一篇專門介紹Stackwalking的文章,希望能加深理解。 順便說一句,StackWalker在中文里似乎還沒有統一的翻譯,J ...
  • 使用過 nginx 的小伙伴應該都知道,這個中間件是可以設置跨域的,作為今天的主角,同樣的 反向代理中間件的 YARP 毫無意外也支持了跨域請求設置。 有些小伙伴可能會問了,怎樣才算是跨域呢? 在 HTML 中,一些標簽,例如 img、a 等,還有我們非常熟悉的 Ajax,都是可以指向非本站的資源的 ...
  • 什麼是Git Git 是一個開源的分散式版本控制系統,用於敏捷高效地處理任何或小或大的項目。 Git 是 Linus Torvalds 為了幫助管理 Linux 內核開發而開發的一個開放源碼的版本控制軟體。 Git 與常用的版本控制工具 CVS, Subversion 等不同,它採用了分散式版本庫的 ...
  • 首先CR3是什麼,CR3是一個寄存器,該寄存器內保存有頁目錄表物理地址(PDBR地址),其實CR3內部存放的就是頁目錄表的記憶體基地址,運用CR3切換可實現對特定進程記憶體地址的強制讀寫操作,此類讀寫屬於有痕讀寫,多數驅動保護都會將這個地址改為無效,此時CR3讀寫就失效了,當然如果能找到CR3的正確地址... ...
  • 說明 onlyoffice為一款開源的office線上編輯組件,提供word/excel/ppt編輯保存操作 以下操作均基於centos8系統,officeonly鏡像版本7.1.2.23 鏡像下載地址:https://yunpan.360.cn/surl_y87CKKcPdY4 (提取碼:1f92 ...
  • 二叉樹查找指定的節點 前序查找的思路 1.先判斷當前節點的no是否等於要查找的 2.如果是相等,則返回當前節點 3.如果不等,則判斷當前節點的左子節點是否為空,如果不為空,則遞歸前序查找 4.如果左遞歸前序查找,找到節點,則返回,否繼續判斷,當前的節點的右子節點是否為空,如果不為空,則繼續向右遞歸前 ...
  • ##Invalid bound statement (not found)出現原因和解決方法 ###前言: 想必各位小伙伴在碼路上經常會碰到奇奇怪怪的事情,比如出現Invalid bound statement (not found),那今天我就來分析以下出現此問題的原因。 其實出現這個問題實質就是 ...
  • ###一、背景知識 爬蟲的本質就是一個socket客戶端與服務端的通信過程,如果我們有多個url待爬取,只用一個線程且採用串列的方式執行,那隻能等待爬取一個結束後才能繼續下一個,效率會非常低。 需要強調的是:對於單線程下串列N個任務,並不完全等同於低效,如果這N個任務都是純計算的任務,那麼該線程對c ...