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 why I'm Eli the computer guy, and in today's class, I'm going to show you how to use CSS to modify your formatting of text and images based off of if somebody is using their mouths and hovering over those text or images.

  • So this could be a useful way to give a little bit of, ah, pizazz to your website or your HTML document, or simply make it easier for your visitors for your users to be able to understand what's going on, eh?

  • So basically what we're going to be doing today is we're gonna be using P tags were going to be using T R tags, and then I'm going to be showing you how to do this with images.

  • And basically what's going to happen is if you highlight over AP tag, it is going to have a background color of grey.

  • So let's imagine.

  • I'm reading through a document.

  • I see something.

  • Oh, somebody else should probably see this.

  • I can put the mouse over that p tag area.

  • It will show up gray.

  • And then I could say, Hey, hey, read this.

  • And then when the person comes over, they're not going to like, uh, what do you mean by this?

  • What?

  • What am I supposed to read, right?

  • You can hover over the paragraph and it will be great.

  • It's what's in the gray, right?

  • Or again if you're going to be doing things like looking at reports and you have a table, one of big problems with tables.

  • If you get a big table, you got a lot of columns.

  • You gotta wrote a lot of rose.

  • You got a lot of data.

  • You're just simply looking at it, trying to discern some information.

  • One of the issues, especially on a computer screen, is it could be difficult to determine what information is in a particular row.

  • So if that entire row turns to a color when you hover over it, it's easy to use your mouse and just kind of roll down the rows me later.

  • Okay, that information looks good, and that information looks good.

  • Oh, yep, Right there.

  • That's the problem.

  • And so if you have that entire row highlighted, it makes your life a lot easier than when we get to emit his.

  • This is just something that you can use to give a little pizazz a little pop to your HTML document, and what I'm going to be showing you today is I'm going to have a single image.

  • So let's say you have a single image on your HTML document, and when you roll over it, it's simply going to get bigger, and it's going to have a border around it.

  • So let's let's say is, let's say you have, like, little small images in your document and maybe for, like, diagrams something like that.

  • And so maybe most people are just going to skip by.

  • They're not going to really care about looking at the diagram, so you want to make it small s so that it doesn't disturb the flow of when people read your HTML documents, but they're going to be some people that are actually gonna be interested in that diagram of that image.

  • And so what you can have is they can roll over that image and then that image can get larger on emphasis.

  • Could be brought to it so people would go.

  • Oh, okay.

  • That's what this person is talking about here on.

  • And then I'm gonna show you, creating a very basic image gallery.

  • We're gonna have a lot of images in a row.

  • And then again, when you roll over one of the images in that gallery, it will get larger s so that you can look at it a little bit better.

  • And so this is really cool.

  • You do not need Java script.

  • Do this.

  • This is basic eight email and basic CSS.

  • All this is doing is you're with CSS.

  • You're saying when you hover over some tag some element within your HTML document, you want the CSS styling to be modified and to show up in a different way, and that will actually give you a bit of a dynamic website so that let's go over the computer and I can show you how this works.

  • So here we are, back in my demonstration machine again.

  • I'm using a Mac book and I wrote this code in text edit.

  • But all you need is a basic asking text editor.

  • So if you're in the Windows world, you can use note pad in the Mac world, even use text at it.

  • And if you're in the Lenox World, you can use G edit nano vim, whatever you want.

  • Basic.

  • Ask you, Text editor.

  • We have two documents for this project today.

  • One is going to be the hover dot HTM mouse is actually the document that you're going to double click, and it's going to open up with the Web browser and then that is going to be pointing back for CSS to hover style Nazi SS.

  • So this will be our CSS style sheep before actually go and start showing you the code.

  • I figure probably be best if I show you the demonstrations.

  • So you understand what the CSS is doing?

  • What?

  • I'm explaining it.

  • And so here I have a demonstration of different examples of what can be done when you hover over an element or a tag in the HTML with CSS eso up here, I have some P tags so appear the 1st 3 things I have RP tags.

  • And when these P tags, what you'll notice is if I hover over at the P tags, the background color goes to grave.

  • So again, think about this from a user experience perspective.

  • Imagine if you have some kind of technical documentation or you have some kind of report.

  • You're looking through it.

  • You see something of interest you want a coworker to to read it, see what their feelings are about it.

  • And basically, instead of simply pointing them at the screen or getting your fingers on the screen or whatever else to show them what you're talking about with this, basically, you can have the CSS.

  • You can simply hover over that particular paragraph.

  • You could say, Hey, Bob.

  • Hey, Sue.

  • Uh, what do you think about this paragraph?

  • Do you think this is something that we should care about?

  • And when they come over and take a look, they're not going to have to guess at what?

  • You're what you're saying.

  • They can.

  • They can obviously see Oh, that's being highlighted.

  • Yes, they they agree they disagree.

  • Whatever else, we're gonna go down here, and I also created a table.

  • So this is a table.

  • Again.

  • Tables are big deals, especially like in the i o t world.

  • When you're dealing with reports, imagine if you have a lot of sensors.

  • Imagine if you have a lot of information coming in and then you're spitting out a table so that an end user can then see what the results are.

  • One of the problems you run into is with these tables.

  • They could be very large.

  • Imagine if they have 20 or 30 columns.

  • Imagine if they have 1000 rose.

  • And so somebody is trying to scan through and take a look at all of this, information a table and try to figure out what's important and what's not.

  • Simply by being able to hover over a row and have that entire Roby highlighted that can make their life a lot easier.

  • Saying, Okay, this is this is row one item one Good.

  • I am too good.

  • Item three.

  • Good road to item one.

  • Good.

  • I'm too good.

  • Item three.

  • Good.

  • Wrote three.

  • I don't want good.

  • Oh, what about item two?

  • And then again, since it's highlighted like this, I'm gonna go.

  • Hey, Tim.

  • A Sally I don't know tha row three here.

  • How do you feel about those numbers?

  • I'm a little worried about those numbers again is a simple way to make the user experience better when somebody's trying to read through reports and things.

  • Bye said.

  • We could go down to images.

  • So just like you can use the hover on text, you can do it on images.

  • And so what I have here is I have ah, formatted.

  • I formatted this image to be a certain size when it's not being hovered over, and when I hover over it, you can see that it gets a lot bigger and it gets a border around.

  • It s o for a user experience perspective.

  • Imagine if you have an HTML document with a lot of diagrams.

  • Let's say, has a lot of diagrams that has a lot of pictures and for the most part, let's be honest.

  • Most people are going to ignore all those diagrams and pictures, so if you make them really big in your document, that's what users are going to have to scroll by, and it's going to make it more difficult for people to be able to read that document.

  • So imagine if basically you make all the images relatively small on the page.

  • So if people don't care about them, they can keep scrolling on by.

  • But then, for the engineers or four people that actually care about those pictures of those those diagrams, they can simply scroll over it and they can take a look.

  • Go.

  • Oh, OK, now.

  • Yeah, OK, I see the power goes X wires a year.

  • The water goes X, y or z right on.

  • So this is one of things you can do with CSS.

  • Pass that down here.

  • I have, like, a little image gallery.

  • So imagine creating a simple gallery on with this again.

  • All the images are of a certain size.

  • And then when I scroll over them, you can see they increase in size, and then I just put a lucky little yellow border around them.

  • Just so and so you'll notice we may not notice.

  • Yeah, but basically, the important thing here is that this is all CSS.

  • There is no javascript.

  • There's no additional coding involved with this.

  • This is simply html and CSS.

  • So let's take a look at how this works.

  • Uh, we have our HTML document like we normally d'oh, we'll talk about this in a second.

  • The important thing is that this is pointing back to the hover style dusty CSS style sheet.

  • So let's go take a look at that.

  • Here we have the hover style dot CSS sheet and basically, here's just the CSS that have created eh, So what we have here for the hover is basically I have the tag or in CSS the element.

  • So we have the P tag or the P element.

  • We have the TR.

  • So this is for a table row.

  • We have the i m g er these two places.

  • Then I've created class of gallery and I have this for the gallery.

  • And so basically what this is is you have the tag or element basically the tag or the class You knew colon and then you basically just right hover soapy colon hover or dot gallery colon hover, and it says when something is being hovered over.

  • This is how the CSS should be modified.

  • Eso for here For P.

  • I simply I'm saying that the background color should be modified to light gray for the tr for hover.

  • I'm simply saying the background color should be modified to yellow.

  • For I am G hover.

  • I'm saying the width should be 300 pixels.

  • The height should be auto and the border should be that 10 pixels, solid gray and then dot galleries.

  • You do remember the period period Gallery colon hover, The width should be 200 pixels.

  • Thehunt should be auto and the border should be three pixels solid yellow.

  • So the important thing here is white space.

  • It doesn't matter when you're doing this, so do make sure you have the class or the tag.

  • Then you have the colon.

  • Then you have hover all smooshed together.

  • Do you worry about what space with this part?

  • Then passed that I did have to define what the default CSS should be for the I.

  • M.

  • V and for the gallery class.

  • So what I have here is a normal image of I use the image tag and a female on with the display to be a block.

  • The margin left to be auto, the market right to be auto.

  • So what this is going to do is this is going to center the image the image is going to be in the center of the Web browser, and then I simply want the width to be 150 pixels and the height to be audit.

  • Right?

  • So this is going to center the image in the middle of the Web browser with a with a 150 pixels.

  • When I hover over the image, it will then modify the wet to be 300 pixels to get height to be auto that is going to give the border that is 10 pixels of solid gray.

  • Then what I've done for the gallery class.

  • So I've created a gallery class period gallery.

  • So this is going to be a display in line block.

  • So when I showed you basically that image gallery so for the images to be basically be in a line look like that you use display in line block, I then did the width of 100 and 50 pixels, height to be auto and then for this for the standard class of gallery.

  • I actually gave a 10 pixel, a solid white border s.

  • So when you take a look at the example, that's what see how, see how there's that nice little gap between all of the images and default.

  • That's what does that I basically give it.

  • Gave each image a 10 pixel white border.

  • It's spaces, the images out a little bit.

  • And then when I hover over the image, I guess he gives a little space.

  • It's not not so bad.

  • That's why I did that.

  • Then we have down here again.

  • Gallery hover where they're going to enlarge the images to 200 pixels from 150.

  • Height will be auto again.

  • Border is going to be three pixels, solid yellow.

  • And so again, that's where we get this.

  • Gets to be a little bit bigger and it gets to be highlighted.

  • This may be useful for you when you're dealing with the user experience.

  • Uh then, from there we're gonna go.

  • We're gonna take a look at the actual HTML document itself.

  • So we take a look at hover dot html.

  • So this is what you're actually be opening up in the web browser again?

  • The html, the head, the link, the clothes, the head, the body, Then this is all we have.

  • So we don't have any special coding in the HTML documents or using basic P tags.

  • Since we define us in the CSS, all we have to do is basic Pitak not even use a class.

  • And I put those different paragraphs in there and then created table again.

  • You'll notice here, since I used the T R element the TR tag within CSS, I don't have to put a class or anything else in here simply, whenever it sees the TR, it will put that formatting on it.

  • Then we're going to come down here again.

  • We're going to have that image.

  • So that image that centered, that's gonna be the image SRC the same picture I've used 1000 times at this point on.

  • And that's simply going to be there.

  • So again you're noticing there's no additional class.

  • There's no additional coding within the HTML.

  • It is simply going to be going to the CSS.

  • Seeing with CSS has to say and then bring in a day past that we're going to go down and we're gonna create that little gallery.

  • So I did a break here.

  • I didn't break, just give a bit of space.

  • And then for the gallery, all I essentially did was copy and paste.

  • The same is the same image of, you know, six times here.

  • But for here we're going to do I am G.

  • We're then going to make a class of gallery, right?

  • So that's going to give us the display type of inline block and give me all of the other CSS values that I set up and that's all we have.

  • We then close the body.

  • We then close the HTML and then this is the finish documents.

  • When I hover over the P tags, they get highlighted.

  • When I hover over the TR tags, they get highlighted when I hope hover over the basic I am G that gets increase in size and border.

  • Same is true down here, and this is the the gallery class that I created in the CSS.

  • There's not a lot to it again.

  • All you're going to be doing is you're gonna be doing the element or the class.

  • You're going to do a colon.

  • Then you're simply going to say hover and then past that you're gonna plug things and you could change the font if you wanted to.

  • You could make things bold.

  • Eso I'll say, almost almost I think maybe all but almost all the CSS formatting.

  • You can modify using the hover so you might actually be able to do something far more sophisticated, then simply tanking the background color to something different.

  • So this is how the hover works with CSS, and I think you can see this makes a a slightly dynamic website came out document for you.

  • That could make it a lot easier for your users to be a consumer and understand.

  • So now you know how to use hover in CSS again.

  • It's incredibly simple set thing, basically of the element or tag.

  • So it's called Element in CSS tag a nation and mail.

  • But again, P h one i m g.

  • Whatever else you do, Colon, you say hover and then you put in the formatting.

  • How How do you want that to be formatted?

  • If somebody is hovering over it again, you could do the same thing with class so you can create different classes again.

  • Different classes for different types of images, different classes, you know, we're gonna be doing doing galleries and that type of thing.

  • And then you just assigned the class to whatever tag or element that you care about and away you go.

  • You can get some of this nice, dynamic dynamic formatting to make your page work a little bit better for your end users again.

  • That's going to be an important thing.

  • Whenever you're out there and you're gonna be creating these HTML documents, a lot of times, the HTML documents, the Web pages that you're gonna be creating, they're gonna be pulling information in from things like sensors from other sources.

  • And basically they're going to be presenting information to the end user.

  • And remember, just because you present information to the end user does not mean you did a good job.

  • You have to present information to the end user in such a way that the end user knows what the hell they're looking.

  • All right, if you get dumped, a whole bunch of image are a whole bunch of information into the Web browser, and you're like I did my job.

  • Everything printed out properly.

  • But the end user has no idea what they're looking at.

  • You haven't done your job properly.

  • Part of doing your job is presenting the information in such a way that the end user can actually use it in an efficient manner.

  • And so that's one of things that using hover conduce again, simply like to say, especially with tables.

  • A lot of times, when you're printing out reports, essentially a lot of what you're gonna be doing is essentially creating tables of one type or another.

  • So simply being able to hover over a rose in a table, have an entire row light up so that you can verify.

  • Okay, yes, I'm actually following everything across.

  • Everything is how I think it's supposed to be and then go to the next and go to the next and go to the next literally you putting whatever it is.

  • Four lines, four lines of code, something like, You know, 40 50 characters of code in your CSS to allow that to happen that could make life for all of your users a hell of a lot easier for years and years and years as they use the reporting system that you've been able to create.

  • So hover is one of those things that is incredibly simple, but also incredibly valuable and definitely something you should play around with.

  • So, as always, I enjoy doing this class, my love for to see 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.

字幕與單字

單字即點即查 點擊單字可以查詢單字解釋

B1 中級

CSS和HTML 5 - 懸停格式化 (CSS and HTML 5 - Hover Formatting)

  • 1 0
    林宜悉 發佈於 2021 年 01 月 14 日
影片單字