HTML第八天笔记

第一个知识点是关于伪类的，代码如下：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">

 <head>

     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

     <title>CSS伪类</title>

     <meta name="keywords" content="关键字列表" />

     <meta name="description" content="网页描述" />

     <link rel="stylesheet" type="text/css" href="" />

     <style type="text/css">

         a:link{color:red;}            /*未被访问*/

         a:visited{color:#ccffff;}    /*已访问*/

         a:hover{color:#ff33ff;}        /*鼠标滑过*/

         a:active{color:#ffff00;}    /*已选中*/

         p:first-child{color:#33ffff;}            /*第一子元素将会修改颜色*/

         p > i:first-child{font-weight:bold;}    /*所有p元素中的第一个i元素将加粗*/

         p:first-child u{color:#00ff33;}            /*第一个p元素中的所有的u元素将修改颜色*/

         q:lang(no)

         {

             quotes: "~" "~"                        /*在引用的开头和结尾添加字符*/

         }

     </style>

     <script type="text/javascript"></script>

 </head>

 <body>

     <a href = "#">这是一个链接</a></br>

     <div>

         <p>P的<u>第一个</u>元<u>素</u></p>

         <p>P的<u>第二个</u>元素</p>

         <p>p的<i>第三个</i><i>元素</i></p>

         <p>p的<i>第四个</i><i>元素</i></p>

         <p>文字<q lang="no">段落中的引用的文字</q>文字</p>

     </div>

 </body>

 </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只有当元素是其父元素(即一定要被包含)的第一个子元素时才能匹配，即该元素前面没有兄弟标签。

========================================================================

第二个知识点是关于伪元素

 <html>

 <head>

     <title>伪元素</title>

     <meta http-equiv = "content-type" content = "text/html; charset = utf-8">

     <script type = "text/javascript"></script>

     <style type = "text/css">

         p:first-letter{            /*制作首字母特效*/

             color:#ff0000;

             font-size:xx-lager;

         }

         p.line:first-line{        /*制作首行样式特效*/

             color:#33ffff;

         }

         p:before{

         }

     </style>

 </head>

 <body>

     <p>You can use the :first-letter pseudo-element to add a special effect to the first letter of a text</p>

     <p class = "line">This is a whole line<br/>This is a whole line</p>

 </body>

 </html>

效果如图：

关于伪元素的一些笔记：

CSS 伪元素用于将特殊的效果添加到某些选择器。

first-letter 伪元素用于向某个选择器中的文本的首字母添加特殊的样式：

first-line 伪元素用于向某个选择器中的文字的首行添加特殊样式：

before 伪元素可用于在某个元素之前插入某些内容。

after 伪类可用于在某个元素之后插入某些内容。

====================================================

第三个知识点是关于浮动属性：

 <html>

     <head>

         <title>CSS float属性</title>

         <meta http-equiv = "content-type" content = "text/html; charset = utf-8">

         <style type = "text/css">

             img{

                 float:right;                /*图片居右*/

                 border:1px dotted red;        /*设置边框*/

                 margin:0px 0px 15px 20px;    /*外填充设置*/

             }

         </style>

     </head>

     <body>

         <p>

             This is some text. This is some text. This is some text.

             This is some text. This is some text. This is some text.

             This is some text. This is some text. This is some text.

         </p>

         <p>

             <img src="Images/jd1.png" />

             This is some text. This is some text. This is some text.

             This is some text. This is some text. This is some text.

             This is some text. This is some text. This is some text.

             This is some text. This is some text. This is some text.

             This is some text. This is some text. This is some text.

             This is some text. This is some text. This is some text.

             This is some text. This is some text. This is some text.

             This is some text. This is some text. This is some text.

             This is some text. This is some text. This is some text.

             This is some text. This is some text. This is some text.

         </p>

     </body>

 </html>

效果如图：

关于该属性的一些属性：

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

HTML第八天笔记的更多相关文章

iOS 阶段学习第八天笔记（指针）
iOS学习(C语言)知识点整理一.指针 1)概念:存储变量的地址的一个变量. 2) 数据存储类型分析 1.text (代码段) :存储二进制的可执行代码 2.data(初始化的数据段) 存储初始化的 ...
xmind的第八天笔记
angularjs学习第八天笔记（指令作用域研究）
您好,在前两天对指令的简单了解和系统指令学习后今天主要研究其指针作用域的相关事情每一个指令在创建时,其实就构成了自己的一个小的模块单元. 其对于的模块单元都有着其对于的作用域,其中作用域一般有两种 ...
30天自制操作系统第八天学习笔记（u盘软盘双启动版本）
暑假学习小日本的那本书:30天自制操作系统 qq交流群:122358078 ,更多学习中的问题.资料,群里分享 environment:开发环境:ubuntu 第八天的学习思考: 关于鼠标是怎么 ...
《JavaScript权威指南》学习笔记第八天 Node Tree
前几天介绍了DOM的知识,以及节点的操作.今天我们来重点理解下Node的属性以及方法. 在Document文档里属于Node的东西很多: 其中Document对象是Node对象最大的对象,平时我们使用 ...
mysql学习笔记第八天
where,group by,having重新详解 where的用法: where与in的配合使用,in(值1,值2,...)表示结果在值1,值2,...其中任何一个. 聚合函数和group by的用 ...
UI学习笔记---第八天
UINavigationController的用法界面间传值 UInavigationController继承于UIViewController,以栈的方式管理所控制的师徒控制器,至少要有一个被 ...
iOS学习笔记---oc语言第八天
属性能在一定程度上简化代码,并且增强实例变量的访问安全性属性的声明:使用@property声明属性 eg:@property NSSstring *name;相当于@interface中声明了两 ...
iOS学习笔记---c语言第八天
指针首先将变量a的地址存放在另一个变量中,比如存放在变量b中,然后通过变量b来间接引用变量a,间接读写变量a的值.用来存放变量地址的变量,就称为"指针变量" int *p=nul ...

随机推荐

数据绑定表达式(上)：.NET发现之旅(一)
数据绑定表达式(上):.NET发现之旅(一) 2009-06-30 10:29:06 来源:网络转载作者:佚名共有评论(0)条浏览次数:859 作为.NET平台软件开发者,我们频繁与各种各样的数 ...
关于浮动-float
1.存在浏览器兼容问题:js代码 2.对于这种存在浏览器兼容问题的问题,我们可以绕开兼容性问题,先在css样式写好,然后通过该变className 3.学习的博客 https://paran.io/c ...
请教下 Yii 和 Ajax来验证用户名是否存在
添加一个 Custom, Model页面: CustomForm中: public function rules() { // 使用ajax 校验数据 return array( array('nam ...
Aptana 插件 for Eclipse 4.4
http://download.aptana.com/studio3/plugin/install Aptana Update Site This site is designed to be use ...
MVC&&MVP
Classic MVC Classic MVC 大概上世纪七十年代,Xerox PARC的Trygve提出了MVC的概念. 并应用在Smalltalk系统中,为了和其它类型的MVC加以区分,历史上习惯 ...
第一个Java Rest服务
package com.example; import javax.ws.rs.GET; import javax.ws.rs.PUT; import javax.ws.rs.Path; import ...
KM算法详解+模板
http://www.cnblogs.com/wenruo/p/5264235.html KM算法用来求二分图最大权完美匹配. 本文配合该博文服用更佳:趣写算法系列之--匈牙利算法现在有N男N女,男 ...
hdu 5655 CA Loves Stick
CA Loves Stick Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others) ...
AutoCAD.NET关于Hatch填充
使用Hatch时尤其要注意其参数设置顺序,顺序不对的话,填充出来的效果可能和想象中的不一样,一般来说大多数的属性参数设置都要放在SetHatchPattern方法之前,比如进行“用户定义”填充时: h ...
Codeforces 687C. The Values You Can Make (dp)
题目链接:http://codeforces.com/problemset/problem/687/C 题目大概说给n个各有价值的硬币,要从它们中选出若干个组合成面值k,而要求的是各个方案里这些选出的 ...

HTML第八天笔记

HTML第八天笔记的更多相关文章

随机推荐

热门专题