Div+Css基础知识点总结

2020-03-24 17:07:58

字体：大中小

来源：转载

供稿：网友

Div+Css的学习其实也很简单，我们这里就对其中的知识点进行下总结：1，Css样式的种类。第一：内联式样式表，第二：嵌入式样式表，第三：外部样式表，第四：输入样式表。什么是内联式样式表？ P /P ------这种方式现在已经比较少用了。什么是嵌入式样式表？ html head style type="text/css" !-- P{ font-size:16px; color:Red; background-color:Green; text-decoration:underline } //-- (注意：似乎这个是为了防止有些浏览器不支持Style而用此来代替的) /style /head body p 我是中国人 /P ........(主体内容) /body /html 什么是外部样式表? 意思就是：把样式写在一个外部的.Css文件中，然后通过在html页面上引用该文件。任何html页面都可以引用。引用方法如下： html head link rel="stylesheet" type="text/css" href="style/test.css" (注意： href="存放.css文件的地址") /head body p 我是中国人 /P /body /html 什么是输入样式表？将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标签。如： P 标签， a 标签， div 标签等 div{--这就是html选择器形式 color:Yellow; font-size:20px } 什么是class选择器？ .lei{--这就是class选择器形式 color:Yellow; font-size:20px } 在页面中可以这样调用： div 我是中国人 /div p .one{} --表示在P标签下的one选择器（只能针对 P 标签下）什么是id选择器？ #aaa{--这就是id选择器形式 color:Yellow; font-size:20px } 在页面中可以这样调用： div id="aaa" 我是中国人 /div 注意：在同一个页面，不能有相同的名称的id选择器。什么是关联选择器？类似一种嵌套的形式。如：p em{ --这就是关联选择器的形式,中间是用空格隔开的 color:Red; font-size：16px } 以上关联选择器强调了em标签必须嵌套在P标签里才能有效果。（强调嵌套顺序：必须后面的嵌套在前面的标签里面）页面中：--这样才有效果。 P em 我是中国人 /em /P 什么是组合选择器？ P,div,a,h1,.one,#two{ Font-size:16px; Color:Red } 这种用逗号隔开的叫组合选择器特点：就是以上所有标签都可以用这些样式，而不像关联选择器那样只能要按规定嵌套正确的才能使用这些样式什么是伪元素选择器(伪类)？ a:link{} a:hover{} a:visited{} 伪元素选择器和类一起使用： a.one:link{} a.two:hover{} a.three:visited{} 动态伪类：focus 指示当前拥有输入焦点的元素（ie7表单元素不支持此伪类）选择第一个元素 #header P：first-child 选择header中的第一个段落首字母选择 P：first-letter 选择段落的第一个字母 P：first-line 选择段落的第一行注意：这两个伪类只能作用于标记或段落之类的块级元素，而不能应用于超链接等行内元素：before和：after 这两个伪元素用于插入生成内容并设置其样式。字面意思：：before用于在元素内容的前面插入内容：after反之。它们需要配合content一起使用。用after来消除浮动是一个不错的选择。语法： a[href]：before{content：“link”} 注意：插入的内容是在该元素的内容的前面或后面，也就是说是在其内部插入。而不是在该元素前面或紧跟其后
html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：CSS知识小结

下一篇：CSS3弹性盒布局的图文实例