css基礎框架及用法

css主要框架
作爲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部分
這是html文件
這是文件css部分
這是css文件
在瀏覽器中的樣式
這是文件在瀏覽器中的樣式。
















我們可以看見利用外鏈式我們可以非常簡潔明瞭的瞭解css部分與html部分的區別以及各個部分元素的屬性和變化(我個人更喜歡這個引入方式),當然在我們製作css短小的文件時我建議使用嵌入式更加節省時間成本,但是當css部分特別長時,最好使用外鏈式,外鏈式有利於我們進行查補錯誤和更改。
由此可見使用哪種引入方式並不影響我們文件的運行,只是在不同情況下選擇最合適的方式纔是最重要的。
到此就是css具體的使用和框架。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章