css基礎

CSS全程是什么

css全稱:層疊樣式列表(cascading style sheets)

CSS引入方式有幾種? link 和@import 有什么區(qū)別

css引入方式:

  • 內聯(lián)樣式

<h1 style="color: red;font-size: 30px">饑人谷</h1>

  • 內部樣式






    <style type="text/css">
      h1{
            color: red;
                font-size: 30px;
    }
    </style>
    <h1>饑人谷</h1>
  • 外部樣式

        <head>
            <link rel="stylesheet" type="text/css" href="index.css">
        </head>


    <style>
        @import url("hello.css");
        @import "word.css"
    </style>
  • 瀏覽器默認樣式

link和@import的區(qū)別:

  • link是html標簽,@import是css(一種CSS語法)
  • link是寫在html中的,@import是寫在css文件中的
  • 加載的時候link標簽引用的css文件會和html主體部分一起加載,@import用法的需要在加載完html之后才會加載css
  • 當使用JavaScript控制DOM去改變樣式的時候,只能使用link標簽,因為@import不是DOM可以控制的
  • @import可以在CSS中再次引入其他樣式表

以下這幾種文件分別用在什么地方?代表的意思

css/a.css 表示css目錄下的a.css文件
./.css/a.css 根目錄下css文件下的a.css文件
b.css 當前目錄下的b.css文件
..imgs/a.png 當前文件的上一級目錄下imgs文件目錄下的a.png文件
Users/hunger/project/css/a.css 絕對路徑,表示Users文件目錄下hunger文件目錄下project文件目錄下css目錄下的a.css文件
static/css/a.css 主域名下static文件目錄下css文件目錄下的a.css文件
http://cdn.jirengu.com/kejian1/8-1.png 網(wǎng)站路徑,http://cdn.jirengu.com網(wǎng)站的kejian1目錄下的8-1.png文件

如果我想在js.jirengu.com上展示一個圖片,需要怎么操作?

  • 將圖片文件夾傳至服務器上使用相對路徑
  • 使用網(wǎng)站路徑鏈接的方式

書寫規(guī)范

  • 語法不區(qū)分大小寫,一般情況下都使用小寫
  • 不使用內聯(lián)的style屬性定義樣式
  • id和class使用有意義的單詞,分隔符使用-
  • 有可能就是用縮寫
  • 屬性值是0的省略單位
  • 塊內容縮進
  • 屬性名冒號后面添加一個空格

截圖介紹 chrome 開發(fā)者工具的功能區(qū)

Instagram Pic
  • element:用于查看和編輯當前頁面中的 HTML 和 CSS 元素;編輯html標簽和css樣式;測試標簽的邊界條件
  • Network:可以看到頁面向服務器請求了哪些資源、資源的大小以及加載資源花費的時間,當然也能看到哪些資源不能成功加載。此外,還可以查看HTTP的請求頭,返回內容等
  • Source:用于查看和調試當前頁面所加載的腳本的源文件;斷點調試
  • Resource:用于查看當前頁面所請求的資源文件,如 HTML,CSS 樣式文件等
  • console:用于調試JS
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 一、css是什么? CSS全稱是Cascading Style Sheets,簡寫為CSS,稱作:層疊樣式表,又稱...
    青鳴閱讀 1,137評論 0 1
  • CSS的全稱是什么? CSS全程是Cascading Style Sheets層疊樣式表 CSS有幾種引入方式? ...
    Taaaaaaaurus閱讀 445評論 0 1
  • 一.CSS的全稱是什么? 層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現(xiàn)HTM...
    Sunset125閱讀 454評論 0 1
  • CSS的全稱是什么? 層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現(xiàn)HTML(...
    阿魯提爾閱讀 316評論 0 3
  • 筆名:車文老妖 簡介:自從那件事之后,她們的身邊總有怪事發(fā)生,直到那一天… 第一章 田小雨:依晨…我覺得最近老是有...
    旁趣PUNCH閱讀 356評論 0 0

友情鏈接更多精彩內容