HTML基礎-05

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

字體 文本顏色: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 使用省略號來表示溢出的內容


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

更多相關文章
  • 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- ...
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...