整合營銷服務商

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

          免費咨詢熱線:

          css基礎快速入門-14偽類first-letter

          css基礎快速入門-14偽類first-letter

          學生就可以看懂的css基礎實戰系列,pre標簽里是筆記總結,動手實際操作一下會加強理解。有疑問留言交流哦。

          可能比較枯燥,但是再堅持一下,前端知識的大門就會大開了。

          了::before 和::after,CSS 的偽元素還有::first-line、::first-letter 和::selection 這三個,這三個相對來說就簡單得多,用法也較為純粹。沒看過前兩篇文章的,筆者建議大家看看:

          CSS 偽元素基礎知識:before 與after (一)、CSS 偽元素基礎知識:content 與counter 實用技巧(二)

          ::first-line

          ::first-line顧名思義就是「第一行」,通過這個偽元素可以輕松指定文字的第一行,需要注意的是::first-line 「不能」作用于display:inline的元素。以下面的例子,html里有一段文字如下所示:

          <p> 前端達人公眾號,已經有五年的歷史啦,目前有幾千名前端開發者訂閱,公眾號的宗旨是:分享當下最實用的前端技術。關注前端達人,與數千名達人們一起進步!期待你的訂閱和關注!
          </p>
          

          CSS 只要這樣寫,頁面呈現出來的第一行就會是綠色的,不論視窗如何縮放,只有第一行會是綠色的。

          p::first-line{
           color:green;
          }
          

          ::first-letter

          ::first-letter顧名思義就是「第一個字」,通過這個偽元素,可以做出許多文章第一個字放大或變色的效果,我們這里就用剛剛上面那段文字為例,把第一個字用下段的CSS 來做變化,就可以看到第一個字放大且變色了的效果。

          p::first-letter{
           font-weight:bold;
           font-size:38px;
           color:red;
          }
          

          雖然把第一個字放大了,但排版上仍然有點亂沒有美感,這時你可以加入line-height、float或padding等屬性進行修正,經過修正后,你會驚喜的發現很像報紙雜志會出經常用的效果(第一個字會跨行顯示)。

          p::first-letter{
           font-weight:bold;
           font-size:38px;
           color:red;
           line-height:26px;
           float:left;
           padding:10px 5px 0 0;
          }
          

          不過很有趣的是,在實際應用的過程里,發現「有一些符號」是無法套用::first-letter 的,例如「『 {} [] 都不行,但如果后方加上其他文字或符號,又會跟著一起放大...( 到底是怎樣? )

          經過查詢W3C的官網,發現了下面這段話,意思大概就是說網頁里面有定義一些所謂「包覆式、點綴式的標點符號」,如果是這些包覆式的標點符號,基本上就無法放大,反而需要搭配其它字符進行使用,因此,在使用第一個字進行特殊變化時,就要注意有這種特殊狀況會發生。

          參考:https://www.w3.org/TR/CSS21/selector.html#first-letter

          ::selection

          ::selection 是個十分常見的偽元素,它就是負責一段選取文字的效果,以下面這段CSS來說,選取后的文字,就會是深色背景,黃色文字。

          p::selection{
           color:yellow;
           background:#543;
          }
          

          延伸閱讀——用JavaScript操控偽元素

          雖然我們能用CSS操控偽元素,但因為偽元素不存在于網頁元素內,所以無法通過JavaScript常規操控DOM的方式來修改或控制,不過JavaScript身為一個神通廣大的編程語言,仍然是有方法可以辦到的。

          讀取偽元素屬性

          一般來說使用JavaScript讀取某個元素DOM里的屬性不難,但相對來說要讀取一個不存在網頁里的元素就不容易,如果要讀取偽元素屬性,可以通過getComputedStyle來獲得,getComputedStyle是個可以獲取當前元素「所有的CSS屬性值」,讀取后會返回一個Object CSSStyleDeclaration,而這個屬性是只讀的,無法進行修改。

          使用方法:window.getComputedStyle('元素', '偽元素')

          舉例來說html 放入一個div 以及一個span,待會會用這個span 來顯示div 的::before 屬性。

          <div id="d">我是 div</div>
          <span id="s"></span>
          

          CSS 的部分指定偽元素的content和color。

          #d::before{
           content:'偽元素的content ';
           color:red;
          }
          

          JavaScript使用window.getComputedStyle(d,'::before')獲取div里頭偽元素使用的style,然后顯示在span里面。

          var d=document.getElementById('d');
          var s=document.getElementById('s');
          var b=window.getComputedStyle(d,'::before');
          s.innerHTML=b.content +'<br/>'+b.color;
          

          最后頁面呈現的結果,第一段就是原本的div加上紅色的偽元素文字,下方第一段是content的內容,緊接著是偽元素的顏色屬性。

          修改偽元素屬性

          我們可以讀取屬性值也就一定要嘗試修改,不過修改偽元素的屬性其實比想像中的難,必須通過insertRule這個方法在指定的style里插入「預設的規則」,讓這個規則去影響偽元素的屬性表現。

          用法:style 標簽元素.insertRule(樣式規則, 0)

          舉例來說我們的網頁布局如下,一開始開頭的部分有兩組style,第一組是我們賦予元素的樣式屬性,第二組則是要來定義規則的style,因為要加入規則,所以讓第二組style有一個id。至于html就放入一個div。

          <!DOCTYPE html>
          <html>
          <head>
           <meta charset="utf-8">
           <meta name="viewport" content="width=device-width">
           <title>JS Bin</title>
           <style>
           #d::before{
           content:'偽元素的 content ';
           color:red;
           }
           </style>
           <style id="css"></style>
          </head>
          <body>
           <div id="d">我是div</div>
          </body>
          </html>
          

          在完全沒有編寫JavaScript的狀態,應該會呈現如下圖的樣子:

          JavaScript開聲明一個變量css,通過id獲取style,然后使用在指定一個變量給css.sheet,就可以通過insertRule的方法修改了。需要注意的是,由于規則加入時會放在整串style的開頭(第二個值預設0 ),所以純粹使用一個#d是無法覆蓋原本的屬性( CSS權重問題),所以這邊使用#d#d兩次,就可以在權重上壓過原本的屬性。(當然如果要用!important也是可以)

          var css=document.getElementById('css');
          var d=document.getElementById('d');
          var c=css.sheet;
          c.insertRule("#d#d::before{content:'我是修改的 content ';}", 0);
          c.insertRule("#d#d::before{color:blue;}", 0);
          

          如此一來,呈現出來的效果就是通過JavaScript修改的。

          修改偽元素content

          我們知道::before和::after的content可以通過attr獲取父元素的屬性,因此通過改變這個屬性,就能間接連帶改變content的內容,舉例來說有個div,我們指定它的data-text="我是預設文字",然后放兩個按鈕,期望點選不同的按鈕,會更換content不同的內容。

          <button id="b1">顯示 ABC</button>
          <button id="b2">顯示 123</button>
          <div data-text="我是預設文字">我是 div</div>
          

          接著設定CSS,關鍵在使用content的attr,讓偽元素直接顯示父元素屬性的內容。

          button{
           font-size:16px;
          }
          div{
           margin:10px;
           font-size:20px;
          }
          div::before{
           content: attr(data-text) ',';
          }
          

          最后就是JavaScript的部分,通過setAttribute更改div的屬性,就會看到content的內容修改了。

          var b1=document.getElementById('b1');
          var b2=document.getElementById('b2');
          var d=document.querySelector('div');
          b1.addEventListener('click',function(){
           d.setAttribute('data-text','ABC');
          });
          b2.addEventListener('click',function(){
           d.setAttribute('data-text','123');
          });
          

          雖然說我們可以通過JavaScript 來操控偽元素,但偽元素終究不是真正的網頁元素,也因此操作起來也不如基本操作網頁元素DOM 來的簡便,所以如果可以,還是盡量用正常的操控模式吧。

          文章來源:https://www.oxxostudio.tw/articles/201706/pseudo-element-3.html

          https://www.oxxostudio.tw/articles/201706/pseudo-element-4.html

          原文作者:oxxostudio

          由于網頁為繁體內容,術語描述和話術與我們有差異的問題,筆者在保證不改變原意的基礎上做了調整,把上述兩篇文章合成了一篇,并在此基礎上進行了錯誤校正,如發現問題,歡迎你的指正

          小結

          關于偽元素的系列文章就介紹到這里,如果你喜歡此系列文章,麻煩各位點贊和轉發,謝謝啦。關于偽元素的用法,雖然說大部分的時候用不太到,但某些時候也不失為強化網頁效果、或是優化網頁結構的好方法。

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>登錄頁面</title>
              /*總體的樣式*/
              <style>
              	/*盒子樣式*/
                  #box{
                      width: 350px; //寬
                      height: 450px; //高
                      border: 1px solid black; //邊框
                      border-radius: 10px; //邊框弧度
                      font-family: 黑體; //字體
                      letter-spacing:8px; //段間距
                      word-spacing: 10px; //字間距
                      line-height: 40px; //行高
                      font-size: 18px; //字大小
                      padding: 20px; //內邊框
                  }
                  /*給'注冊'賦予樣式*/
                  .register{
                      width:280px ; //寬
                      height: 50px; //高
                      background-color: skyblue; //背景顏色
                      border-radius: 10px; //邊框弧度
          
                  }
                  /*將所有邊框都改變*/
                  *{
                      border-radius: 5px; 邊框弧度
                  }
                  /*使用class選擇器,賦予number寬高和邊框*/
                  .number{
                      width: 185px; //寬
                      height: 27px; //高
                      border-width: 1px; //邊框寬度
          
                  }
                  /*id選擇器*/
                  #two{
                      width: 55px; //寬
                      border-width: 1px; 邊框寬度
                  }
                  /*id選擇器*/
                  #phone{
                      width: 103px; //寬
                  }
                  /*class 選擇器*/
                  .boxs{
                      zoom: 75%; //清除浮動
                      color: darkgray; //顏色
                  }
                  /*class選擇器*/
                  .box_a{
                      width: 50px; //寬
                      height: 50px; //高
                      background-image: url("../image/04.jpg "); //背景圖片
                      background-repeat: no-repeat; // 是否平鋪
                      background-size: 50px 25px; //背景尺寸
                      position: relative; //定位 相對定位
                      left: 310px; //定位后左移
                      bottom: 32px; //定位后下移
          
                  }
              </style>
          </head>
          <body>
          <div id="box">
              <h1>請注冊</h1>
          <p style="color: darkgray">已有帳號?<a href="https://im.qq.com/index">登錄</a></p>
          <form action="" method="post">
              <label for="name">用戶名</label>
              <input type="text" placeholder="請輸入用戶名" id="name" class="number"> <br>
              <label for="phone">手機號</label>
              <select name="" id="two" class="number">
              <optgroup>
                  <option style="" class="">+86</option>
              </optgroup>
              </select>
              <input type="text" placeholder="請輸入手機號" id="phone" class="number"> <br>
              <label for="mima">密?碼</label>
              <input type="password" placeholder="請輸入密碼" id="mima" class="number"> <br>
              <label for="mima">驗證碼</label>
              <input type="password" placeholder="請輸入驗證碼" id="is" class="number">
              <div class="box_a"></div>
              <div class="boxs">
                  <input type="radio" id="" class="accept">閱讀并接受協議<br>
              </div>
              <input type="submit" value="注冊" class="register" >
          
              </form>
          </div>
          
          
          </body>
          </html>
          在這里插入圖片描述


          主站蜘蛛池模板: 一区二区三区伦理高清| 无码人妻精品一区二区蜜桃网站| 无码一区二区三区爆白浆| 国产91一区二区在线播放不卡| 亚洲一区二区成人| 精品无码av一区二区三区| 国产精品一区二区四区| 久久精品道一区二区三区| 午夜一区二区在线观看| 色狠狠色狠狠综合一区| 3d动漫精品一区视频在线观看| 三上悠亚亚洲一区高清| 一区二区三区日本电影| 精品无码国产一区二区三区麻豆| 久久久久人妻一区精品色| 国99精品无码一区二区三区| 国产精华液一区二区区别大吗| 国产在线精品一区在线观看| 日韩精品久久一区二区三区| 亚洲AV香蕉一区区二区三区| 日本无卡码一区二区三区| 一区二区精品在线| 人妻无码第一区二区三区| 亚洲国产综合精品中文第一区| 久久人妻av一区二区软件| 无码人妻久久一区二区三区免费| 日本不卡免费新一区二区三区| 自慰无码一区二区三区| 国产伦精品一区二区免费 | 一区二区三区四区国产| 在线视频亚洲一区| 无码精品人妻一区二区三区AV| 国产福利一区二区| 影院无码人妻精品一区二区| 一区二区三区在线免费| 中文无码精品一区二区三区| 无码精品国产一区二区三区免费 | 无码一区二区三区免费视频| 国精产品一区一区三区MBA下载 | 香蕉免费一区二区三区| 亚洲一区无码中文字幕乱码|