前端開發筆記(九)

2023-08-09 07:22:26 字數 3008 閱讀 1883

字型:font-family

字型樣式(設定傾斜):font-style,值有:normal(正常)、italic(斜體字)、oblique(傾斜),後兩者顯示相近。

字型字型大小(大小):font-size,單位可用px、em、百分比。

字型字重(粗細):font-weight,值有:normal(正常)、bold(粗)、bolder(更粗)、lighter(更細)、(400等同於normal,而700等同於bold)

字型的組合:font(font: bold italic 20px/1.5 'courier new', courier, monospace;),設定順序:"font-style font-variant font-weight font-size/line-height font-family"

字型顏色:color,值有:字串顏色(red、blue)、十六進製制網頁顏色#ddffde)、rgb(rgb(38, 149, 162))、透明顏色(rgba(38, 149, 162,.2),第四個值表示透明色。透明色從 0~1 間,表示從透明到不透明)

行高:line-height

大小轉換:text-transform,值有:none(預設)、capitalize(單詞首字母大寫)、uppercase(全部大寫)、lowercase(全部小寫)

文字修飾的線條型別:text-decoration-line,值有:none(預設)、underline(在文字下方顯示線)、overline(在文字上方顯示線)、line-through(文字中間顯示線)

文字修飾的顏色:text-decoration-color,只有在帶有可見的 text-decoration 的元素上才起作用。

文字修飾的線條樣式:text-decoration-style,值有:solid(預設,單線)、double(雙線)、dotted(點狀線)、dashed(虛線)、w**y(波浪線)

文字修飾的組合:text-decoration(text-decoration: underline overline #ff3028;)

文字縮排:text-indent,負值是允許的。如果值是負數,將第一行左縮排。

文字水平對齊:text-align,值有:left(預設,左對齊)、center(居中對齊)、right(右對齊)、justify(兩端對齊)

文字垂直對齊:vertical-align,值有:baseline(預設,父元素的基線上)、sub(垂直對齊文字的下標)、super(垂直對齊文字的上標)、top(元素頂端與行中最高元素頂端對齊)、middle(父元素中間)等。

單詞間的間距:word-spacing對中文無效

字元間的間距:letter-spacing

排版:writing-mode,值有:horizontal-tb(水平方向自上而下排版)、vertical-rl(垂直方向自右而左排版)、vertical-lr(垂直方向內內容從上到下,水平方向從左到右)

文字陰影:text-shadow(text-shadow: 1px 1px 2px black;),設定順序:"offset-x offset-y blur-radius color" 水平偏移 垂直偏移 模糊距離 顏色

空白處理:white-space,值有:normal(預設,空白被忽略)、pre(保留)、nowrap(不會換行)、pre-wrap(保留,正常換行)、pre-line(合併空白,保留換行)

文字溢位:overflow-wrap: break-word;(溢位換行)、white-space: nowrap;overflow: hidden;text-overflow: ellipsis;(溢位不換行,溢位內容隱藏,溢位內容末尾新增

web前端開發技術要如何應用於網站建設當中呢?

我們如果說要想掌握前端開發技術,那麼就需要對於前端開發形式以及應用進行把握。目前,已經有很多網頁設計中都用到b s結構框架。的使用者在瀏覽器使用中,一般都需要經歷三個主要步驟,首先,的使用者可以在瀏覽器頁面將自己要搜尋的關鍵詞輸入其中,點選查詢需要的資訊資料,然後再對於web進行url的訪問申請,此後,...