Skip to content
CSS
CSS basic
CSS basic
Hex Color 十六進位色彩
rule →block
each rule select a tag on an HTML page
"." → element
card-title 標題
text-align 文字對齊
border 外框
border-radius 外框鈍角
padding 填滿
padding: 5px 10px
margin: 20px
margin 幅度
External Style Sheet
body{ font-family:"Arial";}.main-image{ border:solid 4px grey; border-radius:50%;}h1{ background-color:#BDC2BB; padding:5px;}
.section-title{ text-transform:capitalize;}<!doctype html><html> <head> <title>Hedi Huang's Resume </title> <link rel="stylesheet" href="resume.css"> </head> <body> <img src="https://placeimg.com/120/120/animals" alt="animal" class="main-image"> <h1>Resume</h1> <h2 class="section-title">Nice to meet u!</h2> <ul> <li>CHIH CHING HUANG</li> <li>NDHU PHYCHOLOGY</li> </ul> </body></html>Importing Style Sheets
both usable in html & css
@import "import-styles.css"; bring one or more style sheets into another style sheet
Rule
selector{ property: value;}Selector
universal selector 整個頁面套用
* { background-color: lightyellow;}type selector select an element type to style
header's text color **not need TEXT**
header { color: white;}ID selector
#/*id*/{ background-color: lightgrey; color: blue;}<!--use<p>for example--><p id="me">lalalala~</p>class selector(best) use"." in the front and there can be multiple classes at once.(ex. h2)
.text { color: orange;}
.background { background-color: lightgreen;}<h2 class="text background"> </h2> <p class="text"> </p>ID selector & class selector can use at the same time! BUT, ID selector's style will weight more~ so not using the same properties in ID and class selector—
<h2 id="id" class="class"></h2>Descendant Selectors 後裔
use in <span>
<header> <span>Journey through the Sierra Nevada Mountains</span> <h1>Lake Tahoe, California</h1> </header>/*header+" "+span*/header span { color: darkblue; font-size: 26px;}use in <li>
/*ul+" "+li*/ul li { color: purple; font-size: 24px;}.main-content p { font-weight: bold;}<div class="main-content"> <h2>Check out all the Wildlife</h2> <p> As spawning season approaches, the fish acquire a humpback and protuberant jaw. After spawning, they die and their carcasses provide a feast for gatherings of mink, bears, and Bald eagles. </p> <a href="#">See the Wildlife</a> </div>Pseudo classes(user interaction)
/*連結"未"按*/a:link { color: darkgreen;}
/*按下連結"時"*/a:active { color: lightcoral;}
/*連結"已"按*/a:visited { color: lightgreen;}
/*按下Tab 會依序focus連結*/a:focus { color: white; background-color: orange;}
/*hover 可運用在多種element上*//*游標放在"連結"上*/a:hover { color: forestgreen;}
/*游標放在"段落"上*/p:hover { color: forestgreen;}a { text-shadow: -2.5px -1.5px rgba(167, 114, 224, 0.92);}
Comment suggest
/*Class selectors*//*Type selectors*//*ID selectors*//**//**/data type
when to use???
RWD → percentage, em, rem font-size → rem
Color
percentage
for font-size, padding, margin, width
header { background-color: pink; width: 50%;/*只占50%的寬 RWD*/}
header { background-color: pink; width: 50%; margin-left: 20%;/*左邊間隔全寬20%*/}
/*You can also edit two or more classes at once.*/.primary-contect,.secondary-content { width: 60%;}font-size
p { font-size: 150%;/*default size is 16px, so 150% means 16px*1.5 */}length
absolute unit ex. px
header { background-color: pink; width: 480px;/*只占480px的寬*/}
#tips# main-header will always take up 960px of the screen.
em 1em=16px; 2em=32px; .5em=8px *warning!* em units have compound effect
rem only relative to root element not compound effect
Text
text-align
p { text-align: justify;}左右其行
text-transform
header h1 { text-transform: capitalize;}<header> <span>Journey through the Sierra Nevada Mountains</span> <h1>lake tahoe, california</h1> </header>
text-decoration none → link put off underline
a { text-decoration: none;}
underline line-through
3d text-shadow
font
font-weight(bold, normal) All headings by default are set to bold.
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.