亚洲精品亚洲人成在线观看麻豆,在线欧美视频一区,亚洲国产精品一区二区动图,色综合久久丁香婷婷

              當(dāng)前位置:首頁 > IT技術(shù) > Web編程 > 正文

              測試開發(fā)之前端篇-CSS層疊式樣式表
              2021-09-22 11:33:55

              CSS是層疊樣式表(Cascading Style Sheets)的縮寫,用于描述如何在屏幕、紙張或其他媒體上顯示HTML元素,包括了定義網(wǎng)頁及其元素的布局、風(fēng)格、大小、位置和顏色等屬性。

              CSS的語法表示為:

              以下是一個簡單的例子,設(shè)置了網(wǎng)頁主體(body)的背景色、標(biāo)題(h1)的顏色和對齊方式、段落(p)的字體和大小。

              body {
                background-color: lightblue;
              }
              h1 {
                color: white;
                text-align: center;
              }
              p {
                font-family: verdana;
                font-size: 20px;
              }

              網(wǎng)頁中有3種引用樣式表的方法,分別為:

              1. 在head中使用link元素,導(dǎo)入外部樣式表文件。


               
              
              <head>
                <link rel="stylesheet" type="text/css" href="mystyle.css">
              </head>在網(wǎng)頁head中使用style元素,定義樣式表內(nèi)容。

              2. 在網(wǎng)頁head中使用style元素,定義樣式表內(nèi)容。


               
              
              <head>
              <style>
                body {
                  background-color: linen;
                }
                h1 {
                  color: maroon;
                  margin-left: 40px;
                } 
              </style>
              </head>
              <body>
                <h1>This is a heading</h1>
                <p>This is a paragraph.</p>
              </body>

              3. 使用style屬性,直接將樣式內(nèi)容添加到元素中。


               
              
              <body>
                <h1 style="color:blue;text-align:center;">This is a heading</h1>
                <p style="color:red;">This is a paragraph.</p>
              </body>

              我們可以使用不同的CSS選擇器,給元素設(shè)置樣式,如下html中,可以使用#desc來選中id為desc的div元素,使用.btn選擇所有包含類btn的提交按鈕。

              <head>
              <style>
                #desc {
                  background-color: blue;
                }
                .btn {
                  font-size: 20px;
                } 
              </style>
              </head>
              <body>
                <div id="desc">This is a desc</div>
                <button class="btn">提交</button>
              </body>

              在Selenium自動化測試腳本中,通常使用CSS選擇器,來定位網(wǎng)頁中的元素。如以下代碼,查找class為btn的按鈕,并進(jìn)行點擊。

              driver.find_element_by_css_selector('.btn').click()

              建議大家閱讀一下CSS屬性手冊CSS選擇器手冊,以加深對層疊式樣式表的了解。這部分內(nèi)容不需要大家記憶,在以后的自動化測試工作中,作為手冊進(jìn)行查找即可。

              本文摘自 :https://www.cnblogs.com/

              開通會員,享受整站包年服務(wù)立即開通 >