在这门课程中，你将会使用计算机通过HTML和CSS语言有创意地设计网页。之后，你将会运用Javascript开发程序和算法来让计算机解决问题。随着你学习的逐步推进，你会掌握编程流程，并将其并运用到之后的专业课程中。 在完成这门课的学习后，你可以做到: 1. 运用HTML和CSS制作网页； 2. 解释运用高级语言的编程过程； 3. 运用批判性思考解决问题； 4. 运用包含条件语句和循环语句在内的Javascript解决编程问题； 5. 运用Javascript来调控图像和处理数据； 6. 认识到调试程序是一种科学方法的应用。 在课程的最后，你将完成一个小项目。在这个项目中，你将会运用Javascript的算法来创建自己的图像，并运用HTML，CSS和Javascript建立一个网站。
CSS Basics
Loading...
来自 Duke University 的课程
程序设计与 Web 入门
4946 个评分
Duke University
4946 个评分
课程 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. HiltonAssociate Professor of the Practice
Electrical and Computer Engineering
Now you're going to learn a bit more about CSS.
Last time you learned, why you would want to use CSS to separate the style of a web
page from the content, which touched on some major themes in computer science.
One of those themes was reusability.
You could describe a style once in CSS and reuse it across multiple elements or
even multiple web pages.
Another of those themes was maintainability.
Being able to efficiently change your web page in response
to changing design requirements.
Now that you have learned a bit about why CSS is important, we are going
to build on that and delve into how you can write your own CSS to style a webpage.
Before you learn what to write for CSS, we are going to teach you where to write it.
In CodePen you've been writing HTML in the left pane.
To the right is the CSS pane, which I have highlighted with the blue square here.
You can identify it by the fact that it says,
CSS in the top left corner of that pane.
Also, don't worry about the slightly fancy CSS in this window,
it makes a nice looking table but you only need to learn the basics.
If you are writing a webpage from scratch without a tool like CodePen,
you could include CSS by either using the style tag and
writing the CSS inside it or by using the link tag to link to a style sheet.
Either of these tags go in the head portion of your HTML.
We will start with the small example webpage shown above,
which describes some delicious foods.
On the left, you can see the webpage with no CSS.
Notice how the header, drawn by h1 tag, is in black text and left aligned.
Now, supposing you wanted to make that header blue and
center, like the one on the right.
This page on the right has the same HTML but
we have used CSS to change the formatting of the h1 tag.
Here is the CSS we used to style the h1 tag to be blue and center.
Let's look at it in detail so
you can write your own CSS to style the pages however you want.
The first thing you need to write is the selector,
the name of the element that you want to style.
In this case we want it to style h1 tags, so we write h1 here.
Next you write curly braces which surround the style information you want to apply to
the h1 tag.
When you write and open curly brace in CodePen, it will
automatically put a close curly brace after it and put your cursor between them.
This behavior can be helpful, as you do not have to remember to write the close
curly brace after you finish writing the style you want.
On each line inside the curly braces,
you first write the property, what aspect of the styling you want to change.
Here, we want to change the text alignment,
which has the property name text align.
After the property name,
you write a : followed by the value you want to give that property.
In this case, we want to set text align to center.
At the end of the line you write a ;,
you can then write more lines with the same syntax.
For example, we have color: blue; to set the color property to blue.
There are many properties you can set in CSS, we won't go into all of them here but
rather suggest you might read more about them online, as you need them.
As with many things, you should not try to memorize them.
Rather, look them up, as you need them.
If you end up writing a lot of CSS,
you'll become familiar with the properties that you use often.
In your in-video quiz,
you just thought about how this CSS styles list items to be green.
However, this CSS makes all list items in your entire webpage green.
What if you wanted to make some of them green and
style some of them a different way?
We're going to show you three approaches to styling
only some of a particular element.
The first way you might do this is to use a class, a named style.
To use a CSS class, you need to change your HTML by writing class=,
and the name of the class you want in the tags you want to style.
Now, in your CSS, instead of writing the name of HTML tag as a selector,
write a dot, followed by the name of the class.
The dot specifies that you are naming a class.
Immediately after the dot, you should write the name you want to give the class,
this name can be pretty much anything you want.
It has to follows some rules, like you can't put braces or
spaces in the name but you can pick any word you want for a name.
However, you should make the name descriptive.
In this example, we picked foodLi,
since we're using the class to style list items that describe food.
Would .green be a good name for this class?
Even though that describes how it styles the list items right now,
naming it .green is a not a great choice.
If we later decided we wanted to style our food list items to be purple,
our style name would be misleading.
Instead we're better off naming it based on the meaning of the parts
of our page and we want to style food list items.
If you look back at the HTML, now that you've seen the CSS,
you can see where the name we picked came from.
It matches up with the class name we picked in our CSS.
Another way to style only some of a particular element type, is to use an ID.
An ID names one particular element.
Notice the difference between a class, which can be applied to many elements, and
an ID, which can only be applied to one element.
In this example,
the webpage has a picture of a cake, which we want to style in a particular way.
We have specified id?"cakeImg" inside the img tag.
Now in the CSS we can describe the styling for cakeImg.
Notice how the selector for an ID starts with a # sign.
The final way that we will mention, but not go into depth on,
is called combinators, these let you specify relationships between tags.
You might specify that you want to style li's that are inside of UL's in
a particular way.
Which you could do by writing ul li as the selector.
There are more advanced relationships, such as siblings.
Combinators are a more advanced topic which you do not need to know but
we mention it for those of you who want to explore a bit more.
Classes and IDs both let you name a way to style an element.
Naming a style lets you reuse that style as needed.
In the case of a class, you can style many elements on a page in the same way.
For both names and classes, you can reuse a style across multiple pages.
For example, if you have a logo that you want to display in the corner of
every page on your site, you can write a style for
it once, and re-use that style on every page.
Naming and re-using is a common theme in computer science.
As you delve deeper into programming, you will find that it is often useful to name
things, constants, algorithms or data, so that you can re-use them.
Now you have seen the basics of CSS.
You have learned where to write CSS in CodePen, the basic syntax of CSS and
how to make classes and IDs to name and re-use styles.
