整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          Qt中插入html樣式

          t中引入html調(diào)節(jié)樣式

          HTML

          • 設(shè)置行間距字體高度和顏色
          <html><head/><body><p style=\"height:16px;line-height:24px;color:#787878\"> helloWorld</p></body></html>

          技巧

          • 實(shí)現(xiàn)Html鏈接動(dòng)態(tài)下劃線
            • 繼承QLabel并重寫進(jìn)入離開事件(對(duì)Html文字鏈接中text-decoration: none;屬性進(jìn)行控制). 即可實(shí)現(xiàn)鼠標(biāo)停留時(shí)顯示下劃線, 鼠標(biāo)離開時(shí)隱藏下劃線.

          聯(lián)網(wǎng)的高速發(fā)展使得我們每天花在網(wǎng)頁上的時(shí)間越來越多,網(wǎng)頁設(shè)計(jì)的重要性不言而喻。本文作者以閱讀型網(wǎng)頁設(shè)計(jì)為例,談?wù)勀膸c(diǎn)是需要特別注意的,希望對(duì)你有幫助。

          最近負(fù)責(zé)某知識(shí)型社區(qū)的改版,其中一塊是提升讀者在網(wǎng)頁端閱讀的體驗(yàn)。在調(diào)研一些網(wǎng)站的設(shè)計(jì)規(guī)范和查閱部分文獻(xiàn)后,結(jié)合自己的思考,總結(jié)如下幾點(diǎn),以供參考。

          一個(gè)閱讀型網(wǎng)頁,比如各新聞資訊網(wǎng)站、閱讀型社區(qū)、web端讀書網(wǎng)站等,在去除廣告等干擾元素后,純內(nèi)容的閱讀體驗(yàn)會(huì)受到以下幾個(gè)因素的影響:字體、字號(hào)、字色、行寬、行間距、段間距、背景色。

          接下來一一介紹。

          字體:

          襯線字體 or 非襯線字體:調(diào)研了多個(gè)網(wǎng)站,均采用非襯線字體。

          查閱資料,襯線字體更富表現(xiàn)力,可提高辨識(shí)度和閱讀效率,多用于報(bào)紙、書籍等印刷品,以及電子雜志和藝術(shù)網(wǎng)站的正文字體。

          在電子屏上顯示時(shí),由于字號(hào)、顯示器尺寸、顯示器分辨率等影響因素,使用襯線字體時(shí)過細(xì)的筆畫可能會(huì)顯示不清難以辨認(rèn)。

          從穩(wěn)妥角度考慮,這可能是各大網(wǎng)站均采用非襯線字體作為首選字體的原因。

          推薦以下字體:

          MacOS

          中文:首選 蘋方regular 次選 冬青黑體簡體。

          英文:首選 Helvetica Neue 次選 Arial。

          Windows

          中文:首選 微軟雅黑 次選 冬青黑體簡體。

          英文:首選 Arial 次選 Tahoma。

          字號(hào):

          字號(hào)太小看不清累眼睛,太大頁面不精致且顯示效率低。

          一個(gè)字在顯示器上顯示出來有多大,取決于字號(hào)和單個(gè)像素方塊的物理尺寸。單像素塊尺寸,取決于顯示器尺寸和顯示器分辨率。

          隨著顯示器技術(shù)發(fā)展,在顯示器尺寸沒有變大的情況下,顯示器分辨率越來越高,這意味著單像素方塊的物理尺寸越來越小,因此網(wǎng)頁端設(shè)計(jì)時(shí)的推薦字號(hào)也在變大,從12px 到 14px 到 16px。

          穩(wěn)妥起見,正文建議使用 16px 。以此為基準(zhǔn),擴(kuò)大和減小后確定標(biāo)題和輔助文本的字號(hào),此處建議以 4px 為步長,使對(duì)比明顯。

          字色和背景色:

          閱讀體驗(yàn)受文字和背景的對(duì)比度影響。高對(duì)比度時(shí),識(shí)別清晰,但眼睛容易疲勞。只有找到一個(gè)合適的對(duì)比度,才能做到既識(shí)別清晰,長時(shí)間閱讀又不容易累。

          首先是白底黑字和黑底白字。二者本身對(duì)比較強(qiáng),加上人類眼睛側(cè)抑制等視覺機(jī)制,會(huì)讓反差特別大,因此識(shí)別起來很清晰。由于白底黑字相較于黑底白字的反差更小[1],故而可讀性更高,適用于注重文字閱讀的網(wǎng)站;黑底白字視覺刺激性強(qiáng),適用于注重視覺表現(xiàn)力或營造氛圍的單頁面,比如海報(bào)、主題網(wǎng)站首頁等。另外,對(duì)于視覺受損的用戶,此兩種配色方案也是較人性化的選擇。

          然而,白底黑字并非最好。由于白色具有100%的亮度,黑色是0%,巨大的亮度對(duì)比讓眼睛在閱讀時(shí)要盡全力去適應(yīng),容易引起眼部疲勞,因此白底黑字仍不適宜長時(shí)間的閱讀,所以印刷品讀物的紙張多用乳白色或淡黃色的紙張。又因?yàn)轱@示器本身就發(fā)光,所以在電腦上閱讀純白色背景的文字,比在紙上閱讀時(shí),眼睛會(huì)更容易疲乏。

          然而Hill(1997)的研究卻表明:黑色和白色一直被認(rèn)為是最可讀的;有黑色在內(nèi)的色彩組合比沒有黑色的色彩組合更易于閱讀;較淺背景上較深的文本比較暗的背景上較淺的文本的評(píng)價(jià)高。因此,更好的組合可能是保證了對(duì)比度(大于4.5)的淺灰背景 + 深灰文本。

          行寬:

          行寬過大,閱讀時(shí)要轉(zhuǎn)動(dòng)脖子,降低閱讀效率,而且目光從行尾移至下一行首容易串行。行寬過小,用戶注視點(diǎn)要在行間頻繁跳躍,降低了閱讀速度,體驗(yàn)也不好。為防止此現(xiàn)象,文本寬度最好在450-700px之間。

          確定具體數(shù)值時(shí),要注意行寬應(yīng)該是正文字號(hào)的整數(shù)倍。這是因?yàn)橹形氖欠綁K字,最好的排版應(yīng)該像小學(xué)時(shí)的作文本那樣,每一列字都對(duì)齊,除最后一行外,每一行應(yīng)該寫滿,這樣才能整整齊齊。

          如果采用左對(duì)齊,可以達(dá)到每一列字都對(duì)齊(有半角字符的行,會(huì)破壞隊(duì)形),但當(dāng)最后一個(gè)字符為標(biāo)點(diǎn)時(shí),會(huì)直接換行,導(dǎo)致此行會(huì)缺一塊,不好。

          如果采用兩端對(duì)齊,就能避免這種情況。但兩端對(duì)齊有另一個(gè)問題,段落的最后一行不一定寫滿行。當(dāng)最后一行未寫滿行,且,行寬不是正文字號(hào)的整數(shù)倍時(shí),為了達(dá)到兩端對(duì)齊,前面行會(huì)增加字間距,但最后一行不會(huì)增加字間距。這樣,最后一行的每個(gè)字都不能與其所在列對(duì)齊。

          如果行寬是正文字號(hào)的整數(shù)倍,就能避免這種情況。達(dá)到兩端對(duì)齊不留空,每列對(duì)齊像閱兵的效果。

          左對(duì)齊

          兩端對(duì)齊

          行間距:

          行間距太小,有密不透氣的感覺,讀者瀏覽文章時(shí)容易串行;行間距太大,閱讀時(shí)會(huì)感覺文章不夠連貫,頁面也不夠精致。網(wǎng)頁上行距常用em為單位,不管是中文網(wǎng)站還是英文網(wǎng)站,大多用1.5em-1.8em的行距。

          段間距:

          分情況。文章較短,就不需要很寬的段距;文章很長,最好利用段距分隔文章的節(jié)奏,給閱讀者喘息和思考的機(jī)會(huì),提高文章的可讀性。經(jīng)驗(yàn)值是,段間距一般為行間距的75% 。

          結(jié)語:

          實(shí)際上,影響純內(nèi)容閱讀體驗(yàn)的遠(yuǎn)不止以上這些。實(shí)際工作中,環(huán)境光、設(shè)備尺寸和分辨率、用戶視力等都應(yīng)該在設(shè)計(jì)師的考慮范圍內(nèi)。魔鬼在細(xì)節(jié)中,多考慮一些,用戶體驗(yàn)就會(huì)提升一些。

          參考文獻(xiàn):

          https://www.zcool.com.cn/article/ZNTEyNjMy.html

          https://marijohannessen.github.io/color-contrast-checker/

          https://zhuanlan.zhihu.com/p/62766232

          本文由 @Tzufeng 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

          題圖來自Unsplash,基于CC0協(xié)議

          SS三種引入方式

          1.行內(nèi)樣式(內(nèi)聯(lián)樣式)

          <h1 style="color:pink; 屬性:屬性值;">前端學(xué)習(xí)</h1>

          2.內(nèi)部樣式表(內(nèi)聯(lián)樣式表)

          <head>
          <style type="text/CSS">
              選擇器(選擇的標(biāo)簽) { 
                屬性1: 屬性值1;
                屬性2: 屬性值2; 
                屬性3: 屬性值3;
              }
          </style>
          </head>

          3.外部樣式表(外鏈?zhǔn)?

          <head>
            <link rel="stylesheet" type="text/css" href="css文件路徑">
          </head>

          - 注意:

          - link 是個(gè)單標(biāo)簽

          - link標(biāo)簽需要放在head頭部標(biāo)簽中,并且指定link標(biāo)簽的三個(gè)屬性

          屬性 作用


          link

          rel

          定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系,在這里需要指定為“stylesheet”,表示被鏈接的文檔是一個(gè)樣式表文件。

          type

          定義所鏈接文檔的類型,在這里需要指定為“text/CSS”,表示鏈接的外部文件為CSS樣式表。我們都可以省略

          href

          定義所鏈接外部樣式表文件的URL,可以是相對(duì)路徑,也可以是絕對(duì)路徑。

          4.4 三種樣式表總結(jié)(位置)

          樣式表

          優(yōu)點(diǎn)

          缺點(diǎn)

          使用情況

          控制范圍

          行內(nèi)樣式表

          書寫方便,權(quán)重高

          沒有實(shí)現(xiàn)樣式和結(jié)構(gòu)相分離

          較少

          控制一個(gè)標(biāo)簽(少)

          內(nèi)部樣式表

          部分結(jié)構(gòu)和樣式相分離

          沒有徹底分離

          較多

          控制一個(gè)頁面(中)

          外部樣式表

          完全實(shí)現(xiàn)結(jié)構(gòu)和樣式相分離

          需要引入

          最多,強(qiáng)烈推薦

          控制整個(gè)站點(diǎn)(多)

          CSS選擇器五種方法

          1.標(biāo)簽選擇器

          "h3 { 
           color: red;
          }"

          2.類名選擇器

          <p class='類名'></p>   
          //標(biāo)簽
          
          .類名  {   
              屬性1:屬性值1; 
              屬性2:屬性值2; 
              屬性3:屬性值3;     
          }

          3.多類名選擇器

          <p class='類名1 類名2'></p>	      
          //多類名,空格隔開

          4.id選擇器

          <p id="id名"></p>	
          // #id名 {color:pink;}	元素的id值是唯一的,只能對(duì)應(yīng)于文檔中某一個(gè)具體的元素。

          5.通配符選擇器

          * { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
          // 會(huì)匹配頁面所有的元素,降低頁面響應(yīng)速度,不建議隨便使用
          

          基礎(chǔ)選擇器總結(jié)

          選擇器

          作用

          缺點(diǎn)

          使用情況

          用法

          標(biāo)簽選擇器

          可以選出所有相同的標(biāo)簽,比如p

          不能差異化選擇

          較多

          p { color:red;}

          類選擇器

          可以選出1個(gè)或者多個(gè)標(biāo)簽

          可以根據(jù)需求選擇

          非常多

          .nav { color: red; }

          id選擇器

          一次只能選擇器1個(gè)標(biāo)簽

          只能使用一次

          不推薦使用

          #nav {color: red;}

          通配符選擇器

          選擇所有的標(biāo)簽

          選擇的太多,有部分不需要

          不推薦使用

          * {color: red;}

          基礎(chǔ)選擇器我們一共學(xué)了4個(gè), 每個(gè)都有自己的價(jià)值, 可能再某個(gè)地方都能用到。但是如果說,一定要找個(gè)最常用的,那么,肯定是類選擇器。

          CSS字體


          1.字體大小

          font-size:20px          //谷歌默認(rèn)16px  谷歌瀏覽器默認(rèn)16px
          
          例子:
          p {  
              font-size:20px; 
          }

          2.定義字體

          p{ font-family:"微軟雅黑";}


          3.字體粗細(xì)

          font-weight:normal   //默認(rèn)不加粗
          • 在html中如何將字體加粗我們可以用標(biāo)簽來實(shí)現(xiàn)使用 b 和 strong 標(biāo)簽是文本加粗。
          • 可以使用CSS 來實(shí)現(xiàn),但是CSS 是沒有語義的。

          屬性值

          描述

          normal

          默認(rèn)值(不加粗的)

          bold

          定義粗體(加粗的)

          100~900

          400 等同于 normal,而 700 等同于 bold 我們重點(diǎn)記住這句話

          提倡:

          我們平時(shí)更喜歡用數(shù)字來表示加粗和不加粗。

          4.字體樣式風(fēng)格

          font-style:normal     //默認(rèn)不加粗
          • 在html中如何將字normal體傾斜我們可以用標(biāo)簽來實(shí)現(xiàn)字體傾斜除了用 i 和 em 標(biāo)簽,
          • 可以使用CSS 來實(shí)現(xiàn),但是CSS 是沒有語義的

          font-style屬性用于定義字體風(fēng)格,如設(shè)置斜體、傾斜或正常字體,其可用屬性值如下:

          屬性

          作用

          normal

          默認(rèn)值,瀏覽器會(huì)顯示標(biāo)準(zhǔn)的字體樣式 font-style: normal;

          italic

          瀏覽器會(huì)顯示斜體的字體樣式。

          小技巧:

          平時(shí)我們很少給文字加斜體,反而喜歡給斜體標(biāo)簽(em,i)改為普通模式。

          5.字體綜合寫法(重點(diǎn))

          • 基本語法格式如下:
          選擇器 { font: font-style  font-weight  font-size/line-height  font-family;}
          • 注意:使用font屬性時(shí),必須按上面語法格式中的順序書寫,不能更換順序,各個(gè)屬性以空格隔開。其中不需要設(shè)置的屬性可以省略(取默認(rèn)值),但必須保留font-size和font-family屬性,否則font屬性將不起作用。

          1.6 font總結(jié)

          屬性

          表示

          注意點(diǎn)

          font-size

          字號(hào)

          我們通常用的單位是px 像素,一定要跟上單位

          font-family

          字體

          實(shí)際工作中按照?qǐng)F(tuán)隊(duì)約定來寫字體

          font-weight

          字體粗細(xì)

          記住加粗是 700 或者 bold 不加粗 是 normal 或者 400 記住數(shù)字不要跟單位

          font-style

          字體樣式

          記住傾斜是 italic 不傾斜 是 normal 工作中我們最常用 normal

          font

          字體連寫

          1. 字體連寫是有順序的 不能隨意換位置 2. 其中字號(hào) 和 字體 必須同時(shí)出現(xiàn)

          CSS外觀屬性

          行間距

          line-height: 24px;
          //line-height常用的屬性值單位有三種,分別為像素px,相對(duì)值em和百分比%,
          //實(shí)際工作中使用最多的是像素px

          首行縮進(jìn)

          text-indent: 2em; 
          //屬性值
          - 其屬性值可為不同單位的數(shù)值、em字符寬度的倍數(shù)、或相對(duì)于瀏覽器窗口寬度的百分比%,允許使用負(fù)值,
          - 建議使用em作為設(shè)置單位

          文本水平對(duì)齊

          text-align:left    //左對(duì)齊(默認(rèn)值)
          • 作用:text-align屬性用于設(shè)置文本內(nèi)容的水平對(duì)齊,相當(dāng)于html中的align對(duì)齊屬性
          • 其可用屬性值如下:

          屬性

          解釋

          left

          左對(duì)齊(默認(rèn)值)

          right

          右對(duì)齊

          center

          居中對(duì)齊

          • 注意:是讓盒子里面的內(nèi)容水平居中, 而不是讓盒子居中對(duì)齊

          文本修飾

          text-decoration: none;    //取消下劃線

          text-decoration 通常我們用于給鏈接修改裝飾效果

          描述

          none

          默認(rèn)。定義標(biāo)準(zhǔn)的文本。 取消下劃線(最常用)

          underline

          定義文本下的一條線。下劃線 也是我們鏈接自帶的(常用)

          overline

          定義文本上的一條線。(不用)

          line-through

          定義穿過文本下的一條線。(不常用)

          2.6 CSS外觀屬性總結(jié)

          屬性

          表示

          注意點(diǎn)

          color

          顏色

          我們通常用 十六進(jìn)制 比如 而且是簡寫形式 #fff

          line-height

          行高

          控制行與行之間的距離

          text-align

          水平對(duì)齊

          可以設(shè)定文字水平的對(duì)齊方式

          text-indent

          首行縮進(jìn)

          通常我們用于段落首行縮進(jìn)2個(gè)字的距離 text-indent: 2em;

          text-decoration

          文本修飾

          記住 添加 下劃線 underline 取消下劃線 none

          以下為個(gè)人筆記(需要請(qǐng)關(guān)注私聊):


          主站蜘蛛池模板: 国产成人av一区二区三区不卡| 亚洲日本一区二区一本一道| 少妇激情av一区二区| 中日韩精品无码一区二区三区| 久久精品一区二区影院| 亚洲美女视频一区| 国产精品主播一区二区| 国产传媒一区二区三区呀| 在线观看国产一区二三区| 一区二区中文字幕| 曰韩精品无码一区二区三区| 无码精品人妻一区二区三区免费| 中字幕一区二区三区乱码| 久久精品无码一区二区无码| 国产爆乳无码一区二区麻豆| 久久精品中文字幕一区| 视频一区视频二区日韩专区| 国产一区在线观看免费| 精品人妻一区二区三区四区在线| 无码人妻精一区二区三区| 亚洲一区二区三区成人网站| 精品无码一区二区三区在线| 精品深夜AV无码一区二区| 老熟妇仑乱一区二区视頻| 国产精品分类视频分类一区| 亚洲色偷偷偷网站色偷一区| 日韩中文字幕精品免费一区| 亚洲丰满熟女一区二区哦| 国产精品视频一区麻豆| 无码一区二区三区免费视频| 日韩精品免费一区二区三区| 国产一区二区在线观看视频| 无码少妇一区二区浪潮av| 国产福利电影一区二区三区久久老子无码午夜伦不 | 国产精品视频免费一区二区| 乱码人妻一区二区三区| 国产乱码精品一区二区三区四川| 国产一区二区三区电影| 中文字幕一区二区三区四区| 午夜福利一区二区三区高清视频| 中文字幕亚洲综合精品一区|