在这门课程中，你将会使用计算机通过HTML和CSS语言有创意地设计网页。之后，你将会运用Javascript开发程序和算法来让计算机解决问题。随着你学习的逐步推进，你会掌握编程流程，并将其并运用到之后的专业课程中。 在完成这门课的学习后，你可以做到: 1. 运用HTML和CSS制作网页； 2. 解释运用高级语言的编程过程； 3. 运用批判性思考解决问题； 4. 运用包含条件语句和循环语句在内的Javascript解决编程问题； 5. 运用Javascript来调控图像和处理数据； 6. 认识到调试程序是一种科学方法的应用。 在课程的最后，你将完成一个小项目。在这个项目中，你将会运用Javascript的算法来创建自己的图像，并运用HTML，CSS和Javascript建立一个网站。
Colors and Names in CSS
Loading...
来自 Duke University 的课程
程序设计与 Web 入门
4069 个评分
Duke University
4069 个评分
课程 1（共 5 门，Specialization Java Programming and Software Engineering Fundamentals）
从本节课中
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!
与讲师见面
Susan H. RodgerProfessor of the Practice
Computer Science
Robert DuvallLecturer
Computer Science
Owen AstrachanProfessor of the Practice
Computer Science
Andrew D. HiltonAssistant Professor of the Practice
Electrical and Computer Engineering
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.
