CSS Summary (Part 2)_html/css_WEB-ITnose

CSS formatting

　☆ Font, we can use css styles to set font, font size, color and other style attributes for the text in the web page. Let's take a look at an example. The following code implements: setting the font for the text in the web page to Song Dynasty.
body{font-family:"宋体";}
Be careful not to set uncommon fonts here, because if the font you set is not installed on the user's local computer, the browser's default font will be displayed. (Because whether the user can see the font style you set depends on whether the font you set is installed on the user's local computer.)

　☆Font size and color, you can use the following code to set the font size of the text on the web page to 12 pixels , and set the font color to #666 (gray):
body{font-size:12px;color:#666}

　☆Bold, we can also use css styles to change the style of the text : Bold, italic, underline, strikethrough, you can use the following code to set the text to be displayed in bold style.
p span{font-weight:bold;}
Here you can see that if you want to set boldness for text, there is a separate css style to achieve it. You no longer need to use h1 to achieve boldness. -h6 or strong tag.

　☆Italic, the following code can realize the text to be displayed in italic style in the browser:
p a{font-style:italic;}

　☆Underline, in some cases you want to The text is set to underline style, which can visually emphasize the text. You can use the following code to achieve this:
p a{text-decoration:underline;}

　☆ Strikethrough, if you want to set it on the web page What to do with strikethrough? This style is often seen on e-commerce websites
. The strikethrough on the original price can be achieved using the following code:
.oldPrice{text-decoration:line-through;}

☆Indentation, in Chinese text, it is customary to leave two spaces before a paragraph. This special style can be achieved with the following code:
p{text-indent:2em;}

　☆line Spacing (line height) plays an important role in paragraph layout. The following code sets the paragraph line spacing to 1.5 times.
p{line-height:1.5em;}

　☆Character spacing, letter spacing, if you want to set text spacing or letter spacing in web page layout, you can use letter-spacing to achieve this, as shown in the following code :
h1{
letter-spacing:50px;
}
...

The Great Gatsby

Note: When this style is used in English words, it sets the spacing between letters.
☆Word spacing setting, what if I want to set the spacing between English words? This can be achieved using word-spacing. The following code:
h1{
word-spacing:50px;
}
...

welcome to YanHeng!

　☆ Alignment, do you want to set a centering style for text and images in block elements? You can use text-align style code. The following code can achieve centered display of text.

h1{
text-align:center;
}

The Great Gatsby

Can also be set to the left:
h1 {
text-align:left;
}

The Great Gatsby

You can also set it to the right:
h1{
text- align:right;
}

The Great Gatsby

CSS box model

　☆Element classification, Before explaining CSS layout, we need to know some knowledge in advance. In CSS, label elements in html are generally divided into three different types: block elements, inline elements (also called inline elements) and inline block element.
Commonly used block elements include:

,

,

...

,

,
,

, ,

,

,


Commonly used inline elements are:
, ,
, , , , , , ,
Commonly used inline block elements are:
,

1. Block elements

Block-level elements:

,

,

, ,

,
• are block-level elements. Setting display:block is to display the element as a block-level element, so that the element has the characteristics of a block element.
  For example: a{display:block;}
  Characteristics of block-level elements:
  1. Each block-level element starts on a new line, and subsequent elements also start on a new line.
  2. The height, width, line height, top and bottom margins of the element can be set.
  3. If the width of an element is not set, it is 100% of its parent container (the same as the width of the parent element), unless a width is set.

  2. Inline elements

  　　在html中，、、、、 、  和就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从页使用div元素具有内联元素特点。

  如：div{display:inline;}
  内联元素特点：
  1、和其他元素都在一行上；
  2、元素的高度、宽度、行高及顶部和底部边距不可设置；
  3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

  三、内联块元素

  　　内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，、标签就是这种内联块状标签。

  如：a{display:inline-block;}
  内联块元素特点：
  1、和其他元素都在一行上；
  2、元素的高度、宽度、行高以及顶和底边距都可设置。

  　　☆盒子模型的三大元素：边框、填充、边界

  一、边框（border）

  　　盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
  如下面代码为div来设置边框粗细为2px、样式为实心的、颜色为红色的边框：
  div{
  border:2px solid red;
  }
  　　上面是border代码的缩写形式，可以分开写：
  div{
  border-width:2px;
  border-style:solid;
  border-color:red;
  }
  注意：
  1、border-style（边框样式）常见样式有：
  dashed（虚线）| dotted（点线）| solid（实线）。
  2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
  border-color:#888;//前面的井号不要忘掉。
  3、border-width（边框宽度）中的宽度也可以设置为：
  thin | medium | thick（但不是很常用），最常还是用象素（px）。

  　　现在有一个问题，如果有想为p标签单独设置下边框，而其它三边都不设置边框样式怎么办呢？css样式中允许只为一个方向的边框设置样式：
  div{border-bottom:1px solid red;}
  同样可以使用下面代码实现其它三边上、右、左边框的设置：
  border-top:1px solid red;
  border-right:1px solid red; 
  border-left:1px solid red;

  二、宽度，高度介绍

  　　盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。
  因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。（如下图）

   

  　　元素的高度也是同理。

  比如：
  css代码：
  div{
  width:200px;
  padding:20px;
  border:1px solid red;
  margin:10px; 
  }
  html代码：
  
  

  文本内容
  
  
  The actual length of the element is: 10px 1px 20px 200px 20px 1px 10px=262px. You can view the element box model under the Chrome browser, as shown below:

  3. Padding

  The distance between the element content and the border can be set. Call it "filling." Filling can also be divided into upper, right, lower and left (clockwise). The following code:
  div{padding:20px 10px 15px 30px;}
  Don’t mix up the order. You can write the above code separately:
  div{
  padding-top:20px;
  padding-right:10px;
  padding-bottom:15px;
  padding-left:30px;
  }
  If the top, right, bottom and left padding are all 10px; you can write like this
  div{padding:10px;}
  If the top and bottom padding are the same 10px and the left and right padding are 20px, you can write like this:
  div{padding:10px 20px;}

  4. Margin

  The distance between an element and other elements can be set using margin. The boundaries can also be divided into upper, right, lower and left. The following code:
  div{margin:20px 10px 15px 30px;}
  can also be written separately:
  div{
  margin-top:20px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:30px;
  }
  If the top, right, bottom and left borders are all 10px; you can write like this:
  div{ margin:10px;}
  If the upper and lower borders are the same 10px, and the left and right borders are the same 20px, you can write like this:
  div{ margin:10px 20px;}
  To summarize: the difference between padding and margin, padding is inside the border, and margin is outside the border.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to change the default upload file button style using pure HTML and CSS_html/css_WEB-ITnoseNext article：How to change the default upload file button style using pure HTML and CSS_html/css_WEB-ITnose

Related articles

See more

• Summary of Html knowledge
• How to learn HTML quickly
• The difference between html xhtml xml
• The difference between src and href attributes
• About HTML5 and CSS replacement use



Public welfare online PHP training，Help PHP learners grow quickly！

About usDisclaimerSitemap

© php.cn All rights reserved