html css基礎總結

2021-08-09 09:14:51 字數 3178 閱讀 4088

總結:

常用的標籤:

標題-段落粗體斜體

上標下標換行符

水平線加粗強調斜體引用

空格列表:有序列表:

無序列表:

定義列表:

標籤   target=_blank 表示在新的視窗開啟預設 self

格式 jpg png gif

h5中的語義標籤圖形和圖形說明**行

標題單元格

屬性 colspan跨列  rowspan跨行

長** 分別是表頭 主體 表尾

表單下拉列表框

文字域標籤

組合表單元素

標題在html5中增加了 type ="email" "url"  "date" 「search」

required 屬性用來驗證表單 placeholder 屬性用來顯示特性的值

html中的注釋 css /* */      js //  /* */

id 唯一的標示符  class可以有多個

塊級元素  獨佔一行   ..

內聯元素 不能設定寬高 

盒子內聯框架 有屬性src width height ...

頁面資訊

preload 自動載入  controls 控制條顯示

可以新增多個源防止瀏覽器不支援

新增音訊

屬性和video類似

css設想元素周圍有乙個盒子

css選擇器:

通用選擇器:*{}

標籤選擇器:h1,p,{}

類選擇器: .class{}

id選擇器: #id{}

子選擇器:li>a{}

後代選擇器:p a{}

相鄰兄弟選擇器:h1+p{}應用與h1相鄰的第乙個p

普通兄弟選擇器:h1~p{}應用於h1相鄰的多個p

css中規則優先順序:

就近原則:兩個選擇器相同那麼後出現的選擇器優先順序高

具體性原則:選擇器具體則優先順序高 id:100 class:10 標籤:1

重要性:在任意屬性值後加!important來強調

繼承:父元素的屬性值會被子元素繼承

color 文字的顏色  backgroundcolor背景顏色

color 有rgb和rgba   opacity指的是透明度0-1

在css3中 用hsl 和 hsla 來表示顏色 h-色調 s-飽和度  l-明度 a - 透明度

字型font-family指定的字型   :georgia, times,serif:

font-face 伺服器端字型

font-size : 畫素  百分數; em值 1em等於乙個m的寬度

字型刻度:

字型大小單位:

12畫素刻度:

h1--24px--200%--1.5em

16畫素刻度:

h1--32px--200%--2em

@font-face

font-weight---normal  --bold 粗體 可以為數字100,200,300,...,700,

font-style--normal--italic--oblique(是文字以傾斜顯示)

text-transform--uppercase--lowercase--capitalize-分別是大寫-小寫-每個首字母大寫

text-decoration--none---underline(下劃線)-overline(上劃線)---line-through(橫穿線)---blink(會使文字以動態閃爍)

line-height---行間距-

通常將盒子的高度和行間距設定為一樣可使文字居中顯示

letter-spacing:字母間距

word-spacing;單詞間距 (0.25em左右)

對齊方式:

text-align--center--right--left--justify--

vertical-align--top--middle--bottom--

文字縮排--text-indent--負值代表像左邊縮排-9999px

投影:text-shadow--有四個取值-

-1-向左或右延伸的距離-2-向上或下延伸的距離

-3-可選值 模糊程度-4-投影顏色

一些偽類:

:first-letter,:first-line首字母,首行文字

:link    未訪問的鏈結

:visited  單機後的鏈結

:hover  放在鏈結上

:active 正在訪問的鏈結

:focus 元素擁有焦點的時候

:after 在元素後新增

特定選擇器:

p[class]

p[class="dog"];

盒子的大小:

width:

height:

min-width

max-width

min-height

max-height

內容溢位

overflow--hidden--scroll--auto--

這個屬性可以用來解決父元素裡面只有乙個浮動元素的時候父元素的邊框會摺疊在一起。 widht:100%; overflow:auto;

margin 外邊距

padding 內邊距

border 邊框

讓盒子居中

設定他的marign: 0 auto;    

text-align屬性會被子元素繼承

內聯元素與塊級元素的轉換

display---block--inline--inline-block--none

塊級   內聯     具有內聯屬性的塊級元素  隱藏

不應該在內聯盒子中建立塊級元素

盒子的隱藏

visibility--hidden--visible--隱藏和可見

使用visibility盒子隱藏了但是它還是佔乙個位置

邊框-css3

border-image--url 切割的位置   如何處理直邊可選值(stretch  repeat  round)拉伸  重複

border-image:url("") 11 11 11 11 stretch;

盒子的投影

box-shadow--水平偏移-垂直偏移-模糊距離-陰影擴充套件--(正右下)

border-radius--圓角-橢圓形 -可以指定位置如border-top-right

HTML CSS基礎總結

自學html和css,學習 為慕課網和w3school。html裡較為容易忘記的有以下 1,html的宣告如下 在xhtml中 宣告如下 html5中最簡便 2.html標籤 表示強調,斜體 表示更強烈的強調,粗體 短文本引用,長文字引用。輸入空格的方法 標籤引入文字 為橫線,預設灰色。一行 多行 ...

HTML,CSS基礎總結

1.css可以提高 的復用性,將內容和表現分離。2.使用css的三種方式 行內式,內聯式,外聯式。檢查 f12 網路 重新整理頁面時載入兩個檔案 html,css。如果有乙個檔案沒有載入則表示載入時有問題。3.css常用選擇器 元素選擇器 元素名 類選擇器 類名 id選擇器 id名 並集選擇器 選擇...

html css筆記總結

完整的html結構 樣式的引用 一。內部編寫 哈,我是乙個帥哥 是不是哦,我暈你 我看看行不行。執行結果為 哈我是乙個帥哥 是不是哦,我暈你 我看看行不行。解釋 哈我是乙個帥哥 用的是absolute 絕對定位,它相對於第乙個div來定位,因為第乙個div是它的父級元素,將它包含在裡面。所以它出現在...