CSS樣式的處理

2021-08-19 06:02:23 字數 2852 閱讀 9448

4/23/2018 8:23:35 am

1. 標準的乙個html檔案的結構

2. 指定顏色和資源位置的方式

3. 常用標籤

設定段落:

設定文字格式:

**的基本形式:

表單標籤:

框架標籤:

一、css概述

二、css的選擇器(認識)

三、css樣式和屬性(練習)

四、重構**首頁div+css(頁面布局)(重點) 浮動/更改顯示方式

div,就是乙個html元素,塊級元素,通常結合css進行頁面的布局。

css,層疊樣式表,給html元素增強顯示。

樣式定義如何顯示html元素,頁面的布局(美化html效果)
內聯樣式方式:在當前的元素屬性中直接設定style屬性,適用性差,只能作用於當前元素。

style屬性是html元素通用的屬性

內部樣式方式:在head標籤中,使用標籤來設定樣式,適用性強,可以同時作用於乙個頁面的多個元素。

外部樣式方式:建立.css樣式檔案,在此檔案中設定元素的樣式,在需要使用的頁面中使用元素引入。適用性最強,

可以通過作用於多個頁面。

選擇器{

樣式申明

}1. 查詢需要設定樣式的元素 ,選擇器可以用來查詢元素

2. 設定樣式 ,屬性名稱:屬性值 ;屬性名稱:屬性值 ;

3. 例如:

h1

注意:樣式申明中,如果不是最後乙個屬性值,後面的分號不可以省略。

繼承性:子元素可以繼承父元素的樣式

層疊性:同乙個元素可以使用多個樣式,如果不衝突,效果疊加

優先順序:預設的樣式 ---外部樣式 --- 內部樣式--- 內聯樣式 (由低到高,就近原則)

語法格式:元素名稱       

特點:適用於相同元素的樣式設定

語法格式: .類屬性值

特點:適用於不相同元素的樣式設定

例如:通過類選擇器查詢h1元素

.h1class

語法格式: #id屬性值

特點:使用於乙個具體的元素的樣式設定

例如:通過id選擇器查詢乙個具體的h1標籤

#idvalue

語法格式:選擇器1,選擇器2,...

特點:可以在多個不同的選擇器中重用樣式

例如: #idvalue , h1 , .classvalue,p,#idvalue2,.classvalue2

語法格式1:父元素名稱 > 子元素名稱 

特點:子元素選擇器,只作用於指定兒子輩的元素

語法格式2:父元素名稱 子元素名稱

特點:後台選擇器,作用於指定的所有後輩元素

例如:

background-color:顏色值,設定背景顏色

background-image:的url,設定背景

background-repeat:排列方式,設定背景的排列方式

repeat;

repeat-x;

repeat-y;

no-repeat;

background-attachment:方式,設定背景是否跟隨內容移動

scroll;

fixed;

border: 寬度   樣式   顏色  

border: 樣式值,( 設定四個邊框的樣式 )

border-left/right/top/bottom:樣式值 (設定各個邊框的樣式)

將元素脫離文件的普通流中,可以向左或者向右浮動,直到他的邊框遇到其父邊框或者其他浮動元素的邊框時停止。

新增元素:

#cleardiv

外邊距:margin

margin-left/right/top/bottom:距離;

margin:距離;

margin:auto; //居中效果

內邊距:padding

padding-left/right/top/bottom:距離;

padding:距離;

color:顏色

font-size:字型大小

font-fimaily:字型

font-weight:粗體

border:邊框

border-collapse:collapse;去除單元格之間的間距

list-style-type: 樣式;     列表顯示的樣式

list-style-image:url(「資源位置」); 列表顯示的樣式

cursor:help;

wait;

default;

pointer;

... ...

display屬性,更改元素的顯示方式:

block ,將行內元素的顯示方式轉換成塊級元素的顯示方式;(上下顯示)

inline,將塊級元素的顯示方式轉換成行內元素的顯示方式;(左右顯示,不能設定寬高)

inline-block,將元素轉換成行內塊元素;(左右顯示,設定寬高的)

div

使用div+重css構簡易的**首頁

常用CSS樣式處理(一)

1.ul標籤控制每行顯示幾個li ul沒有屬性設定li的個數,但是可以通過設定寬度來控制 如 那麼如果想讓每行顯示2個li內容可以這樣 以此類推 2.配色方案 一般我們無法記住十六進製制的顏色,即使記住也只能記住常用幾個顏色,這時候我們可以顏色配比自己除錯如下 style color rgb 212...

css字型樣式,引入css樣式的方法,css選擇器

font總結 屬性 表示注意點 font size 字型大小我們通常用的單位是px畫素,一定要跟上單位 font family 字型實際工作中按照團隊約定來寫字型 font weight 字型粗細 加粗700或bold,不加粗normal或400,數字不更單位 font style 字型樣式 傾斜是...

css背景樣式css背景樣式

css背景樣式 css背景樣式 序號中文說明 標記語法 1背景顏色2背景 3背景重複 4背景固定 5背景定位 6背影樣式 1 背景顏色 background color 語法 說明 引數取值和顏色屬性一樣 注意 在 html當中,要為某個物件加上背景色只有一種辦法,那就是先做乙個 在 中設定完背景色...