作爲web前端的表現層css擔任着將整個網頁做得更加美觀的重要任務。當然想要掌握css也會比html稍微困難一些。
css有四種引入格式:內嵌式引入
行內樣式
外鏈樣式
嵌入樣式
內嵌式引入:
<!DOCTYPE html>
<html lang="en"><head> <meta charset="UTF-8"> <title>Document</title>
<style type="text/css">
body{font-size:36px;}
</style>
</head>
<body>
行內樣式:
<b style="font-size:56px;">瀏覽器不支持 iframe。</b>
外鏈樣式:
<link rel="stylesheet" type="text/css" href="css/main.css">
嵌入樣式:
<style type="text/css">
@import url("css/style.css");</style>
介紹了css的引入方式,接下來就是css的選擇符了,這個在本文頂部的思維導圖中有詳細的講解在這裏就不細說了。(還是老規矩實際操作搞起來,裝逼呀🐶)
我們可以看到圖二與圖三的差距,當我們把鼠標移動到圖二中的box上時,box就會向圖三進行轉變。這種轉變的過程是用transition進行的。我們在transition中加入我們想要進行變化的元素以及元素變化的樣式和時長。
Transiction:
property(參與過渡效果的屬性)
duartion(過渡效果花費的時間)
timing(執行速度的快慢)
由此我們可以定義css中盒子的運動變化。
一般我們css使用的引入樣式主要分爲嵌入式和外鏈式。
嵌入式我們已經示範給大家看了,接下來我們示範外鏈式:
這是html文件
這是css文件
這是文件在瀏覽器中的樣式。
我們可以看見利用外鏈式我們可以非常簡潔明瞭的瞭解css部分與html部分的區別以及各個部分元素的屬性和變化(我個人更喜歡這個引入方式),當然在我們製作css短小的文件時我建議使用嵌入式更加節省時間成本,但是當css部分特別長時,最好使用外鏈式,外鏈式有利於我們進行查補錯誤和更改。
由此可見使用哪種引入方式並不影響我們文件的運行,只是在不同情況下選擇最合適的方式纔是最重要的。
到此就是css具體的使用和框架。