CSS DIV Day 1_html/css_WEB-ITnose

CSS基础

 引用方法：ed41f77a473133521b5c0f8d4074c235

   基本语句结构：选择符{属性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选择器"来定义。

           例如我们首先定义一个层

           b37f7c8c0184c181360d2923e6eef7e816b28748ea4df4d9c2150843fecfba68
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 009554aa8266129f10e6ec0aba36278c54bdf357c58b8a65c66d7c19c8e4d114.

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

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: 3729847adc21d233c93cf6a5091946f9||676adc3a4f3c9e32f81318dce9d8e4d4||d7a0accb1b0bdee571b618150663aaed||bbd38e49954c1aadc8c0de08d5a96f04 🎜> 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

　100db36a723c770d327fc0aef2ce13b1
　b2386ffb911b14667cb8f0f91ea547a7link css6e916e0f7d1e588d4f442bf645aedb2f
　93f0f5c25f18dab9d176bd4f6de5d30e
　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*//
　 -->
　 531ac245ce3e4fe3d50054a55f265927
　 9c3bca370b5104690d9ef395f2c5f8d1
　 6c04bd5ca3fcae76e30b72ad730ca86d
　 ac3dab1fe2ef9878986eebe780359503
　 034990a1c9b97c05a88ed30a4aa1dd6aUnvisited link5db79b134e9f6b82c0b36e0489ee08ed94b3e26ee717c64999d7867364b1b4a3
　 / /*Add a link, display three different states, and define the font and size of the link text*//
　 e388a4556c0f65e1904146cc1a846bee 034990a1c9b97c05a88ed30a4aa1dd6aVisited Link5db79b134e9f6b82c0b36e0489ee08ed94b3e26ee717c64999d7867364b1b4a3
　 e388a4556c0f65e1904146cc1a846bee 034990a1c9b97c05a88ed30a4aa1dd6aMouse activated link5db79b134e9f6b82c0b36e0489ee08edc96679ae159e4b6d0e994ba756091720
　 73a6ac4ed44ffec12cee46588e518a5e

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>