Div+Css(1)_html/css_WEB-ITnose
看了这篇文章,其中两点印象挺深刻的。
1,多看的同时多练
2,通过学习把理解到的东西通过写博的方式分享出来。(希望大家指出不足之处)
故以后只要有时间我都会通过写博的方式把学到的点滴分享出来。
今天,作为菜鸟的我看了一个讲Div+Css的视频教程。
主要学到了:
1,Css样式的种类。第一:内联式样式表,第二:嵌入式样式表,第三:外部样式表,第四:输入样式表。
什么是内联式样式表?
------这种方式现在已经比较少用了。
什么是嵌入式样式表?
(注意:似乎这个是为了防止有些浏览器不支持Style而用此来代替的)
我是中国人
........(主体内容)
什么是外部样式表?
意思就是:把样式写在一个外部的.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{} --表示在P标签下的one选择器(只能针对 标签下) 什么是id选择器? #aaa{--这就是id选择器形式 color:Yellow; font-size:20px } 在页面中可以这样调用 : 注意:在同一个页面,不能有相同的名称的id选择器。 什么是关联选择器? 类似一种嵌套的形式。 如:p em{ --这就是关联选择器的形式,中间是用空格隔开的 color:Red; font-size:16px } 以上关联选择器强调了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”} 注意:插入的内容是在该元素的内容的前面或后面,也就是说是在其内部插入。而不是在该元素前面或紧跟其后 声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。 相关文章 相关视频
推荐阅读
-
ASP.NET服务器控件开发(1)封装html
-
HTML5 Canvas 起步(1) - 基本概念
-
HTML5边玩边学(1)画布实现方法
-
HTML5的结构和语义(1):前言
-
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
-
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
-
html5 canvas-1.canvas介绍(hello canvas)
-
html5指南-1.html5全局属性(html5 global attributes)深入理解
-
html5 Canvas画图教程(1)—画图的基本常识
-
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述