Introduction to WEB design and DIV CSS (1)_html/css_WEB-ITnose

CSS专用书写工具：

TopStyle Pro v3.11   

官方网站地址：http://www.bradsoft.com/

功能专注于CSS设计的辅助工具，功能相当多，附有CSS码检查功能，减少写错的机会。尤其是它的HELP文件中详细的CSS指令介绍，很适于用作参考文件与初次接触CSS的人做为学习使用。最有用的功能为CSS排错检查，可以对各个版本的CSS文件进行标准化排查并对其进行书写格式化！

[PS:最新的TopStyle版本为V3.12英文版，可升级] 

CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。

1.基本语法规范

分析一个典型CSS的语句：

p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
 

其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； 样式声明写在一对大括号"{}"中； COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； "#FF0000"和"#FFFFFF"是属性的值(value)。 2.颜色值

颜色值可以用RGB值写，例如：color : rgb(255,0,0)，也可以用十六进制写，就象上面例子color:#FF0000。如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。

3.定义字体

web标准推荐如下字体定义方法：

body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
 

字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； Lucida Grande字体适合Mac OS X； Verdana字体适合所有的Windows系统； Lucida适合UNIX用户 "宋体"适合中文简体用户; 如果所列出的字体都不能用，则默认的sans-serif字体能保证调用; 4.群选择器

当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，： p, td, li { font-size : 12px ; }
 

5.派生选择器

可以使用派生选择器给一个元素里的子元素定义样式，例如这样：

li strong { font-style : italic; font-weight : normal；}

就是给li下面的子元素strong定义一个斜体不加粗的样式。

6.id选择器

用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层

Then define it like this in the style sheet:

where "menubar" is the id name you defined yourself. Note the "#" sign in front.

The id selector also supports derivation, for example:

#menubar p { text-align : right; margin-top : 10px; }

This method Mainly used to define layers and elements that are more complex and have multiple derived elements.

7. Category selector

Use a dot in CSS to indicate the category selector definition, for example:

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

In the page, use the class="category name" method to call:

14px size font

This method is relatively simple and flexible, and can be created and deleted at any time according to page needs.

8. Define the style of the link

Four pseudo-classes are used in CSS to define the style of the link, namely: 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 respectively define the styles of "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".

Haha, I feel a little dizzy after reading so much. In fact, there are many more grammatical specifications for CSS. Here are just some commonly used ones. After all, we are taking it step by step, and we cannot become fat in one bite:)

Introduction to CSS Layout

The biggest difference between CSS layout and traditional table layout is that: the original positioning is Tables are used to control the spacing of text layout sections through the spacing of the tables or colorless and transparent GIF images; now, layers (divs) are used for positioning, and the spacing between sections is controlled through the margin, padding, border and other attributes of the layer.

1. Define DIV

Analyze a typical definition div example:

#sample{ MARGIN: 10px 10px 10px 10px;
PADDING:20px 10px 10px 20px;
BORDER-TOP : #CCC 2px solid;
BORDER-RIGHT: #CCC 2px solid;
BORDER-BOTTOM: #CCC 2px solid;
BORDER-LEFT: #CCC 2px solid;
BACKGROUND: url(images /bg_poem.jpg) #FEFEFE no-repeat right bottom;
COLOR: #666;
TEXT-ALIGN: center;
LINE-HEIGHT: 150%; WIDTH:60%; }

The description is as follows:

The name of the layer is sample. You can call this style by using

on the page. MARGIN refers to the blank space left outside the border of the layer, used for page margins or to create a gap with other layers. "10px 10px 10px 10px" respectively represents the four margins of "top, right, bottom and left" (clockwise). If they are all the same, they can be abbreviated to "MARGIN: 10px;". If the margin is zero, write "MARGIN: 0px;". Note: When the value is zero, except for the RGB color value 0% which must be followed by a percent sign, in other cases the unit "px" does not need to be followed. MARGIN is a transparent element and cannot define a color. PADDING refers to the space between the layer's border and the layer's content. Like margin, specify the distance from the top, right, bottom and left borders to the content respectively. If they are all the same, they can be abbreviated to "PADDING:0px". To specify the left side individually, you can write "PADDING-LEFT: 0px;". PADDING is a transparent element and cannot define color. BORDER refers to the border of the layer. "BORDER-RIGHT: #CCC 2px solid;" defines the right border color of the layer as "#CCC", the width as "2px", and the style as "solid" straight line. If you want a dotted line style, you can use "dotted". BACKGROUND defines the background of the layer. It is defined in two levels. First define the image background and use "url(../images/bg_logo.gif)" to specify the background image path; secondly define the background color "#FEFEFE". "no-repeat" means that the background image does not need to be repeated. If you need to repeat it horizontally, use "repeat-x", to repeat it vertically, use "repeat-y", and to repeat it to cover the entire background, use "repeat". The following "right bottom;" means that the background image starts from the lower right corner. If there is no background image, you can only define the background color BACKGROUND: #FEFEFE COLOR is used to define the font color, which has been introduced in the previous section. TEXT-ALIGN is used to define the arrangement of content in the layer, center is in the middle, left is in the left, and right is in the right. LINE-HEIGHT defines the line height. 150% means that the height is 150% of the standard height. It can also be written as: LINE-HEIGHT:1.5 or LINE-HEIGHT:1.5em, which have the same meaning. WIDTH is the width of the defined layer, which can be a fixed value, such as 500px, or a percentage, like "60%" here. It should be noted that this width only refers to the width of your content, and does not include margin, border and padding. However, it is not defined this way in some browsers, so you need to try more.

The following is the actual performance of this layer:

Demo content here, demo content here, demo content here, demo content here, demo content here, demo content here, demo content here, demo content here,

Here is the demo content, here is the demo content,

Here is the demo content, here is the demo content,

Here is the demo content...

We can see that the border is 2px gray, the background image is not repeated in the lower right, the distance between the content and the left border is 20px, the content is centered, everything is as expected. Hoho, although it doesn’t look good, it is the most basic. If you master it, you will have learned half of the CSS layout technology. That’s it, it’s not difficult at all! (What is the other half? The other half is the positioning between layers. I will explain it step by step later.)

2. CSS2 box model

Since the launch of CSS1 in 1996, the W3C organization has recommended that all web pages The objects on are placed in a box, and designers can control the properties of this box by creating definitions. These objects include paragraphs, lists, titles, pictures, and layers

. The box model mainly defines four areas: content, padding, border and margin. The sample layer we talked about above is a typical box. For beginners, they are often confused about the levels, relationships, and mutual influences among margin, background-color, background-image, padding, content, and border. Here is a 3D schematic diagram of the box model, I hope it will be easier for you to understand and remember.

3. All auxiliary images should use background processing

Use XHTML CSS layout, there is a technology that you are not used to at first, it should be said that One way of thinking is different from the traditional table layout, that is: all auxiliary pictures are implemented with backgrounds. Something like this:

BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;

Although it is possible to use to be inserted directly into the content, this is not recommended. The "auxiliary pictures" here refer to pictures that are not part of the content to be expressed on the page, but are only used for decoration, interval, and reminder. For example: pictures in photo albums, pictures in picture news, and the 3D box model pictures above are all part of the content. They can be directly inserted into the page using the element, while others are similar to logos, title pictures, and list prefixes. Images must be displayed using background or other CSS methods.

There are two reasons for this:

Completely separate presentation from structure (refer to reading another article: "Understanding the Separation of Presentation from Structure"), and use CSS to control all appearances. Easy to revise. Make the page more usable and friendly. For example, if a blind person uses a screen reader, pictures implemented using background technology will not be read aloud.