黃芝晴的軟體工程師之路

Explore

CSS

CSS basic
CSS basic

⁠

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference⁠

⁠

https://webplatform.github.io/docs/css/⁠

⁠

https://www.w3.org/Style/CSS/Overview.en.html⁠

⁠

https://caniuse.com/⁠

⁠

css學習網站

https://zh-tw.learnlayout.com/toc.html⁠

⁠

Hex Color 十六進位色彩

⁠

CSS-Tricks⁠

⁠

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>

</head>

<body>

<h1>Resume</h1>

<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;

}

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>

</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—

Descendant Selectors 後裔

use in <span>

<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;

}

<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)

⁠

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes⁠

⁠

/*連結"未"按*/

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;

}

<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

⁠

https://markdotto.com/playground/3d-text/⁠

⁠

font

font-weight(bold, normal) All headings by default are set to bold.

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.

CSS basicCSS basic

External Style Sheet

Importing Style Sheets

Rule

Selector

Pseudo classes(user interaction)

Comment suggest

data type

Color

percentage

length

Text

font

CSS basic
CSS basic