1. 程式人生 > >Java學習階段一:2.CSS

Java學習階段一:2.CSS

目錄

瞭解CSS

五大CSS選擇器

CSS匯入方式

 

瞭解CSS

CSS 概述

  • CSS 指層疊樣式表 (Cascading Style Sheets)
  • 樣式定義如何顯示 HTML 元素
  • 樣式通常儲存在樣式表
  • 把樣式新增到 HTML 4.0 中,是為了解決內容與表現分離的問題
  • 外部樣式表可以極大提高工作效率
  • 外部樣式表通常儲存在 CSS 檔案
  • 多個樣式定義可層疊為一

參考地址:http://www.w3school.com.cn/css/css_jianjie.asp

五大CSS選擇器

一、標籤選擇器:

標籤選擇器是直接將HTML標籤作為選擇器,可以是p、h1、strong、dl等HTML標籤。

二、id選擇器:

每一個標籤他都有一個共同屬性id,所以我們通常給頁面元素定義id。

三、類(class)選擇器:

每一個標籤同樣都有一個類屬性,所以在CSS裡用一個點開頭表示類別選擇器定義。

四、群組選擇器:

當幾個元素樣式屬性一樣時,可以共同呼叫一個宣告,元素之間用逗號分隔。

五、後代選擇器:

後代選擇器也稱作為派生選擇器,通過依據元素在其位置的上下文關係來定義樣式,你可以使標記更加簡潔。 

參考地址:https://blog.csdn.net/baihuaxiu123/article/details/51327025

CSS匯入方式

參考地址:https://blog.csdn.net/u011456552/article/details/70169789

一、行內方式

<div style="background-color: blue"></div>

二、內嵌方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .style{
            width: 100px;
            height: 100px;
            border: 5px solid blue;
        }
    </style>
</head>
<body>
    <div class="style"></div>
</body>
</html>

三、連結方式

<head> <link href="style.css" rel="stylesheet" /> </head>

四、匯入方式(不建議使用直接在html中使用)

<style>
    @import url(style.css);
</style>