CSS从入门到精通
文章目錄
- CSS技術(shù)
- 什么是CSS
- CSS的用法
- 選擇器
- 標簽名選擇器
- class選擇器
- id選擇器
- 分組選擇器
- 屬性選擇器
- 盒子模型
- margin（外邊距）
- border（邊框）
- padding（內(nèi)邊距）
- 元素類型的補充
- 塊級元素
- 行內(nèi)元素
- 行內(nèi)塊元素
- 永和門店系統(tǒng)
- 用戶注冊練習(xí)
CSS技術(shù)
什么是CSS
CSS全稱叫做層疊樣式表stylesheet，是用來修飾HTML網(wǎng)頁的一門技術(shù)，增強網(wǎng)頁的展示能力。
主要是使用CSS屬性來實現(xiàn)，最終可以將css代碼和HTML網(wǎng)頁代碼進行分離，也可以提高css代碼的復(fù)用性。
CSS的用法
需求::將單元格內(nèi)文字居中顯示
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>css的使用</title><!-- css方式4 實現(xiàn)css與HTML代碼的分離，提高css代碼的復(fù)用性--><link href="demo.css" rel="stylesheet"/><!-- css方式3 --><style>td{text-align: center;}</style></head><body><table border="1" cellspacing="0" width="30%"><tr align="center"><!-- css方式1 --><td >你好1</td><td >你好2</td></tr><tr style="text-align:center;"><!-- css方式2 --><td >你好3</td><td >你好4</td></tr></table></body> </html>選擇器
所謂的選擇器就是在HTML中幫助我們選中想要修飾的標簽。
標簽名選擇器
選中網(wǎng)頁中的所有元素
<style> /* 在HTML中加入css*/span{ /* 標簽名選擇器,選中所有span */background-color: chartreuse; /* 背景顏色*/ font-size: 24px; /*字號*/font-family: 黑體;/* 字體 */} </style>class選擇器
給需要修飾的元素，加class屬性，可以同時使用多個屬性，之間用空格隔開。
<p class="a b">123</p> <!-- b覆蓋a--><style> /* 在HTML中加入css*//* 選擇class=a的元素 */.a{background-color: cornflowerblue; /*背景顏色*/color:red; /*字體顏色*/}.b{background-color: lightsalmon;color: black;} </style>id選擇器
id屬性的值在整個HTML中作為唯一標識的存在。
可以通過ID值選中指定的元素（#id值）
<p id="p1">123</p> /* 使用id選中元素 */ #p1{text-indent: 200px; /* 首行縮進*/ }分組選擇器
/* 分組選擇器,將多個選擇器選中的元素組合在一起，統(tǒng)一設(shè)置樣式 */ .a,.b,#p1{background-color: #000000; }屬性選擇器
根據(jù)屬性條件選中符合條件的元素來設(shè)置樣式（逗號隔開）
<style type="text/css">/* 選中指定的元素 */input[type='text']{background-color: #6495ED;} </style>盒子模型
指的是將HTML中所有元素都看成一個盒子，盒子與盒子之間的距離，包括盒子的邊框以及盒子邊框和盒子內(nèi)容的距離都可以設(shè)置。
margin（外邊距）
<input type="radio" name="sex" value="1" style="margin: 20px;"/>男border（邊框）
#div2{ border:10px solid yellow;/*實線*/ border:10px dashed yellow;/*點狀*/ border:10px dotted yellow;/*虛線*/ }padding（內(nèi)邊距）
<td style="padding: 20px;">用戶名:</td>元素類型的補充
塊級元素
默認情況下，塊級元素獨占一行（div , p，h1~h6）
可以設(shè)置寬和高。如果不設(shè)置寬和高，其中寬是默認填滿父元素，而高是由內(nèi)容
外邊距、邊框、內(nèi)邊距都可以設(shè)置
行內(nèi)元素
默認情況下，多個行內(nèi)元素處在同一行
不能設(shè)置寬和高
左右外邊距、邊框、內(nèi)邊距都可以設(shè)置，上下外邊距設(shè)置無效
行內(nèi)塊元素
既具備行內(nèi)元素的特征，還具備塊級元素的特征
永和門店系統(tǒng)
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>測試 小票</title><!-- link把外部CSS文件引入到這個網(wǎng)頁中 rel是指文件的類型(stylesheet是固定值是樣式表)href是指定文件的位置--><link rel="stylesheet" href="1.css"/><style>/* 統(tǒng)一網(wǎng)頁的風(fēng)格 */body{width: 300px;/* 寬度 */}/* 加大字號 */.a{font-size: 30px;}/* 文字居中 */.b{/* text-align:center ; */margin-left: 80px;/* 左 內(nèi)邊距 */}/* 設(shè)置首行縮進 */#readme{text-indent: 30px;}/* 設(shè)置圖片居中 */img{margin-left: 20px;}/* 設(shè)置水平線: 寬度 虛線 紅色*/hr{border:1px dashed red;}</style></head><body><div>顧客聯(lián)</div><div class="a">請您留意取餐賬單號</div><div class="b">自取顧客聯(lián)</div><div>永和大王(北二環(huán)西路店)</div><div>010-62112313</div><div class="b">--結(jié)賬單--</div><div class="a">賬單號:P00000009</div><div>賬單類型:食堂</div><div>人數(shù):1</div><div>收銀員:張靜</div><div>開單時間:2018-04-17 07:24:11</div><div>結(jié)賬時間:2018-04-17 07:24:22</div><hr /><table><tr><td>數(shù)量</td><td>品項</td><td>金額</td></tr><tr><td>1</td><td>油條豆?jié){套餐<br />1X--油條<br />1X--現(xiàn)磨豆?jié){(熱/甜)</td><td>7.00</td></tr></table><hr /><table><tr><td width="180px">支付寶花唄一元早餐</td><td>-3.00</td></tr><tr><td>合計</td><td>4.00</td></tr><tr><td>支付寶</td><td>1.00</td></tr><tr><td>支付寶補貼</td><td>3.00</td></tr></table><hr />打印時間:2018-04-17 07:24:22<hr /><div id="readme">根據(jù)相關(guān)稅法規(guī)定，電子發(fā)票的開票日期同網(wǎng)上申請電子發(fā)票的日期，如您需要當日的電子發(fā)票請務(wù)必在消費當日通過掃描下方二維碼，根據(jù)指引步驟開具您的增值稅電子普通發(fā)票。此二維碼30天有效，掃描時請保持小票平整。</div><div><img src="2.png"/></div><div>官網(wǎng)：www.yonghe.com.cn</div><div>加盟熱線：86-21-60769397 或 86-21-60769002</div></body> </html>用戶注冊練習(xí)
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>用戶注冊</title><style>/* 語法:選擇器{樣式1;樣式2;樣式3;} */ /* 統(tǒng)一網(wǎng)頁風(fēng)格 */ body{font-family: "宋體";/* 統(tǒng)一字體 */font-size: 15px;/* 統(tǒng)一字號 */width: 500px;/* 統(tǒng)一寬度 */padding-left: 100px;/* 設(shè)置左邊距 */ }/*修飾所有input的樣式 */ .a{height: 20px;/* 高度 */width: 300px;/* 寬度 */padding: 15px;/* 調(diào)整內(nèi)容和邊框的距離,內(nèi)邊距 */font-size:20px ;/* 字號變大 */margin: 10px;/* 調(diào)整盒子間的距離,外邊距 */ }/* 修飾所有的提示信息 */ .xiao{font-size: 8px;/* 字體變小 */color: grey;/* 字的顏色 */padding-left: 30px;/* 左邊距 */ }/* 修飾同意 */ #note{height: 60px;/* 高度 */text-indent: 40px;/* 首行縮進 */font-size: 12px;/* 字號變大 */ }/* 修飾立即注冊按鈕 */ #btn{background-color: #E64346;/* 背景色 */font-size: 25px;/* 字號變大 */color: white;/* 字的顏色 */width: 360px;/* 設(shè)置寬度 */height: 50px;/* 設(shè)置高度 */border: #E64346;/* 設(shè)置邊框 */ }</style></head><body><!-- 用戶注冊的數(shù)據(jù)需要提交給服務(wù)器入庫,所以需要form --><form method="get" action="#"> <!-- 指定提交數(shù)據(jù)的方式--><table><h2 style="padding-left: 130px;font-size:30px;">用戶注冊</h2><tr><td><input type="text" placeholder="用戶名" class="a"/></td></tr><tr><td class="xiao">支持中文、字母、數(shù)字、“-”、“_”的組合，4-20個字符</td></tr><tr><td><input type="password" placeholder="設(shè)置密碼" class="a" /></td></tr><tr><td class="xiao">建議使用數(shù)字、字母和符號兩種以上的組合，6-20個字符</td></tr><tr><td><input type="password" placeholder="確認密碼" class="a" /></td></tr><tr><td class="xiao">兩次密碼輸入不一致</td></tr><tr><td><input type="password" placeholder="驗證手機" class="a"/>或<a href="#"> 驗證郵箱</a></td></tr><tr><td id="note"><input type="checkbox" />我已閱讀并同意 <a href="#">《京淘用戶注冊協(xié)議》</a></td></tr><tr><td><!-- type類型必須是submit才能提交數(shù)據(jù) --><input id="btn" type="submit" value="立即注冊" /></td></tr></table></body> </html>總結(jié)
- 上一篇： Windows 10原创知识题(第四版)
- 下一篇： s4800扫描电镜的CSS3_Hitac