Div Css(1)_html/css_WEB-ITnose

　　前天，在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文件

　　　　P{

　　　　　　　　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

Statement of this Website

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