CSS(Cascading Style Sheep 叠层样式表,作用是美化HTML网页)/*注释内容*/ 为注释的方法。

样式表的分类:

1.内联样式表

 和HTML联合显示,控制精确,但是可重用性差,冗余较多。

  例:<p style="font-size:14px;">内联样式表</p>

2.内嵌样式表

 作为一个独立区域内嵌在网页里,必须写在head标签里面。

  <style type="text/css">

  p   //格式对p标签起作用

  {

  样式;

  }

  </style>

3.外部样式表

 新建一个CSS文件,用来放置样式表。如果要在HTML文件中调用样式表,需要在HTML文件中点右键→CSS样式表→附加样式表。一般用link连接方式。

  有些标签有默认的边距,一般写样式表代码的时候都会先去除(也可以设置其他的样式),如下:

<style type="text/css">

{
margin:0px;
padding:0px;
}

选择器

1.标签选择器  用标签名做选择器

p
{
background-color:#0F6;
color:#F6F;
text-decoration:underline;}

以上是采用外部样式表的格式写出了的。
2.class 选择器。都是以“.”开头的

.p
{
text-decoration:underline;
font-family:"Lucida Console", Monaco, monospace, "楷体";
color:#F00;
font-size:30px;} <body> <div class="p">格林童话</div>
</body>
</html>

3.ID选择器 以#开头

#pp
{
font-style:normal;
text-decoration:underline;
color:#03C;
background-size:cover;
} <body> <div id="pp">安徒生童话</div>
</body>
</html>

4.复合选择器

1)用“,”隔开,表示并列

<style type="text/css">
p,span
{
text-decoration:overline;
color:#0ff;
width:100px;
height:60px;
}
</style>

2)用空格隔开 表示后代

.main p
{
background-color:#00F;
font-size:50px;
color:#3F9;}
</style>

3)筛选“.”

p.sp
{
font-style:normal;
text-decoration:underline;
color:#03C;
background-size:cover}

链接的style:

a:link 超链接被点前状态

a:visited 超链接点击后状态

a:hover 悬停在超链接时

a:active 点击超链接时

在定义这些状态时,有一个顺序l v h a

a:link
{
text-decoration:none;
color:#000;}
a:visited
{
text-decoration:none;
color:#000;}
a:hover
{
color:#F00;
text-decoration:underline;}
a:active
{
text-decoration:underline;
color:#C60;}

3月22 关于CSS的更多相关文章

  1. 2015年10月22日CSS学习笔记

    XHTML1.0对HTML4.0的改进 借鉴了XML的写法,语法更加严格. 把页面的内容和样式分离了,废弃了html4中的表示样式的标签和属性.推荐使用css来描述页面的样式. CSS样式的优先级 ! ...

  2. 12月22日《奥威Power-BI财务报表数据填报》腾讯课堂开课啦

    一扇可以通向任何地方的“任意门”,是我们多少人幼时最梦寐以求的道具之一.即使到了现在,工作中的我们还会时不时有“世界那么大,我想去看看”的念头,或者在突然不想工作的时刻,幻想着自己的家门变成了“任意门 ...

  3. Autodesk 最新开发技术研讨会 -8月22日-Autodesk北京办公室

    为了增进与广大中国地区Autodesk产品的二次开发人员的了解与互动,帮助中国地区的Autodesk产品二次开发人员了解Autodesk最新的二次开发技术动向,并获得Autodesk公司专业开发支持顾 ...

  4. 见见面、聊聊天 - 5月22日晚7点Meetup,三里屯绿树旁酒吧,畅谈云技术和应用

    总是邮件.QQ什么的线上聊,让我们见面吧,不怕见光死,呵呵.   我和同事会先抛砖引玉,给大家介绍一下Autodesk几款最新的云技术和解决方案,然后大家就可畅所欲言,自由交流.来自五湖四海的人,为了 ...

  5. 2016年12月22日 星期四 --出埃及记 Exodus 21:17

    2016年12月22日 星期四 --出埃及记 Exodus 21:17 "Anyone who curses his father or mother must be put to deat ...

  6. 转:[置顶] 从头到尾彻底理解KMP(2014年8月22日版)

    [置顶] 从头到尾彻底理解KMP(2014年8月22日版)

  7. 2016年11月22日 星期二 --出埃及记 Exodus 20:13

    2016年11月22日 星期二 --出埃及记 Exodus 20:13 "You shall not murder.不可杀人.

  8. 2016年10月22日 星期六 --出埃及记 Exodus 19:6

    2016年10月22日 星期六 --出埃及记 Exodus 19:6 you will be for me a kingdom of priests and a holy nation.' These ...

  9. 微软SQL Server认证最新信息(17年5月22日更新),感兴趣的进来看看哟

    之前一直有在关注微软认证的一些消息,由于最新的SQL Server认证加入了2016的相关内容,导致课程资料需要大部分更新,但是微软更新相对比较慢,并且经常改版,目前发现的最新的MCP Cert Pa ...

随机推荐

  1. volatile 变量使用

    1,对其它线程可见性.原理是:别的线程每次使用前都是要刷新一下值,并不是原子性同步.所有还是会出现线程不安全. 2,禁止指令重新排序.也就是会出现机器实际执行可能和代码的顺序不一样.使用volatil ...

  2. Balloons

    题目链接:http://acm.sdibt.edu.cn/JudgeOnline/problem.php?id=2401 类似求连通块的问题,可以参考紫书(P162 油田),对这两个人分别执行dfs. ...

  3. 怎么在父窗口调用它页面的iframe里面数据,进行操作?

    注:在服务器下操作有效果,本地无效 document.getElementById("taskdetail1").contentWindow.test(a) document.ge ...

  4. Docker3之Swarm

    Make sure you have published the friendlyhello image you created by pushing it to a registry. We’ll ...

  5. js点击显示隐藏

    这个栗子…… 可以不吃,先预设一个变量表示div的状态,例子中0是显示的,一开始是隐藏的.当点击时判断状态是显示0的还是隐藏1的:如果是显示的就把div隐藏,再把变量改变为1.再次点击时把会判断到变量 ...

  6. BZOJ 1040: [ZJOI2008]骑士(基环树dp)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1040 题意: 思路: 这是基环树,因为每个人只会有一个厌恶的人,所以每个节点只会有一个父亲节点,但是 ...

  7. linux_nmon监控方法

    一.介绍 Nmon 工具是 IBM 提供的免费的在AIX与各种Linux操作系统上广泛使用的监控与分析工具.该工具可将服务器的系统资源耗用情况收集起来并输出一个特定的文件,并可利用 excel 分析工 ...

  8. Django中ORM简介与单表数据操作

    一. ORM简介  概念:.ORM框架是用于实现面向对象编程语言种不同类型系统的数据之间的转换 构建模型的步骤:重点 (1).配置目标数据库信息,在seting.py中设置数据库信息 DATABASE ...

  9. 关于Oracle 12C pdb用户无法登录的问题

    新装了oracle12c,对新的CDB和PDB用户如何登录一直一头雾水,经过一晚上的查找,终于解决. sqlplus /nolog -> conn /as sysdba 登录到oracle 将s ...

  10. [转]QT中QString与string的转化,解决中文乱码问题

    QString str2qstr(const string str) { return QString::fromLocal8Bit(str.data()); } string qstr2str(co ...