文章目錄
- 一、什么是CSS?
- 二、CSS語法規則
- 1、元素選擇器
- 2、id選擇器
- 3、class選擇器
- 三、CSS生效方式
- 1、內部樣式
- 2、外部樣式
- 3、行內樣式
- 4、級聯的優先級
- 四、CSS基本樣式
- 1、背景顏色
- 2、元素尺寸
- 3、邊框與邊距
- 4、元素定位 position
- 5、元素溢位 overflow
- 6、元素浮動 float
- 7、不透明度 opacity
- 8、偽類和偽元素
- 9、組合選擇器
一、什么是CSS?
- CSS全稱Cascading Style Sheets，意思是級聯樣式表，HTML入門講的是HTML，它是一門用于創建網頁的標記語言，用來撰寫網頁所要展示的內容，然而它對于web頁面格式及美化程度方面存在一定的局限性，此時我們就要用到級聯樣式表即CSS來對HTML撰寫的內容進行規范、美化，
- 網頁的內容是由 HTML的元素構建的，這些元素如何呈現是由CSS來絕對的，涉及許多方面，如整個頁面的布局，元素的位置、距離、顏色、大小、是否顯示、是否浮動、透明度等等，
二、CSS語法規則
CSS語法規則示例如下：
由圖可見，一條CSS樣式規則由一個選擇器和一個以 { } 包裹的一潭訓多條宣告組成，
說明：
- 選擇器是你想要改變樣式的元素（本例為一級標題），
- 每條宣告由一個屬性和一個值組成，宣告要用{}包裹，用 ; 分割），
- 屬性（property）是你希望設定的樣式屬性，每個屬性有一個值，屬性和值被冒號分開，
一個頁面上的元素眾多，選擇器就用于在頁面中找到/選擇需要應用這個樣式的物件，選擇器包括元素選擇器、id選擇器和class選擇器三種，
1、元素選擇器
元素 < p > 語法規則示例：
p{
color:red;
text-align:center; /* 文本居中 */
}
2、id選擇器
id選擇器前面帶有 # 號，語法規則示例：
css: #sky{color: blue;}
html: <p id="sky">藍色的天空</p>
上述規則表明，頁面上id為sky的元素呈現藍色，即藍色的天空這幾個字就將會是藍色的，
注意：id 選擇器只適用于一個元素，
3、class選擇器
class選擇器前面帶有 . 號，語法規則示例：
css: .center{ text-align: center; }
html: <p class="center">我會居中顯示的</p>
只要頁面上某元素的class為center，那么就讓它居中顯示，
注意： 1.class選擇器是可以重復使用的
2.元素的class值可以多個
三、CSS生效方式
1、內部樣式
在 < head > 元素中引入了 < style > 標簽，在< style >< /style >標簽內添加樣式，內部樣式的代碼可以復用，
提示： 一般只有頁面的樣式規則較少時可采用這種方式，
2、外部樣式
在同一目錄新建一個后綴名為css的樣式表檔案如mycss.css，
在HTML檔案中寫入以下代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 注意下面這個陳述句，將匯入外部的 mycss.css 樣式表檔案 -->
<link rel="stylesheet" type="text/css" href="mycss.css">
<title>頁面標題</title>
</head>
<body>
<h1>我是有樣式的</h1>
<hr>
<p class="haha">還是有點丑：)</p>
</body>
</html>
在CSS檔案中寫入如下代碼：
body {
background-color: linen;
text-align: center;
}
h1 {
color: red;
}
.haha {
margin-top: 100px;
color: chocolate;
font-size: 50px;
}
在 code 的編輯區點擊滑鼠右鍵用open in browser插件，將該檔案在瀏覽器中打開
網頁界面樣式如下：
提示： 如果是新建一個檔案夾如css專門存放樣式表檔案，此時我們引入樣式檔案時的路徑就變為 ./css/mycss.css之類的，即
href="./css/mycss.css"，
3、行內樣式
直接把樣式規則寫到要應用的元素中，例如：
<h3 style="color:green;">I am a heading</h3>
4、級聯的優先級
如果同一個元素在外部、內部及行內樣式中都被設定了不同的樣式，此時就涉及到樣式的優先級問題，從高到低分別是：
- 行內樣式
- 內部樣式表或外部樣式表
- 瀏覽器預設樣式
即“就近原則”，
四、CSS基本樣式
1、背景顏色
可以采用顏色名稱和顏色RGB16進制值，來設定前景或背景的顏色，例如：
<!-- 顏色名稱 -->
<h3 style="background-color:Tomato;">Tomato</h3>
<h3 style="background-color:Orange;">Orange</h3>
<!-- 顏色值 -->
<h3 style="background-color:#ff0000;">#ff0000</h3>
<h3 style="background-color:#0000ff;">#0000ff</h3>
提示： 顏色值的3個位元組分別代表RGB（Red，Green，Blue）的0～255的值
2、元素尺寸
height 和 width用于 設定元素內容占據的尺寸，常見的尺寸單位有：像素 px，百分比 % 等，
元素尺寸語法：
html:
<div class="example-1">
這個元素高 200 pixels，占據全部寬度
</div>
css:
.example-1 {
width: 100%;
height: 200px;
}
3、邊框與邊距
一個 HTML 元素可以看作一個盒子模型，如下圖所示：
- Content：內容，如文本、圖片等
- Padding ：內邊距，即內容和邊框之間的區域
- Border ：邊框，默認不顯示
- Margin： 外邊距，邊框以外與其它元素的區域
html:
<html>
<head>
<link rel="stylesheet" href="./mycss.css">
</head>
<body>
<div class="box">我是內容，外面紅色的是我的邊框，注意邊框的內外都有25px的距離，</div>
</body>
</html>
css:
.box{
height: 200px;
width: 200px;
background-color:#615200;
color: aliceblue;
border: 10px solid red;
padding: 25px;
margin: 25px;
}
4、元素定位 position
position屬性用于對元素進行定位，元素定位有以下幾個值：
- static 靜態：無論設定與否，元素都將按默認的定位方式進行布局，
- relative 相對：元素相對于他的靜態（正常）位置進行偏移，
- fixed 固定：元素的位置將固定不動，
- absolute 絕對：將使元素相對于其最近設定了定位屬性（非static）的父元素進行偏移，
5、元素溢位 overflow
當元素內容超過其指定的區域時，用overflow溢位屬性來進行處理，溢位屬性有以下值：
- visible：默認值，溢位部分不被裁剪，在區域外面顯示，
- hidden：裁剪溢位部分且不可見，
- scroll：裁剪溢位部分，但提供上下和左右滾動條供顯示，
- auto：裁剪溢位部分，視情況提供滾動條，
6、元素浮動 float
-
float屬性可以讓某元素水平方向上向左或右進行移動，其周圍的元素也會重新排列，常用這種樣式來使影像和文本進行合理的布局，
-
如果希望浮動元素后面的元素在其下方顯示，可使用clear: both樣式來進行清除，
元素浮動語法：
.example-float-right {
float: right;
}
7、不透明度 opacity
opacity屬性用于對元素設定不透明度，值在[0.0～1.0]之間，值越低，透明度越高，
不透明度語法：
.opacity-2 {
opacity: 0.2;
}
8、偽類和偽元素
偽類（pseudo-class）或偽元素（pseudo-element）用于定義元素的某種特定的狀態或位置等，比如
- 滑鼠移到某元素上變換背景顏色
- 超鏈接訪問前后訪問后樣式不同
- 離開必須填寫的輸入框時出現紅色的外框進行警示
- …
偽類和偽元素語法：
/* 選擇器后使用 : 號，再跟上某個偽類/偽元素 */
selector:pseudo-class/pseudo-element {
property:value;
}
以下是常用的偽類/偽元素的簡單使用：
a:link {color:#FF0000;} /* 未訪問的鏈接 */
a:visited {color:#00FF00;} /* 已訪問的鏈接 */
a:hover {color:#FF00FF;} /* 滑鼠劃過鏈接 */
/* 滑鼠移到段落則改變背景顏色 */
p:hover {background-color: rgb(226, 43, 144);}
p:first-line{color:blue;} /* 段落的第一行顯示藍色 */
p:first-letter{font-size: xx-large;} /* 段落的第一個字超大 */
h1:before { content:url(smiley.gif); } /* 在每個一級標題前插入該圖片 */
h1:after { content:url(smiley.gif); } /* 在每個一級標題后插入該圖片 */
9、組合選擇器
-
后代選擇器：以空格作為分隔，如：
.haha p代表在div元素內有.haha這種類的所有元素， -
子選擇器：也稱為直接后代選擇器，以>作為分隔，如：
.haha > p代表在有.haha類的元素內的直接元素，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/273279.html
標籤：區塊鏈
上一篇：2021-03-30學習日志