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
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...