CSS關(guān)于節(jié)點(diǎn)

id 選擇器

<style>
#para1
{
    text-align:center;
    color:red;
} 
</style>

<p id="para1">Hello World!</p>

id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。

HTML元素以id屬性來設(shè)置id選擇器,CSS 中 id 選擇器以 "#" 來定義。

<style>
p.center
{
    text-align:center;
}

<h1 class="center">這個(gè)標(biāo)題不受影響</h1>
<p class="center">這個(gè)段落居中對齊。</p> 

.center
{
    text-align:center;
}
<h1 class="center">標(biāo)題居中</h1>
<p class="center">段落居中谋竖。</p> 

body
{
    background-image:url('gradient2.png');
    background-repeat:repeat-x;
        圖片水平平鋪

        body
    {
        background-image:url('img_tree.png');
        background-repeat:no-repeat;
    }
    只顯示一次，不平鋪

  background:#ffffff url('img_tree.png') no-repeat right top;
  margin-right:200px;
  右邊空出200,圖片在右部，上部顯示
}
</style>

h1 {text-align:center;}  文本居中
p.date {text-align:right;}  文本從右部顯示
p.main {text-align:justify;} 文本隨著瀏覽器大小而改變

圖片跟文本的對齊方式
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}

設(shè)置元素的文本方向
div.ex1 {direction:rtl;}
<div>一些文本进苍。 默認(rèn)書寫方向</div>
<div class="ex1">一些文本。從右到左的書寫方向鸭叙。</div>

a:link {color:#000000;}      /* 未訪問鏈接*/
a:visited {color:#00FF00;}  /* 已訪問鏈接 */
a:hover {color:#FF00FF;}  /* 鼠標(biāo)移動(dòng)到鏈接上 */
a:active {color:#0000FF;}  /* 鼠標(biāo)點(diǎn)擊時(shí) */

text-decoration 屬性主要用于刪除鏈接中的下劃線：
a:link {text-decoration:none;}    /* unvisited link */
a:visited {text-decoration:none;} /* visited link */
a:hover {text-decoration:underline;}   /* mouse over link */
a:active {text-decoration:underline;}  /* selected link */

css中的display是設(shè)置元素顯示的方式,block是一塊狀元素的方式顯示觉啊，inline是以[內(nèi)聯(lián)元素](https://www.baidu.com/s?wd=%E5%86%85%E8%81%94%E5%85%83%E7%B4%A0&tn=SE_PcZhidaonwhc_ngpagmjz&rsv_dl=gh_pc_zhidao)的方式顯示，none是不不顯示 沈贝；塊狀元素會(huì)單獨(dú)占據(jù)一樣杠人，其他元素跟他在同一行的會(huì)被迫換行，擠到下一行那里去宋下，inline則不會(huì)這樣
padding:100px;內(nèi)邊距

列表前綴樣式
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
list-style-image: url('sqpurple.gif');放一個(gè)圖片  ·

table
  {
  border-collapse:collapse;
  }
合并邊框

caption {caption-side:bottom;}
<caption>Table 1.1 Customers</caption>
表格標(biāo)題
image.png
image.png
image.png
image.png

image.png
image.png
p.ex1 {margin-top:2cm;}
<p class="ex1">一個(gè)2厘米上邊距的段落嗡善。</p>

display屬性設(shè)置一個(gè)元素應(yīng)如何顯示，visibility屬性指定一個(gè)元素應(yīng)可見還是隱藏

li {display:inline;}
span {display:block;}

設(shè)置圖像的 z-index
z-index 屬性設(shè)置元素的堆疊順序杨凑。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面滤奈。

注釋：元素可擁有負(fù)的 z-index 屬性值。

注釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）撩满！

說明
該屬性設(shè)置一個(gè)定位元素沿 z 軸的位置蜒程，z 軸定義為垂直延伸到顯示區(qū)的軸。如果為正數(shù)伺帘，則離用戶更近昭躺，為負(fù)數(shù)則表示離用戶更遠(yuǎn)。


image.png

image.png
image.png

j

position 屬性規(guī)定元素的定位類型伪嫁。
HTML 元素的默認(rèn)值领炫，即沒有定位，遵循正常的文檔流對象张咳。
靜態(tài)定位的元素不會(huì)受到 top, bottom, left, right影響帝洪。
fixed 定位
元素的位置相對于瀏覽器窗口是固定位置。

即使窗口是滾動(dòng)的它也不會(huì)移動(dòng)：

relative 定位
相對定位元素的定位是相對其正常位置脚猾。


image.png

移動(dòng)相對定位元素葱峡，但它原本所占的空間不會(huì)改變。


image.png

absolute 定位
絕對定位的元素的位置相對于最近的已定位父元素龙助，如果元素沒有已定位的父元素砰奕，那么它的位置相對于<html>:


image.png

sticky 定位
sticky 英文字面意思是粘，粘貼，所以可以把它稱之為粘性定位军援。

position: sticky; 基于用戶的滾動(dòng)位置來定位仅淑。

粘性定位的元素是依賴于用戶的滾動(dòng)，在 position:relative 與 position:fixed 定位之間切換胸哥。

它的行為就像 position:relative; 而當(dāng)頁面滾動(dòng)超出目標(biāo)區(qū)域時(shí)涯竟，它的表現(xiàn)就像 position:fixed;，它會(huì)固定在目標(biāo)位置烘嘱。


image.png

box-sizing 屬性允許您以特定的方式定義匹配某個(gè)區(qū)域的特定元素昆禽。

例如，假如您需要并排放置兩個(gè)帶邊框的框蝇庭，可通過將 box-sizing 設(shè)置為 "border-box"。這可令瀏覽器呈現(xiàn)出帶有指定寬度和高度的框捡硅，并把邊框和內(nèi)邊距放入框中哮内。

loat 屬性定義元素在哪個(gè)方向浮動(dòng)。以往這個(gè)屬性總應(yīng)用于圖像壮韭，使文本圍繞在圖像周圍北发，不過在 CSS 中，任何元素都可以浮動(dòng)喷屋。浮動(dòng)元素會(huì)生成一個(gè)塊級框琳拨，而不論它本身是何種元素。

如果浮動(dòng)非替換元素屯曹，則要指定一個(gè)明確的寬度狱庇；否則，它們會(huì)盡可能地窄恶耽。

line-height 屬性設(shè)置行間的距離（行高）密任。

匹配所有<p> 元素中的第一個(gè) <i> 元素,用來設(shè)置字體


image.png

設(shè)置輸入框的背景色


image.png

:first-letter 偽元素
"first-letter" 偽元素用于向文本的首字母設(shè)置特殊樣式：注意： "first-letter" 偽元素只能用于塊級元素


image.png
image.png
image.png
image.png
image.png

float 屬性定義元素在哪個(gè)方向浮動(dòng)。以往這個(gè)屬性總應(yīng)用于圖像偷俭，使文本圍繞在圖像周圍浪讳，不過在 CSS 中，任何元素都可以浮動(dòng)涌萤。浮動(dòng)元素會(huì)生成一個(gè)塊級框淹遵，而不論它本身是何種元素。

<!DOCTYPE html>
<html>
<head>
<title>下拉菜單實(shí)例|菜鳥教程(runoob.com)</title>
<meta charset="utf-8">
<style>
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>
</head>
<body>

<h2>下拉菜單</h2>
<p>鼠標(biāo)移動(dòng)到按鈕上打開下拉菜單负溪。</p>

<div class="dropdown">
  <button class="dropbtn">下拉菜單</button>
  <div class="dropdown-content">
    <a >菜鳥教程 1</a>
    <a >菜鳥教程 2</a>
    <a >菜鳥教程 3</a>
  </div>
</div>

</body>
</html>
image.png
.dropdown-content {
    right: 0;
}
如果你想設(shè)置右浮動(dòng)的下拉菜單內(nèi)容方向是從右到左透揣，而不是從左到右，可以添加以下代碼 right: 0;

<!DOCTYPE html>
<html>
<head>
<title>下拉菜單實(shí)例|菜鳥教程(runoob.com)</title>
<meta charset="utf-8">
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover, .dropbtn {
    background-color: #111;
}

.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">主頁</a></li>
  <li><a href="#news">新聞</a></li>
  <div class="dropdown">
    <a href="#" class="dropbtn">下拉菜單</a>
    <div class="dropdown-content">
      <a href="#">鏈接 1</a>
      <a href="#">鏈接 2</a>
      <a href="#">鏈接 3</a>
    </div>
  </div>
</ul>

<h3>導(dǎo)航欄上的下拉菜單</h3>
<p>鼠標(biāo)移動(dòng)到 "下拉菜單" 鏈接先顯示下拉菜單笙以。</p>

</body>
</html>
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
?
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
    
    /* 淡入 - 1秒內(nèi)從 0% 到 100% 顯示: */
    opacity: 0;
    transition: opacity 1s;
}
?
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 0.5;
}
</style>
<body style="text-align:center;">
?
<h2>提示工具淡入效果</h2>
<p>鼠標(biāo)移動(dòng)到以下元素淌实，提示工具會(huì)再一秒內(nèi)從 0% 到 100% 完全顯示。</p>
?
<div class="tooltip">鼠標(biāo)移動(dòng)到我這
  <span class="tooltiptext">提示文本</span>
</div>
?
</body>
</html>

淡入效果
我們可以使用 CSS3 transition 屬性及 opacity 屬性來實(shí)現(xiàn)提示工具的淡入效果:

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市拆祈，隨后出現(xiàn)的幾起案子恨闪，更是在濱河造成了極大的恐慌，老刑警劉巖放坏，帶你破解...
    沈念sama閱讀 207,113評論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件咙咽，死亡現(xiàn)場離奇詭異，居然都是意外死亡淤年，警方通過查閱死者的電腦和手機(jī)钧敞，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評論 2贊 381
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來麸粮，“玉大人溉苛，你說我怎么就攤上這事∨澹” “怎么了愚战？”我有些...
    開封第一講書人閱讀 153,340評論 0贊 344
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長齐遵。 經(jīng)常有香客問我寂玲，道長，這世上最難降的妖魔是什么梗摇？ 我笑而不...
    開封第一講書人閱讀 55,449評論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任拓哟，我火速辦了婚禮，結(jié)果婚禮上伶授，老公的妹妹穿的比我還像新娘断序。我一直安慰自己，他們只是感情好谎砾，可當(dāng)我...
    茶點(diǎn)故事閱讀 64,445評論 5贊 374
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布逢倍。 她就那樣靜靜地躺著，像睡著了一般景图。 火紅的嫁衣襯著肌膚如雪较雕。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 49,166評論 1贊 284
  • 城市分裂傳說
    那天挚币，我揣著相機(jī)與錄音亮蒋，去河邊找鬼。 笑死妆毕，一個(gè)胖子當(dāng)著我的面吹牛慎玖，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播笛粘，決...
    沈念sama閱讀 38,442評論 3贊 401
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼趁怔，長吁一口氣：“原來是場噩夢啊……” “哼湿硝！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起润努，我...
    開封第一講書人閱讀 37,105評論 0贊 261
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤关斜，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后铺浇，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體痢畜，經(jīng)...
    沈念sama閱讀 43,601評論 1贊 300
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,066評論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年鳍侣，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了丁稀。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,161評論 1贊 334
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡倚聚，死狀恐怖线衫，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情秉沼，我是刑警寧澤桶雀，帶...
    沈念sama閱讀 33,792評論 4贊 323
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站唬复，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏全肮。R本人自食惡果不足惜敞咧，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,351評論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望辜腺。 院中可真熱鬧休建，春花似錦、人聲如沸评疗。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0贊 19
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽百匆。三九已至砌些，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間加匈，已是汗流浹背存璃。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1贊 261
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留雕拼，地道東北人纵东。 一個(gè)月前我還...
    沈念sama閱讀 45,618評論 2贊 355
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像啥寇，于是被迫代替她去往敵國和親偎球。 傳聞我的和親對象是個(gè)殘疾皇子洒扎，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,916評論 2贊 344