#8.8.16總結# 困難：關係選擇符

1.什麼是CSS?

CSS(Cascading Style Sheets):層疊樣式表,一種網頁表現與內容分離的樣式設計語言。

 

2. CSS能做什麼？

a.一些動畫效果

b.頁面佈局

c.控制整個網站的主題

 

3. CSS語法結構？

4. 如何引入CSS？

 a.內聯式 直接把CSS樣式程式碼寫在HTML程式碼裡面

<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="color:#F00;"</span><span style="color: #0000ff;">></span>这里文字是红色<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

b.嵌入式 把CSS樣式程式碼寫在標籤之間,一般情況下嵌入式css樣式寫在 之間

<span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
span</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
      color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">red</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
       <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>

c.外部式 css樣式，寫在單獨的一個文件中

<span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="appearance.css"</span><span style="color: #ff0000;"> rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text/css"</span> <span style="color: #0000ff;">/></span>

 

5. CSS優先權

 a.權值一樣 就近原則（離被設定元素越近優先等級越高）

優先權：內聯式 > 嵌入式> 外部式(前提:的樣式。

b.權值不一樣

• A.  內嵌樣式表的權值最高 1000
• B.  ID 選擇器的權值為 100
• C.  Class 類別選擇器的權值為 10
• D.  HTML 標籤選擇器的權值為 1

CSS 優先法則：

A  選擇器都有權值，權值越大越優先

B  當權值相等時，後出現的樣式表設定優於先出現的樣式表設定

C  創作者的規則高於瀏覽者：即網頁編寫者設定的CSS 樣式的優先權高於瀏覽器所設定的樣式

D  繼承的CSS 樣式不如後來​​指定的CSS 樣式

E  在同一組屬性設定中標有「!important」規則的優先順序最大

6. CSS註解

 

a.單行註解程式碼  //...

<span style="color: #800000;">//我是一个萌萌哒小男孩！</span>

b.多行註解程式碼 /*...*/

<span style="color: #008000;">/*</span><span style="color: #008000;">我是一个萌萌哒
小男孩！
嘿嘿嘿~</span><span style="color: #008000;">*/</span>

 

7. 選擇符

a. 通配選擇符

通配符使用星號*表示，意思是「所有的」。

例如：* { color : red; } 這裡就把所有元素的字體設定為紅色。

b. 元素選擇符

如果要設定 HTML 的樣式，選擇器通常是某個 HTML 元素，例如 p、h1、em、a，甚至可以是 html 本身

c. 群組選擇符

通常在CSS樣式中有好幾個地方需要使用到相同的設定時，一個一個分開寫是一件累人的工作，重複性太高且顯得冗長，更不好管理。在CSS中，可以把這幾個相同設定的選擇器合併在一起，將同樣的定義應用於多個選擇器，可以將選擇器以逗號分隔的方式並為群組。例如：p,div,a{color:red;}

d. 關係選擇符

A. DIV P  

元素中所有

元素

B. DIV>P  

元素中所有直接子元素

C.DIV+P   所有位于

元素后的第一个

元素

D.DIV~P    

元素的所有相邻兄弟元素

举例：

A.DIV P

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>关系选择符<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
        div p</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">#FFFF00</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是第一段<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是第二段<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是第三段<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是第四段<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是第五段<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是第六段<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

 

 

 

 

 

 

 

 

 

B.DIV>P

  <span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
        div>p</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">#FFFF00</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>

C.DIV+P

<span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
        div+p</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">#FFFF00</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>

D.DIV~P

<span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
        div~p</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">#FFFF00</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>

 

 

相關標籤：

#8.8.16总结# 难点：关系选择符

來源：php.cn

上一篇：用css 製作三角 下一篇：display:table- cell屬性的練習

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章

• 什麼是 NullPointerException，如何修復它？
  2024-10-22 09:46:29
• 從新手到程式設計師：您的旅程從 C 基礎知識開始
  2024-10-13 13:53:41
• 使用 PHP 解鎖 Web 開發：初學者指南
  2024-10-12 12:15:51
• 揭秘 C：為新程式設計師提供一條清晰簡單的道路
  2024-10-11 22:47:31
• 釋放您的編碼潛力：絕對初學者的 C 編程
  2024-10-11 19:36:51
• 釋放你內心的程式設計師：C 絕對初學者
  2024-10-11 15:50:41
• 使用 C 自動化您的生活：適合初學者的腳本和工具
  2024-10-11 15:07:41
• PHP 變得簡單：Web 開發的第一步
  2024-10-11 14:21:21
• 使用 Python 建立任何東西：釋放創造力的初學者指南
  2024-10-11 12:59:11
• 編碼的關鍵：為初學者釋放 Python 的力量
  2024-10-11 12:17:31

最新問題

function_exists()無法判定自訂函數 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...

來自於 2024-04-29 11:01:01

0

3

2432

google 瀏覽器 手機版顯示的怎麼實現 老師您好，google 瀏覽器怎麼變成手機版樣式的？

來自於 2024-04-23 00:22:19

0

11

2562

子窗口操作父窗口，輸出沒反應 前兩句可執行，最後一句沒辦法應

來自於 2024-04-19 15:37:47

0

1

2166

父視窗沒有輸出 document.onclick = function(){ window.opener.document.write('我是子視窗的輸出');                  ...

來自於 2024-04-18 23:52:34

0

1

2047

關於CSS心智圖的課件在哪？ 課件

來自於 2024-04-16 10:10:18

0

0

2146

相關專題

更多>

• mdf檔案如何匯入資料庫
• IE瀏覽器自動跳轉EDGE如何恢復
• 手機加密軟體
• win10 taskmgr.exe檔應用程式錯誤解決方法
• BatteryMon
• u盤在電腦上讀不出來怎麼辦
• 無線適配器或存取點有問題解決方法
• 電腦虛擬記憶體怎麼設定

熱門推薦

• url是什麼意思？
• DOM是什麼意思
• 如何改變圖片大小
• HTML中如何將字型加粗
• html圖片大小如何設定

熱門教學

更多>

相關教學

熱門推薦

最新課程

• 
  最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)

  1427095
• 
  php入門教程之一週學會PHP

  4276948
• 
  JAVA 初級入門影片教學

  2574973
• 
  小甲魚零基礎入門學習Python影片教學

  509921
• 
  PHP 零基礎入門教學

  866822

• 
  最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)

  1427095次學習
• 
  JAVA 初級入門影片教學

  2574973次學習
• 
  小甲魚零基礎入門學習Python影片教學

  509921次學習
• 
  Web前端開發極速入門

  216226次學習
• 
  零基礎精通 PS 影片教學

  898466次學習

• 
  【web前端】Node.js快速入門

  8171次學習
• 
  國外Web開發全端課程全集

  6482次學習
• 
  Go語言實戰之 GraphQL

  5381次學習
• 
  550W粉絲大佬手把手從零學JavaScript

  737次學習
• 
  python大神Mosh，零基礎小白6小時完全入門

  27383次學習

最新下載

更多>

網站特效

網站源碼

網站素材

前端模板

• [表單按鈕] jQuery企業留言表單聯絡程式碼
• [播放器特效] HTML5 MP3音樂盒播放特效
• [選單導航] HTML5酷炫粒子動畫導覽選單特效
• [表單按鈕] jQuery可視化表單拖曳編輯程式碼
• [播放器特效] VUE.JS仿酷狗音樂播放器代碼
• [html5特效] 經典html5推箱子小遊戲
• [圖片特效] jQuery滾動添加或減少圖片特效
• [相簿特效] CSS3個人相簿封面懸停放大特效

• [前端模板] 家居裝潢清潔維修服務公司網站模板
• [前端模板] 清新配色個人求職履歷引導頁模板
• [前端模板] 設計師創意求職履歷網頁模板
• [前端模板] 現代工程建築公司網站模板
• [前端模板] 教育服務機構響應式HTML5模板
• [前端模板] 網上電子書店商城網站模板
• [前端模板] IT技術解決互聯網公司網站模板
• [前端模板] 紫色風格外匯交易服務網站模板

• [PNG素材] 可愛的夏天元素向量素材(EPS+PNG)
• [PNG素材] 四個紅色的 2023 畢業徽章的向量素材(AI+EPS+PNG)
• [banner圖] 唱歌的小鳥和裝滿花朵的推車設計春天banner向量素材(AI+EPS)
• [PNG素材] 金色的畢業帽向量素材(EPS+PNG)
• [PNG素材] 黑白風格的山脈圖示向量素材(EPS+PNG)
• [PNG素材] 不同顏色披風和不同姿勢的超級英雄剪影向量素材(EPS+PNG)
• [banner圖] 扁平風格的植樹節banner向量素材(AI+EPS)
• [PNG素材] 九種漫畫風格的爆炸聊天氣泡向量素材(EPS+PNG)

• [前端模板] 家居裝潢清潔維修服務公司網站模板
• [前端模板] 清新配色個人求職履歷引導頁模板
• [前端模板] 設計師創意求職履歷網頁模板
• [前端模板] 現代工程建築公司網站模板
• [前端模板] 教育服務機構響應式HTML5模板
• [前端模板] 網上電子書店商城網站模板
• [前端模板] IT技術解決互聯網公司網站模板
• [前端模板] 紫色風格外匯交易服務網站模板

公益線上PHP培訓，幫助PHP學習者快速成長！

關於我們 免責聲明 Sitemap

© php.cn All rights reserved