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

CSS

CSS简单使用

發布時間：2025/3/17 CSS 36 豆豆

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

CSS簡單使用

標簽：前端技術

CSS(Cascading Style Sheet : 層疊樣式表單)用來定義網頁顯示效果. 可以解決HTML代碼對樣式定義的重復,提高后期樣式代碼的可維護性,并增強網頁的顯示效果. 即:CSS將網頁內容與顯示樣式分離,增強了顯示功能.

CSS與HTML結合

CSS與HTML結合的方式有四種:

style屬性:
在每個HTML標簽上均有一個style屬性, 將樣式直接寫入標簽:

<style/>標簽:
使用HTML的<style/>標簽,將CSS代碼在<head/>內:

<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>IFS</title><style type="text/css">div {background-color: coral;color: crimson;}</style> </head>

@import引入:
在<style/>內用@import "CSS-path";引入CSS文件:

注意: 這種方式的瀏覽器兼容性較差, 不推薦.

<link/>引入:
使用頭標簽<link/>引入CSS是最常用的結合方式:

注: 結合優先級:
根據書寫順序<由上到下,由外到內>,優先級<由低到高>,即:后加載優先級更高.

代碼規范

選擇器名稱 { 屬性名：屬性值；屬性名：屬性值；…….}
- 屬性與屬性間用;隔開;
- 屬性名與值間用:連接;
- 一個屬性的多個值用空格隔開;

CSS選擇器

選擇器是CSS的核心,從最初的元素/class/id選擇器,演進到偽元素/偽類,以及CSS3中提供的更豐富的選擇器… 定位頁面上的任意元素開始變得愈發簡單.

基本選擇器

CSS提供的基本選擇器有三種:

標簽選擇器:
使用標簽名作為選擇對象:

div {background-color: aquamarine;color: coral; }

class選擇器:
可為每個HTML標簽添加class屬性以標識該元素:

<div class="form-class">... </div> .form-class {background-color: beige;color: crimson; }

注: class可以選用多個style:
<p class="div-class div-width-class">百度/阿里/騰訊</p>

ID選擇器
可為每個HTML標簽添加id屬性以標識該元素:

<dl id="dl-id"><dt>Head</dt><dd>Sub</dd> </dl> #dl-id {background-color: coral;color: crimson; }

注:基本選擇器優先級:
style屬性 > ID選擇器 > class選擇器 > 標簽選擇器

擴展選擇器

關聯選擇器:

<div><p>關聯選擇器</p></div> <p>不關聯</p>

HTML代碼如上, 可以僅設置<div><p>元素內的樣式而忽略單<p>元素內樣式:

div p{color: crimson; }

組合選擇器:
組合選擇器可將不同的標簽設置成相同的樣式:

div, p {color: darkblue; }

偽元素選擇器
偽元素選擇器是CSS中已經提供一些樣式,可直接引用,如超鏈接狀態:

原始狀態鼠標懸停點擊點擊之后

:link

:hover

:active

:visited

<a href="http://www.taobao.com" target="_blank">淘寶</a> /* 初始狀態 */ a:link {background-color: blueviolet; }/* 懸停 */ a:hover {background-color: aqua; }/* 點擊 */ a:active {background-color: crimson; }/*點擊之后*/ a:visited {background-color: yellowgreen; }

注意: 偽元素選擇器瀏覽器兼容性較差.

CSS盒子模型

Box Model:盒子模型(又叫框模型),Box Model規定了元素框處理元素內容(element content)、內邊距(padding)、邊框(border)和外邊距(margin)的方式.在HTML文檔中,每個元素（element）都有盒子模型,所以在Web世界中(特別是頁面布局中),Box Model無處不在:

注意在進行布局前需要將數據封裝到一塊DIV區域內.

邊框 border

border[-*] : border-width || border-style || border-color

邊框描述

border	統一設置
border-top	上
border-bottom	下
border-left	左
border-right	右

<div class="box-div-class">百度/阿里/騰訊 </div> <div class="box-div-class box-right-class">百度/阿里/騰訊 </div> <style type="text/css">.box-div-class {width: 400px;height: 300px;/*盒子模型*/border: 5px solid brown;}.box-right-class {border-right: 3px dashed green;} </style>

內邊距 padding

padding[-*] : length
同border,使用padding可以統一設置,也可上下左右分別設置:

.box-padding-class {padding-left: 50px; }

內邊距padding又翻譯成補白.

外邊距 margin

margin[-*] : auto | length
同border,使用margin可以統一設置,也可上下左右分別設置:

.box-margin-class {margin-top: 50px; }

外邊距margin又翻譯成邊界.

CSS布局

布局漂浮

float : none | left | right

屬性作用

left	文本流向對象的右邊
right	文本流向對象的左邊

.float-left-class{float: left; }

注意: 布局漂浮瀏覽器兼容性較差,不推薦使用.

布局定位

position : static | absolute | relative

屬性說明

static	默認值,無特殊定位,對象遵循HTML定位規則
absolute	將對象從文檔流中拖出: 可以使用left/right/top/bottom等屬性相對于其最接近的一個具有定位設置的父對象進行絕對定位,如果不存在這樣的父對象,則依據body對象,而其層疊通過z-index屬性定義
relative	對象不可層疊(不會把對象從文檔流中拖出),與absolute一樣可以使用left/right/top/bottom數據進行相對定位.

absolute

.position-class{position: absolute;left: 50px;top: 50px; }

relative

.position-class{position: relative;left: 50px;top: 50px; }

總結

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

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

简单
css