前端（二）之 CSS

張率功發布于2019-04-23 13:08 / 1195人閱讀

摘要：前端之前端之前言前言昨天學習了標記式語言，也就是無邏輯語言。今天學習，被稱之為網頁的化妝師。為前端頁面的樣式，由選擇器作用域與樣式塊組成。年初，組織負責的工作組開始討論第一版中沒有涉及到的問題。其討論結果組成了年月出版的規范第二版。

前端之 CSS

前言

昨天學習了標記式語言，也就是無邏輯語言。了解了網頁的骨架是什么構成的，了解了常用標簽，兩個指令以及轉義字符；其中標簽可以分為兩大類：

一類是根據標簽內容可以分類單雙標簽，單標簽指的是不需要字內容，標簽就可以代表所有功能；雙標簽：主內容可以包含文本，也可以包含子標簽（具有作用域）；
另一類是根據標簽顯示的效果可以分為行塊標簽，塊標簽會換行顯示；行標簽會同行顯示。

今天學習 CSS，被稱之為網頁的化妝師。

什么是 CSS

CSS 全稱為級聯樣式表（Cascading Style Sheet），主要負責頁面的風格設計，樣式、美觀。通常以.css 后綴結尾。

標記語言

和 html 一樣是非編程語言，不具備語言的程序邏輯。
css 為前端頁面的樣式，由選擇器、作用域與樣式塊組成。

選擇器：由標簽、類、id 多帶帶或組合出現；

作用域：一組大括號包含的區域；

樣式塊：滿足 css 連接語法的眾多樣式。
css 發展史代表版本

① 1990年，Tim Berners-Lee和Robert Cailliau共同發明了Web。1994年，Web真正走出實驗室。
② 1994年哈坤·利提出了CSS的最初建議。而當時伯特·波斯（Bert Bos）正在設計一個名為Argo的瀏覽器，于是他們決定一起設計CSS。
③ 哈坤于1994年在芝加哥的一次會議上第一次提出了CSS的建議，1995年的www網絡會議上CSS又一次被提出，博斯演示了Argo瀏覽器支持CSS的例子，哈肯也展示了支持CSS的Arena瀏覽器。
④ 1997年初，W3C組織負責CSS的工作組開始討論第一版中沒有涉及到的問題。其討論結果組成了1998年5月出版的CSS規范第二版。
⑤ CSS3是CSS（層疊樣式表）技術的升級版本，于1999年開始制訂，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊。

CSS 書寫語法

css 由三部分組成：選擇器、作用域與樣式塊。

選擇器 {
    樣式1: 值1;
    樣式2: 值2;
}

h3 {
    width: 100px;
    height: 100px;
    background-color: yellowgreen
}

CSS 的三種引入方式

第一種引入方式：行間式

特點：

書寫在標簽的 style全局屬性中；
樣式格式為=》key：value（單位）；
以分號隔開多個樣式；
最后的分號可以省略




    
    css 三種引入第一種引入


    
    css 第一種引入行間式

第二種引入方式：內聯式

特點：

樣式書寫在 head 標簽內的 style 屬性內；
樣式格式為 => 選擇器：p|作用域 {}|樣式塊；
以分號隔開多個樣式；
最后的分號可以省略



    
        
        css 三種引入第二種引入
        
        
    
    
        
            css 第二種引入內聯式引入

第三種引入方式：外聯式

特點：

書寫在外部的 css文件中，不需要書寫任何標簽；
其他同上

/*css 文件書寫 css 語法*/
/*外部 css 文件 00.css*/
h3 {
    width: 100px;
    height: 100px;
    background-color: yellowgreen
}



   
    
    第三種引入外聯式引入
    
       
           第三種引入外聯式引入

CSS 三種引入方式的優先級

三種可以同時存在并協同完整布局，三種引入方式之間沒有優先級之說，哪種引入方式在邏輯下方（后解釋的）誰就起作用（樣式覆蓋）。并且行間式一定是邏輯最下方的。

當三種引入方式同時存在且操作同一對象的同一屬性時，才會出現沖突，最終起作用的就是優先級高的。

/*o4.css*/
div {
    height: 200px;
    color: brown;
}

基礎選擇器




    
    基礎選擇器

長度單位與顏色




    
    長度單位與顏色

文本樣式操作




    
    文本樣式操作
    

    


    [普通文本]
    i的文本
     一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五
    
     一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二
    
    hello world hello world
    aaa

display

云服務器 GPU云服務器前端css css前端前端css框架浮動-前端-css

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1468.html

前端學習之路之CSS （二）

摘要：選擇器選擇器可以為標有特定的元素指定特定的樣式中選擇器以來定義。選擇器選擇器用于描述一組元素的樣式，選擇器有別于選擇器，可以在多個元素中使用在中，類選擇器以一個點號顯示。?Infi-chu: http://www.cnblogs.com/Infi-chu/ ? id選擇器id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式,CSS 中 id 選擇器以 # 來定義。 #id_n...

wapeyang 2019-04-23 13:22 評論0 收藏0
前端基礎-CSS是什么？

閱讀目錄一、什么是CSS 二、為何要用CSS 三、如何使用CSS 一、什么是CSS CSS全稱CascadingStyleSheet層疊樣式表，是專用用來為HTML標簽添加樣式的。樣式指的是HTML標簽的顯示效果，比如換行、寬高、顏色等等層疊屬于CSS的三大特性之一，我們將在后續內容中介紹表指的是我們可以將樣式統一收集起來寫在一個地方或者一個CSS文件里二、為何要用CS...

番茄西紅柿 2019-04-23 13:41 評論0 收藏0
前端每周清單第 41 期 : Node 與 Rust、OpenCV 的火花，網絡安全二三事

摘要：的網站仍然使用有漏洞庫上周發布了開源社區安全現狀報告，發現隨著開源社區的日漸活躍，開源代碼中包含的安全漏洞以及影響的范圍也在不斷擴大。與應用安全是流行的服務端框架，本文即是介紹如何使用以及其他的框架來增強應用的安全性。 showImg(https://segmentfault.com/img/remote/1460000012181337?w=1240&h=826); 前端每周清單專注...

syoya 2019-08-21 17:48 評論0 收藏0
[面試專題]一線互聯網大廠面試總結

摘要：道阻且長啊前端面試總結前端面試筆試面試騰訊一面瀏覽器工作原理瀏覽器的主要組件包括用戶界面包括地址欄后退前進按鈕書簽目錄瀏覽器引擎用來查詢及操作渲染引擎的接口渲染引擎渲染界面和是基于兩種渲染引擎構建的，使用自主研發的渲染引擎，和都使用網絡用來道阻且長啊TAT(前端面試總結) 前端面試筆試面試騰訊一面 1.瀏覽器工作原理瀏覽器的主要組件包括：用戶界面－包括地址欄、后退/前...

lemanli 2019-08-02 15:57 評論0 收藏0
[面試專題]一線互聯網大廠面試總結

摘要：道阻且長啊前端面試總結前端面試筆試面試騰訊一面瀏覽器工作原理瀏覽器的主要組件包括用戶界面包括地址欄后退前進按鈕書簽目錄瀏覽器引擎用來查詢及操作渲染引擎的接口渲染引擎渲染界面和是基于兩種渲染引擎構建的，使用自主研發的渲染引擎，和都使用網絡用來道阻且長啊TAT(前端面試總結) 前端面試筆試面試騰訊一面 1.瀏覽器工作原理瀏覽器的主要組件包括：用戶界面－包括地址欄、后退/前...

xfee 2019-08-21 11:53 評論0 收藏0