Page references in CSS (detailed explanation)

This chapter introduces CSS page references to you. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

css

In order to make the styles of web page elements richer, and to make the content and style of web pages detachable Separately, CSS was born from this idea. CSS is the acronym for Cascading Style Sheets, which means cascading style sheets. With CSS, most of the tags that express styles in HTML are no longer needed. HTML is only responsible for the structure and content of the document, and the presentation is completely left to CSS, making HTML documents more concise.

css basic syntax

The definition method of css is:

Selector {Attribute: value; Attribute: value; Attribute: value;}

Select The attribute is the name that associates the style with the page element, and the attribute is the style attribute you wish to set. Each attribute has one or more values. Code example:

p{ width:100px; height:100px; color:red }

css page introduction method:

1. External link: link to the external style sheet into the page through the link tag.

<link>

2. Embedded: Create an embedded style sheet on the web page through the style tag.

<style>
    p{ width:100px; height:100px; color:red }
        ......
</style>

3. Inline: Write the style directly on the label through the style attribute of the label.

        <p>......</p>

css text settings

Commonly used css styles for applied text:

• color settings The color of the text, such as: color:red;

• ##font-size Set the size of the text, such as: font-size:12px;

• font-family sets the font of the text, such as: font-family:'Microsoft Yahei';

• font-style sets whether the font is tilted, such as: font-style:'normal'; Set not to tilt, font-style:'italic'; Set text tilt

• font-weight Set whether the text is bold, such as: font-weight:bold; Set bold font-weight :normal Set not to bold

• font Set several attributes of the text at the same time. There are compatibility issues with the writing order. It is recommended to write in the following order: font: whether to bold the font size/line height font ;For example: font:normal 12px/36px 'Microsoft Yahei';

• line-height sets the line height of the text, such as: line-height:24px;

• text-decoration Set the underline of the text, such as: text-decoration:none; Remove the underline of the text

• text-indent Set the indent of the first line of text, such as: text-indent:24px; Set the indentation of the first line of text to 24px

• text-align Set the horizontal alignment of text, such as text-align:center Set the horizontal centering of text

css color representation

There are three main ways to represent css color values:

1. Color name representation, such as: red, gold

2. RGB representation, for example: rgb(255,0,0) represents red

            3、16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00

css选择器

常用的选择器有如下几种：

1、标签选择器

        标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。
举例：

*{margin:0;padding:0}
p{color:red}   

<p>....</p>   <!-- 对应以上两条样式 -->
<p>....</p>   <!-- 对应以上两条样式 -->

2、id选择器

        通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。

举例：

#box{color:red} 

<p>....</p>   <!-- 对应以上一条样式，其它元素不允许应用此样式 -->

3、类选择器

        通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。

举例：

.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px} 

<p>....</p>
<h1>....</h1>
<p>....</p>

4、层级选择器

        主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。

举例：

.box span{color:red}
.box .red{color:pink}
.red{color:red}

<p>
    <span>....</span>
    <a>....</a>
</p>

<h3>....</h3>

5、组选择器

        多个选择器，如果有同样的样式设置，可以使用组选择器。

举例：

.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}

<p>....</p>
<p>....</p>
<p>....</p>

6、伪类及伪元素选择器

        常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。

.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}


<p>....</p>
<p>....</p>
<p>....</p>

css元素溢出

当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。

Overflow setting items:
1. visible default value. The content will not be trimmed and will be rendered outside the element box.
2. The hidden content will be trimmed, and the remaining content will be invisible. This attribute also has the function of clearing floats and clearing margin-top collapse.
3. The scroll content will be trimmed, but the browser will display scroll bars to view the remaining content.
4. auto If the content is trimmed, the browser will display scroll bars to view the remaining content.
5. inherit stipulates that the value of the overflow attribute should be inherited from the parent element.

Block element, inline element, inline block element

Element is a label. There are three commonly used labels in layout, block element, inline element and inline block element. Understand these three Only by using the characteristics of these elements can you layout the page proficiently.

Block element
Block element can also be called row element. Commonly used tags in layout are: p, p, ul, li, h1~h6, dl, dt, dd and so on are all block elements. Its behavior in layout:

• Supports all styles

• If the width is not set, the default The width is 100% of the parent width

• The box occupies one line, even if the width is set

Inline elements
Inline elements can also be called inline elements. Tags commonly used in layout such as a, span, em, b, strong, i, etc. are all inline elements. Their behavior in layout is:

• Supports some styles (width, height, margin top and bottom, padding top and bottom are not supported)

• ##The width and height are determined by the content

• Boxes are combined in one line

• The code breaks, and there will be a gap between the boxes

• Child elements are inline elements, and parent elements can be used The text-align attribute sets the horizontal alignment of child elements, and the line-height attribute value sets the vertical alignment

Methods to solve gaps in inline elements                                                  , Remove the line breaks between inline elements
2. Set the font-size of the parent of the inline element to 0, and then set the font-size of the inline element itself

Inline block element , also known as the inner block element, is a new type of element. The existing elements are not attributed to this type. The behavior of the IMG and INPUT elements is similar Inline elements, we can use the display attribute to convert block elements or inline elements into such elements. Their behavior in layout:

• Support all styles

• If the width and height are not set, the width and height are determined by the content

• Boxes are placed on one line

• Code breaks, the box will produce spacing

• Child elements are inline block elements , the parent element can use the text-align attribute to set the horizontal alignment of the child element, and the line-height attribute value to set the vertical alignment of the child element

These three elements can be set through the display attribute Mutual conversion, but in actual development, block elements are used more often, so we often convert inline elements into block elements, and a small amount into inline blocks. When using inline elements, use inline elements directly instead of Block elements are transformed.

display属性
      display属性是用来设置元素的类型及隐藏的，常用的属性有：
        1、none 元素隐藏且不占位置
        2、block 元素以块元素显示
        3、inline 元素以内联元素显示
        4、inline-block 元素以内联块元素显示

浮动

文档流 
        文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。

浮动特性

        1、浮动元素有左浮动(float:left)和右浮动(float:right)两种

        2、浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来

        3、相邻浮动的块元素可以并在一行，超出父级宽度就换行

        4、浮动让行内元素或块元素自动转化为行内块元素

        5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果

        6、父元素内整体浮动的元素无法撑开父元素，需要清除浮动

        7、浮动元素之间没有垂直margin的合并

清除浮动

• 父级上增加属性overflow：hidden

• 在最后一个子元素的后面加一个空的p，给它样式属性 clear:both（不推荐）

• 使用成熟的清浮动样式类，clearfix

  .clearfix:after,.clearfix:before{ content: "";display: table;}
  .clearfix:after{ clear:both;}
  .clearfix{zoom:1;}

  清除浮动的使用方法：

  .con2{... overflow:hidden}
  或者
  <p></p>

定位

关于定位 
       我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：

• relative 生成相对定位元素，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移

• absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。

• fixed generates a fixed positioning element. The element is separated from the document flow and does not occupy the position of the document flow. It can be understood as floating above the document flow and positioned relative to the browser window.

• static Default value, no positioning, the element appears in the normal document flow, which is equivalent to canceling the positioning attribute or not setting the positioning attribute

• inherit inherits the value of the position attribute from the parent element

## Positioned element properties Absolutely positioned and fixed-positioned block elements and inline elements will automatically be converted into inline blocks Element

Positioning element level Positioning element is floating above the normal document flow. You can use the z-index attribute to set the element level

Typical positioning layout 1. Menu fixed at the top
2. Horizontally and vertically centered pop-up box
3. Fixed side toolbar
4. Fixed at the bottom Button

background attribute

Attribute explanation The background attribute is a frequently used and important attribute in CSS. It is responsible for setting the background image for the box. As with background color, background is a composite attribute, which can be broken down into the following setting items:

• background-color Set the background color

• background-image Set the address of the background image

• background-repeat Set how the background image is repeatedly tiled

• background-position Set the position of the background image

• background-attachment Set whether the background image is fixed or scrolls with the page scroll bar

In actual application, we can use the background attribute to set the above Put all the setting items together, and it is also recommended to do this, which has higher performance and better compatibility, such as: "background: #00FF00 url(bgimage.gif) no-repeat left center fixed", here "#00ff00" is to set background-color; "url(bgimage.gif)" is to set background-image; "no-repeat" is to set background-repeat; "left center" is to set background-position; "fixed" is to set Background-attachment, each setting item is separated by spaces. It is okay to leave some setting items unwritten, and it will use the default value.

Example:

The following examples use the following picture as the background image:

1. "background:url(bg.jpg)", a picture address is set by default, and the picture will fill the box starting from the upper left corner of the box.

#2. "background:cyan url(bg.jpg) repeat-x", tile the box horizontally, and the other parts of the box will display the background color "cyan".

3、“background:cyan url(bg.jpg) repeat-y”，纵向平铺盒子，盒子其他部分显示背景颜色“cyan”。

4、“background:cyan url(bg.jpg) no-repeat”，背景不重复，背景和盒子左上角对齐，盒子其他部分显示背景颜色“cyan”

5、“background:cyan url(bg.jpg) no-repeat left center”，背景不重复，背景和盒子左中对齐，盒子其他部分显示背景颜色“cyan”。

6、“background:cyan url(bg.jpg) no-repeat right center”，背景不重复，背景和盒子右中对齐，也就是背景图片的右边对齐盒子的右边，盒子其他部分显示背景颜色“cyan”。

相关代码：

nbsp;html>


    <meta>
    <title>test background</title>
    <style>
        .backshow{
            width:320px;
            height:160px;
            border:3px solid #333;
            float:left;
            margin:10px;            
        }
        .bg1{background:cyan url(bg.jpg);}
        .bg2{background:cyan url(bg.jpg) repeat-x;}
        .bg3{background:cyan url(bg.jpg) repeat-y;}
        .bg4{background:cyan url(bg.jpg) no-repeat;}
        .bg5{background:cyan url(bg.jpg) no-repeat left center;}
        .bg6{background:cyan url(bg.jpg) no-repeat right center;}
    </style>


    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>

例子说明：
        代码中使用到的背景图片，可以直接在页面上的背景图片上点右键另存下来，命名为：“bg.jpg”，并且和网页文件存在同一个目录下。

        关于背景图片的background-position的设置，设置背景图片水平位置的有“left”、“center”、“right”，设置背景图片垂直位置的有“top”、“center”、“bottom”，水平和垂直的属性值两两组合，就可以把背景图设置到对齐盒子的四个角或者四个边的中心或者盒子的正中心位置。还可以设置具体的像素值来把背景图片精确地定位到盒子的某个位置，特别是对于背景图片尺寸大于盒子尺寸的这种情况，我们可以用数值定位，截取大图片的某一块做为盒子的背景。

 比如说，我们想把下边的盒子用右边的图片作为背景，并且让背景显示图片中靠近底部的那朵花：

用上面中间那张图片作为左边那个比它尺寸小的盒子的背景，如果不设置background-position，默认背景图的左上角会和盒子的左上角对齐，如果设置，可以用两个数值定位背景图，上面右边的实现效果设置为：“background:url(location_bg.jpg) -110px -150px”，第一个数值表示背景图相对于自己的左上角向左偏移110px，负值向左，正值向右，第二个数值表示背景图相对于自己的左上角向上偏移150px，负值向上，正值向下。

实现原理示意图：

对应代码：

nbsp;html>


    <meta>
    <title>test background</title>
    <style>
        .backshow{
            width:320px;
            height:160px;
            border:3px solid #333;
            float:left;
            margin:10px;            
        }        
        .bg{width:94px;
            height:94px;
            border:3px solid #666;
            background:url(location_bg.jpg) -110px -150px;
        }
    </style>


    <p></p>

The above is the detailed content of Page references in CSS (detailed explanation). For more information, please follow other related articles on the PHP Chinese website!