前端 CSS介紹一

2022-07-29 07:39:13 字數 2356 閱讀 2981

css能夠使網頁元素的樣式更加豐富,讓網頁的內容和樣式拆分開,css是cascading style sheets的首字母的縮寫,意思是層疊樣式表,html只負責文件的結構和內容,內容的表現形式交給css,html文件變得更加簡潔。

css基本語法:

選擇器:

如:div

這是第乙個div

這是第二個div

2:類選擇器:通過類名來選擇元素,乙個類可應用於多個元素,乙個元素可以使用多個類

.blue

.big

.box

....

.....

3:層級選擇器:主要應用在標籤巢狀的結構中,層級選擇器,是結合上面的兩種選擇器來寫的選擇器,可以與標籤選擇器結合使用。

.con

.con span

.con .pink

.con .gold

....

.......

......

........

.....

4:id選擇器,使用"#名字"表示

常用的布局樣式屬性:

width:設定元素的寬度

height:設定元素的高度

background:設定元素的背景顏色或背景

border:設定元素的四周邊框,(border:1px solid red;(solid:表示實心線,dotted:點線;double:雙線;dashed:虛線))

也可以拆分寫成四個邊的寫法

border-top:設定頂邊邊框

border-left:設定左邊邊框

border-right:設定右邊邊框

border-bottom:設定底邊邊框

background-image:url(img位址)

background-repeat:repeat-y;

例如:div

padding:設定元素包含的內容和元素邊框的距離,即為內邊距,同樣可以拆分為:padding-top,padding-right,padding-bottom,padding-right;

float設定元素浮動,浮動可以讓塊元素排列在一起,浮動分為左浮動,有浮動,float:left;   float:right;

小於號:< 大於號:>  縮排:$nbsp;

margin:外邊距

/* 1個引數表示上下左右

2個引數表示上下,左右

3個引數表示上,左右,下

4個引數表示上,右,下,左*/

margin: 10px 20px 40px 50px;(順時針)

文字常用的樣式屬性一:

color:設定文字的顏色

font-size:設定文字的大小

font-family:設定文字的字型。如:font-family:"微軟雅黑";

font-weight:設定文字是否加粗,font-weight:bold;設定加粗。 font-weight:normal;不加粗

line-height:設定文字的行高,如:line-height:24px; 表示文字高度加上文字上下的間距是24px

text-decoration:設定文字的下劃線,text-decoration:none;將文字的下劃線去掉

text-align:設定文字水平對齊方式,如:text-align:center;設定水平居中

text-indent:設定文字首行縮排,如:text-indent:24px; 設定文字首行縮排24

樣式中的注釋:

/* 設定頭部的樣式*/

//使用p標籤,系統會自動增加16px,如果想要對齊,需要將margin重新設定為0

pspan標籤與div標籤的區別:

span標籤表示乙個透明的盒子,作用和div差不多,但使用span不會自動換行,div可以自動換行

form:設定表單,action表示動作,需要設定提交到**的url位址,method:請求方法,get和post,name作用是把當前端的資料再提交到後台伺服器的時候,需要把name的屬性一起提交

常用的表單元素:

:標籤為表單元素定義文字標註

標籤定義通用的表單元素

type屬性:

「text」:定義單行文字輸入框

"password":定義密碼輸入框

"radio":定義單選框

"checkbox":定義核取方塊

"file":定義上傳檔案

"submit「:定義提交按鈕

"reset":定義重置按鈕

"button"定義乙個普通按鈕

屬性定義表單元素的值

屬性,定義表單元素的名稱,此名稱是提交資料時的鍵名

請選擇城市:

北京上海

深圳廣州

返回頂部例項:

1返回頂部

前端之CSS介紹

css cascadingstylesheet,層疊樣式表 定義如何顯示html元素。當瀏覽器讀到乙個樣式表,它就會按照這個樣式表來對文件進行格式化 渲染 css的語法 css語法可以分為兩部分 1 選擇器 2 宣告 宣告由屬性和值組成,多個宣告之間用分號分隔,如下圖 css的四種引入方式 1 行內...

前端部分 CSS基礎介紹

css cascading style sheet,層疊樣式表 定義如何顯示html元素。也就是定義相應的標籤語言來定製顯示樣式達到一定的顯示效果。每個css樣式由兩個組成部分 選擇器和宣告。宣告又包括屬性和屬性值。每個宣告之後用分號結束。引用css樣式的方式分為3種 1 便簽行內定義顯示方式 2 ...

常用前端布局,CSS技巧介紹

1 若通過設定width為百分比的方式,則高度不能通過百分比來控制.在這個地方可以使用padding來實現,首先,元素的高度 height padding 2 border 2 所以我們可以將widht設定為0,然後用padding來實現盒子的高度 若元素padding的值是乙個百分比,則是基於其父...