CSS簡介和屬性
1 CSS簡介
1.1 CSS概念
Cascading Style Sheet——控制頁面的樣式；css
1.2 CSS歷史
1996:CSS1--> 1998:CSS2--> 2001:CSS3--> 2007:CSS2.1
注：CSS3並非一個獨立的版本，而是一個一個的模塊兒；html
1.3 CSS引入方式
樣式表
- 外部樣式表
<head>
<link rel="stylesheet" href="base.css">
</head>
- 內部樣式表
<head>
<style>
body{background-color:red;}
</style>
</head>
內嵌樣式
<p style="color:red;margin:20px;">This is a paragraph</p>
CSS基本語法
CSS主要由選擇器、屬性表達式和註釋構成；
web
selector {
property1:value;
property2:value;
}
2 CSS屬性表達式
2.1 屬性聲明
CSS屬性聲明=屬性名：屬性值；
CSS註釋：/*+屬性表達式+*/;瀏覽器
2.2 瀏覽器私有屬性
- Chrome、Safari--> -webkit-
- firefox--> -moz-
- IE --> -ms-
- opera --> -o-
.pic {
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
2.3 屬性值語法
基本元素+組合符號+數量符號
spa
margin:[<lengh>|<percentage>|auto]{1,4}
2.4 基本元素
- 關鍵字：
auto,solid,bold... - 類型：
- 基本類型：
<length>/<percentage>/<color>... - 其餘類型：
<'pading-width'>,<color-stop>...
- 基本類型：
- 符號：
/,, inherit,initial
2.5 組合符號
- 組合符號-空格
<'font-size'> <'font-family'>- 合法值：
font:12px arial; - 不合法值：
2em/arial 14px
- 組合符號-&&
<length>&&<color>- 合法值：
gren 2px;/1em blue - 不合法值：
blue/1em
- 組合符號-||
underline||overline||line-through||blink- 合法值：
underline/overline underline
- 組合符號-|
<color>|transparent- 合法值：
orange/transparent
- 組合符號-[]
bold[thin||<length>]- 合法值：
bold thin/bold 2em/bold thin 16px?
2.6 數量符號
- 數量符號-無
<length>- 合法值：
1px/10em - 不合法值：
1px 2px
- 數量符號-+
<color-stop>[,<color-stop>]+- 合法值：
#fff,red/blue,green 50%,gray - 不合法值：
red
- 數量符號-？
inset?&&<color>- 合法值：
inset blue/red
- 數量符號-{}
<length>{2,4}- 合法值：
1px 2px/1px 2px 3px
- 數量符號-*
<time>[,<time>]*- 合法值：
1s/1s,4ms
- 數量符號-#
<time>#- 合法值：
2s,4s - 不合法值：
1ms 2ms
2.7 屬性值例子
padding-top:<length>|<percentage>- 正確實例：
padding-top:1px; - 錯誤實例：
padding-top:1em 5%;
- 正確實例：
border-width:[<length>|thick|medium|thin]{1,4}- 正確實例：
border-width:2px; - 錯誤實例：
border-width:2px small;
- 正確實例：
box-shadow:[inset?&&[<length>{2,4}&&<color>?]]#|none- 正確實例：
box-shadow:3px 3px rgb(50%,50%,50%),red 0 0 4px inset; - 錯誤實例：
box-shadow:inset 2px 4px,2px blue;
- 正確實例：
@規則語法
使用規則：@標識符 XXX;/@標識符 XXX{}firefox
@import "subs.css";
@charset "utf-8";
@media print{
body{font-size:10pt}
}
@keyframes fadein{
0%{top:0;}
50%{top:30px;}
100%{top:0;}
}
其餘@標識符：@media,@keyframes,@font-face,@import,@charset,@namespace,@page,@supports,@document3d
相關文章
- 1. CSS中 Zoom屬性 介紹
- 2. css 2D 屬性介紹
- 3. CSS中overflow屬性介紹
- 4. jQuery--屬性和CSS
- 5. CSS屬性簡寫彙總
- 6. CSS 的簡寫屬性
- 7. css 盒子屬性 和 顏色屬性
- 8. 【CSS】其他CSS屬性和特性
- 9. iOS之CAGradientLayer屬性簡介和使用
- 10. CSS content 屬性 CSS counter-increment 屬性 CSS counter-reset 屬性
- 更多相關文章...
- • XLink 和 XPointer 簡介 - XLink 和 XPointer 教程
- • Scala 簡介 - Scala教程
- • Github 簡明教程
- • JDK13 GA發佈：5大特性解讀
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
