第二天 URL、樣式、CSS、DOM、選擇器

2018-10-16

URL相對(duì)路徑

https://cdn2.jianshu.io/assets/web/icon_nocontent-00c423de394b9184d467f2f2a7284b54.png
https://cdn2.jianshu.io表示服務(wù)器地址
assets/web/icon_nocontent-00c423de394b9184d467f2f2a7284b54.png表示路徑

URL錯(cuò)誤寫法

1、帶本地地址 ;2、帶IP地址 ;

添加樣式

在head中添加樣式
<style>
.poem
{
color:#029323;
font-family: "微軟雅黑";
font-size: 30;
}
</style>
使用時(shí)添加樣式:<h1 class="poem">“假死騙保案”曝光</h1>
樣式具體信息科參考W3School

檢查樣式

使用Google

常用樣式

background-color: #FF0;
padding: 10PX;
margin: 10px 10px auto 10px;
border-bottom: 1px solid #000;
border-radius: 4px;
text-align: center;

樣式單CSS

添加CSS文件 ,內(nèi)容為樣式
.poem
{
color:#029323;
font-family: "微軟雅黑";
font-size: 30;
}
在使用文件中使用LINK調(diào)用<link rel="stylesheet" href="css/new_file.css" />
然后正常使用或使用<p style="font-family: serif;">10月16日</p>臨時(shí)使用樣式

DOM文檔結(jié)構(gòu)模型

body內(nèi)全部標(biāo)簽的樹形結(jié)構(gòu)

類選擇器

<link rel="stylesheet" href="css/new_file.css" />
<style>
.a{background-color: red;}
</style>
調(diào)用<h1 class="poem a">“假死騙保案”</h1>,樣式優(yōu)先級(jí)為定義順序

標(biāo)簽選擇器

<style>
button//所有button都適用
{
color: blue;
background-color: red;
}
button.set//調(diào)用樣式時(shí)適用
{
font-size: 30px;
}
</style>
<button class="set">發(fā)送</button>
標(biāo)簽選擇器不再贅述。

ID選擇器

<style>
button
{
color: blue;
background-color: red;
font-size: 30px;
}
()#ok
//調(diào)用ID時(shí)適用
{
font-size: 20px;
}
</style>
<button style="color: yellow;" id="ok">發(fā)送</button>
優(yōu)先級(jí):臨時(shí)樣式>id>button

偽類選擇器

不同狀態(tài)
鼠標(biāo)移動(dòng)hover
聚焦focus
<style>
button
{
color: blue;
background-color: white;
font-size: 30px;
}
button:hover
{
border-color: red;
}
button:focus
{
border-color: blue;
}
</style>

子選擇器

這個(gè)大家可以自己去試試哦,以后還是都以圖片形式上傳吧,不然也不好描述。

今天的學(xué)習(xí)也就到此結(jié)束啦。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1、垂直對(duì)齊 如果你用CSS,則你會(huì)有困惑:我該怎么垂直對(duì)齊容器中的元素?現(xiàn)在,利用CSS3的Transform,...
    kiddings閱讀 3,312評(píng)論 0 11
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 28,884評(píng)論 1 45
  • 一、CSS入門 1、css選擇器 選擇器的作用是“用于確定(選定)要進(jìn)行樣式設(shè)定的標(biāo)簽(元素)”。 有若干種形式的...
    寵辱不驚丶?xì)q月靜好閱讀 1,746評(píng)論 0 6
  • 在學(xué)習(xí)weex的過程中看到了常用標(biāo)簽相關(guān)的內(nèi)容,為了自己以后能夠快速查閱特整理出此文檔。 a 簡介組件定義了指向某...
    TyroneTang閱讀 4,848評(píng)論 1 3
  • 撥開迷霧 有光影樓閣 鷗飛魚掠 心終 歸于靜謐 原來 來這里 只為與你相遇 只為找回兒時(shí)的夢想
    小寒輕閱讀 166評(píng)論 0 0

友情鏈接更多精彩內(nèi)容