你是否意识到用户与Web应用程序直接交互的唯一渠道是通过Web页面？对于用户来说，Web页面实现得不好，服务端将变得与用户毫不相干！如今用户对Web页面之外有更多的期待：必须加载够快、传递需要的服务、舒适的在各个设备上浏览：从台式电脑到移动手机。 在本门课程中，我们将学习每个Web页面程序员需要知道的基本工具。我们将从最基本的如何用HTML、CSS实现现代的Web页面学习开始。然后我们将进一步学习如何编写页面代码，例如根据用户屏幕的大小来自动调整组件位置和它们的大小。你将能够自己编写一个台式电脑和移动手机都能用的网页。不需要“捏和缩放”！最后，我们将对网络上最普遍、最受欢迎的、令人难以置信的强大语言：Javascript，进行深入的介绍。用Javascript，你将能够建立一个全功能的Web应用程序，通过利用Ajax传递服务端的功能和数据给最终用户。
Lecture 17, Part 1: Conflict Resolution
Loading...
來自 Johns Hopkins University 的課程
面向 Web 开发者的 HTML、CSS 与 Javascript 课程
4010 個評分
從本節課中
Introduction to CSS3
A lot of people "tinker" with CSS. In this module, we'll take you from the very basics of CSS3 to some fairly advanced concepts like floating and CSS rule conflict resolution. We'll go over the 'box model', background property, etc. We'll finish off the module with learning about Responsive Design using our own CSS code as well as start introducing Twitter Bootstrap with its essential Grid System.
與講師見面
Yaakov ChaikinAdjunct Professor, Graduate Computer Science
Whiting School of Engineering
[MUSIC]
Cascading is a fundamental feature of CSS.
It's an algorithm defining how to combine properties values originating from
different sources.
As the name itself suggests, cascading style sheets, in other words the cascade
algorithm, is at the core of understanding and using CSS.
The cascade combine the importance, origin, specificity and
source order of the applicable style declarations
to determine exactly which declaration should be applied to any given element.
And if there's a conflict, how to resolve that conflict.
In other words, how to tell which CSS rule wins.
There are a lot of terminology and
concepts surrounding the cascading algorithm.
However, I believe to have a working knowledge of the cascading algorithm,
you should understand these four concepts.
And these are origin, or origin precedence,
merge, as well as inheritance and specificity.
So let's tackle the first two, origin and merge.
When two declarations are in conflict,
in other words they specify the same property for
the same target, origin precedence rule kicks in, and it's a very simple rule.
And the rule is, the last declaration wins.
Now, when trying to figure out what the last declaration is,
you have to remember that HTML is processed sequentially.
That means top to bottom.
So as you see the declarations happen,
the lower on the page they are, the more precedence they have.
And also for precedence,
think of external CSS as declared at the spot where it's linked to.
So usually it's declared in the head somewhere, but
there could be other styles that I declared in the head.
And to figure out which one was declared last,
imagine that the entire contents of an external CSS file were cut and
pasted straight into the head portion, where that external CSS is declared.
When different CSS declarations do not conflict, that is,
they still target the same element, but the CSS properties with which they target
that element are different, there's even a simpler rule.
And that is that declarations merge.
So a declaration for, for example, font size, and a declaration for color, since
they're two different properties, when they're targeted to the same element, even
if they're targeted from two different origins, they will merge into one.
And the element will get both the font size and the color.
Let's take a quick look at an example of that in code.
Okay, so here I am in Sublime Text and I'm looking at origin.html.
And it's located in the examples Lecture17 folder.
Let me go ahead and hide the sidebar so we could see the file a little bit better.
So to go over the structure of our HTML, in the head we have a link that links
our external.css, which is also located in the same folder as this file, and
you could see that file is right here.
And it specifies that every p,
every paragraph tag, should have font size increased to 130%,
the background will be gray, and the color of the text will be white.
Now, right after that, we have a style tag, again,
still in the head, that overwrites the p element and
says that the color, that is, the text color, should be maroon.
Now, when we get to the actual viewable content,
we have a couple of paragraphs here.
The first one is just a simple paragraph and the second one is a paragraph where
we've declared an attribute style and specified color of the text to be black.
So let's take a look at the first paragraph.
You could see that the background of the paragraph is gray and
the text color is maroon.
Now, how do we get this gray and maroon?
Well, let's take a look.
We first declared external.css.
That's the first thing that comes in the HTML file.
So remember, I told you to think about it as if we basically took these contents and
pasted them straight into this spot.
So basically we've declared we want the font size to be increased,
the background color should be gray, and the text color should be white.
However, right after that, we turned around and overwritten that
with another color declaration and said that the color in fact should be maroon.
And that's really the last thing that we could see as far as the text color of our
paragraph text.
And that is why this paragraph right here does in fact have its text color maroon.
That is because of the last declaration of that color, one.
The second paragraph, however, has its text color black because the very last
declaration of the text color is black, so therefore the text color is black.
So that's our origin precedence rule in action.
However, unlike the color property, we have other properties here,
which are the background color and the font size, that are still being
applied to both paragraphs and that's our example of a merge.
In fact, if we right-click on this paragraph and go ahead and
inspect the element, we can see that the first paragraph does in fact have
the color: maroon and it's coming from origin.html, line 9.
That's our style tag inside our head section.
But you could see that it's showing you that other things apply as well,
that background color is gray and the font size is 130.
And the Chrome developer tools are clearly showing you here that we've overwritten
the color that was specified in external.css with our color: maroon.
And that's why you see the color crossed out here.
The next concept we're going to take a look at is inheritance.
And it's a pretty simple concept.
The basic idea is that you have the document object model tree.
And if you specify some CSS property on some element, all the children and
grandchildren and so on and so on of that element will also inherit that
property without you having to specify the property for each and every element.
So for example, if I specify one property on the body tag,
every element that is a child of a body tag, or
even a child of a child of a body tag and so on, will inherit that property.
Similarly, if I specify a property on some element within my HTML page, every
child and grandchild and so on of that element will also inherit that property.
But obviously, no parents of that element will inherit that property and
therefore will be completely unaffected by it.
So let's take a look at what inheritance looks like in code.
While inheritance in CSS is a pretty simple concept to understand,
it happens to be a very powerful technique as well.
It allows me to specify one rule and
have all the children of the target element inherit that rule.
Let's take a look at inheritence.html,
which is also located in the same folder as the previous file.
It's a very common practice to specify some declarations for the body tag and
the reason is obvious.
Body is the top element in our HTML as far as the view port is concerned.
In it, I can specify some rules for the entire HTML document and
then using our cascade origin precedence, overwrite some specific rules a little bit
lower down the line, while keeping everything else very consistent.
So here in our example, as you can see,
I specified that any text appearing in our document should be color: red.
And I also specified that everything should be align: center and,
which is very common, to specify one font that will be
consistent throughout the entire HTML document, in this case, Helvetica.
Then what I did was I specified a particular color of the text just for
paragraphs.
And even though each paragraph will inherit color: red,
we're here to override that with color: blue.
Last, in the H2 tag here a little bit lower to the bottom, I'm using
again the origin precedence rules to over write the text color to green for
this particular subheading too.
And as you can see, our H1 here in the browser is red and so is the first H2.
And they're red even though I never specified H1 or H2 to be red.
I just said that anything inside the body, color should be red.
And you notice that every single block level element here is centered, and
the reason it's centered is because I specified again in the body that
the text-align should be centered.
Same goes for font-family.
It's Helvetica throughout the entire document.
Again, I never specified text-align or font-family for every single
element in the page, but I did specify it for the parent element, the body tag.
So as you can see, this is pretty powerful.
Okay, so since this lecture is getting a little too long,
I'm going to split it up and we'll finish specificity in part two.
