首页 > 代码库 > HTML第八天笔记
HTML第八天笔记
第一个知识点是关于伪类的，代码如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5 <title>CSS伪类</title> 6 <meta name="keywords" content="关键字列表" /> 7 <meta name="description" content="网页描述" /> 8 <link rel="stylesheet" type="text/css" href="" /> 9 <style type="text/css"> 10 a:link{color:red;} /*未被访问*/ 11 a:visited{color:#ccffff;} /*已访问*/ 12 a:hover{color:#ff33ff;} /*鼠标滑过*/ 13 a:active{color:#ffff00;} /*已选中*/ 14 p:first-child{color:#33ffff;} /*第一子元素将会修改颜色*/ 15 p > i:first-child{font-weight:bold;} /*所有p元素中的第一个i元素将加粗*/ 16 p:first-child u{color:#00ff33;} /*第一个p元素中的所有的u元素将修改颜色*/ 17 q:lang(no) 18 { 19 quotes: "~" "~" /*在引用的开头和结尾添加字符*/ 20 } 21 </style> 22 <script type="text/javascript"></script> 23 </head> 24 <body> 25 <a href = "#">这是一个链接</a></br> 26 <div> 27 <p>P的<u>第一个</u>元<u>素</u></p> 28 <p>P的<u>第二个</u>元素</p> 29 <p>p的<i>第三个</i><i>元素</i></p> 30 <p>p的<i>第四个</i><i>元素</i></p> 31 <p>文字<q lang="no">段落中的引用的文字</q>文字</p> 32 </div> 33 </body> 34 </html>
效果如图：
以下是关于伪类的一些笔记：
伪类一开始单单只是用来表示一些元素的动态状态，典型的就是链接的各个状态(LVHA)。随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类
链接的四种状态
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
first - child伪类
来选择元素的第一个子元素
:first-child选择的是某个标签内的第一个元素
:first-child只有当元素是其父元素(即一定要被包含)的第一个子元素时才能匹配，即该元素前面没有兄弟标签。
========================================================================
第二个知识点是关于伪元素
1 <html> 2 <head> 3 <title>伪元素</title> 4 <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> 5 <script type = "text/javascript"></script> 6 <style type = "text/css"> 7 p:first-letter{ /*制作首字母特效*/ 8 color:#ff0000; 9 font-size:xx-lager; 10 } 11 p.line:first-line{ /*制作首行样式特效*/ 12 color:#33ffff; 13 } 14 p:before{ 15 16 } 17 </style> 18 </head> 19 <body> 20 <p>You can use the :first-letter pseudo-element to add a special effect to the first letter of a text</p> 21 <p class = "line">This is a whole line<br/>This is a whole line</p> 22 </body> 23 </html>
效果如图：
关于伪元素的一些笔记：
CSS 伪元素用于将特殊的效果添加到某些选择器。
first-letter 伪元素用于向某个选择器中的文本的首字母添加特殊的样式：
first-line 伪元素用于向某个选择器中的文字的首行添加特殊样式：
before 伪元素可用于在某个元素之前插入某些内容。
after 伪类可用于在某个元素之后插入某些内容。
====================================================
第三个知识点是关于浮动属性：
1 <html> 2 <head> 3 <title>CSS float属性</title> 4 <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> 5 <style type = "text/css"> 6 img{ 7 float:right; /*图片居右*/ 8 border:1px dotted red; /*设置边框*/ 9 margin:0px 0px 15px 20px; /*外填充设置*/ 10 } 11 </style> 12 </head> 13 14 <body> 15 <p> 16 This is some text. This is some text. This is some text. 17 This is some text. This is some text. This is some text. 18 This is some text. This is some text. This is some text. 19 </p> 20 <p> 21 <img src="Images/jd1.png" /> 22 This is some text. This is some text. This is some text. 23 This is some text. This is some text. This is some text. 24 This is some text. This is some text. This is some text. 25 This is some text. This is some text. This is some text. 26 This is some text. This is some text. This is some text. 27 This is some text. This is some text. This is some text. 28 This is some text. This is some text. This is some text. 29 This is some text. This is some text. This is some text. 30 This is some text. This is some text. This is some text. 31 This is some text. This is some text. This is some text. 32 </p> 33 </body> 34 </html>
效果如图：
关于该属性的一些属性：
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
HTML第八天笔记