css入門學(xué)習(xí)筆記

發(fā)表時(shí)間：2020-10-19

發(fā)布人：葵宇科技

瀏覽次數(shù)：62

CSS 語法

CSS 實(shí)例

CSS 規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲明:

CSS聲明總是以分號(;)結(jié)束，聲明總以大括號({})括起來:

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

為了讓CSS可讀性更強(qiáng)，你可以每行只描述一個(gè)屬性:

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

CSS Id 和 Class

id 和 class 選擇器

如果你要在HTML元素中設(shè)置CSS樣式，你需要在元素中設(shè)置"id" 和 "class"選擇器。

id 選擇器

id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。

HTML元素以id屬性來設(shè)置id選擇器,CSS 中 id 選擇器以 “#” 來定義。

以下的樣式規(guī)則應(yīng)用于元素屬性 id=“para1”:

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

class 選擇器

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

class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個(gè)點(diǎn)"."號顯示：

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

.center {text-align:center;}

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

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

p.center {text-align:center;}

CSS 創(chuàng)建（待補(bǔ)充）

如何插入樣式表

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

外部樣式表(External style sheet)
內(nèi)部樣式表(Internal style sheet)
內(nèi)聯(lián)樣式(Inline style)

內(nèi)部樣式表

當(dāng)單個(gè)文檔需要特殊的樣式時(shí)，就應(yīng)該使用內(nèi)部樣式表。你可以使用

<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中，顏色值通常以以下方式定義:

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

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

背景圖像

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

默認(rèn)情況下，背景圖像進(jìn)行平鋪重復(fù)顯示，以覆蓋整個(gè)元素實(shí)體.

頁面背景圖片設(shè)置實(shí)例:

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

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

默認(rèn)情況下 background-image 屬性會在頁面的水平或者垂直方向平鋪。

一些圖像如果在水平方向與垂直方向平鋪，這樣看起來很不協(xié)調(diào)，如下所示:

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

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(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;
}

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

背景圖像- 設(shè)置定位與不平鋪

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

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

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

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

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

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

CSS 表格

表格邊框

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

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

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

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

折疊邊框

border-collapse 屬性設(shè)置表格的邊框是否被折疊成一個(gè)單一的邊框或隔開：

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

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

表格寬度和高度

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

下面的例子是設(shè)置100％的寬度，50像素的th元素的高度的表格：

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

表格文字對齊

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

text-align屬性設(shè)置水平對齊方式，向左，右，或中心：

td
{
    text-align:right;
}

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

垂直對齊屬性設(shè)置垂直對齊，比如頂部，底部或中間：

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

表格填充

如果在表的內(nèi)容中控制空格之間的邊框，應(yīng)使用td和th元素的填充屬性：

td
{
    padding:15px;
}

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(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; #文本字體顏色
}

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

CSS 盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"這一術(shù)語是用來設(shè)計(jì)和布局時(shí)使用。

CSS盒模型本質(zhì)上是一個(gè)盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實(shí)際內(nèi)容。

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

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

CSS box-model

不同部分的說明：

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

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

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

CSS 邊框

邊框樣式

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

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

border-style 值:

none: 默認(rèn)無邊框

dotted: 定義一個(gè)點(diǎn)線邊框

dashed: 定義一個(gè)虛線邊框

solid: 定義實(shí)線邊框

double: 定義個(gè)邊框。兩個(gè)邊框的寬度和 border-width 的值相同

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

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

inset:定義一個(gè)3D的嵌入邊框。效果取決于邊框的顏色值

outset: 定義一個(gè)3D突出邊框。效果取決于邊框的顏色值

邊框?qū)挾?/h2>

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

邊框顏色

border-color屬性用于設(shè)置邊框的顏色。可以設(shè)置的顏色：

注意： border-color單獨(dú)使用是不起作用的，必須得先使用border-style來設(shè)置邊框樣式。

邊框-單獨(dú)設(shè)置各邊

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

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” 列中的數(shù)字表示哪個(gè)CSS版本定義了該屬性(CSS1 或者CSS2)。

屬性說明值CSSoutline在一個(gè)聲明中設(shè)置所有的輪廓屬性*outline-color outline-style outline-width *inherit2outline-color設(shè)置輪廓的顏色*color-name hex-number rgb-number *invert inherit2outline-style設(shè)置輪廓的樣式none dotted dashed solid double groove ridge inset outset inherit2outline-width設(shè)置輪廓的寬度thin medium thick *length *inherit2

CSS margin(外邊距)

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

margin

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

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

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

Margin - 單邊外邊距屬性

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

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

CSS padding（填充）

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

可能的值

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

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

CSS 分組和嵌套選擇器

分組選擇器

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

嵌套選擇器

它可能適用于選擇器內(nèi)部的選擇器的樣式。

在下面的例子設(shè)置了三個(gè)樣式：

p{ }: 為所有 p 元素指定一個(gè)樣式。
.marked{ }: 為所有 class=“marked” 的元素指定一個(gè)樣式。
.marked p{ }: 為所有 class=“marked” 元素內(nèi)的 p 元素指定一個(gè)樣式。
p.marked{ }: 為所有 class=“marked” 的 p 元素指定一個(gè)樣式。

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

display屬性設(shè)置一個(gè)元素應(yīng)如何顯示，visibility屬性指定一個(gè)元素應(yīng)可見還是隱藏。

CSS Display - 塊和內(nèi)聯(lián)元素

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

塊元素的例子：

內(nèi)聯(lián)元素只需要必要的寬度，不強(qiáng)制換行。

內(nèi)聯(lián)元素的例子：

如何改變一個(gè)元素顯示

可以更改內(nèi)聯(lián)元素和塊元素，反之亦然，可以使頁面看起來是以一種特定的方式組合，并仍然遵循web標(biāo)準(zhǔn)。

下面的示例把列表項(xiàng)顯示為內(nèi)聯(lián)元素：

li {display:inline;}

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

span {display:block;}

CSS Position(定位)

position 屬性指定了元素的定位類型。

position 屬性的五個(gè)值：

static
relative
fixed
absolute
sticky

static 定位

靜態(tài)定位的元素不會受到 top, bottom, left, right影響。

fixed 定位

元素的位置相對于瀏覽器窗口是固定位置。

即使窗口是滾動(dòng)的它也不會移動(dòng)：

欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

css入門學(xué)習(xí)筆記 - 新聞資訊 - 云南小程序開發(fā)|云南軟件開發(fā)|云南網(wǎng)站建設(shè)-昆明葵宇信息科技有限公司