CSS讲解 配色.ppt

Color not only brings your site to life, but also helps convey the mood and evokes reactions. SUMMARY There are three ways to specify colors in CSS: RGB values, hex codes, and color names. SUMMARY Color pickers can help you find the color you want. SUMMARY Ensure that there is enough contrast between any text and the background color (or people will not be able to read your content). SUMMARY CSS3 has introduced an extra value for RGB colors to indicate opacity. It is known as RGBA. SUMMARY CSS3 also allows you to specify colors as HSL values, with an optional opacity value. It is known as HSLA. SUMMARY The three traditional ways to specify colors: Color name Hex code RGB values Explain: how color on a screen is made by mixing red, green, and blue and how a screen is made up of pixels Click: RGB colors come in Explain: how color on a screen is made by mixing red, green, and blue how a screen is made up of pixels Click: color picker tool replaces colors Explain: how the values work Click: RGB values comes in Click: Hex values comes in Click: Color names comes in Explain: terms Click: hue Click: saturation Click: brightness Explain: contrast is important Load: low contrast Click: high contrast Click: medium contrast Click: reversed text Note: Will not be transparent in older browsers Note: RGBA has a fallback of plain RGB values for older browsers that do not understand RGBA. Introducing these concepts for the hsl / hsla properties Click: introduces the hue wheel (represented as angle 0 - 360) similar to colloquial idea of color Click: saturation (% of gray in color) Click: lightness (amount of white/lightness or black/darkness in color) Note: second rule uses alpha transparency value (between 0 and 1.0) Clicks: Load individual bullets Clicks: Load individual bullets Clicks: Load individual bullets Clicks: Load individual bullets Clicks: Load individual bullets Clicks: Load individual bullets CSS RESULT HTML h1 { color: DarkCyan;} h2 { color: #ee4e80;} p {