篇文章主要講述了CSS樣式更改中的背景Background,這篇文章我們來談談字體設置Font&邊框Border的基礎用法。
<div style='font-family: sans-serif normal'></div>
可用字體:
Serif
Sans-serif
Monospace
Cursive
Fantasy
Times
Courier
<div style='font-style:normal'></div>
文本傾斜:
normal 文本正常顯示
italic 文本斜體顯示
oblique 文本傾斜顯示
<div style='font-variant:small-caps'></div>
normal 顯示標準字體。
small-caps 顯示小型大寫字母的字體。
<div style='font-weight:normal'></div>
normal 標準的字符
bold 粗體字符
bolder 更粗的字符
lighter 更細的字符
也可以使用數字表示,范圍為100~900
<div style='font-size:60px'></div>
smaller 變小
larger 變大
length 固定值
而且還支持百分比
首先說一下邊框風格,它的風格比較多,常用的一般是實線為主:
<div style='border-style:none'></div>
hidden 隱藏邊框
dotted 點狀邊框
dashed 虛線邊框
solid 實線邊框
double 雙線邊框
groove 3D凹槽邊框
ridge 3D壟狀邊框
inset 3D inset邊框
outset 3D outset邊框
邊框也有四面,所以也會有上下左右
所以有時候為了更精確定位并修改樣式可以使用:
border-top-style 上邊框樣式
border-right-style 右邊框樣式
border-bottom-style 下邊框樣式
border-left-style 左邊框樣式
先定義邊框的寬度 風格和顏色,然后定義邊框的其它屬性。
<div style='border-radius:25px;'></div>
2).邊框陰影
<div style='box-shadow:1px 2px 2px 2px red'></div>
參數含義:
邊框各個方向的大小和顏色
3).邊框圖片
<div style='border-image:url(1.png) 30 30 10 round'></div>
參數含義:
邊框圖片的路徑
圖片邊框向內偏移
圖片邊框的寬度
邊框圖像區域超出邊框的量
圖像邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。
這篇文章主要介紹了CSS樣式更改篇中的字體設置Font&邊框Border設置,希望讓大家對CSS選擇器有個簡單的認識和了解。
****看完本文有收獲?請轉發分享給更多的人****
IT共享之家
想要學習更多,請前往Python爬蟲與數據挖掘專用網站:http://pdcfighting.com/
言
對于項目,那就是我們的親兒子啊,作為一個前端菜鳥,面向用戶就是將自己的兒子介紹給別人認識,肯定要讓他白白凈凈,漂漂亮亮的啦,給別人一眼就喜歡上的感覺咯,哈哈哈~
常在河邊走,哪有不濕鞋,在我們編程的工程中,尤其是前端的同學,肯定少不了跟Css打交道,命名、縮寫、書寫順序等都是有一定規范,這個規范可能來源于你、我、或者瀏覽器等不定向人群(這個規范是我瞎編的),今天自己整合收集,以及個人項目用到的html+css的書寫規范送給在"編程界"奮斗的小伙伴,你 不是一個人在戰斗。
話不多說,鍋燒空氣,鍋熱放油,放入寫好的html+css炸一遍,撈出,控油,裹上雞蛋液,粘上面包糠,再炸,隔壁小孩都饞哭了,不好吃你來打我。
一 命名規則說明
1、所有的命名最好都小寫
2、屬性的值一定要用雙引號("")括起來,且一定要有值如class="app",id="app"
3、每個標簽都要有開始和結束,且要有正確的層次,排版有規律工整例如:<div></div>
4、空元素要有結束的tag或于開始的tag后加上"/" <br />、<img />
5、表現與結構完全分離,代碼中不涉及任何的表現元素,如style、font、bgColor、border等
6、<h1>到<h6>的定義,應遵循從大到小的原則,體現文檔的結構,并有利于搜索引擎的查詢,因此,請不要利用標題標簽來改變同一行中的字體大小。相反,我們應當使用層疊樣式表定義來達到漂亮的顯示效果。
7、給每一個表格和表單加上一個唯一的、結構標記id
8、給圖片加上alt標簽,alt屬性是一個必需的屬性,它規定在圖像無法顯示時的替代文本。假設由于下列原因用戶無法查看圖像,alt 屬性可以為圖像提供替代的信息:網速太慢、src 屬性中的錯誤、瀏覽器禁用圖像、用戶使用的是屏幕閱讀器。
9、盡量使用英文命名原則
10、盡量不縮寫,除非一看就明白的單詞如btn。
11、命名方式(BEM):類-體(例:g-head)、類-體-修飾符(例:u-btn-active)。
12、scss中的變量、函數、混合、placeholder采用駝峰式命名
13、后代選擇器:體-修飾符即可(例:.m-page .cut{})注:后代選擇器不要在頁面布局中使用,因為污染的可能性較大;
14、減少id命名,id在JS是唯一的,不能多次使用,id的優先級優先與class,所以id應該按需使用,而不能濫用。
二 網頁外層重要部分CSS樣式命名
wrap ------------------ 用于最外層 header ---------------- 用于頭部 main ------------------ 用于主體內容(中部) main-left ------------- 左側布局 main-right ------------ 右側布局 nav ------------------- 網頁菜單導航條 content --------------- 用于網頁中部主體 footer ---------------- 用于底部
三 樣式屬性順序
1. 定位:positionz-indexleftrighttopbottomclip等。
2. 自身屬性:widthheightmin-heightmax-heightmin-widthmax-width等。
3. 文字樣式:colorfont-sizeletter-spacing, colortext-align等。
4. 背景:background-imageborder等。
5.文本屬性: text-alignvertical-aligntext-wraptext-transformtext-indenttext-decoration letter-spacingword-spacingwhite-spacetext-overflow等。
6. css3中屬性:content、box-shadow、animation、border-radius、transform等
/* yes */ .example { z-index: -1; display: inline-block; font-size: 16px; color: red; background-color: #eee; } /* no */ .example { color: red; background-color: #eee; display: inline-block; z-index: -1; font-size: 16px; }
目的:減少瀏覽器reflow(回流),提升瀏覽器渲染dom的性能。
關注我的頭條號,分享更多的技術學習文章,我自己是一名從事了多年開發的web前端老程序員,目前辭職在做自己的web前端私人定制課程,今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨,各種框架都有整理,送給每一位前端小伙伴,想要獲取的可以關注我的頭條號并在后臺私信我:前端,即可免費獲取。
文檔加載完成到完全顯示之間瀏覽器的渲染流程為:
1)瀏覽器解析html構建dom樹,解析css構建cssom樹即css rule tree:將html和css都解析成樹形的數據結構;dom樹的構建過程是一個深度遍歷過程:當前節點的所有子節點都構建好后才會去構建當前節點的下一個兄弟節點。2)構建render樹:DOM樹和cssom樹合并之后形成render樹。為了構建渲染樹,瀏覽器大體完成了下列工作:從DOM樹的根節點開始遍歷每個可見節點。對于每個可見節點,為其找到適配的CSSOM規則并應用它們。發射可見節點,連同其內容和計算的樣式。渲染樹中包含了屏幕上所有可見內容及其樣式信息。3)布局render樹:有了render樹,瀏覽器已經知道網頁中有哪些節點,各個節點的css定義以及它們的從屬關系,接著就開始布局,計算出每個節點在屏幕中的位置和大小。(html采用了一種流式布局的布局模型,從上到下,從左到右順序布局,布局的起點是從render樹的根節點開始的,對應dom樹的document節點,其初始位置為(0,0),詳細的布局過程為:每個renderer的寬度由父節點的renderer確定。父節點遍歷子節點,確定子節點的位置(x,y),調用子節點的layout方法確定其高度,父節點根據子節點的height, margin, padding確定自身的高度)。4)渲染,繪制render樹:瀏覽器已經知道啦哪些節點要顯示,每個節點的css屬性是什么,每個節點在屏幕中的位置是哪里。就進入啦最后一步,按照計算出來的規則,通過顯卡把內容畫在屏幕上。瀏覽器并不是一獲取到css樣式就立馬開始解析而是根據css樣式的書寫順序按照dom樹的結構分布render樣式,完成第(2)步,然后開始遍歷每個樹節點的css樣式進行解析,此時的css樣式的遍歷順序完全是按照之前的的書寫順序,在解析過程中,一旦瀏覽器發現某個元素的定位變化影響布局,則需要倒回去重新渲染。例如css樣式:{width: 100px; height: 100px; background-color: red; position: absolute;}當瀏覽器解析到position的時候突然發現該元素是絕對定位元素需要脫離文檔流,而之前卻是按照普通元素進行解析的,所以不得不重新渲染,解除該元素在文檔中所占位置,然而由于該元素的占位發生變化,其他元素也可能會受到回流的影響而重新排位,最終導致(3)步驟花費時間太久而影響到(4)步驟的顯示,影響了用戶體驗。
注:render樹的結構不等同于DOM樹的結構,一些設置display:none的節點不會被放在render樹中,但會在dom樹中。
有些情況,比如修改了元素的樣式,瀏覽器并不會立刻回流(reflow)或重繪(repaint),而是把這些操作積攢一批,然后做一次reflow,這也叫做異步reflow。但是在有些情況下,比如改變窗口大小,改變頁面默認字體等瀏覽器會馬上進行reflow。為了更好的用戶體驗,渲染引擎將會盡可能早的將內容呈現在屏幕上,并不會等到所有html都解析完成之后再去構建和布局render樹。它是解析完一部分內容就顯示一部分內容,同時,可能還在網絡上下載其余內容。
四 css樣式書寫規范
使用CSS縮寫屬性
CSS有些屬性是可以縮寫的,比如padding,margin,font等等,這樣精簡代碼同時又能提高用戶的閱讀體驗。
去掉小數點前的“0”
簡寫命名(前提是要讓人看懂你的命名才能簡寫哦)
16進制顏色代碼縮寫
連字符CSS選擇器命名規范
1.長名稱或詞組可以使用中橫線來為選擇器命名。2.不建議使用“_”下劃線來命名CSS選擇器,為什么呢?
功能
狀態
注釋的寫法
/* Header */ 內容區 /* End Header */
id的命名
1)頁面結構
容器: container
頁頭:header
內容:content/container
頁面主體:main
頁尾:footer
導航:nav
側欄:sidebar
欄目:column
頁面外圍控制整體佈局寬度:wrapper
左右中:left right center(2)導航
導航:nav
主導航:mainnav
子導航:subnav
頂導航:topnav
邊導航:sidebar
左導航:leftsidebar
右導航:rightsidebar
菜單:menu
子菜單:submenu
標題: title
摘要: summary
(3)功能
標志:logo
廣告:banner
登陸:login
登錄條:loginbar
注冊:register
搜索:search
功能區:shop
標題:title
加入:joinus
狀態:status
按鈕:btn
滾動:scroll
標籤頁:tab
文章列表:list
提示信息:msg
當前的: current
小技巧:tips
圖標: icon
注釋:note
指南:guild
服務:service
熱點:hot
新聞:news
下載:download
投票:vote
合作伙伴:partner
友情鏈接:link
版權:copyright
CSS樣式表文件命名
主要的 master.css
模塊 module.css
基本共用 base.css
布局、版面 layout.css
主題 themes.css
專欄 columns.css
文字 font.css
表單 forms.css
補丁 mend.css
打印 print.css
五 HTML5-語義化
距HTML5標準規范制定完成并公開發布已經有好些年了,但是多數公司還是用的不是很多,可能一部分原因是部分用戶在使用低版本瀏覽器吧。
什么是語義化?就是用合理、正確的標簽來展示內容,比如h1~h6定義標題。
語義化優點:
1、header
<header>定義文檔或者文檔的部分區域的頁眉,應作為介紹內容或者導航鏈接欄的容器。在一個文檔中,您可以定義多個<header>元素,但需要注意的是<header>元素不能作為<address>、<footer>或 <header>元素的子元素。
2、nav
<nav>描述一個含有多個超鏈接的區域,該區域包含跳轉到其他頁面或頁面內部其他部分的鏈接列表。在一個文檔中,可定義多個元素。
3、main
<main>定義文檔的主要內容,該內容在文檔中應當是獨一無二的,不包含任何在文檔中重復的內容,比如側邊欄,導航欄鏈接,版權信息,網站logo,搜索框(除非搜索框作為文檔的主要功能)。需要注意的是在一個文檔中不能出現多個<main>標簽。
4、article
<article>元素表示文檔、頁面、應用或網站中的獨立結構,是可獨立分配的、可復用的結構,如在發布中,它可能是論壇帖子、雜志或新聞文章、博客、用戶提交的評論、交互式組件,或者其他獨立的內容項目。當<article>元素嵌套使用時,則該元素代表與外層元素有關的文章。例如,代表博客評論的元素可嵌套在代表博客文章的元素中。
5、aside
<aside>元素表示一個和其余頁面內容幾乎無關的部分,被認為是獨立于該內容的一部分且可以被單獨的拆分出來而不會影響整體。通常表現為側邊欄或嵌入內容。
6、footer
<footer>定義最近一個章節內容或者根節點元素的頁腳。一個頁腳通常包含該章節作者、版權數據或者與文檔相關的鏈接等信息。使用footer插入聯系信息時,應在 footer 元素內使用 元素。注意不能包含<footer>或者<header>
7、section
<section>表示文檔中的一個區域(或節),比如,內容中的一個專題組。
如果元素內容可以分為幾個部分的話,應該使用 <article>而不是 <section>。不要把 <section>元素作為一個普通的容器來使用,特別是當<section>僅僅是為了美化樣式或方便腳本使用的時候,應使用<div>。
題:HTML中表示文字粗體的標記除了使用外,還可以使用(???)
A、
B、
C、
D、
參考答案如圖所示
*請認真填寫需求信息,我們會在24小時內與您取得聯系。