css基礎-1
css簡介
一、CSS 指層疊樣式表
樣式定義如何顯示 HTML 元素
樣式通常存儲在樣式表中
把樣式添加到 HTML 4.0 中,是為了解決內容與表現分離的問題
外部樣式表可以極大提高工作效率
外部樣式表通常存儲在 CSS 文件中
多個樣式定義可層疊為一
CSS 可以通過以下方式添加到HTML中:
1.內部樣式:
行內樣式
嵌入樣式
2.外部樣式
(1)行內樣式- 在HTML元素中使用"style" 屬性
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
(2)嵌入樣式-在HTML文檔頭部 <head> 區域使用<style> 元素 來包含CSS
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
以上是直接給元素定義css
(1、通過選擇器來調用css
定義方式有兩種:id選擇器和class選擇器
例子1:id選擇器 調用
#id名字 {屬性:值} <標簽 id="剛才定義的id名字">
#pang {clor:red} <p id="pang">
例子2: class選擇器 調用
.名字 {屬性:值} <標簽 clas="剛才定義的id名字">
.pang {color:red} <p class="pang">
這兩種調用可以使用在內部樣式表和外部引用中
(3)外部引用 - 使用外部 CSS 文件
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
最好的方式是通過外部引用CSS文件.
CSS樣式表優先順序
ID選擇器>類選擇器>標簽選擇器
選擇器類型相同時,按照代碼應用順序,後應用的樣式覆蓋先應用的樣式
CSS行內樣式在所有樣式表中優先級最高
二、css語法格式
1、CSS 規則由兩個主要的部分構成:(1)選擇器,(2)以及一條或多條聲明:
(1)選擇器通常是:您需要改變樣式的 HTML 元素。(也就是標簽)
(2)每條聲明:由一個屬性和一個值組成。
屬性(property)是您希望設置的樣式屬性(style attribute)。每個屬性有一個值。屬性和值被冒號分開。
CSS聲明總是以分號;結束,聲明組以大括號{}括起來:
例子:
p {color:red;text-align:center;}
如果屬性值有兩個單詞以上,需要""擴起來
比如: a {color:"red asd"}
2、css註釋
/* 註釋內容 */
三、css常用屬性
(1)height: 表示高度
(2)width: 表示寬度
(3)background : 表示背景
背景屬性(背景圖片)例子:
{backgrouund:blue url(1.png) no-repeat X軸位置 Y軸位置;}
blue:背景顏色
no-repeat:表示背景圖片不重復顯示
X、Y軸可以用像素來表示:比如100px 200px
center:表示居中
fixed:這個值表示固定背景圖片,圖片不會隨著滾動條的下拉而消失。也就是說始 終在屏幕上。
css基礎-1