Explore
For Enterprise
Join for Free
Log In

艺术与人文
商务
计算机科学
数据科学
信息技术
健康
数学和逻辑
个人发展
物理科学与工程
社会科学
语言学习
学位
证书

浏览 Coursera 的全部课程

浏览
搜索
企业版
登录
免费加入

Colors and Names in CSS

Loading...

Programming Foundations with JavaScript, HTML and CSS

4.6（5,484 个评分） | 190K 名学生已注册

课程 1（共 5 门，Java Programming and Software Engineering Fundamentals 专项课程）

Learn foundational programming concepts (e.g., functions, for loops, conditional statements) and how to solve problems like a programmer. In addition, learn basic web development as you build web pages using HTML, CSS, JavaScript. By the end of the course, will create a web page where others can upload their images and apply image filters that you create. After completing this course, you will be able to: 1. Think critically about how to solve a problem using programming; 2. Write JavaScript programs using functions, for loops, and conditional statements; 3. Use HTML to construct a web page with paragraphs, divs, images, links, and lists; 4. Add styles to a web page with CSS IDs and classes; and 5. Make a web page interactive with JavaScript commands like alert, onClick, onChange, adding input features like an image canvas, button, and slider.

查看授课大纲

您将学习的技能

Html, JavaScript, Cascading Style Sheets (CCS), Html5

审阅

4.6（5,484 个评分）

5 stars
3,907 ratings
4 stars
1,137 ratings
3 stars
276 ratings
2 stars
74 ratings
1 star
90 ratings

WN

Mar 17, 2018

My first Coursera course I've ever done and I was very impressed with the platform on which it was presented. My experience was a positive one and I will definitely continue to pursue other courses.

AN

Nov 02, 2016

I've been learning Javascript with lots of different online courses over the last 2 years and this is the first one that presented the information in such a way that I could understand it. Thanks!

从本节课中

Designing a Web Page with HTML and CSS

In this module, you will learn the basics of HTML and CSS to design a web page. Over the course of the module you will build your first web page!

How CSS Is Used to Design Web Pages4:04

Colors and Names in CSS7:57

教学方

Susan H. Rodger
Professor of the Practice
Robert Duvall
Lecturer
Owen Astrachan
Professor of the Practice
Andrew D. Hilton
Associate Professor of the Practice

脚本

In this lesson, you are going to learn a bit more about CSS.

In the last lesson you learned the basics of CSS, its syntax,

as well as how you can name styles with classes and IDs.

In this lesson you're going to learn a bit more about colors in CSS.

In particular, you will learn that you can specify them not only by name, but

also by numeric values.

An instance of an important concept that you will learn in the next lesson

that everything is a number for a computer.

Remember from last time that you learned to style the h1 tags to be blue

and centered.

We use blue as the value for the property color to achieve this styling.

What if you wanted to use another color?

We saw green in another example.

So you could guess that you might be able to use a variety of basic colors such as

red and yellow, and you would be right.

But you might want to design a webpage with more sophisticated color choices.

CSS supports a much wider variety of color names.

Giving you the ability to choose some nice shades of different colors,

here's a few of my favorites.

BlueViolet is a nice shade of purple, gold is of course gold colored.

Light Blue Steel is a nice bluish-gray, and Fire Brick is a deep red.

In fact there are 140 standard color names giving you a wide

selection of colors to choose from by name.

How could you remember them all?

As with many other things nobody memorizes these sorts of things.

Instead what's important is knowing how to look up what you need.

You can find websites, such as this one,

which will show you the various colors, as well as their names.

However, even 140 colors is not a lot.

What if you wanted some other shade of a color that does not have a standard name?

It seems like we might want more colors, but how many would we need?

Humans can perceive literally millions of colors.

For example, we have here 12 very suddenly different shades of blue,

ranging from very dark on the left, to a medium light blue on the right.

These are just a few shades of blue, and

one of them is a very important shade of blue.

This bar in the middle is Duke Blue.

Of course, there's many more shades of blue, and

many more shades of other colors, too.

So how could we handle millions of colors?

Giving them all names would be somewhat unmanageable.

One problem is that someone would have to come up with millions of color names,

and standardize them.

Another problem is that you would have to look through millions of names to

find the color that you want.

Limiting the selection of available colors is not a very appealing option.

If you really want a particular color,

such as exactly Duke Blue, you would be unhappy if you could not get it.

Another option would be to give each color a number which is what is actually done.

In fact as you would learn later, for a computer, everything is a number so

this choice is actually a natural way to handle millions of colors.

The way that colors work as numbers is that they are specified by

a combination of how much red, green, and blue they have.

With each component taking a value between zero and 255.

This scheme is sufficient to specify about 16

million colors, which is more than humans can distinguish.

in CSS you can specify color by specifying it's red, green, and blue components.

By writing rgb and

then in open parentheses followed by the numerical value for red, green, and

blue each separated by a comma, then a closed parentheses.

This syntax takes the red, green, and blue numbers and

then combines them into a single numerical value for you.

Each of the colors we saw before has their rgb values written on top of them here.

You could also specify a color by its entire numerical value by writing a pound

side valued by six hexadecimal digits.

Hexadecimal means base 16, so each digit has a value from zero to 15.

Hexadecimal is convenient to write rgb values since each color

has 256 possible values, meaning exactly two hexadecimal digits.

The left two digits, here, specify the red.

The middle two digits specify the green, and the right two digits specify the blue.

You do not need to be able to convert to and from hexadecimal, but for

those who are curious we will take a closer look.

Your use to base 10 numbers where each place is 10 times the previous.

You have the 1's, the 10's and 100's places and so on.

In hexadecimal each place is 16 times the previous.

So you have the 1's, the 16's, 256's, place and so on.

If we look at the two digits for each color we have the ones and 16's places.

The red of this color is 8A, which is 8 in the 16's place plus A,

which is 10 in the 1's place, that makes 138.

For the green you get 2 in the 16's place.

Plus B, which is 11 in the 1's place, which makes 43.

For blue you have E which is 14 in the 16's place,

and two in the 1's place, which makes 226.

Many people find it easier to choose colors graphically and

let a tool give them the number.

Let us see an example of this with Mozilla's color picker.

This is the color picker tool available from Mozilla.

You can see the URL of this tool at the top of the web browser here.

But you can also find the link to it and the reading that goes with this lesson.

As we look down at the main part of this tool,

you will see it has a colored box and a colored slider.

Moving the slider around, adjusts the hue of the color.

You can see red, yellow, green, blue, purple, and red.

Maybe you want a shade of say purple.

You can then adjust the specific shade in the box on the left.

You can get grayer, or brighter, or lighter, or

darker, I'm going to pick this color.

Once you find the color you want,

this tool displays the numeric information to the right.

For this shade of purple, the red is 232, the green is 73, and the blue is 227.

You can also read the entire hexidecimal number from the box on the bottom.

It's E849E3.

There's some more advanced features, such as alpha,

which lets you adjust transparency in case you are layering objects.

If you wanted to use that,

this other slider would let you change the transparency.

The tool also shows HSL, which is just a different way to represent colors as

numbers, but we wont worry about that.

So if you want to pick a specific color graphically,

a tool like this can be really great.

That concludes our lesson on colors and CSS.

You have learned that there are many standard names,

which you can look up when you need them.

And that you can specify millions of color by numerical values,

either by writing rgb and the red, green, and blue values that you want.

Or by writing a pound sign and the hexidecimal value of the color's number.

We also saw a color picker tool, which lets you look for

the color you want to use.

And then gives you the numerical values for that color to write in your CSS.

探索我们的目录

免费加入并获得个性化推荐、更新和优惠。

Coursera 致力于普及全世界最好的教育，它与全球一流大学和机构合作提供在线课程。

© 2019 Coursera Inc. 保留所有权利。

通过 App Store 下载

通过 Google Play 获取

Coursera
关于
管理团队
工作机会
目录
证书
MasterTrack™ 证书
学位
企业版
政府版

社区
Learners
Partners
Developers
Beta Testers
Translators

连接
博客
Facebook
领英
Twitter
Instagram
YouTube
技术博客

更多
条款
隐私
帮助
内容访问
媒体
联系我们
目录
附属公司