Placeholder Image

字幕表 動画を再生する

  • 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, I am Eli the computer guy, and in today's clients, we're going to be talking about in of type with CSS.

  • So basically what we're going to be doing is we're going to be automatically formatting HTML documents using a tool called of type, so this could be a very valuable and basically what this allows you to d'oh is it allows you to four Matt text again based off of certain rules.

  • So one of the big issues when you're creating large HTML documents is when people are trying to read the HTML document.

  • You can have a lot of information spread over a large area, and it can be very difficult for your users over your visitors to be able, basically understand and contextualize the information.

  • So one of the things you could do with format in your HTML document is basically be able to format text similarly, So it's easier for your your users, your visitors to be able to discern eso.

  • Think about this in the i o t world.

  • So a lot of what I'm teaching you is from that whole Iot T's perspective, Internet of things.

  • So you're going to be having a lot of sensors.

  • We're going to be having a lot of devices sending information to your server.

  • You're then going to parts that information and then be able to print out reports.

  • Well, one of the big issues, as you point out reports and again, with basic HTML, you can print out the reports.

  • They could be ugly and complicated and impossible to read.

  • But theoretically, all the information is there.

  • You say my job is not all the information is there.

  • My job is done and then you have the end users looking at just blobs of information, saying, How the hell do I use this on any interesting things you can do with inthe of type is basically again.

  • You can automatically format text based off of certain rules, so that it is much easier for the viewer to be able to discern what information goes with what you can think about this with things such as tables.

  • So if you have tables or one of the examples I'll show you is a list.

  • So imagine if every row in a list the entire row was a different color.

  • So one of the examples that I'm going to show you is one row is going to be blue, and then the next row is gonna be pink.

  • In the next row is gonna be blue, the next rose gonna be pink.

  • And so you have you have a list, or possibly if you have a table, it's very easy to then be able to see all of the information that goes together So you could do this with tables and lists.

  • You can do this with basic tags.

  • So basic P and a two or a tags.

  • You can do this with dip.

  • So, basically, if you have dibs and let's say you have you have different sections in your HTML document.

  • So maybe, like for like, chapters or for posts, you make the 1st 1 to make the 1st 1 have a background of white, and then the next one have a background of gray and the next one have a background of white and the next one have a background of Great.

  • So when I'm scrolling through the document, I could very easily see.

  • OK, this is one post and that's an Expos and this is a post.

  • Okay, this is the post that I want, right?

  • And so basically, this of type allows you to automatically format your text based off of some different rules.

  • So with that, let's go over to the computer.

  • I can show you how this works again.

  • It's one of those very simple things that you're just going to simply need to play with once I show you.

  • But this could be a very useful again, especially when I'm going to be doing things such as printing out HTML reports.

  • Here we are, back at my Mac book Pro that he used for the demonstration machine.

  • Today I used text edit in order to type out all the code again for these basic coding projects.

  • I like using an ass key text editor.

  • If you're in the Windows world, you can use no pad if you're in the macro and you can use text at it if you're in Lenox worldviews g et it nano vim or whatever.

  • Basically, you just need a simple text editor.

  • What?

  • You're gonna have to files at the end of this today one I've called in dot html.

  • So basically, this is the document that opens up in the web browser.

  • So that needs to have a dot HTM or dot html Suffolk ce on then the CSS style she is in style dot CSS and so that simply needs to be named dot C s s.

  • I'm going to show you the end result first, and then we're going to actually go take a look at the CSS just so you can get an idea of what the end result is supposed to look like before we actually take a look at the code.

  • And so here we have three different examples eso using this of type here.

  • What I've done is we can see that the even rose here are basically italicized and they have a background of yellow.

  • So imagine Imagine if you had a number of different basically, tags of some sort they may be P tags and might be H tags.

  • It might be something like that, and you just want to be able to differentiate.

  • So this is this.

  • This has the font One way.

  • The next one has a faulty at other way.

  • This has a fun one way.

  • This has a fun the other way.

  • This is a way that you could do that again.

  • So it's very, very easy to see if somebody is scrolling through the HTML document as they go through different sections.

  • So this is showing with an eight to tag using this end of type with an eight to tag again, you could do with an eight to tag a p tagging age one tag Whatever else Ah, here were yours and end with full dibs.

  • So, basically, again, this is where you can think about this is imagine these air entire blogger posts or entire article's something like that.

  • So you have the first def here that has a light gray background.

  • Then you go the next div that has a white background the next day have, like gray background, so on so forth.

  • So I put some H one data here and I put some p here.

  • So again, this this p here I only put this fragment of a sentence.

  • But again, this could be an entire blawg post again.

  • If somebody is scrolling through, it makes it very easy to differentiate between the different post on.

  • Then finally, at the end here.

  • This is an inthe example using a list.

  • So I have a basic order list here.

  • First item on the list again.

  • You can see it's blue across, then it's pink than its blue.

  • That is pink, that is blue.

  • Then it's pink.

  • And again, this this this gives you a visual representation.

  • So that's very easy to see the difference between the different items here.

  • And that's really what this end of type is going to do for you.

  • Let's go over and basically take a look at the HTML for this again.

  • There is nothing complicated with the HTML for this.

  • We opened up with the HTML tag we opened up with head tag we're going to do here is we're going to connect to the end style dot CSS.

  • So this is our style sheet again.

  • You either put the name of the style sheet in there.

  • If it isn't same folder as as the HTML document or you put the full file path.

  • If it's in a different folder, we closed the head and then we we open the body from here.

  • We have a tch one.

  • So this this is going to basically give us a title for each of these examples.

  • And I have given this a class of titles.

  • So we're taking a look here this class of title.

  • See how for the H one.

  • Basically, this has that that nice little border around it, basically, to try to differentiates like, Okay, this is a title.

  • This is a title.

  • This is a title.

  • That's all we're doing here.

  • So the h one.

  • You know, this is a basic example.

  • Then I have a whole bunch of different 82 tags here, so eight to stuff that's in an eight.

  • You tag to stuff that's in an eight to tech, right?

  • So, again, this is just an example basically dump information and then we're going to go down H one again.

  • This is still going to that class of title.

  • This is an example using the div tags and then All I've done here is basically of copy and paste it New Merced.

  • Numerous examples with a diff tag.

  • So we do.

  • The DIV class is going to equal in class and then I basically just copy and paste it at a number of different times.

  • Then we're going to go down again.

  • We're going to get that title again.

  • H one class of title.

  • This is an example using a list.

  • And so again, with this, we open up with the ol the order less tag.

  • We have item one all the way down to item six.

  • We close the order list, we close the body, we close.

  • He ate him out.

  • So you will see here.

  • There's nothing really complicated with this again we're using for the the H one.

  • We're using a title class for the dibs were using the end class, um, and someone and so forth and then with the other ones were basically just based off of the tags themselves.

  • I'll show you that in a second.

  • So let's go over and actually take a look at the style CSS.

  • So this is the actual style sheet, so you can see how this is all coded s.

  • So the first thing, right?

  • So as I said for these H one titles here, you should know how this works.

  • I talked about this in previous class, so we have dot title and basically we're going to have a border is going to be two pixels.

  • It's going to be solid and it's going to be black.

  • Basically, That then gives us thes title thes title classes right here.

  • Right, So two pixels, solid black.

  • Then we're going to go down.

  • Then we're going to get to the eight to inthe of type.

  • So basically, what we're going to say here is that the eighth to tag?

  • If we're going to have an eight to tag, we're going to do Colon.

  • We're going to do end of type.

  • And they were going to say for each, even one, So you can do even or odd here, So I'm gonna say for each, even once each repetition, that's even So the 2nd 1 the 4th 1 The sixth hole in the 8th 1 the 10th 1 the 20th 1 the 48th 1 We want the background of that to be yellow.

  • We want the font style to be italicized, right?

  • And so that's what we get here.

  • So the 2nd 1 is yellow and is italicized.

  • The fourth woman is yellow is italicized thesixty one is yellow and is italicized.

  • Just to show you how this works show that is currently even and you see how it is.

  • I can put this to odd.

  • I can do foot file I can put save And now we can see the odd ones are now going to be formatted that way.

  • So the 1st 1 the 3rd 1 the 5th 1 and the 7th 1 are now formatted that way.

  • So basically the even iteration when that tag pops up or the odd in oration When that tag pops up, that's what you can do here.

  • So it's just plugged us back to even again.

  • All we do is we do file, we do save.

  • And now we can see that the even it orations of when the H two tags show up.

  • That's what you get.

  • Then we're going to go down.

  • We're gonna take a look at the dip.

  • So basically with the Div, same type of thing.

  • So if we have a div tag, they were gonna do cold one, and we're gonna say end of type and then we're going to say, is the second basically the second iteration every 2nd 1 We want it to be format in this way.

  • So a background of a light gray And we want to start with the first iteration the first time this happened.

  • So if we take a look here, we can see what we have here.

  • So this plus wants you to have this plus one plus one means it will start on the first or the first woman is like gray and then passed that it will be every second the first ones like grey.

  • Then it goes toe white.

  • Then this one's like grey.

  • Then it goes to white.

  • This one's like grey.

  • Then it goes to white.

  • So one of things we can do here is we can say Let's say every third, right?

  • So every third iteration would you file?

  • We do save.

  • So we see how it is.

  • Now I go over and I do a refresh.

  • Now we can see that every third iteration.

  • So since his plus one, since it says start on the plus one, the 1st 1 Then +123 12 and then will be the next third, right?

  • We go here and we say four again, especially if we had a lot of these dibs.

  • You do four and then we can see For the plus one, it starts here than +1234 So on and so forth we don't have a plus one.

  • So we go back and we say, like two and we simply get rid of this.

  • Then it will simply happen on that generation.

  • Right?

  • So we go here, we hit refresh.

  • And so we see on the 2nd 1 So if it's just to end, is basically saying on the second generation So this will be white and this will be gray in the 2nd 1212 If we do plus one, it says, start the formatting on the first iteration.

  • And now if we hit, refresh and now starts on the first iteration.

  • So up here This is how you can do even or odd down here.

  • This is where you can say on however many iterations.

  • So again like if you had lots and lots and lots of their lives, let's say you have.

  • Oh, I don't know.

  • You had 50 50 dibs.

  • For some reason, you could say on the, you know, on the second air, every to do this on every ex.

  • Do this on every ex right, And you could formatted in many different ways.

  • Then we're going to go down here, and we're simply going to take a look at the list, using the whole even odd a system like we did before.

  • For this, we're going to say list, Ally.

  • So whenever we see the ally tagged, the first thing that we're going to say is inthe of type odd.

  • We're gonna say, whenever it's an odd oven ally, we want the background color to be a light blue.

  • Then we're going to go down for the ally, and we're gonna say inthe of type.

  • Even so, whenever it's even, we want the background to be pink.

  • So that's when we come over here and we take a look at this.

  • We can see that when it's odd, it's light blue, and when it's even, it's pink.

  • Item one odd blue item to even pink item three blue eye for even pink.

  • Right, so on.

  • So forth.

  • And so this is where this is where you can actually combine inthe of type formatting said so to do something, you know, in order to create a little bit more complicated vacated formatting with your CSS.

  • So this is basically how it works again.

  • But what you're going to do here is you're gonna have the tag or you're gonna have the class.

  • So if this was a class, you could do dot whatever you're gonna do, Colon, this is all do not with this white space matters to be clear with this white space matter, so there's all crunched together.

  • So you either put the class or the tag here that immediately following you put a colon than immediately following you put inthe of type then immediately following you open the parentheses than you say.

  • Even then you say odd or you do like to win.

  • You see, however many numbers, however many iterations you want to see this happen, then you open up the squirrely brackets like you normally d'oh.

  • Then you putting the CSS formatting like you normally d'oh and then close the squirrely brackets like you normally d'oh!

  • And if you did not fat finger anything and you know what you're doing.

  • Then you get some fancy, cool, sexy of formatting like this.

  • So inthe of type is a very easy way to make your HTML reports a hell of a lot more easier to read on.

  • And so this is basically how it works.

  • So there you go.

  • Now you know how to use end of type.

  • This is a very useful tool in the CSS world, especially again when you're going to be creating reports from again things like I ot devices and all that type of stuff.

  • One of most important things is our your visitor is actually going to be able to understand the information that they're presented with.

  • You can print out a whole bunch of information on the screen.

  • But if the person of those died doesn't know what they're looking at and then it's worthless.

  • That's one of the reasons that C.

  • S s is so valuable.

  • Like CSS is one of those perfect examples that I see in the real world of technology professionals.

  • Well, a lot of technology professionals, they look at something like CSS, and they're like, Yeah, it's formatting.

  • I don't really care about that, you know, PHP Python, You know, Java script, these air, the rial languages.

  • That's what I'm gonna focus on.

  • And then they create applications.

  • They could recreate reports that to be clear, to be clear, technically, technically, they do everything that they're supposed to do.

  • But there are miserable for the end users to try to actually use because again, if if you're not the person that actually designed the application or the report and may be very difficult to understand what is going on and be able to interpret what you're seeing So by doing things like this whole using inthe of type again, being able to section off being ableto format, different sections based off of these very simple rules, that's a way to make it a lot easier for again for people to scroll through very large HTML document again.

  • Think about an HTML document, a document that might be the equivalent of 100 or 20 printed pages, and somebody's trying to scroll through and find a specific section.

  • If that entire document is basically formatted with white text with a white background and may be all there is is every once in a While there's a little title with, you know, chapter two dot you know, section one or something like that, that is going to be very difficult for your end users to navigate through.

  • On the other hand, if every section again just even sections have a white background, odd sections have a great background.

  • It's a lot easier is people are scrolling through on their way.

  • Okay, one section to Section three second four second 5706 at any of the six section there we go, or even if it's a lot longer 20 sections is still a lot easier to scroll through and be like, Okay, I feel like I feel like I've schooled by about 20 section so far.

  • Let me let me see where I'm at, right or again looking at things like tables.

  • You can use these rules on tables for the TR for the tr tech with table road tag and again, When people are looking at especially large tables, it makes it a lot easier.

  • Okay, so so that's the date and okay I can get.

  • Since it's all in one color, I can then just follow that date across and see all the readings I'm getting from all of these different sensors.

  • Think about how easy it is for a user to actually be able to use that report versus a basic eight came out for table.

  • All wife, basic line, borders.

  • You know, those massive table They're like, okay, that day.

  • And, uh, okay, you know, it's just it's a pain.

  • So using these end of type roles can make it a lot easier for your end users to be able to see what's going on.

  • This is the type of thing where I have shown you how to do it again.

  • From a technical standpoint, this is very easy to dio where you get paid.

  • The big bucks, though, is actually learning how to use inthe of type in a way that's actually useful to the end users.

  • You will notice with the example that I gave you.

  • It is ugly as a lot of times the demonstrations that I give you I make them ugly is how I make them.

  • Very garish, I guess.

  • So you get the point right?

  • Sometimes Sometimes if you do formatting that's really subtle.

  • It actually goes over people's heads because it's so subtle and so obvious they missed what I'm trying to teach him.

  • One of things that I try to do is with these demonstrations.

  • I try to make garish many times very ugly examples.

  • The reason is because it it becomes very obvious what I have done me a light blue and pink together.

  • Oh, okay, that that's what that code does, but one of things that you're going to need to think about doing it again.

  • When you're dealing with the end users, you don't want to make garlic sh again.

  • My guy was in a garish and ugly so that you understand what's going on.

  • Your job is to make interfaces that users actually want to use.

  • So one of the things that you should do with end of type is go and start playing with it.

  • Play with the different colors, play with the different designs, play with it, see what actually creates a nice, inviting environment for your users versus the ugly mess that I showed you.

  • So again, this is one of those.

  • This is one of those very, very simple to explain technically how to do it.

  • The complication is actually then turning this and do something useful at the end of the day.

  • So as always, I enjoy doing this class and look for us here in 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.

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

字幕と単語

ワンタップで英和辞典検索 単語をクリックすると、意味が表示されます

A2 初級

CSS と HTML 5 - nth-of-type の書式設定 (CSS and HTML 5 - nth-of-type Formatting)

  • 5 0
    林宜悉 に公開 2021 年 01 月 14 日
動画の中の単語