CSS DIV Day 1_html/css_WEB-ITnose

CSS基础

 引用方法：

   基本语句结构：选择符{属性1：属性值1;属性2：属性值2}

   选择符:可以是HTML中任何的标识符，比如TR、TD、P、DIV、IMG甚至BODY都可以作为选

         择符。 选择符中的内容将会以大括号内属性值定义的格式来显示。

  除了选择符外,css还提供了几种选择器来让html调用css:

   群选择器:当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：

          p, td, li { font-size : 12px ; }

   id选择器:用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。

           例如我们首先定义一个层

          

menubar is the style we want to use, and it is defined like this in the style sheet.

                                                                                                       Just add a # in front!

Category selector: If you want to use class="" to reference the style, then you need a category selector, which is

The method is to add a "." before the selector in the definition

For example: .14px {color: #f60;font-size:14px; }

At this point it can be called via .

---------------------------------- ----------------------------------

Basic The css calls have been reviewed. As long as you learn to write css and use these calling methods, you can play with web pages.

CSS has countless attributes. However, like any language, as long as you master 1/3 of the common attributes, you can achieve 90% of the functions.

So let’s learn the commonly used ones first.

Common CSS attributes:

Font attributes:

This is the most basic attribute, which mainly includes the following attributes:

Because the font attribute is often used, Tuotuo is familiar with it, so I will skip it for now.

Color and background properties

The usage is like this

Attribute: background Attribute value: |||||| 🎜> Not much to say here, once you know how to use it, just pick it up when you need it.

Text attribute:

This is different from the font attributes above. It involves typesetting: line spacing, character spacing, text decoration, etc., I have to Admit it, this is important.

Decorated hyperlink:

This is a relatively common CSS application. Yes, there are always so many hyperlinks on the page. The modification of hyperlinks is always very important.

Although I have never looked at it carefully before today This piece, but it looks quite simple now.

Four pseudo-classes are used in CSS to define the style of the link, respectively. Are: a:link, a:visited, a:hover and a : active, for example:

a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}

a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}

a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}

The above statements are respectively Defines the styles for "links, visited links, when the mouse is over, and when the mouse is clicked".

Note that you must write in the above order, otherwise the display may be different from what you expected. Remember they are in order "LVHA".

The code below is very interesting, you can click here to see its effect

　
　

　
　Class element (ｽa:), the foreground color attribute and text decoration attribute are defined in curly brackets,
　The 'font-size' attribute is added to hover to change the font when the mouse activates the link*//
　a：link {color: green; text-decoration: none}
//*The state when not visited, the color is green (green), the text decoration attribute (text-decoration) value
is none (none)*//
　a：visited{color：red;text-decoration：none}
　　//*The visited state, the color is red (red), and the text decoration attribute value is none*//
　　a：hover {color: blue; text-decoration: overline; font-size: 20pt}
//* When the mouse is activated, the color is blue (blue), and the text decoration attribute value is overline,
The font size is 20pt*//
　 -->
　
　
　
　

　 Unvisited link

　 / /*Add a link, display three different states, and define the font and size of the link text*//
　

Visited Link

　

Mouse activated link

> ;
　
　

This example was copied from Hongen Online, Tutuo did it before After this kind of bang-dong, I copied a large section of js code.

This is a special effect, and its principle is so easy. It’s not like Tutuo didn’t know how to use link css before, but I just didn’t think of it.

So creativity and imagination are very important in many cases.

容器属性：虾米是容器？驼驼到现在还没找到一个定律一样的解释。8过，凭经验，<body></body><div></div>、<tr></tr>......类似的标签都是容器。这些标签就像容器，

罐装了我们的网页内容。使他们能在正确的位置来体现。CSS的容器属性包括边距、填充距、边框和宽度、高度、浮动、清除等属性

 <pre class="sycode" name="code">边距属性

例：body{margin：1em 2em 3em 4em}　　//*定义文本的上、右、下、左的边距分别为1、2、3、4em*// 

填充距属性

例：padding：1em 2em 3em 4em

边框属性

看上去很多，实际用起来很方便。

例：P{border：5px double purple}//*定义了四条边框为一样的值*//

图文混排

img{margin-right：2em；float：left}//*定义图片的右边距为2em，图片浮动在文字的左边*//

鼠标属性 

　在CSS当中，这种样式是通过“cursor”属性来实现的。Cursor属性有很多的属性值，

  我们来看一下它的详细列表

例子：<span style=“cursor:hand”>手的形状</span>