20、 Obama
B1 中級 5 タグ追加 保存
このエントリーをはてなブックマークに追加
動画の字幕をクリックしてすぐ単語の意味を調べられます！
単語帳読み込み中…
字幕の修正報告
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 this font type.
It will have you know, certain common characteristics and then underneath of that, I want to modify the H one tags within this class.
This way.
I want to modify the P tags within this class this way.
Want to modify the 83 tags within this class?
This way.
So on and so forth.
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.
So I used a text edit to write this.
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.
The Mac world.
You can use text at it.
If you're in the Lenox world, you can use G edit nano of them, whatever you like s O.
I created two files today.
The 1st 1 is the class tag dot html.
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.
The HTML document is pretty simple.
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.
I've only defined four classes.
So the first thing that I've done is I've created a class for pretty text.
So, period, pretty text.
This creates basically a default.
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.
That is the default standard.
Then pass that.
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.
I'm going to have it underlined.
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.
Then we're going to go down.
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.
Right?
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.
I go here, we get all of this.
Plus it's going to be italicized.
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.
So with that, let's go over.
Take a look at the class tag dot html.
I can now simply double click on this.
And so this is what we see.
So basically we have.
This is an H one, right?
So we have This is the aerial font.
It is orange, but I also have a background color of grey.
Right then this is aged too.
This is an age to again Ariel orange.
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.
I want everything to be this font.
I want everything to be X, y or Z, and then you can go down to each individual tag and then give a few additional things of how you want it to be again.
The important thing to understand is this will be added on to whatever you have here and whatever the default is for the Web browser.
So again you'll notice.
Like with this.
So this is a three without any additional formatting, so you'll notice it's Ariel.
You'll notice it's orange, but it's the same basic size as the normal 83 text generally would be.
It's not underlying.
There's nothing additional.
So it's all the default stuff, plus a being orange and Ariel.
So this is something that you can play with, and it'll make it a lot easier for you when you're trying to create fonts and make make your entire HTML document looks like it goes together.
So there you go.
Now you know how to specify how specific tags should be dealt with within a class, so you create the overall class for that class.
Anything that you define with that class will have those basic modifications.
There's basic attributes.
Then you can go down H one a two a three, all the way to age six p to all kinds of different tags you can put in there and basically you can put those additional attributes there.
What this does is it makes it very easy for you again to make your HTML document look, look coherent, look cohesive So when people look at again, everything is basically the same color.
Everything is the same font type.
Everything that looks like it goes together.
And then with the H one tags and the different tags, then you can do with a little modifications with those tags so that they can stand out for things such as, you know, headers and titles and menu bars in that type of thing s Oh, this is just a very simple trick to make your HTML documents look a lot better and is an easy way to do it versus trying to do something such as create individual classes for all of your different tacks, right?
That would be a way that you could accomplish what I showed you today, but it would be more difficult to dio again.
That's a big thing in the CSS, and the coding world in general is there's 1000 ways to accomplish, you know, to solve any problem.
Uh, what you have to do is you have to figure out the most efficient way to do it, and that's where it could be difficult.
So, as always, I enjoy doing this class and look forward to the next one.
If you like the content that I create, please think about going to align the computer guy dot com and becoming a member or donating.
Please understand that all the educational videos are in front of the pay wall that includes the videos that includes the notes, the diagrams and the code.
Example.
All of that is freely available and in front of the pay wall.
But if you want to watch opinion videos, or if you want to be able to comment, you do need to become a member.
Membership is $5 a month or $60 a year and gives you access to those opinion videos and the ability to comment.
If you don't want to become a member, you just want to give a one time donation.
There is also a donate button where you can do that.
Please understand.
In order to provide the education that I am.
It does cost money servers, cost money, equipment, costs, money, travel costs, money.
All of these things cost a reasonable amount of money.
And the fact of the matter is, is YouTube's advertising program no longer supports creators the way that it used to So if you want to these classes to continue to stick around and you find them to be valuable, please think about either becoming a monthly member or donating a few dollars for this project.
コツ：単語をクリックしてすぐ意味を調べられます！

読み込み中…

B1 中級

CSS and HTML 5 - Tag Based Class Attributes

5 タグ追加 保存
このエントリーをはてなブックマークに追加
林宜悉 2020 年 3 月 27 日 に公開

お気に入り

loading

コメント

読み込み中…
お勧め動画

  1. 1. クリック一つで単語を検索

    右側のスプリクトの単語をクリックするだけで即座に意味が検索できます。

  2. 2. リピート機能

    クリックするだけで同じフレーズを何回もリピート可能！

  3. 3. ショートカット

    キーボードショートカットを使うことによって勉強の効率を上げることが出来ます。

  4. 4. 字幕の表示/非表示

    日・英のボタンをクリックすることで自由に字幕のオンオフを切り替えられます。

  5. 5. 動画をブログ等でシェア

    コードを貼り付けてVoiceTubeの動画再生プレーヤーをブログ等でシェアすることが出来ます！

  6. 6. 全画面再生

    左側の矢印をクリックすることで全画面で再生できるようになります。

  1. クイズ付き動画

    リスニングクイズに挑戦！

  1. クリックしてメモを表示

  1. UrbanDictionary 俚語字典整合查詢。一般字典查詢不到你滿意的解譯，不妨使用「俚語字典」，或許會讓你有滿意的答案喔