div class=ts-pagebutton class=gotoPage data-page=1Page 1button div class=ts-imagea href=https:reader042vdocumentspubreader042viewer202203181755a62a5b1a28abd5138b4787html5page1jpg target=_blank img data-url=css-1-htmlpage=1 data-page=1 class=ts-thumb lazyload alt=Page 1: CSS 分享 1 簡介 loading=lazy src=data:imagegifbase64iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAQAAADYv8WvAAAAD0lEQVR42mP8X8AwAgiABKBAv+vAXklAAAAAElFTkSuQmCC data-src=https:reader042vdocumentspubreader042viewer202203181755a62a5b1a28abd5138b4787html5thumbnails1jpg width=140 height=200 adivpCSSp pCascading Style Sheetp p串接樣式表pdivdiv class=ts-pagebutton class=gotoPage data-page=2Page 2button div class=ts-imagea href=https:reader042vdocumentspubreader042viewer202203181755a62a5b1a28abd5138b4787html5page2jpg target=_blank img data-url=css-1-htmlpage=2 data-page=2 class=ts-thumb lazyload alt=Page 2: CSS 分享 1 簡介 loading=lazy src=data:imagegifbase64iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAQAAADYv8WvAAAAD0lEQVR42mP8X8AwAgiABKBAv+vAXklAAAAAElFTkSuQmCC data-src=https:reader042vdocumentspubreader042viewer202203181755a62a5b1a28abd5138b4787html5thumbnails2jpg width=140 height=200 adivpStyle 「樣子」p p• 一般來說是視覺上的p p– 穿衣服的樣子p p• 但,也可以是其他方面的p p– 講話的調調p p– 走路的姿態pdivdiv class=ts-pagebutton class=gotoPage data-page=3Page 3button div class=ts-imagea href=https:reader042vdocumentspubreader042viewer202203181755a62a5b1a28abd5138b4787html5page3jpg target=_blank img data-url=css-1-htmlpage=3 data-page=3 class=ts-thumb lazyload alt=Page 3: CSS 分享 1 簡介 loading=lazy src=data:imagegifbase64iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAQAAADYv8WvAAAAD0lEQVR42mP8X8AwAgiABKBAv+vAXklAAAAAElFTkSuQmCC data-src=https:reader042vdocumentspubreader042viewer202203181755a62a5b1a28abd5138b4787html5thumbnails3jpg width=140 height=200 adivp文件的各種樣式p p字型、大小、顏色、表現型態等 清單、退排、對齊、行高等p p框線、效果 排列方式 尺寸pdivdiv class=ts-pagebutton class=gotoPage data-page=4Page 4button div class=ts-imagea href=https:reader042vdocumentspubreader042viewer202203181755a62a5b1a28abd5138b4787html5page4jpg target=_blank img data-url=css-1-htmlpage=4 data-page=4 class=ts-thumb lazyload alt=Page 4: CSS 分享 1 簡介 loading=lazy src=data:imagegifbase64iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAQAAADYv8WvAAAAD0lEQVR42mP8X8AwAgiABKBAv+vAXklAAAAAElFTkSuQmCC data-src=https:reader042vdocumentspubreader042viewer202203181755a62a5b1a28abd5138b4787html5thumbnails4jpg width=140 height=200 adivpWord 的樣式pdivdiv class=ts-pagebutton class=gotoPage data-page=5Page 5button div class=ts-imagea href=https:reader042vdocumentspubreader042viewer202203181755a62a5b1a28abd5138b4787html5page5jpg target=_blank img data-url=css-1-htmlpage=5 data-page=5 class=ts-thumb lazyload alt=Page 5: CSS 分享 1 簡介 loading=lazy src=data:imagegifbase64iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAQAAADYv8WvAAAAD0lEQVR42mP8X8AwAgiABKBAv+vAXklAAAAAElFTkSuQmCC data-src=https:reader042vdocumentspubreader042viewer202203181755a62a5b1a28abd5138b4787html5thumbnails5jpg width=140 height=200 adivpDEMO: 內容與文件分離p div class=annotationa href=http:wwwcsszengardencomtrchinesecssfile=212212css rel=ugc nofollow target=_blankhttp:wwwcsszengardencomtrchinesecssfile=212212cssadiv div class=annotationa href=http:wwwcsszengardencomtrchinesecssfile=209209css rel=ugc nofollow target=_blankhttp:wwwcsszengardencomtrchinesecssfile=209209cssadiv div class=annotationa href=http:wwwcsszengardencomtrchinesecssfile=207207css rel=ugc nofollow target=_blankhttp:wwwcsszengardencomtrchinesecssfile=207207cssadivdivdiv class=ts-pagebutton class=gotoPage data-page=6Page 6button div class=ts-imagea href=https:reader042vdocumentspubreader042viewer202203181755a62a5b1a28abd5138b4787html5page6jpg target=_blank img data-url=css-1-htmlpage=6 data-page=6 class=ts-thumb lazyload alt=Page 6: CSS 分享 1 簡介 loading=lazy src=data:imagegifbase64iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAQAAADYv8WvAAAAD0lEQVR42mP8X8AwAgiABKBAv+vAXklAAAAAElFTkSuQmCC data-src=https:reader042vdocumentspubreader042viewer202203181755a62a5b1a28abd5138b4787html5thumbnails6jpg width=140 height=200 adivpDEMO: 內容與文件分離pdivdiv class=ts-pagebutton class=gotoPage data-page=7Page 7button div class=ts-imagea href=https:reader042vdocumentspubreader042viewer202203181755a62a5b1a28abd5138b4787html5page7jpg target=_blank img data-url=css-1-htmlpage=7 data-page=7 class=ts-thumb lazyload alt=Page 7: CSS 分享 1 簡介 loading=lazy src=data:imagegifbase64iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAQAAADYv8WvAAAAD0lEQVR42mP8X8AwAgiABKBAv+vAXklAAAAAElFTkSuQmCC data-src=https:reader042vdocumentspubreader042viewer202203181755a62a5b1a28abd5138b4787html5thumbnails7jpg width=140 height=200 adivp串接p p• 一個元素p p• 一份文件p p• 多份文件pdivdiv class=ts-pagebutton class=gotoPage data-page=8Page 8button div class=ts-imagea href=https:reader042vdocumentspubreader042viewer202203181755a62a5b1a28abd5138b4787html5page8jpg target=_blank img data-url=css-1-htmlpage=8 data-page=8 class=ts-thumb lazyload alt=Page 8: CSS 分享 1 簡介 loading=lazy src=data:imagegifbase64iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAQAAADYv8WvAAAAD0lEQVR42mP8X8AwAgiABKBAv+vAXklAAAAAElFTkSuQmCC data-src=https:reader042vdocumentspubreader042viewer202203181755a62a5b1a28abd5138b4787html5thumbnails8jpg width=140 height=200 adivp串接: 繼承p p• 一個元素: 你戴眼鏡p p• 一份文件: 本班男生穿白色上衣p p• 多份文件: 全校學生戴紅帽子p p= 你,戴眼鏡、穿白色上衣、戴紅帽子pdivdiv class=ts-pagebutton class=gotoPage data-page=9Page 9button div class=ts-imagea href=https:reader042vdocumentspubreader042viewer202203181755a62a5b1a28abd5138b4787html5page9jpg target=_blank img data-url=css-1-htmlpage=9 data-page=9 class=ts-thumb lazyload alt=Page 9: CSS 分享 1 簡介 loading=lazy src=data:imagegifbase64iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAQAAADYv8WvAAAAD0lEQVR42mP8X8AwAgiABKBAv+vAXklAAAAAElFTkSuQmCC data-src=https:reader042vdocumentspubreader042viewer202203181755a62a5b1a28abd5138b4787html5thumbnails9jpg width=140 height=200 adivp串接: 衝突時的優先權p p• 一個元素: 你穿西裝褲p p• 一份文件: 本班男生穿白色襯衫p p• 多份文件: 全校學生穿灰色上衣、穿牛仔褲p p= 你,穿白色襯衫、穿西裝褲pdivdiv class=ts-pagebutton class=gotoPage data-page=10Page 10button div class=ts-imagea href=https:reader042vdocumentspubreader042viewer202203181755a62a5b1a28abd5138b4787html5page10jpg target=_blank img data-url=css-1-htmlpage=10 data-page=10 class=ts-thumb lazyload alt=Page 10: CSS 分享 1 簡介 loading=lazy src=data:imagegifbase64iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAQAAADYv8WvAAAAD0lEQVR42mP8X8AwAgiABKBAv+vAXklAAAAAElFTkSuQmCC data-src=https:reader042vdocumentspubreader042viewer202203181755a62a5b1a28abd5138b4787html5thumbnails10jpg width=140 height=200 adivpCSS 版本p p• 一般來說是視覺上的p p– 穿衣服的樣子p p• 但,也可以是其他方面的p p– 講話的調調p p– 走路的姿態p p- CSS 1p p- CSS 2p p- CSS 3pdivdiv class=ts-pagebutton class=gotoPage data-page=11Page 11button div class=ts-imagea href=https:reader042vdocumentspubreader042viewer202203181755a62a5b1a28abd5138b4787html5page11jpg target=_blank img data-url=css-1-htmlpage=11 data-page=11 class=ts-thumb lazyload alt=Page 11: CSS 分享 1 簡介 loading=lazy src=data:imagegifbase64iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAQAAADYv8WvAAAAD0lEQVR42mP8X8AwAgiABKBAv+vAXklAAAAAElFTkSuQmCC data-src=https:reader042vdocumentspubreader042viewer202203181755a62a5b1a28abd5138b4787html5thumbnails11jpg width=140 height=200 adivpDEMO: CSS 特效p div class=annotationa href=https:mozillademosorgdemosshadowsdemohtml rel=ugc nofollow target=_blankhttps:mozillademosorgdemosshadowsdemohtmladiv div class=annotationa href=http:weblabwalliecreationcomcubeindexhtml rel=ugc nofollow target=_blankhttp:weblabwalliecreationcomcubeindexhtmladiv div class=annotationa href=http:wwwromancortescomblogcss-3d-meninas rel=ugc nofollow target=_blankhttp:wwwromancortescomblogcss-3d-meninasadivdivdiv class=ts-pagebutton class=gotoPage data-page=12Page 12button div class=ts-imagea href=https:reader042vdocumentspubreader042viewer202203181755a62a5b1a28abd5138b4787html5page12jpg target=_blank img data-url=css-1-htmlpage=12 data-page=12 class=ts-thumb lazyload alt=Page 12: CSS 分享 1 簡介 loading=lazy src=data:imagegifbase64iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAQAAADYv8WvAAAAD0lEQVR42mP8X8AwAgiABKBAv+vAXklAAAAAElFTkSuQmCC data-src=https:reader042vdocumentspubreader042viewer202203181755a62a5b1a28abd5138b4787html5thumbnails12jpg width=140 height=200 adivpDEMO: CSS 特效p div class=annotationa href=http:blogdarkcrimsoncomsamplescss3 rel=ugc nofollow target=_blankhttp:blogdarkcrimsoncomsamplescss3adivdivdiv class=ts-pagebutton class=gotoPage data-page=13Page 13button div class=ts-imagea href=https:reader042vdocumentspubreader042viewer202203181755a62a5b1a28abd5138b4787html5page13jpg target=_blank img data-url=css-1-htmlpage=13 data-page=13 class=ts-thumb lazyload alt=Page 13: CSS 分享 1 簡介 loading=lazy src=data:imagegifbase64iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAQAAADYv8WvAAAAD0lEQVR42mP8X8AwAgiABKBAv+vAXklAAAAAElFTkSuQmCC data-src=https:reader042vdocumentspubreader042viewer202203181755a62a5b1a28abd5138b4787html5thumbnails13jpg width=140 height=200 adivpDEMO: 動畫p div class=annotationa href=http:paulrougetcomecss3animations rel=ugc nofollow target=_blankhttp:paulrougetcomecss3animationsadiv div class=annotationa href=http:wwwoptimum7comcss3-mananimationhtml rel=ugc nofollow target=_blankhttp:wwwoptimum7comcss3-mananimationhtmladivdivdiv class=ts-pagebutton class=gotoPage data-page=14Page 14button div class=ts-imagea href=https:reader042vdocumentspubreader042viewer202203181755a62a5b1a28abd5138b4787html5page14jpg target=_blank img data-url=css-1-htmlpage=14 data-page=14 class=ts-thumb lazyload alt=Page 14: CSS 分享 1 簡介 loading=lazy src=data:imagegifbase64iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAQAAADYv8WvAAAAD0lEQVR42mP8X8AwAgiABKBAv+vAXklAAAAAElFTkSuQmCC data-src=https:reader042vdocumentspubreader042viewer202203181755a62a5b1a28abd5138b4787html5thumbnails14jpg width=140 height=200 adivpDEMO: 誇張的…p div class=annotationa href=http:nicolasgallaghercompure-css-social-media-iconsdemo rel=ugc nofollow target=_blankhttp:nicolasgallaghercompure-css-social-media-iconsdemoadiv div class=annotationa href=http:imagesteachscomdoria rel=ugc nofollow target=_blankhttp:imagesteachscomdoriaadiv div class=annotationa href=http:hanasan38webfc2comlionhtml rel=ugc nofollow target=_blankhttp:hanasan38webfc2comlionhtmladivdivdiv class=ts-pagebutton class=gotoPage data-page=15Page 15button div class=ts-imagea href=https:reader042vdocumentspubreader042viewer202203181755a62a5b1a28abd5138b4787html5page15jpg target=_blank img data-url=css-1-htmlpage=15 data-page=15 class=ts-thumb lazyload alt=Page 15: CSS 分享 1 簡介 loading=lazy src=data:imagegifbase64iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAQAAADYv8WvAAAAD0lEQVR42mP8X8AwAgiABKBAv+vAXklAAAAAElFTkSuQmCC data-src=https:reader042vdocumentspubreader042viewer202203181755a62a5b1a28abd5138b4787html5thumbnails15jpg width=140 height=200 adivp瀏覽器支援問題pdiv