CSS 語法

CSS 實體

CSS 規則由兩個主要的部分構成：選擇器，以及一潭訓多條宣告:

CSS宣告總是以分號(;)結束，宣告總以大括號({})括起來:

p {color:red;text-align:center;}

為了讓CSS可讀性更強，你可以每行只描述一個屬性:

p
{
    color:red;
    text-align:center;
}

CSS Id 和 Class

id 和 class 選擇器

如果你要在HTML元素中設定CSS樣式，你需要在元素中設定"id" 和 "class"選擇器，

id 選擇器

id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式，

HTML元素以id屬性來設定id選擇器,CSS 中 id 選擇器以 “#” 來定義，

以下的樣式規則應用于元素屬性 id=“para1”:

#para1
{
    text-align:center;
    color:red;
}

class 選擇器

class 選擇器用于描述一組元素的樣式，class 選擇器有別于id選擇器，class可以在多個元素中使用，

class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點"."號顯示：

在以下的例子中，所有擁有 center 類的 HTML 元素均為居中，

.center {text-align:center;}

你也可以指定特定的HTML元素使用class，

在以下實體中, 所有的 p 元素使用 class=“center” 讓該元素的文本居中:

p.center {text-align:center;}

CSS 創建（待補充）

如何插入樣式表

插入樣式表的方法有三種:

外部樣式表(External style sheet)
內部樣式表(Internal style sheet)
行內樣式(Inline style)

內部樣式表

當單個檔案需要特殊的樣式時，就應該使用內部樣式表，你可以使用

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

CSS 背景

背景顏色

background-color 屬性定義了元素的背景顏色.

頁面的背景顏色使用在body的選擇器中:

body {background-color:#b0c4de;}

CSS中，顏色值通常以以下方式定義:

十六進制 - 如："#ff0000"
RGB - 如：“rgb(255,0,0)”
顏色名稱 - 如：“red”

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

背景影像

background-image 屬性描述了元素的背景影像.

默認情況下，背景影像進行平鋪重復顯示，以覆寫整個元素物體.

頁面背景圖片設定實體:

body {background-image:url('paper.gif');}

背景影像-水平或垂直平鋪

默認情況下 background-image 屬性會在頁面的水平或者垂直方向平鋪，

一些影像如果在水平方向與垂直方向平鋪，這樣看起來很不協調，如下所示:

body
{
background-image:url('gradient2.png');
}

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-9oynzXhc-1603094755552)(C:\Users\a1075\AppData\Roaming\Typora\typora-user-images\image-20201019091642984.png)]

如果影像只在水平方向平鋪 (repeat-x), 頁面背景會更好些:（

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-UKGKmI9v-1603094755554)(C:\Users\a1075\AppData\Roaming\Typora\typora-user-images\image-20201019091824335.png)]

背景影像- 設定定位與不平鋪

如果你不想讓影像平鋪，你可以使用 background-repeat 屬性:

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-MWQOFUqJ-1603094755556)(C:\Users\a1075\AppData\Roaming\Typora\typora-user-images\image-20201019100213619.png)]

以上實體中，背景影像與文本顯示在同一個位置，為了讓頁面排版更加合理，不影響文本的閱讀，我們可以改變影像的位置，

可以利用 background-position 屬性改變影像在背景中的位置:

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

CSS 表格

表格邊框

指定CSS表格邊框，使用border屬性，

下面的例子指定了一個表格的Th和TD元素的黑色邊框：

table, th, td
{
    border: 1px solid black;
}

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-QqkRGEdh-1603094755557)(C:\Users\a1075\AppData\Roaming\Typora\typora-user-images\image-20201019103910145.png)]

折疊邊框

border-collapse 屬性設定表格的邊框是否被折疊成一個單一的邊框或隔開：

table
{
    border-collapse:collapse;
}
table,th, td
{
    border: 1px solid black;
}

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-UQ9mcF61-1603094755559)(C:\Users\a1075\AppData\Roaming\Typora\typora-user-images\image-20201019104037284.png)]

表格寬度和高度

Width和height屬性定義表格的寬度和高度，

下面的例子是設定100％的寬度，50像素的th元素的高度的表格：

table 
{
    width:100%;
}
th
{
    height:50px;
}

表格文字對齊

表格中的文本對齊和垂直對齊屬性，

text-align屬性設定水平對齊方式，向左，右，或中心：

td
{
    text-align:right;
}

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-S4dHQxEZ-1603094755559)(C:\Users\a1075\AppData\Roaming\Typora\typora-user-images\image-20201019114732482.png)]

垂直對齊屬性設定垂直對齊，比如頂部，底部或中間：

td
{
    height:50px;
    vertical-align:bottom;
}

表格填充

如果在表的內容中控制空格之間的邊框，應使用td和th元素的填充屬性：

td
{
    padding:15px;
}

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-0N3KFhjT-1603094755560)(C:\Users\a1075\AppData\Roaming\Typora\typora-user-images\image-20201019115117752.png)]

表格顏色

下面的例子指定邊框的顏色，和th元素的文本和背景顏色：

table, td, th
{
    border:1px solid green;
}
th
{
    background-color:green;
    color:white; #文本字體顏色
}

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-4x5cGqrW-1603094755560)(C:\Users\a1075\AppData\Roaming\Typora\typora-user-images\image-20201019123302675.png)]

CSS 盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和布局時使用，

CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容，

盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素，

下面的圖片說明了盒子模型(Box Model)：

CSS box-model

不同部分的說明：

Margin(外邊距) - 清除邊框外的區域，外邊距是透明的，
Border(邊框) - 圍繞在內邊距和內容外的邊框，
Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的，
Content(內容) - 盒子的內容，顯示文本和影像，

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-7JGejWGf-1603094755561)(C:\Users\a1075\AppData\Roaming\Typora\typora-user-images\image-20201019123626586.png)]

CSS 邊框

邊框樣式

邊框樣式屬性指定要顯示什么樣的邊界，

Remark border-style屬性用來定義邊框的樣式

border-style 值:

none: 默認無邊框

dotted: 定義一個點線邊框

dashed: 定義一個虛線邊框

solid: 定義實線邊框

double: 定義個邊框，兩個邊框的寬度和 border-width 的值相同

groove: 定義3D溝槽邊框，效果取決于邊框的顏色值

ridge: 定義3D脊邊框，效果取決于邊框的顏色值

inset:定義一個3D的嵌入邊框，效果取決于邊框的顏色值

outset: 定義一個3D突出邊框，效果取決于邊框的顏色值

邊框寬度

p.one
{
    border-style:solid;
    border-width:5px;
}
p.two
{
    border-style:solid;
    border-width:medium;
}

邊框顏色

border-color屬性用于設定邊框的顏色，可以設定的顏色：

注意： border-color單獨使用是不起作用的，必須得先使用border-style來設定邊框樣式，

邊框-單獨設定各邊

在CSS中，可以指定不同的側面不同的邊框：

p
{
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
}

CSS 輪廓（outline）

輪廓（outline）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用，

輪廓（outline）屬性指定元素輪廓的樣式、顏色和寬度，

Outline

所有CSS 輪廓（outline）屬性

“CSS” 列中的數字表示哪個CSS版本定義了該屬性(CSS1 或者CSS2)，

屬性	說明	值	CSS
outline	在一個宣告中設定所有的輪廓屬性	outline-color outline-style outline-width inherit	2
outline-color	設定輪廓的顏色	color-name hex-number rgb-number invert inherit	2
outline-style	設定輪廓的樣式	none dotted dashed solid double groove ridge inset outset inherit	2
outline-width	設定輪廓的寬度	thin medium thick length inherit	2

CSS margin(外邊距)

CSS margin(外邊距)屬性定義元素周圍的空間，

margin

margin 清除周圍的（外邊框）元素區域，margin 沒有背景顏色，是完全透明的，

margin 可以單獨改變元素的上，下，左，右邊距，也可以一次改變所有的屬性，

值	說明
auto	設定瀏覽器邊距，這樣做的結果會依賴于瀏覽器
length	定義一個固定的margin（使用像素，pt，em等）
%	定義一個使用百分比的邊距

Margin - 單邊外邊距屬性

在CSS中，它可以指定不同的側面不同的邊距：

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

CSS padding（填充）

CSS padding（填充）是一個簡寫屬性，定義元素邊框與元素內容之間的空間，即上下左右的內邊距，

可能的值

值	說明
length	定義一個固定的填充(像素, pt, em,等)
%	使用百分比值定義一個填充

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

CSS 分組和嵌套選擇器

分組選擇器

為了盡量減少代碼，你可以使用分組選擇器，

嵌套選擇器

它可能適用于選擇器內部的選擇器的樣式，

在下面的例子設定了三個樣式：

p{ }: 為所有 p 元素指定一個樣式，
.marked{ }: 為所有 class=“marked” 的元素指定一個樣式，
.marked p{ }: 為所有 class=“marked” 元素內的 p 元素指定一個樣式，
p.marked{ }: 為所有 class=“marked” 的 p 元素指定一個樣式，

CSS Display(顯示) 與 Visibility（可見性）

display屬性設定一個元素應如何顯示，visibility屬性指定一個元素應可見還是隱藏，

CSS Display - 塊和行內元素

塊元素是一個元素，占用了全部寬度，在前后都是換行符，

塊元素的例子：

行內元素只需要必要的寬度，不強制換行，

行內元素的例子：

如何改變一個元素顯示

可以更改行內元素和塊元素，反之亦然，可以使頁面看起來是以一種特定的方式組合，并仍然遵循web標準，

下面的示例把串列項顯示為行內元素：

li {display:inline;}

下面的示例把span元素作為塊元素：

span {display:block;}

CSS Position(定位)

position 屬性指定了元素的定位型別，

position 屬性的五個值：

static
relative
fixed
absolute
sticky

static 定位

靜態定位的元素不會受到 top, bottom, left, right影響，

fixed 定位

元素的位置相對于瀏覽器視窗是固定位置，

即使視窗是滾動的它也不會移動：

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/183785.html

標籤：其他

上一篇：網頁制作程序中怎么配色

下一篇：設計一個好看的app

css入門學習筆記