當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

20-45

發布時間：2023/12/20 编程问答 19 豆豆

生活随笔收集整理的這篇文章主要介紹了 20-45 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

?20~45集--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

?表格標簽

表格屬性

表單標簽

表單與表格的組合使用

CSS基礎語法

CSS基礎語法：

內聯樣式與內部樣式

CSS的顏色表示法

CSS背景樣式：

CSS邊框樣式

family字體類型

字體大小粗細樣式

文本縮進與文本對齊

文本的行高

CSS復合樣式

ID選選擇器及注意事項

CLASS選擇器及注意事項

??列表之間可以互相嵌套

?表格標簽

<table>:表格的最外層容器

? ? <tr>：定義表格行

? ? <th>：定義表頭

? ? <td>：定義表格單元

? ? <caption>：定義表格標題

語義化標簽：<tHead><tBaby><tFood>————>表格更加規范

<thead>可以出現多次<tbaby><tfood>只可以出現一次

<table><caption>天氣預報</caption><thead><tr><th>日期</th><th>天氣情況</th><th>出行情況</th></tr></thead><tbody><tr><td>2022年1月1日</td><td>🌤</td><td>天氣晴朗適合出門</td></tr><tr><td>2022年1月2日</td><td>小雨</td><td>出門帶傘</td></tr></tbody><tfood></tfood></table>

表格屬性

boeder:表格邊框

cellpadding：單元格內的空間

cellspacing：單元格之間的空間

rowspan：合并行

colspan：合并列

align：左右對齊方式

valign：上下對齊方式

表單標簽

form、input.....

? ? ? ? input（單標簽）決定type是什么屬性

<form action="http://www.baidu.com"><h2>輸入框：</h2><input type="text" placeholder="請輸入用戶名"><h2>密碼框：</h2><input type="password" placeholder="請輸入密碼"><h2>復選框</h2><input type="checkbox" checked>蘋果<input type="checkbox" checked>香蕉<input type="checkbox" disabled>葡萄<h2>單選框</h2><input type="radio" name="gender">男<input type="radio" name="gender">女<h2>上傳文件</h2><input type="file"><h2>提交按鈕和重置按鈕</h2><input type="submit"><input type="reset"> </form>

<textarea>：多行文本框

<select>、<option>：下拉菜單

<label>：輔助表單

一些常見屬性：

checke、disable、name.....

<h2>多行文本框</h2><textarea cols="30" rows="10"></textarea><h2>下拉菜單</h2><select><option selected disable>請選擇</option><option>北京</option><option>上海</option><option>杭州</option> </select><select size="3"><option>杭州</option><option>北京</option><option>上海</option></select><select multiple><option>杭州</option><option>上海</option><option>北京</option></select><input type="file" multiple><input type="radio" name="gender" id="man"><label for="man">男</label><input type="radio" name="gender" id="woman"><label for="woman">女</label></form> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><form action=""><table border="1" cellpadding="30"><tbody><tr align="center"><td rowspan="4">總體信息</td><td colspan="2">用戶注冊</td></tr><tr align="right"><td>用戶名</td><td><input type="text" placeholder="請輸入用戶名"></td></tr><tr align="right"><td>密碼：</td><td><input type="password" placeholder="請輸入密碼"></td></tr><tr align="center"><td colspan="2"><input type="submit">       <input type="reset"></td></tr></tbody></table></form> </body> </html>

表單與表格的組合使用

<div>(塊)：

全稱為division，“分割、分區”的意思，<div>標簽用來劃分一個區域，相當于一塊區域容器，可以容納段落、標題、表格、圖像等各種網頁元素。HTML中大多數的標簽都可以嵌套在<div>標簽中，<div>中還可以嵌套多層<div>，用來將網頁分割成獨立的、不同的部分，來實現網頁的規劃和布局。

<span>（內聯）：

用來修飾文字的，div與span都是沒有任何默認樣式的，需要有CSS的配合

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><div><h2><a href="#"><span>html5</html></span></h2><a HREF="#"><img src="" alt=""></a><p></p></div><span></span></body> </html>

嘗試做出無修飾的

CSS基礎語法

格式：

選擇器{屬性1：值1；屬性2：值2}

單位：

px-->像素（pixel%）--->百分比

基本樣式：

width、height、blackground-color

CSS基礎語法：

選擇器{屬性1：值1；屬性2：值2}

width：寬

height：高

background—color：背景色

長度單位：

? ? ? ? 1.px->像素

? ? ? ? 2.%->百分比

? ? ? ? ? ? ? ? 外容器->600px? 當前容器 50%->300px

CSS注釋? ?/*注釋的內容*/

快捷操作：shift+alt+a

ctrl+/

內聯樣式與內部樣式

內斂（行內，行間）樣式：

在html標簽上添加style屬性來實現

內部樣式：

在<style>標簽內添加的樣式

PS：內部樣式用的代碼，可以復用代碼

CSS樣式的引入方式：

1、內聯樣式：

style屬性

2、內部樣式：

style標簽

3、外部樣式：

引入一個單獨的CSS文件（name.css）

通過link標簽引入外部資源，rel屬性指定資源跟頁面的關系，href屬性資源的地址

通過@inport方式引入外部樣式。（不建議使用）

<link>標簽

rel

href

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./common.css"><title>Document</title><style></style> </head> <body><div>這是一個大塊</div> </body> </html> div{ width: 100px; height: 100px; background-color: aqua}

CSS的顏色表示法

1、單詞表示法：red bule green...

2、十六進制表示法：#000? ? ?#ffff

0 1 2 3 4 5 6 7 8? 9

0 1

0 1 2 3 4 5 6 7 8 9 a b c d e f

3、rgb三原色表示法：rgb（255，255，255）對應白色

范圍0--255

CSS背景樣式：

background-color：背景顏色

background-image：背景圖片

url（背景地址）

background-repeat：背景圖片的平鋪方式

repeat-x? ? ? ?x軸平鋪

repeat-y? ? ? ? y軸平鋪

repeat（x，y都進行平鋪，默認值）

no-repeat? 都不平鋪

background-position：背景圖片的位置

x，y：number單詞

? ? ? ? x：left，center，right

? ? ? ? y，top，center，bottom

background-attachment：背景圖隨滾動條的移動方式

? ? ? ? scroll默認值（背景位置按照當前元素偏移）

? ? ? ? fixed（背景位置按照瀏覽器位置進行偏移）

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{ width:300px;height：300px；background-color:red;background-image: url(./img/dog.jpg); background-repeat: no-repeat;background-position: 50% 50%;background-attachment: scroll;}</style> </head> <body><div>這是一個塊</div> </body> </html>

CSS邊框樣式

1.border-style : 邊框樣式
solid : 實線
dashed: 虛線
dotted : 點線
2.border-width : 邊框的大小
px···
3.border-color : 邊框的顏色
red #f00 ···
注: 針對某一條進行單獨設置 : border-left-style : 中間是方向 left、right、top、bottom

邊框實現三角形
顏色 : 透明顏色 transparent

?<style>body{ background-color: green;}div{ width:0px; height:0px;border-top-color:transparent;border-top-style:solid;border-top-width: 30px;;border-right-color:red;border-right-style:solid;border-right-width: 30px;;border-bottom-color:transparent;border-bottom-style:solid;border-bottom-width: 30px;;border-left-color:transparent;border-left-style:solid;border-left-width: 30px;;}</style></head><body><div></div></body>

family字體類型

1.font-family : 字體類型
英文字體 : Arial,‘Times New Roman’
中文字體 : 微軟雅黑，宋體
2.中文字體的英文名稱 :
微軟雅黑: ‘Microsoft YaHei’(非襯線體)
宋體: SimSun(襯線體)
3.襯線體與非襯線體
==注意點: ==
1.多個字體類型的設置目的
2.引號的添加目的

?<style>/* div{ font-family:'Times New Roman';} *//* div{ font-family:宋體;} */div{ font-family : Algerian,'New Roman', SimSun , 微軟雅黑;}</style> </head> <body><div>我好困啊</div><p>我好困啊</p><div>I'm sleepy</div><P>I'm sleepy</P> </body>

字體大小粗細樣式

front-size : 字體大小
1.默認大小 : 16px
2.寫法 : number(px) | 單詞 ( small large ··· 不推薦使用)

文本修飾與文本大小寫
1.rext-decoration : 文本裝飾
下劃線(underline)、刪除線(line-through)、上劃線(overline)、不添加任何裝飾(none)
取值
注: 添加多個文本修飾 : line-through under-line overline
2.text-transform : 文本大小寫(針對英文)
小寫 : lowercase
大寫 : uppercase
只針對首字母大寫:capitalize

文本縮進與文本對齊

1.text-indent : 文本縮進
首行縮進
em單位: 相對單位，1em永遠跟字體大小相同
2.text-align : 文本對齊方式
對齊方式 : left、right、 center、justify (兩端點對齊)

?<style>/* p{ text-indent: 2em;font-size: 18px;} */p{ text-align: justify;}</style></head><body><p>

文本的行高

line-height : 定義行高
取值: 1. number( px ) | scale(比列值，跟文字大小成比列的 )
行高: 一行文字的高度，上邊距和下邊距的等價關系。
默認行高: 不是固定值，而是變化的。根據當前字體的大小再不斷的變化。

文本與段落實現個人簡介
?

CSS復合樣式

一個CSS屬性只控制一種樣式，叫做單一樣式。
一個CSS屬性控制多種樣式，叫做復合樣式。
復合樣式:
復合的寫法，是通過空格的方式實現的。復合寫法有的是不需要關心順序的，例如: background、border；有的需要關心順序，例如:font。
1.background : red url() repeat 0 0;
2.border : 1px red solid
3.font :
注 : 最少要有兩個值( size、family)
weight style size family √
style weight size family √
weight style size/line-height family √
注: 盡量不要混寫，如果非要混寫，那么一定要線寫復合樣式再寫單一樣式。

ID選選擇器及注意事項

1.ID選擇器
css : #elem{}
html : id= “elem”
注:
1.在一個頁面中，ID值是唯一的。
2.命名規范:字母、下劃線、中劃線、數字(命名的第一位不能是數字)。
3.命名方式:駝峰式、下劃線式、短線式。
駝峰寫法: searchButton(小駝峰) SearchButton(大駝峰)
searchsmallRutton
短線寫法: search-small-button=
下劃線寫法: search_small_button

CLASS選擇器及注意事項

CLASS選擇器
css : elem{}
html : class = “elem”
注:
1.class選擇器是可以復用的。
2.可以添加多個class樣式。
3.多個樣式的時候，樣式的優先級根據CSS決定，而不是class屬性中的順序
4.標簽+類的寫法

總結

以上是生活随笔為你收集整理的20-45的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： CMMI证书背后的6大怪相
下一篇：联想服务器x3250 m5文档,【联想x