Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 中文字幕永久在线,91热视频在线,亚洲国产高清美女在线观看 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營(yíng)銷(xiāo)服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費(fèi)咨詢(xún)熱線(xiàn)：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          css初識(shí)
          
        
           
          
	
	
          
		
                        
          、初識(shí)CSS3
          本章目標(biāo)：
          • 會(huì)使用行內(nèi)樣式、內(nèi)部樣式表和外部樣式表三種方式為HTML5文檔添加CSS樣式
          • 會(huì)使用CSS3的基本選擇器設(shè)置字體大小和顏色
          • 會(huì)使用復(fù)合選擇器為特定的網(wǎng)頁(yè)元素添加CSS樣式
          • 會(huì)使用CSS3高級(jí)選擇器為網(wǎng)頁(yè)元素添加CSS樣式
          1.1、什么是CSS
          Cascading Style Sheet 級(jí)聯(lián)樣式表。 表現(xiàn)HTML或XHTML文件樣式的計(jì)算機(jī)語(yǔ)言。 包括對(duì)字體、顏色、邊距、高度、寬度、背景圖片、網(wǎng)頁(yè)定位等設(shè)定
          在這里插入圖片描述
          說(shuō)明：
          • 首先介紹什么是CSS
          • 然后對(duì)比講解使用CSS和沒(méi)有使用CSS的兩個(gè)相同的HTML代碼頁(yè)面顯示效果，說(shuō)明CSS的重要性
          • 最后根據(jù)圖說(shuō)明CSS在網(wǎng)頁(yè)中的應(yīng)用
          1.2、CSS的發(fā)展史
          在這里插入圖片描述

          CSS1.0 讀者可以從其他地方去使用自己喜歡的設(shè)計(jì)樣式去繼承性地使用樣式；
          CSS2.0 融入了DIV+CSS的概念，提出了HTML結(jié)構(gòu)與CSS樣式表的分離
          CSS2.1 融入了更多高級(jí)的用法，如浮動(dòng)，定位等。
          CSS3.0 它包括了CSS2.1下的所有功能，是目前最新的版本，它向著模塊化的趨勢(shì)發(fā)展，又加了很多使用的新技術(shù)，如字體、多背景、圓角、陰影、動(dòng)畫(huà)等高級(jí)屬性，但是它需要高級(jí)瀏覽器的支持。
          由于現(xiàn)在IE 6、IE 7使用比例已經(jīng)很少，對(duì)市場(chǎng)企業(yè)進(jìn)行調(diào)研發(fā)現(xiàn)使用CSS3的頻率大幅增加，學(xué)習(xí)CSS3已經(jīng)成為一種趨勢(shì)，因此本書(shū)會(huì)講解最新的CSS3版本
          本課程中主要講解css2.1和css3
          CSS的優(yōu)勢(shì)

          • 內(nèi)容與表現(xiàn)分離
          • 網(wǎng)頁(yè)的表現(xiàn)統(tǒng)一，容易修改
          • 豐富的樣式，使得頁(yè)面布局更加靈活
          • 減少網(wǎng)頁(yè)的代碼量，增加網(wǎng)頁(yè)的瀏覽速度，節(jié)省網(wǎng)絡(luò)帶寬
          • 運(yùn)用獨(dú)立于頁(yè)面的CSS，有利于網(wǎng)頁(yè)被搜索引擎收錄
          1.3、CSS的基本語(yǔ)法
          • 首先講解CSS的基本語(yǔ)法結(jié)構(gòu)，由選擇器和聲明構(gòu)成
          • 然后對(duì)照具體的樣式詳細(xì)講解語(yǔ)法，強(qiáng)調(diào)聲明必須在 { } 中
          • 最后說(shuō)明基本W(wǎng)3C的規(guī)范，每條聲明后的 ; 都要寫(xiě)上
          在這里插入圖片描述
          Style標(biāo)簽
          • 講解CSS樣式如何在HTML中應(yīng)用，引入style標(biāo)簽的應(yīng)用
          • 講解style標(biāo)簽，說(shuō)明type=“text/css的用法
          • 說(shuō)明style標(biāo)簽在HTML文檔中的位置，在與之間
          在這里插入圖片描述
          1.4、引入CSS方式
          • 行內(nèi)樣式 使用style屬性引入CSS樣式 <h1 style="color:red;">style屬性的應(yīng)用</h1> <p style="font-size:14px; color:green;">直接在HTML標(biāo)簽中設(shè)置的樣式</p> 使用style屬性設(shè)置CSS樣式僅對(duì)當(dāng)前的HTML標(biāo)簽起作為，并且是寫(xiě)在HTML標(biāo)簽中的 這種方式不能起到內(nèi)容與表現(xiàn)相分離，本質(zhì)上沒(méi)有體現(xiàn)出CSS的優(yōu)勢(shì)，因此不推薦使用。
          • 內(nèi)部樣式表 CSS代碼寫(xiě)在 <head> 的 <style> 標(biāo)簽中 <style> h1{color: green; } </style> 優(yōu)點(diǎn)：方便在同頁(yè)面中修改樣式 缺點(diǎn)：不利于在多頁(yè)面間共享復(fù)用代碼及維護(hù)，對(duì)內(nèi)容與樣式的分離也不夠徹底 引出外部樣式表
          • 外部樣式表 CSS代碼保存在擴(kuò)展名為.css的樣式表中 HTML文件引用擴(kuò)展名為.css的樣式表，有兩種方式
          • 鏈接式（使用的最多,記住這個(gè)就可以了） 使用 標(biāo)簽鏈接外部樣式表，并講解各參數(shù)的含義， 標(biāo)簽必須放在 標(biāo)簽中
          在這里插入圖片描述

          • 導(dǎo)入式 使用@import導(dǎo)入外部樣式表
          在這里插入圖片描述


          鏈接式與導(dǎo)入式的區(qū)別
          1. 標(biāo)簽是屬于XHTML范疇的，@import是屬于CSS2.1中特有的。
          2. 使用 鏈接的CSS是客戶(hù)端瀏覽網(wǎng)頁(yè)時(shí)先將外部CSS文件加載到網(wǎng)頁(yè)當(dāng)中，然后再進(jìn)行編譯顯示，所以這種情況下顯示出來(lái)的網(wǎng)頁(yè)與用戶(hù)預(yù)期的效果一樣，即使網(wǎng)速再慢也一樣的效果。
          3. 使用@import導(dǎo)入的CSS文件，客戶(hù)端在瀏覽網(wǎng)頁(yè)時(shí)是先將HTML結(jié)構(gòu)呈現(xiàn)出來(lái)，再把外部CSS文件加載到網(wǎng)頁(yè)當(dāng)中，當(dāng)然最終的效果也與使用 鏈接文件效果一樣，只是當(dāng)網(wǎng)速較慢時(shí)會(huì)先顯示沒(méi)有CSS統(tǒng)一布局的HTML網(wǎng)頁(yè)，這樣就會(huì)給用戶(hù)很不好的感覺(jué)。這個(gè)也是現(xiàn)在目前大多少網(wǎng)站采用鏈接外部樣式表的主要原因。
          4. 由于@import是屬于CSS2.1中特有的，因此對(duì)于不兼容CSS2.1的瀏覽器來(lái)說(shuō)就是無(wú)效的。
          CSS樣式優(yōu)先級(jí)
          行內(nèi)樣式>內(nèi)部樣式表>外部樣式表
就近原則：越接近標(biāo)簽的樣式優(yōu)先級(jí)越高


          【學(xué)員練習(xí)】 使用標(biāo)題標(biāo)簽和段落標(biāo)簽制作李白的詩(shī)《望廬山瀑布》，詩(shī)正文字體顏色為綠色，字體大小為14p
          在這里插入圖片描述
          1.5、CSS基本選擇器
          • 標(biāo)簽選擇器 HTML標(biāo)簽作為標(biāo)簽選擇器的名稱(chēng) <h1>…<h6>、<p>、<img/>
          在這里插入圖片描述
          • 類(lèi)選擇器 一些特殊的實(shí)現(xiàn)效果，單純使用標(biāo)簽選擇器不能實(shí)現(xiàn)，從而引出類(lèi)選擇器
          在這里插入圖片描述
          • ID選擇器 ID選擇器的名稱(chēng)就是HTML中標(biāo)簽的ID名稱(chēng)，ID全局唯一
          在這里插入圖片描述

          小結(jié)
          • 標(biāo)簽選擇器直接應(yīng)用于HTML標(biāo)簽
          • 類(lèi)選擇器可在頁(yè)面中多次使用
          • ID選擇器在同一個(gè)頁(yè)面中只能使用一次
          基本選擇器的優(yōu)先級(jí)
          ID選擇器>類(lèi)選擇器>標(biāo)簽選擇


          標(biāo)簽選擇器是否也遵循“就近原則”？ 不遵循，無(wú)論是哪種方式引入CSS樣式，一般都遵循ID選擇器 > class類(lèi)選擇器 > 標(biāo)簽選擇器的優(yōu)先級(jí)
          1.6、CSS高級(jí)選擇器
          1、層次選擇器
          在這里插入圖片描述
          • 后代選擇器 body p{ background: red; }
          在這里插入圖片描述
          后代選擇器兩個(gè)選擇符之間必須要以空格隔開(kāi)，中間不能有任何其他的符號(hào)插入
          • 子選擇器 body>p{ background: pink; }
          在這里插入圖片描述

          • 相鄰兄弟選擇器 .active+p { background: green; }
          在這里插入圖片描述

          • 通用兄弟選擇器 .active~p{ background: yellow; }
          添加圖片注釋?zhuān)怀^(guò) 140 字（可選）
          碼規(guī)范
          CSS樣式表是一個(gè)序列通用字符集，傳輸和存儲(chǔ)過(guò)程中，這些字符必須由支持 US-ASCII（例如 UTF-8, ISO 8859-x, SHIFT JIS 等）字符編碼方式編譯
          文檔內(nèi)嵌樣式表編碼
          When a style sheet is embedded in another document, such as in the STYLE element or "style" attribute of HTML, the style sheet shares the character encoding of the whole document.
          當(dāng)樣式出現(xiàn)在其它文檔，如 HTML 的 STYLE 標(biāo)簽或標(biāo)簽屬性 "style"，樣式的編碼由文檔的決定。
          文檔外鏈樣式表編碼
          When a style sheet resides in a separate file, user agents must observe the following priorities when determining a style sheet's character encoding (from highest priority to lowest):
          An HTTP "charset" parameter in a "Content-Type" field (or similar parameters in other protocols)BOM and/or [@charset ]()or other metadata from the linking mechanism (if any)charset of referring style sheet or document (if any)Assume UTF-8
          文檔外鏈樣式表的編碼可以由以下各項(xiàng)按照由高到低的優(yōu)先級(jí)順序決定：
          1. HTTP “Content-Type” 字段參數(shù) “charset”（或其它協(xié)議相似的參數(shù)）
          2. BOM（byte-order mark）和（或）[@charset ]()
          3. Link 中的元數(shù)據(jù)設(shè)置（如果有的話(huà)）
          4. 引用樣式表字符集或文檔編碼（如果有的話(huà)）
          5. 假定為 UTF-8 編碼
          樣式表編碼
          Authors using an [@charset ]() rule must place the rule at the very beginning of the style sheet, preceded by no characters. (If a byte order mark is appropriate for the encoding used, it may precede the [@charset ]() rule.)
          [@charset ]() must be written literally, i.e., the 10 characters '[@charset ]() "' (lowercase, no backslash escapes), followed by the encoding name, followed by '";'.
          • @charset規(guī)則一定要在樣式文件的第一行首個(gè)字符位置開(kāi)始，否則的話(huà)就會(huì)有機(jī)會(huì)讓 BOM 設(shè)置生效（如果有設(shè)置 BOM 的話(huà)）而優(yōu)于 [@charset ]() 作為樣式表的編碼
          • @charset ""; 一定要寫(xiě)上，并且用小寫(xiě)字母，不能出現(xiàn)轉(zhuǎn)義符
          團(tuán)隊(duì)約定
          • 樣式文件必須寫(xiě)上 [@charset ]() 規(guī)則，并且一定要在樣式文件的第一行首個(gè)字符位置開(kāi)始寫(xiě)，編碼名用 “UTF-8”
          • 字符 [@charset ]() ""; 都用小寫(xiě)字母，不能出現(xiàn)轉(zhuǎn)義符，編碼名允許大小混寫(xiě)
          • 考慮到在使用“UTF-8”編碼情況下 BOM 對(duì)代碼的污染和編碼顯示的問(wèn)題，在可控范圍下，堅(jiān)決不使用 BOM。（更多關(guān)于 BOM 可參考 BOM的介紹 和 「帶 BOM 的 UTF-8」和「無(wú) BOM 的 UTF-8」有什么區(qū)別？ ）
          推薦：
          @charset "UTF-8";

.jdc{}
          不推薦：
          /**
 * @desc File Info
 * @author Author Name
 * @date 2015-10-10
 */
 
/* @charset規(guī)則不在文件首行首個(gè)字符開(kāi)始 */
@charset "UTF-8";

.jdc{}
          @CHARSET "UTF-8";
/* @charset規(guī)則沒(méi)有用小寫(xiě) */

.jdc{}
          /* 無(wú)@charset規(guī)則 */
.jdc{}
          更多關(guān)于樣式編碼：CSS style sheet representation
          代碼風(fēng)格
          代碼格式化
          樣式書(shū)寫(xiě)一般有兩種：一種是緊湊格式 (Compact)
          .jdc{ display: block;width: 50px;}
          一種是展開(kāi)格式（Expanded）
          .jdc{
    display: block;
    width: 50px;
}
          團(tuán)隊(duì)約定
          統(tǒng)一使用展開(kāi)格式書(shū)寫(xiě)樣式
          代碼大小寫(xiě)
          樣式選擇器，屬性名，屬性值關(guān)鍵字全部使用小寫(xiě)字母書(shū)寫(xiě)，屬性字符串允許使用大小寫(xiě)。
          /* 推薦 */
.jdc{
    display:block;
}
    
/* 不推薦 */
.JDC{
    DISPLAY:BLOCK;
}
          選擇器
          • 盡量少用通用選擇器 *
          • 不使用 ID 選擇器
          • 不使用無(wú)具體語(yǔ)義定義的標(biāo)簽選擇器
          /* 推薦 */
.jdc {}
.jdc li {}
.jdc li p{}

/* 不推薦 */
*{}
#jdc {}
.jdc div{}
          代碼縮進(jìn)
          統(tǒng)一使用四個(gè)空格進(jìn)行代碼縮進(jìn)，使得各編輯器表現(xiàn)一致（各編輯器有相關(guān)配置）
          .jdc {
    width: 100%;
    height: 100%;
}
          分號(hào)
          每個(gè)屬性聲明末尾都要加分號(hào)；
          .jdc {
    width: 100%;
    height: 100%;
}
          代碼易讀性
          左括號(hào)與類(lèi)名之間一個(gè)空格，冒號(hào)與屬性值之間一個(gè)空格
          推薦：
          .jdc { 
    width: 100%; 
}
          不推薦：
          .jdc{ 
    width:100%;
}
          逗號(hào)分隔的取值，逗號(hào)之后一個(gè)空格
          推薦：
          .jdc {
    box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}
          不推薦：
          .jdc {
    box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}
          為單個(gè)css選擇器或新申明開(kāi)啟新行
          推薦：
          .jdc, 
.jdc_logo, 
.jdc_hd {
    color: #ff0;
}
.nav{
    color: #fff;
}
          不推薦：
          .jdc,jdc_logo,.jdc_hd {
    color: #ff0;
}.nav{
    color: #fff;
}
          顏色值 rgb() rgba() hsl() hsla() rect() 中不需有空格，且取值不要帶有不必要的 0
          推薦：
          .jdc {
    color: rgba(255,255,255,.5);
}
          不推薦：
          .jdc {
    color: rgba( 255, 255, 255, 0.5 );
}
          屬性值十六進(jìn)制數(shù)值能用簡(jiǎn)寫(xiě)的盡量用簡(jiǎn)寫(xiě)
          推薦：
          .jdc {
    color: #fff;
}
          不推薦：
          .jdc {
    color: #ffffff;
}
          不要為 0 指明單位
          推薦：
          .jdc {
    margin: 0 10px;
}
          不推薦：
          .jdc {
    margin: 0px 10px;
}
          屬性值引號(hào)
          css屬性值需要用到引號(hào)時(shí)，統(tǒng)一使用單引號(hào)
          /* 推薦 */
.jdc { 
    font-family: 'Hiragino Sans GB';
}

/* 不推薦 */
.jdc { 
    font-family: "Hiragino Sans GB";
}
          屬性書(shū)寫(xiě)順序
          建議遵循以下順序：
          1. 布局定位屬性：display / position / float / clear / visibility / overflow
          2. 自身屬性：width / height / margin / padding / border / background
          3. 文本屬性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
          4. 其他屬性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient ...
          .jdc {
    display: block;
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}
          mozilla官方屬性順序推薦
          CSS3瀏覽器私有前綴寫(xiě)法
          CSS3 瀏覽器私有前綴在前，標(biāo)準(zhǔn)前綴在后
          .jdc {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}
          更多關(guān)于瀏覽器私有前輟寫(xiě)法：#Vendor-specific extensions
          參考閱讀
          Google Code Guide
          SS（層疊樣式表）是一種用于描述HTML或XML（包括各種XML方言，如SVG或XHTML）文檔的視覺(jué)表現(xiàn)的樣式語(yǔ)言。CSS描述了元素應(yīng)該如何在屏幕、紙張、語(yǔ)音或其他媒體上顯示。本文將深入探討CSS的核心概念和語(yǔ)法，為初學(xué)者和有經(jīng)驗(yàn)的開(kāi)發(fā)者提供一個(gè)參考。
          選擇器
          選擇器是CSS中的基礎(chǔ)概念，它們用于指定我們想要樣式化的HTML元素。
          元素選擇器
          p {
  color: black;
}

          類(lèi)選擇器
          .error {
  color: red;
}

          ID選擇器
          #unique-element {
  color: blue;
}

          屬性選擇器
          input[type="text"] {
  background-color: #f0f0f0;
}

          偽類(lèi)選擇器
          a:hover {
  text-decoration: underline;
}

          組合器
          組合器描述了不同選擇器之間的關(guān)系。
          后代組合器
          article p {
  line-height: 1.6;
}

          子元素組合器
          ul > li {
  list-style-type: square;
}

          相鄰兄弟組合器
          h2 + p {
  margin-top: 0;
}

          通用兄弟組合器
          h2 ~ p {
  color: #333;
}

          偽元素
          偽元素用于樣式化元素的特定部分。
          p::first-line {
  font-weight: bold;
}

          屬性和值
          CSS屬性定義了如何對(duì)元素進(jìn)行樣式化，而值則指定了屬性的外觀或行為。
          尺寸
          width: 100px;
height: 50vh; /* 視口高度的50% */

          顏色
          background-color: #ff0000;
color: rgb(0, 255, 0);
border-color: rgba(0, 0, 255, 0.5);

          文本
          font-family: 'Arial', sans-serif;
text-align: center;
text-decoration: underline;

          邊距和填充
          margin: 10px 5px;
padding: 20px;

          邊框
          border-style: solid;
border-width: 1px;
border-color: #000;

          CSS布局
          Flexbox
          .container {
  display: flex;
  justify-content: space-between;
}

          Grid
          .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

          定位
          .absolute-element {
  position: absolute;
  top: 10px;
  right: 10px;
}

          響應(yīng)式設(shè)計(jì)
          使用媒體查詢(xún)可以創(chuàng)建響應(yīng)不同屏幕尺寸的樣式。
          @media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

          結(jié)論
          CSS是一個(gè)強(qiáng)大的樣式語(yǔ)言，它使得開(kāi)發(fā)者能夠創(chuàng)建精美、響應(yīng)式的網(wǎng)頁(yè)。通過(guò)理解并掌握CSS的選擇器、屬性、布局等核心概念和語(yǔ)法，前端工程師可以有效地設(shè)計(jì)和實(shí)現(xiàn)用戶(hù)界面。隨著CSS3和后續(xù)版本的不斷發(fā)展，CSS的能力也在不斷增強(qiáng)，為前端開(kāi)發(fā)帶來(lái)了更多的可能性。
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
国产麻豆媒一区一区二区三区|
色偷偷一区二区无码视频|
好看的电影网站亚洲一区|
久久亚洲一区二区|
国产精品视频免费一区二区三区
|
亚洲夜夜欢A∨一区二区三区|
蜜桃视频一区二区三区在线观看
|
欧美人妻一区黄a片|
成人区精品一区二区不卡|
亚洲a∨无码一区二区|
在线视频一区二区三区|
亚洲AV无码一区二区二三区入口|
国产裸体舞一区二区三区|
亚洲av无码一区二区三区天堂古代
|
久久亚洲综合色一区二区三区
|
天堂不卡一区二区视频在线观看|
精品国产一区二区三区四区|
一区二区三区免费看|
日韩精品中文字幕视频一区
|
亚洲片国产一区一级在线观看|
亚洲AV日韩综合一区尤物|
精品人妻码一区二区三区|
激情亚洲一区国产精品|
亚洲中文字幕一区精品自拍|
中文字幕无码不卡一区二区三区
|
全国精品一区二区在线观看|
女同一区二区在线观看|
国产福利一区二区|
精品久久一区二区|
精品无码一区二区三区电影|
无码一区二区波多野结衣播放搜索
|
亚洲国产av一区二区三区丶|
亚洲一区二区久久|
春暖花开亚洲性无区一区二区|
美女视频黄a视频全免费网站一区
美女免费视频一区二区
|
亚洲美女一区二区三区|
国精产品一区一区三区有限公司|
精品乱子伦一区二区三区高清免费播放|
一区二区在线视频免费观看|
国产日韩AV免费无码一区二区三区|
亚洲国产综合精品一区在线播放|