Div Css(1)_html/css_WEB-ITnose-HTML Tutorial-php.cn

Div Css(1)_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:33:21

Original

1072 people have browsed it

　　前天，在CSDN上看到一篇文章《有理想的程序员必须知道的15件事》原文链接：http://sd.csdn.net/a/20110421/296282.html

　　看了这篇文章，其中两点印象挺深刻的。

　　1，多看的同时多练

　　2，通过学习把理解到的东西通过写博的方式分享出来。（希望大家指出不足之处）

　　故以后只要有时间我都会通过写博的方式把学到的点滴分享出来。

　　今天，作为菜鸟的我看了一个讲Div+Css的视频教程。

　　主要学到了：

　　　　1，Css样式的种类。第一：内联式样式表，第二：嵌入式样式表，第三：外部样式表，第四：输入样式表。

　　　　什么是内联式样式表？

------这种方式现在已经比较少用了。

　　　　什么是嵌入式样式表？

我是中国人

　　　　　　........(主体内容)

　　　　什么是外部样式表?

　　　　意思就是：把样式写在一个外部的.Css文件中，然后通过在html页面上引用该文件。任何html页面都可以引用。

　　　　引用方法如下：

　　　　 (注意： href="存放.css文件的地址")

我是中国人

　　　　什么是输入样式表？

　　　　将Css文件输入到另一个Css文件中。

　　　　假如你有一个test1.Css文件

　　　　　　　　font-size:16px;

　　　　　　　　color:Red;

　　　　　　　　background-color:Green;

　　　　　　　　text-decoration:underline

　　　　　　}

　　　　还有一个test2.css文件

　　　　div{

　　　　　　color:Yellow;

　　　　　　　font-size:20px

　　　　　　}

　　　　此时只要在test1.css文件里输入

　　　　@import url（test2.css文件的地址） ----此时在页面中只要引用test1.css文件。就相当于引用了在这之前的test1.css和test2.css两个文件

　　　　2，学到第二点：样式规则的选择器，第一：html selector;第二：class selector；第三：id selector ；第四：关联选择器；第五：组合选择器；第六：伪元素选择器

　　　　什么是html选择器？

　　　　就是直接在前边写html标签。如：

标签，标签，

标签等

　　　　　　　div{--这就是html选择器形式

　　　　　　　　color:Yellow;

　　　　　　　　font-size:20px

　　　　　　　　}

　　　　什么是class选择器？

　　　　　　.lei{--这就是class选择器形式

　　　　　　　　color:Yellow;

　　　　　　　　font-size:20px

　　　　　　　　}

　　　　在页面中可以这样调用：

我是中国人

p.one{} -- represents the one selector under the P tag (can only be used under the

tag)

What is the id selector?

　 #aaa{--This is the id selector form

　　　color: Yellow; > It can be called like this in the page:

I am Chinese

Note: On the same page, there cannot be id selectors with the same name.

Similar to a nested form.

For example: p em{ -- This is the form of the associated selector, separated by spaces

Color: Red;

Font-size: 16px

　　　}

　　The above association selector emphasizes that the em tag must be nested in the P tag to be effective. (Emphasis on the nesting order: the later tags must be nested within the previous tags)

　　On the page: --This will be effective.

device?

P,div,a,h1,.one,#two{

Font-size:16px;

Color:Red

　　　　　　　}

This type of comma-separated selector is called a combination selector

Feature: all the above tags can use these styles, unlike the associated selector, which can only nest the correct capabilities according to regulations Use these styles

　What is a pseudo-element selector (pseudo-class)?

a:link{}

a:hover{}

a:visited{}

Use pseudo-element selectors with classes:

a.one:link{}

a.two:hover{}

a.three:visited{}

Dynamic pseudo-class

　　：focus indicates the element that currently has input focus (ie7 form elements do not support this pseudo-class)

　　 Select the first element

　 #header P：first-child Select the first element in the header A paragraph

　　　　　　　　　　　　　　　　　　　 P：first-letter 　　　　　　　　　　　　　　　　 P：first-letter 　　　　　　　　　　　　　　　　　 P：first-letter 　　　　　　　　　　　　　　 P：first-line 　　　　　　　　　　　　　　　　　　over in the first letter of the paragraph

Note: These two pseudo-classes can only be applied to block-level elements such as tags or paragraphs, and cannot be applied to inline elements such as hyperlinks

: before and after

These two pseudo-elements are used to insert and style generated content.

Literal meaning: :before is used to insert content in front of the element content

They need to be used together with content. Using after to eliminate floats is a good choice.

Syntax: a[href]: before{content: "link"}

Note: The inserted content is before or after the content of the element, that is, inside it insert. Rather than preceding or immediately following the element