前端基礎二之css篇題外話前言CSS結語

文章目錄

- - 3.1 組選擇器
  - 3.2 繼承

- 4. 選擇器

- 5. css常見樣式

結語

📢： ❤布小禅❤ 📢 作者專欄： ❤Python❤ ❤Java❤

身為一個合格的後端開發人員

前端的基礎知識也是需要了解的

CSS（cascading style sheets）是層疊樣式表，适用于增強控制網頁樣式并允許将樣式和網頁分離的一種标記語言

其實就是可以單獨放在另一個檔案裡面的給HTML做修飾，美化的一種語言

三種方法

寫在另一個css的檔案中，通過HTML中的link标簽指向該css檔案

html檔案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="學習.css">
    <title>Title</title>
</head>
<body>
<p>
    将這個落魄的時代拉回正軌
</p>
</body>
</html>

css檔案：

p{
    color: red;
    font-size: 50px;
}

作用是将p标簽的字型顔色設定為紅色，大小設定為50px

然後頁面展示的效果為：

前端基礎二之css篇題外話前言CSS結語
将css文法寫在head标簽的style标簽裡

我們使用學過的span标簽将p标簽的文本内容分開

然後為span标簽寫css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="學習.css">
    <title>Title</title>
    <style>
        span{
            color: bisque;
            font-size: 40px;
        }
    </style>
</head>
<body>
<p>
    <span>将這個落魄的</span>時代拉回正軌
</p>
</body>
</html>

css檔案不變

效果：

前端基礎二之css篇題外話前言CSS結語
将css寫在标簽裡

通過标簽内的全局屬性
style屬性 設定css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="學習.css">
    <title>Title</title>
    <style>
        span{
            color: bisque;
            font-size: 40px;
        }
    </style>
</head>
<body>
<p>
    <span>将這個落魄的</span>時代拉回正軌
</p>
<p style="font-size: 55px; color: aqua">
    難道，你也要多管閑事嗎！
</p>
</body>
</html>

css檔案内容不變

前端基礎二之css篇題外話前言CSS結語

一般最好使用css文法來定義樣式，而不使用HTML自帶的加粗，斜體等标簽

并且通常将css代碼寫在單獨的css檔案，這樣就可以通過修改css檔案來修改整個網頁

你可以通過css對HTML格式進行美化，添加樣式，比如顔色，大小等

CSS文法由兩部分組成，選擇器和聲明

聲明由大括号圍起來

p{
    color: red;
    font-size: 50px;
}

裡面的p是選擇器，大括号裡面的是聲明

當然，選擇器不僅可以是标簽，還可以是id，屬性，類。。。

聲明可以是一條，也可以是多條，多條聲明使用英文半角分号

隔開

選擇器可以寫多個

比如這樣：

p,h1,h2,ul{
    color: red;
}

這樣可以對多個标簽進行添加樣式

html代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="學習.css">
    <title>Title</title>
</head>
<body>
<p>
    <span>将這個落魄的</span>時代拉回正軌
</p>
<p>
    難道，你也要多管閑事嗎！
</p>
</body>
</html>

css代碼：

span，p{
    color: red;
    font-size: 50px;
}

選擇器的css樣式會繼承給該标簽的子标簽

body{
    color: red;
    font-size: 20px;
}

就像這個css代碼，給body的顔色設定為紅色，字型大小為20px

那麼body裡面的标簽也都會是這個樣式

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="學習.css">
    <title>Title</title>
</head>
<body>
<p>
    <span>将這個落魄的</span>時代拉回正軌
</p>
<p>
    難道，你也要多管閑事嗎！
</p>
哈哈哈
</body>
</html>

body{
    color: bisque;
    font-size: 50px;
}

而如果不希望繼承的話，可以對其中的某個标簽，單獨在寫一個選擇器

而有的版本過低的浏覽器并不支援繼承，那如果想對一些标簽給同樣的樣式時，就隻能使用組選擇器了

就是根據父标簽找到父标簽下的某個字标簽，為其設定樣式

格式為：

父标簽 字标簽{聲明}

看代碼執行個體：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="學習.css">
    <title>Title</title>
</head>
<body>
<p>
    <span>将這個落魄的</span>時代拉回正軌
</p>
<p>
    難道，你也要多管閑事嗎！
</p>
哈哈哈
</body>
</html>

我們可以使用派生選擇器将p标簽的span标簽單獨設定為另一個樣式，然後再為p标簽設定樣式

css:

p span{
    color: bisque;
    font-size: 50px;
}
p{
    color: blue;
    font-size: 40px;
}
body{
    color: aqua;
    font-size: 40px;
 }

我們可以為标簽設定id屬性，然後通過id給标簽設定樣式

格式：

#id{聲明}

看代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="學習.css">
    <title>Title</title>
</head>
<body>
<dl id="username">
    <li>布小禅</li>
    <li id="miao">笨喵</li>
</dl>
</body>
</html>

#username{
    color: blueviolet;
}
#miao{
    color: saddlebrown;
}

通過給标簽設定class屬性

讓選擇器識别class屬性名，來給具有該class名的标簽設定樣式

格式

.class名{聲明}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="學習.css">
        <Title>前端基礎學習day02</Title>
    </head>
    <body>
        <from>
            <label>
                賬号：<input class="name" type="text">
                <br>
                密碼：<input class="pass" type="password">
            </label>
        </from>
    </body>
</html>

body{
    color: aqua;
    font-size: 40px;
}
.name{
    color: brown;
}
.pass{
    color: cornflowerblue;
}

頁面效果：

估計有沒有該屬性判斷是否為标簽設定樣式

[屬性(=value)]{聲明}

為含有name屬性的标簽設定字型顔色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="學習.css">
    <title>Title</title>
</head>
<body>
<p name="te0">從前有座山</p>
<h1 name="te1">是字而已</h1>
</body>
</html>

css：

[name]{
    color: cornflowerblue;
}

為name屬性的值為te0的标簽設定樣式

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="學習.css">
    <title>Title</title>
</head>
<body>
<p name="te0">從前有座山</p>
<h1 name="te1">是字而已</h1>
</body>
</html>

[name="te0"]{
    color: cornflowerblue;
}

設定某标簽的背景顔色和圖檔

設定背景顔色

标簽名{
    background-color: red;
}

設定背景圖檔

标簽名{
    background-image: url('圖檔路徑')
}

代碼示範：

為首頁面設定背景，為p标簽設定背景顔色

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="學習.css">
    <title>Title</title>
</head>
<body>
<p name="te0">從前有座山</p>
<p name="te1">是字而已</p>
</body>
</html>

p{
    background-color: cornflowerblue;
}
body{
    background-image: url('桌面.jpg');
}

可以看到，這是相當的不美觀啊，因為body是頁面大小，如果圖檔尺寸不夠大的話，就會将圖檔往左，往下鋪。

是以還有幾個屬性需要設定

為p标簽設定寬度，高度

p{
    background-color: cornflowerblue;
    height: 30px;
    width: 100px;
}

為body标簽設定，不讓圖檔平鋪，并設定圖檔的大小

body{
    background-image: url('桌面.jpg');
    background-repeat: no-repeat;
    background-size: 1900px 950px;
}

修改完的效果：

通過文本屬性，您可以改變文本的顔色、字元間距，對齊文本，裝飾文本，對文本進行縮進，等等。

通過text-indent屬性可以設定文本首行縮進多少像素

為段落設定首行縮進

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="學習.css">
    <title>Title</title>
</head>
<body>
<div>
    <p>炎炎夏日，位于聯邦東部的池雲雨林，雲霧彌漫，好似一層薄紗環繞，一棵棵參天古樹，縱橫交錯，繁茂的樹冠中，時而有幾隻飛鳥騰空而起，嘶鳴着翺翔于天際間。炎炎夏日，位于聯邦東部的池雲雨林，雲霧彌漫，好似一層薄紗環繞，一棵棵參天古樹，縱橫交錯，繁茂的樹冠中，時而有幾隻飛鳥騰空而起，嘶鳴着翺翔于天際間。炎炎夏日，位于聯邦東部的池雲雨林，雲霧彌漫，好似一層薄紗環繞，一棵棵參天古樹，縱橫交錯，繁茂的樹冠中，時而有幾隻飛鳥騰空而起，嘶鳴着翺翔于天際間。炎炎夏日，位于聯邦東部的池雲雨林，雲霧彌漫，好似一層薄紗環繞，一棵棵參天古樹，縱橫交錯，繁茂的樹冠中，時而有幾隻飛鳥騰空而起，嘶鳴着翺翔于天際間。</p>
</div>
</body>
</html>

p{
    text-indent: 15px;
    text-align: right;
}
div{
    background-color: sandybrown;
    background-position: center;
    width: 900px;
    height: 500px;
}

效果:

前端基礎二之css篇題外話前言CSS結語
文本顔色是有color屬性定義的

之前經常使用，就不多做贅述了

你已經是一個合格的程式員了，要學會自己敲代碼測試效果了！！！！！！！！！

可以同css設定字型的顔色，大小，加粗等

顔色，color屬性
大小font-size屬性
text-decoration屬性設下劃線（underline），删除線（line-through），上劃線（overline）
字型樣式（宋體等）font-family
斜體是将font-style設定為italic
font-weight設定為bold

a:link {color:red;}     /* 未被通路的連結 */
a:visited {color:blue;} /* 已被通路的連結 */
a:hover {color:yellow;} /* 滑鼠指針移動到連結上 */
a:active {color:black;} /* 正在被點選的連結 */

清單的屬性并不多

清單類型：list-style-type: square;
清單圖像：list-style-image: url(圖檔位址);
清單标志位置：list-style-position

設定表格邊框 table{border: 1px solid yrllow;} 設定1像素大小的表格邊框
設定表格寬度高度 width屬性和height屬性
将表格邊框和内部的表頭邊框合一 border-collapse:collapse
設定表格對齊方式 text-align:center
設定表格内邊距 padding:15px

興趣是最好的老師，堅持是不變的真理。

學習不要急躁，一步一個腳印，踏踏實實的往前走。

每天進步一點點，日積月累之下，你就會發現自己已經變得很厲害了。

我是布小禅，一枚自學萌新，跟着我每天進步一點點吧！

前端基礎二之css篇題外話前言CSS結語

文章目錄

繼續閱讀

Cloud Studio初體驗

spark/scala關于【資源檔案】加載方法概述外部檔案加載方案測試資源檔案打包入jar包中小結

使用 ctypes 進行 Python 和 C 的混合程式設計

【python】【資料處理】畫多元資料分布圖

mybatis_入門程式Mybatis入門

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

面試題解析：你接口測試是怎麼做的？

Effective Java 8:通用程式設計

OOM三種類型

工廠模式-三種類型

【python】netconf協定對接管理裝置

「Python 網絡自動化」NETCONF —— Python 使用 NETCONF 管理配置 H3C 網絡裝置

【遞歸】高效率求2的n次幂

win10本地scala和spark安裝安裝scala安裝spark

scala (3) Function 和 Method

在python中建立excel并寫入