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 ...

随机推荐

perl环境配置以及Eclipse安装perl开发插件
简介: 这篇文章将详细介绍 EPIC 组件的安装,EPIC 编辑环境,调试运行环境,着重介绍如何使用 EPIC 来快速.简便.准确地调试 Perl 语言程序,包括对于 Perl 程序的单步执行,断点用 ...
使用模板时 error LNK2019: 无法解析的外部符号
类模板是c++编译器指令说明了如何生成类和成员函数除非编译器实现了新的关键字export关键字否则将模板成员函数放置在一个独立的实现文件中将无法运行因为模板不是函数他们不能单独编译模板必 ...
Linux下的Memcache安装
Linux下Memcache服务器端的安装服务器端主要是安装memcache服务器端,目前的最新版本是 memcached-1.3.0 .下载:http://www.danga.com/memcach ...
STL六大组件之——迭代器这个东西
迭代器:除了在其它语言中司空见惯的下标法访问容器元素之外,C++语言提供了一种全新的方法——迭代器(iterator)来访问容器的元素.迭代器其实类似于引用,指向容器中某一元素.换个方式来说,容器就是 ...
动手动脑之查看String.equals()方法的实现代码及解释
动手动脑请查看String.equals()方法的实现代码,注意学习其实现方法. 第一个是false,后三个是true. package stringtest; public class Strin ...
Container View Controller
有时候,我们的Controler中包含有另一个controler view的view时,可以使用这种方式. https://developer.apple.com/library/ios/featur ...
Linux Shell脚本教程
v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VM ...
PHP获取curl的错误
curl_error($ch) 用 curl_error 来获取 curl 的错误
设置sudo权限
由于CentOS安装之后,普通用户无sudo权限,故应该设置sudo权限. 此处假设当前用户为“cloudgis”. 1. 设置sudo权限,则设置如下: $ su root 输入root 密码 $ ...
canvas脏域问题纪录
canvas 脏域问题今天无意之中碰见了一.问题描述: 在支持html5的浏览器中运行javascript脚本,脚本主要是操作网页上的标签canvas,出错的操作为, getImageData(im ...

HTML第八天笔记

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

随机推荐

热门专题