當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS从入门到精通

發布時間：2023/12/20 CSS 18 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS从入门到精通小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

- CSS技術
- - 什么是CSS
  - CSS的用法
- 選擇器
- - 標簽名選擇器
  - class選擇器
  - id選擇器
  - 分組選擇器
  - 屬性選擇器
- 盒子模型
- - margin（外邊距）
  - border（邊框）
  - padding（內邊距）
- 元素類型的補充
- - 塊級元素
  - 行內元素
  - 行內塊元素
- 永和門店系統
- 用戶注冊練習

CSS技術

什么是CSS

CSS全稱叫做層疊樣式表stylesheet，是用來修飾HTML網頁的一門技術，增強網頁的展示能力。

主要是使用CSS屬性來實現，最終可以將css代碼和HTML網頁代碼進行分離，也可以提高css代碼的復用性。

CSS的用法

需求::將單元格內文字居中顯示

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>css的使用</title><link href="demo.css" rel="stylesheet"/><style>td{text-align: center;}</style></head><body><table border="1" cellspacing="0" width="30%"><tr align="center"><td >你好1</td><td >你好2</td></tr><tr style="text-align:center;"><td >你好3</td><td >你好4</td></tr></table></body> </html>

選擇器

所謂的選擇器就是在HTML中幫助我們選中想要修飾的標簽。

標簽名選擇器

選中網頁中的所有元素

class選擇器

給需要修飾的元素，加class屬性，可以同時使用多個屬性，之間用空格隔開。

<p class="a b">123</p> <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; /* 首行縮進*/ }

分組選擇器

/* 分組選擇器,將多個選擇器選中的元素組合在一起，統一設置樣式 */ .a,.b,#p1{background-color: #000000; }

屬性選擇器

根據屬性條件選中符合條件的元素來設置樣式（逗號隔開）

盒子模型

指的是將HTML中所有元素都看成一個盒子，盒子與盒子之間的距離，包括盒子的邊框以及盒子邊框和盒子內容的距離都可以設置。

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（內邊距）

元素類型的補充

塊級元素

默認情況下，塊級元素獨占一行（div , p，h1~h6）

可以設置寬和高。如果不設置寬和高，其中寬是默認填滿父元素，而高是由內容

外邊距、邊框、內邊距都可以設置

行內元素

默認情況下，多個行內元素處在同一行

不能設置寬和高

左右外邊距、邊框、內邊距都可以設置，上下外邊距設置無效

行內塊元素

既具備行內元素的特征，還具備塊級元素的特征

永和門店系統

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>測試小票</title><link rel="stylesheet" href="1.css"/><style>/* 統一網頁的風格 */body{width: 300px;/* 寬度 */}/* 加大字號 */.a{font-size: 30px;}/* 文字居中 */.b{/* text-align:center ; */margin-left: 80px;/* 左內邊距 */}/* 設置首行縮進 */#readme{text-indent: 30px;}/* 設置圖片居中 */img{margin-left: 20px;}/* 設置水平線: 寬度虛線紅色*/hr{border:1px dashed red;}</style></head><body><div>顧客聯</div><div class="a">請您留意取餐賬單號</div><div class="b">自取顧客聯</div><div>永和大王(北二環西路店)</div><div>010-62112313</div><div class="b">--結賬單--</div><div class="a">賬單號:P00000009</div><div>賬單類型:食堂</div><div>人數:1</div><div>收銀員:張靜</div><div>開單時間:2018-04-17 07:24:11</div><div>結賬時間:2018-04-17 07:24:22</div><hr /><table><tr><td>數量</td><td>品項</td><td>金額</td></tr><tr><td>1</td><td>油條豆漿套餐<br />1X--油條<br />1X--現磨豆漿(熱/甜)</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">根據相關稅法規定，電子發票的開票日期同網上申請電子發票的日期，如您需要當日的電子發票請務必在消費當日通過掃描下方二維碼，根據指引步驟開具您的增值稅電子普通發票。此二維碼30天有效，掃描時請保持小票平整。</div><div><img src="2.png"/></div><div>官網：www.yonghe.com.cn</div><div>加盟熱線：86-21-60769397 或 86-21-60769002</div></body> </html>

用戶注冊練習

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>用戶注冊</title><style>/* 語法:選擇器{樣式1;樣式2;樣式3;} */ /* 統一網頁風格 */ body{font-family: "宋體";/* 統一字體 */font-size: 15px;/* 統一字號 */width: 500px;/* 統一寬度 */padding-left: 100px;/* 設置左邊距 */ }/*修飾所有input的樣式 */ .a{height: 20px;/* 高度 */width: 300px;/* 寬度 */padding: 15px;/* 調整內容和邊框的距離,內邊距 */font-size:20px ;/* 字號變大 */margin: 10px;/* 調整盒子間的距離,外邊距 */ }/* 修飾所有的提示信息 */ .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;/* 設置寬度 */height: 50px;/* 設置高度 */border: #E64346;/* 設置邊框 */ }</style></head><body><form method="get" action="#"> <table><h2 style="padding-left: 130px;font-size:30px;">用戶注冊</h2><tr><td><input type="text" placeholder="用戶名" class="a"/></td></tr><tr><td class="xiao">支持中文、字母、數字、“-”、“_”的組合，4-20個字符</td></tr><tr><td><input type="password" placeholder="設置密碼" class="a" /></td></tr><tr><td class="xiao">建議使用數字、字母和符號兩種以上的組合，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="#">《京淘用戶注冊協議》</a></td></tr><tr><td><input id="btn" type="submit" value="立即注冊" /></td></tr></table></body> </html>

總結

以上是生活随笔為你收集整理的CSS从入门到精通的全部內容，希望文章能夠幫你解決所遇到的問題。

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

css
入门

上一篇： Windows 10原创知识题(第四版)
下一篇： scp选择二进制_二进制传输与文本传输区