CSS Basics, Part 2

Loading...

来自 University of California, Davis 的课程

Introduction to Web Development

292 个评分

University of California, Davis

Introduction to Web Development

292 个评分

This course is designed to start you on a path toward future studies in web development and design, no matter how little experience or technical knowledge you currently have. The web is a very big place, and if you are the typical internet user, you probably visit several websites every day, whether for business, entertainment or education. But have you ever wondered how these websites actually work? How are they built? How do browsers, computers, and mobile devices interact with the web? What skills are necessary to build a website? With almost 1 billion websites now on the internet, the answers to these questions could be your first step toward a better understanding of the internet and developing a new set of internet skills. By the end of this course you’ll be able to describe the structure and functionality of the world wide web, create dynamic web pages using a combination of HTML, CSS, and JavaScript, apply essential programming language concepts when creating HTML forms, select an appropriate web hosting service, and publish your webpages for the world to see. Finally, you’ll be able to develop a working model for creating your own personal or business websites in the future and be fully prepared to take the next step in a more advanced web development or design course or specialization.

从本节课中

Websites with Style: CSS Properties, Colors and Fonts

While HTML and JavaScript are very useful for web development, they don't exactly make websites look attractive - that's where cascading style sheets, or CSS, comes into play. While HTML is used to build the structure of our pages and JavaScript is used to provide interactive functionality, CSS is used to graphically design and layout webpages. By the end of this module, you'll be able to: discuss common mistakes in designing a website; identify and apply CSS basics like purpose and syntax; use CSS properties to control fonts, colors, layouts, and other common properties; differentiate between in-line, internal, and external CSS; and practice and test your cascading style sheets.

Module 4 Introduction2:29

Plain Websites are Boring4:11

CSS Basics, Part 16:41

CSS Basics, Part 24:11

Putting CSS to Work: Getting Started with External CSS7:34

Putting CSS to Work: Setting Colors with CSS4:22

Putting CSS to Work: Controlling Your Page Layout4:26

Putting CSS to Work: Common CSS Properties4:36

How to Practice CSS4:52

Testing Website Styles6:22

与讲师见面

Daniel Randall
Senior Architect at Composer Solutions and Instructor
UC Davis Division of Continuing and Professional Education

[MUSIC]

Welcome back to our discussion of CSS.

In our last lesson we talked about three approach to CSS,

those are in line, local or internal, and also external.

We may see a few more cases of in line throughout the course, but for

the most part we'll be looking at external CSS from here on.

Here, we are visiting the W three school site.

An excellent place to practice your CSS, and

we have a diagram here that helps break down some of the syntax we've seen so far.

Here we have h1 tag.

And this would give it a color of blue and a font size of 12 pixels and

again we'll talk more about pixels later in the course.

These are name value pairs where color is the name and

value is blue separated by a colon and ended with a semicolon.

And we can string as many of these named value pairs, where the name and value

are separated by a colon, end it with a semi-colon as we like for each style.

Now, looking at specific styles, here, we are selecting on

our CSS all paragraph texts, and that's what this P does.

And we're giving them a text alignment, text -align of center, and a color of red.

Here, we're seeing a different way to select our elements.

The pound sign which is new to us in CSS would select Ids.

So anything with the ID of pair one would

in this case get a text-align center in a color of red.

Alternatively we can use the class whether than the ID and

we saw some examples of that before and to denote class we use a dot.

And so, here, anything with class of center

would get the text-align of center and the color red.

We can combine some of these and here, we would have paragraph tags

with the class center, getting text alignment of center and the color red.

For instance, here's an example of a paragraph tag with the class center.

And in this case, it has a class of center in large, we can have multiple classes

assigned to any element, and we separate them by space.

So this is similar to what we saw in a previous lecture.

Here, we have styling for h1 tags, h2, paragraph and we can do as many

other tags as we like supplying different sorts of style for each of those.

And if we prefer to save a little space, and this is often a good idea,

if our style for all three of these is the same.

And we can go up here to double check this.

Each of these has the same style, so rather than repeat we can

separate them by commas to indicate these styles for all three of these tags.

In this version, if we decided that we wanted to customize,

we could change various styles here for the h1, h2 or a paragraph.

In this case, we're deciding that they probably won't change, but if they did,

we would have to expand this to use the other approach.

In our CSS like in our JavaScript also like in our HTML we can use comments.

Here, for CSS comments, they are /* or

the star and then */ and anything between these

pairs of symbols will be ignored by your browser when it's interpreting styles.

You can also put them on multiple lines.

So that's all for this lesson.

In our next lesson, we'll be talking more about the details of CSS and

starting of external CSS the right way in our projects.

探索我们的目录

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

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

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

通过 App Store 下载

通过 Google Play 获取