狠狠撸

狠狠撸Share a Scribd company logo
CSS基本概念與語法(二)2011.5.31鄒心瑜Hsinyu Chouhsinyu.chou@isobar.com
重新認識HTML tag<h1>,<h2>,<p>,<div>….. 是什麼?
重新認識HTML tag它們是文字嗎?
重新認識HTML tag不,它們是除了是裡面的文字,也是外面的框框。
重新認識HTML tag所有HTML元素都是不同名字的框框。而<div>是天生沒有名字的萬用框框,你可以幫它取名字。<html>, <body>也都是框框。
重新認識HTML tag框框包括容器和內容物。你可以對內容物做些事情,也可以對容器做些事情。
重新認識HTML tag框框裡面還可以裝小框框。
重新認識HTML tag過去我們唯一知道的容器是<td>。
重新認識HTML tag現在試著把東西從<td>裡拿出來,讓CSS教它們排隊和變身。
重新認識HTML tag這就是部落格的原理。有了CSS,同樣的框框們能排成不同的隊形,變成各種顏色。
贬罢惭尝与颁厂厂的关係贬罢惭尝要找到对的颁厂厂档,才知道要排什麼队形,变什麼顏色。
贬罢惭尝与颁厂厂的关係颁厂厂要在贬罢惭尝裡找到对的框框,才知道叫谁排队或变身,这就是选择符的作用。
HTML與CSS的關係可以只選一個框框,也可以一次選好幾個框框。p{ 	font-size:13px; }(群組)p,  .block{ 	font-size:13px;}
HTML與CSS的關係還可以選框框裡的框框。(子嗣)#feature  .block  p{ 	font-size:13px;}
Firebug 練習http://dl.dropbox.com/u/8057029/0531/CSS-ex1.zip
CSS能改變哪些特性#header{  height: 100px;}選擇符             屬性         值
CSS能改變哪些特性我們可以改變內容物的哪些特性呢?color, font-size, font-family, font-weightcolor 字的顏色 font-size 字級font-family 字型font-weight 粗細內容物的特性可以被子孫繼承。
CSS能改變哪些特性顏色碼的寫法 color: #00aadd (= #0ad)
CSS能改變哪些特性超連結有四種狀態a:link 有連結a:visited 已造訪a:hover滑鼠滑過去a:active 按下去时请按照顺序
CSS能改變哪些特性我們可以改變容器的哪些特性呢?width, height, margin, padding, border, backgroundmargin 外距topborder  框線padding 內距width  寬度height  高度leftrightheightwidthbackground 背景bottom容器的特性大多不會被子孫繼承。
CSS能改變哪些特性容器屬性的寫法margin: 15px  10px  5px  20px;上右          下         左        (順時針)margin: 15px  10px  5px;上       左右         下margin: 15px  10px;上下        左右padding 同 marginborder: 2px  solid  #0ad;(= #00aadd)粗細     款式      顏色
CSS能改變哪些特性背景除了排成像磁磚一樣,還有很多種排法no-repeat, repeat-x, repeat-y
CSS能改變哪些特性背景與容器的對齊(-5,-10)(0,0)background-position: -5px  -10px;
CSS能改變哪些特性背景屬性的寫法background-image: url(/slideshow/css-4-box-model/images/bg.jpg);background-position:  15px  10px; ( 0  0 = left  top)左          上(特殊) background-position:center  center | right  bottombackground-color:  #0ad; (=#00aadd)background-repeat:  no-repeat | repeat-x | repeat-y;background:  #0ad url(/slideshow/css-4-box-model/images/bg.jpg)  no-repeat  -5px  -10px;背景色                   背景圖                          排列方式 左           上
排版练习丑迟迟辫://诲濒.诲谤辞辫产辞虫.肠辞尘/耻/8057029/0531/颁厂厂-别虫1.锄颈辫
誰的權重最大?“CSS Selector Specificity”CSS選擇符
Box Model標準IE6marginmarginpaddingLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitationpaddingLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoheightheightwidthwidth
容器的其他特性容器有兩種,block和inline。block容器會把整行空間佔滿。inline容器照著內容物變寬,且自動並排。h1spana span text textpHTML預設的inline容器只有<a>, <span>, <img>。uldisplay: block | inline;
容器的其他特性容器可以改變寬度,然後浮動並排。float: left | right | none; 沒有設浮動的容器,即使寬度變窄也不會並排。
容器的其他特性容器可以疊在其他容器上面。(外) position: relative;(內) position: absolute; (絕對定位)

More Related Content

Similar to CSS 分享 (4) Box model 等,實習 (20)

网页叁本柱之贬迟尘濒与肠蝉蝉
网页叁本柱之贬迟尘濒与肠蝉蝉网页叁本柱之贬迟尘濒与肠蝉蝉
网页叁本柱之贬迟尘濒与肠蝉蝉
Aaron King
?
CSS 培训
CSS 培训CSS 培训
CSS 培训
S S
?
Html&css培训 舒克
Html&css培训 舒克Html&css培训 舒克
Html&css培训 舒克
jay li
?
顿颈惫+颁蝉蝉布局入门教程
顿颈惫+颁蝉蝉布局入门教程顿颈惫+颁蝉蝉布局入门教程
顿颈惫+颁蝉蝉布局入门教程
yiditushe
?
Css
CssCss
Css
fzuhua
?
面向对象的颁厂厂
面向对象的颁厂厂面向对象的颁厂厂
面向对象的颁厂厂
Jerry Xie
?
[2008]网站重构 -who am i
[2008]网站重构 -who am i[2008]网站重构 -who am i
[2008]网站重构 -who am i
Twinsen Liang
?
Koubei banquet 34
Koubei banquet 34Koubei banquet 34
Koubei banquet 34
Koubei UED
?
浅谈项目标准
浅谈项目标准浅谈项目标准
浅谈项目标准
jndream
?
[系列活動] Python 爬蟲實戰
[系列活動] Python 爬蟲實戰[系列活動] Python 爬蟲實戰
[系列活動] Python 爬蟲實戰
台湾资料科学年会
?
贬迟尘濒基础培训
贬迟尘濒基础培训贬迟尘濒基础培训
贬迟尘濒基础培训
fangdeng
?
GDSC FCU 第1堂 前端新手村 - HTML, CSS, JavaScript介紹
GDSC FCU 第1堂 前端新手村 - HTML, CSS, JavaScript介紹GDSC FCU 第1堂 前端新手村 - HTML, CSS, JavaScript介紹
GDSC FCU 第1堂 前端新手村 - HTML, CSS, JavaScript介紹
FCUGDSC
?
Developer Student Clubs NUK - Web Fundamentals
Developer Student Clubs NUK - Web FundamentalsDeveloper Student Clubs NUK - Web Fundamentals
Developer Student Clubs NUK - Web Fundamentals
Jiaxuan Lin
?
给聚划算后端开发的前端培训
给聚划算后端开发的前端培训给聚划算后端开发的前端培训
给聚划算后端开发的前端培训
j5726
?
支付宝颁厂厂构架
支付宝颁厂厂构架支付宝颁厂厂构架
支付宝颁厂厂构架
Sofish Lin
?
Css schema by_sofish
Css schema by_sofishCss schema by_sofish
Css schema by_sofish
Webrebuild
?
程式人杂誌 -- 2014 年9月號
程式人杂誌 -- 2014 年9月號程式人杂誌 -- 2014 年9月號
程式人杂誌 -- 2014 年9月號
鍾誠 陳鍾誠
?
奥别产前端标准在各浏览器中的实现差异
奥别产前端标准在各浏览器中的实现差异奥别产前端标准在各浏览器中的实现差异
奥别产前端标准在各浏览器中的实现差异
cleverpig
?
蚕辩.肠辞尘前端架构实践与思考
蚕辩.肠辞尘前端架构实践与思考蚕辩.肠辞尘前端架构实践与思考
蚕辩.肠辞尘前端架构实践与思考
greengnn
?
网页叁本柱之贬迟尘濒与肠蝉蝉
网页叁本柱之贬迟尘濒与肠蝉蝉网页叁本柱之贬迟尘濒与肠蝉蝉
网页叁本柱之贬迟尘濒与肠蝉蝉
Aaron King
?
CSS 培训
CSS 培训CSS 培训
CSS 培训
S S
?
Html&css培训 舒克
Html&css培训 舒克Html&css培训 舒克
Html&css培训 舒克
jay li
?
顿颈惫+颁蝉蝉布局入门教程
顿颈惫+颁蝉蝉布局入门教程顿颈惫+颁蝉蝉布局入门教程
顿颈惫+颁蝉蝉布局入门教程
yiditushe
?
面向对象的颁厂厂
面向对象的颁厂厂面向对象的颁厂厂
面向对象的颁厂厂
Jerry Xie
?
[2008]网站重构 -who am i
[2008]网站重构 -who am i[2008]网站重构 -who am i
[2008]网站重构 -who am i
Twinsen Liang
?
Koubei banquet 34
Koubei banquet 34Koubei banquet 34
Koubei banquet 34
Koubei UED
?
浅谈项目标准
浅谈项目标准浅谈项目标准
浅谈项目标准
jndream
?
贬迟尘濒基础培训
贬迟尘濒基础培训贬迟尘濒基础培训
贬迟尘濒基础培训
fangdeng
?
GDSC FCU 第1堂 前端新手村 - HTML, CSS, JavaScript介紹
GDSC FCU 第1堂 前端新手村 - HTML, CSS, JavaScript介紹GDSC FCU 第1堂 前端新手村 - HTML, CSS, JavaScript介紹
GDSC FCU 第1堂 前端新手村 - HTML, CSS, JavaScript介紹
FCUGDSC
?
Developer Student Clubs NUK - Web Fundamentals
Developer Student Clubs NUK - Web FundamentalsDeveloper Student Clubs NUK - Web Fundamentals
Developer Student Clubs NUK - Web Fundamentals
Jiaxuan Lin
?
给聚划算后端开发的前端培训
给聚划算后端开发的前端培训给聚划算后端开发的前端培训
给聚划算后端开发的前端培训
j5726
?
支付宝颁厂厂构架
支付宝颁厂厂构架支付宝颁厂厂构架
支付宝颁厂厂构架
Sofish Lin
?
Css schema by_sofish
Css schema by_sofishCss schema by_sofish
Css schema by_sofish
Webrebuild
?
程式人杂誌 -- 2014 年9月號
程式人杂誌 -- 2014 年9月號程式人杂誌 -- 2014 年9月號
程式人杂誌 -- 2014 年9月號
鍾誠 陳鍾誠
?
奥别产前端标准在各浏览器中的实现差异
奥别产前端标准在各浏览器中的实现差异奥别产前端标准在各浏览器中的实现差异
奥别产前端标准在各浏览器中的实现差异
cleverpig
?
蚕辩.肠辞尘前端架构实践与思考
蚕辩.肠辞尘前端架构实践与思考蚕辩.肠辞尘前端架构实践与思考
蚕辩.肠辞尘前端架构实践与思考
greengnn
?

More from 知世?安索帕 台北 (使用經驗設計中心) (7)

CSS 分享 (4) Box model 等,實習