Name: CSS和HTML 5 - 基於標籤的類屬性 (CSS and HTML 5 - Tag Based Class Attributes)
Uploaded: 2021-01-14T10:13:05.000Z
Duration: 11 min 22 s
Description: 【看影片學英語】數萬部 YouTube 影片，搭配英漢字典即點即查，輕鬆掌握單字發音與用法，長久累積看電影不必再看字幕。

Please remember that the complete information for the class that you are about to view is at Eli, the computer guy dot com.

程度副詞

Not only do we have our videos there, but we have part lists, diagrams, pictures and even complete code examples.

So if you are watching this video and you want more information, please go to Eli, the computer guy dot com.

Welcome back, as you know why I'm Eli the computer guy, and in today's class, I'm going to show you how to specify specific elements that will be modified by your classes and CSS.

So in CSS, you can create classes with these classes.

You can say how text in your a thehe take female document should be modified.

So different colors, different background colors, different font types, the whole nine yards.

Well, imagine if you're creating an HTML document and you want all of your text to look similar, but you also want to be able to modify the tags individually.

So in the example that I'm going to show you today, we're going to create a class called Pretty text.

So I'm gonna create class, period, pretty text and all the text that is within the class.

Pretty text is going to be orange and it's going to be of a specific fought.

So I decided I don't want to use the default font for all of the text with the class pretty text.

I wanted to be a specific fund, but then underneath of that I also want to do things such as modify the H one tag, modify the P tag so one and so forth.

And so one of the things that I can dio is so all the text that uses the pretty text class will all be orange and all will be the same thought.

But then I can go in and I can say P period pretty text, soapy period, whatever my class name is and I want this to be modified Additionally, by doing these additional things ate one period.

Whatever the class name is, I want the h one tag to be modified with these additional things.

So basically, this is a way that you can say anything with this class will be orange.

It will have you know, certain common characteristics and then underneath of that, I want to modify the H one tags within this class.

I want to modify the P tags within this class this way.

Want to modify the 83 tags within this class?

So that way you can have text that is all similar.

But then the tags can be used to then differentiate between the different types of texts in the ways that you define.

So that's what I'm going to be showing you how to do today.

So let's go over the computer so I can show you how this works.

So here we are at my demonstration machine again, I'm using a Mac book.

I like using a basic ass key text editor in order to write this type of simple code.

If you're in the Windows world, you can use note pad again.

If you're in the Lenox world, you can use G edit nano of them, whatever you like s O.

So this is what we will actually double click on an open on this will basically just show us our results.

This is what we'll open them the Web browser, and this is going to reference the CSS style sheet called class tag style dot C S s.

So these are the two documents that will be using today.

So we'll just jump into the CSS and then go back to the HTML document so you can understand what's going on s So this is the style sheet and you can see I don't really have much here.

So the first thing that I've done is I've created a class for pretty text.

So anything that has the class of pretty text will share these characteristics.

So I've simply said anything with pretty text class will be the color of orange, and I've modified the font family to Ariel.

So basically, any time I use the class pretty text within my HTML document, it will be ordered, and it will be Ariel.

What we've done is I've gone down here and I've modified the tags for 8182 and P.

So in addition to what I defined here for the pretty text class, if it's in 8th 1 as we do 81 period pretty text, I also want also so again, this additive.

I also want the background color to be gray.

So the age one will be orange Ariel and out will have the background color of gray that I've done for eight to for pretty text.

It'll be orange Ariel and I want the font style to be metallic right.

And then for P pretty text, it'll be orange Ariel and the text decoration.

So basically, with all of these now, right, I'm creating a family, basically for my font within my HTML document to say everything will share these default values.

It would all look the same and then depending on what tag I'm using, here are some additional changes where I want the modifications, right.

If we go over when we take a look at the HTML document, it's really simple and get you up in the HTML, you open the head, we're going to link to the style she here again.

This is where you put the name of the style sheet or the location of the style sheet.

So since this style, she is in the same folder, the same directory as the HTML document against Simply put the name of it there.

We're going to close the head, We're gonna open the body.

And so here what I've done is I've simply put 81 with a class of pretty text.

So this is 8th 1 Basically period, pretty text.

So we're going to get everything from pretty text.

Plus, we're going to get whatever we have here for h one dot pretty text and basically just saying this is an age one.

The same thing here ate two of pretty text.

So basically, Finkel, that is eight to period pretty text.

We go down to pee again, class of pretty text.

So it's p period, pretty text, which means going the orange Ariel.

And it's going to be underlying finally, a couple of things that I did under here just so you can see like the differentiations is I've done +83 so you'll notice.

Here is I have not done in any additional definitions for the H three tag.

So basically, what's going to happen here is a three with a class of pretty text.

All that's going to happen is going to simply get these attributes is going to get these attributes, plus whatever the default is for the Web browser itself.

And then just to show you what all of the CSS is done here, then I'm just using a basic 83 tag to show you what the default for a 83 tag should look like.

It is orange, but I also have a background color of grey.

But now this is italicized the P aerial orange.

But it's underlined, as I had for in the additional with the CSS, then for the 83 here again, since I didn't have any additional definitions for the A three, there's no additional definitions for the A three.

So you can see is this is simply Ariel and Orange.

Otherwise, its default for whatever the Web browser decides.

And then we can take a look at a three here, and this is what the standard default 834 matty looks like.

And so this gives you an idea of what this CSS modifies.

And so this could be very useful again when you're creating, like families of fonts, families for your text within your HTML document, this is a way you can go and again at the highest level.

You can say OK, I want everything to be this color.