HTML,CSS實訓筆記

2021-08-07 22:58:53 字數 2451 閱讀 5705

1、html -- 超文字標記語言

2、html 結構

(代表h5)

3、常用標籤

3.1、塊級標籤

特點:獨佔一行,前後會主動換行

標題標籤(h1--h6)

段落標籤(p)

水平線()

有序列表

(多個)

無序列表

div -- 主要用於分割槽

3.2、行級標籤

特點:按行逐一顯示,不會自動換行

文字類的

加粗(b)

斜體(i)

強調(em)

粗體(strong)

小號字型(small)

下標(sub)

上標(sup)

文字顯示方向(bdo 屬性:dir)

超連結換行

空格:能夠識別乙個空格,如果多個,使用 

4、form表單

type = "text" 文字框

type = "password" 密碼框

type = "radio" 單選框 -- 同一組的單選框,name要一樣

type = "checkbox" 多選框-- 同一組的多選框,name要一樣

type = "submit" 提交按鈕 可以通過value屬性修改顯示的內容

type = "reset" 重置按鈕  可以通過value屬性修改顯示的內容

一、html和css的區分

html---負責的是頁面的內容

css----負責的是頁面的樣式(顏色、字型、位置、動畫) 二、

那麼html跟css如何建立關聯

引入css樣式,提供了3中方式

1、行內樣式(知道即可,不推薦使用)

格式:寫在標籤裡邊,通過style屬性

eg:2、內部樣式(近兩天會使用到,以後就不建議使用了)

格式:寫在head裡,通過style標籤

eg:3、外部樣式(推薦使用這種方式,以後就用這種方式)

格式:html和css分離,是不同的檔案,使用的時候要引入進來

eg:① (較常使用) ②

三、修改樣式

首先你要明確對誰進行修改,找到它,然後修改就可以

怎麼找到你要修改的元素啊?

同樣提供了3種方式

第一種:元素選擇器(html中的標籤名) p

特點:適用於所有的p元素,範圍比較廣

第二種:類選擇器

.類名特點:比元素選擇器精準

eg:

第三種:id選擇器

#id名

特點:更為精準,能夠找到唯一的那個元素

eg:第四種:萬用字元(適用於所有的元素,慎用) *

4、修改樣式

字型類修改

color

font-family

font-style

font-size

font-weight

text-decoration

text-indent

text-align

text-transform

line-height

letter-spacing

word-spacing 邊框

border-style

border-color

border-width

以上三條都可以簡寫:border:solid 1px red;

border-top、bottom、left、right

border-radius 邊框弧度

border-radius:10px

border-radius:100% 圓形

可以使用border畫乙個三角形

背景:background-color

background-image:url("位址");

background-repeat:repeat、repeat-x、repeat-y、no-repeat

backgroung-position: 10px 20px 第乙個值距離左邊的畫素值,第二個距離上邊的畫素值

以上三條可以簡寫

background:url("位址") no-repeat center;

列表:list-style-position:inside、outside;黑點的位置,預設在外邊

以上可以簡寫:

list-style:none;取消預設的黑點

盒子模型:

元素的組成部分:內容(content)+填充物(padding)+邊框(border)+外邊距(margin)

其中:padding :指的是內容和邊框之間的距離

margin:指的是元素跟元素之間的距離

padding-left、right、top、bottom

以上可簡寫  padding:10px;

padding:10px 20px;

padding:10px 20px 30px 40px;

margin:同上。

2017 12 24實訓筆記

敏捷開發 一 迴圈 continue和break 2 break 用來從迴圈體內跳出迴圈,提前結束迴圈,接著執行後面的語句。3 for的用法 for 表示式1 表示式2 表示式3 語句 應用例項 求階乘 c語言命名規則 下劃線,字母,數字 數字不能開頭。二 陣列 重要 1 為什麼要使用陣列 2 c語...

實訓筆記1

actioncontext com.opensymphony.xwork.actioncontext 是action執行時的上下文,上下文可以看作是乙個容器 其實我們這裡的容器就是乙個map而已 它存放放的是action在執行時需要用到的物件,比如 在使用webwork時,我們的上下文放有請求的引數...

專案實訓筆記

我不知道是否有其他人能看見我寫的內容,由於我是乙個渣渣,很多內容都不知道,所以將這些很簡單的東西都記錄下來,希望不小心點進來的大神們,能吐槽一下我,呃指點一下我。拜託拜託。12 26 一 例如img標籤是行級元素,整行佔據空間需設定它的display屬性為block 2 focus 選擇器用於選取獲...