整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          CSS樣式更改-字體設置Font&邊框Border

          篇文章主要講述了CSS樣式更改中的背景Background,這篇文章我們來談談字體設置Font&邊框Border的基礎用法。

          1.字體設置Font

          1).字體系列

          <div style='font-family: sans-serif normal'></div>
          可用字體:
          Serif
          Sans-serif
          Monospace
          Cursive
          Fantasy
          Times
          Courier

          2).字體風格

          <div style='font-style:normal'></div>
          文本傾斜:
          normal   文本正常顯示
          italic   文本斜體顯示
          oblique  文本傾斜顯示

          3).字體變形

          <div style='font-variant:small-caps'></div>
          normal          顯示標準字體。
          small-caps      顯示小型大寫字母的字體。

          4).字體加粗

          <div style='font-weight:normal'></div>
          normal    標準的字符
          bold      粗體字符
          bolder    更粗的字符
          lighter   更細的字符
          也可以使用數字表示,范圍為100~900

          5).字體大小

          <div style='font-size:60px'></div>
          smaller 變小
          larger  變大
          length  固定值
          而且還支持百分比

          2.邊框Border

          首先說一下邊框風格,它的風格比較多,常用的一般是實線為主:

          <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    左邊框樣式

          先定義邊框的寬度 風格和顏色,然后定義邊框的其它屬性。

          1).邊框形狀

          <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選擇器,為什么呢?
          • 輸入的時候少按一個shift鍵;
          • 瀏覽器兼容問題 (比如使用_tips的選擇器命名,在IE6是無效的)
          • 能良好區分JavaScript變量命名(JS變量命名是用“_”)



          功能



          狀態



          注釋的寫法


          /* 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定義標題。

          語義化優點:

          • 易于用戶閱讀,樣式丟失的時候能讓頁面呈現清晰的結構。
          • 有利于SEO,搜索引擎根據標簽來確定上下文和各個關鍵字的權重。
          • 方便其他設備解析,如盲人閱讀器根據語義渲染網頁
          • 有利于開發和維護,語義化更具可讀性,代碼更好維護,與CSS3關系更和諧。



          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、

          參考答案如圖所示


          主站蜘蛛池模板: 一区二区在线免费视频| 免费人妻精品一区二区三区| 无码一区二区三区视频| 国精产品一区二区三区糖心| 国产精品女同一区二区| 国产电影一区二区| 精品无码一区二区三区水蜜桃| 亚洲人AV永久一区二区三区久久| 国内偷窥一区二区三区视频| 亚洲国产成人精品无码一区二区| 精品免费国产一区二区三区| 上原亚衣一区二区在线观看| 久久精品亚洲一区二区三区浴池| 国产香蕉一区二区三区在线视频| 亚洲福利视频一区二区| 99精品国产一区二区三区2021| 国产在线一区二区杨幂| 精品一区二区三区东京热| 国产伦精品一区二区三区免费下载| 国内偷窥一区二区三区视频| 成人无号精品一区二区三区| 国精品无码一区二区三区左线| 精品少妇人妻AV一区二区| 中文字幕一区二区人妻| 午夜视频一区二区三区| 国产AV一区二区三区传媒| 精彩视频一区二区三区| 中文字幕在线不卡一区二区| 国产色综合一区二区三区 | 午夜精品一区二区三区在线视| 无码精品人妻一区二区三区免费看 | 国产成人无码AV一区二区| 国产成人一区二区三区| 人体内射精一区二区三区| 中文字幕一区二区三区免费视频 | 精品一区二区三区无码视频| 亚洲一区二区三区无码国产| 国产在线精品一区二区高清不卡| 精品无码国产AV一区二区三区 | 国产在线精品一区在线观看| 亚洲码一区二区三区|