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. js动画(速度)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht ...

  2. LuoguP2680 运输计划

    题目地址 题目链接 题解 二分答案,那么大于答案的路径都需要有一条公共边,maxlen-val>=二分出来的x.val是边权. 考虑树剖,对每条大于答案的路径都+1(线段树里),枚举边,如果(线 ...

  3. SQL Server (MSSQLSERVER) 服务因 2148081668 服务性错误而停止。

    https://zhidao.baidu.com/question/151448005.html 具体步骤: 运行-> 输入:“services.msc” ->找到 “SQL Server ...

  4. 关于C#引用ExceptionPolicy.HandleException(ex, "LogAndReplace", out exceptionToReplace);

    http://www.cnblogs.com/Terrylee/archive/2006/07/03/enterprise_library2_1.html 要使用ExceptionPolicy.Han ...

  5. (zhuan) LSTM Neural Network for Time Series Prediction

    LSTM Neural Network for Time Series Prediction Wed 21st Dec 2016 Neural Networks these days are the ...

  6. HDU 5754 Life Winner Bo(各类博弈大杂合)

    http://acm.hdu.edu.cn/showproblem.php?pid=5754 题意: 给一个国际象棋的棋盘,起点为(1,1),终点为(n,m),现在每个棋子只能往右下方走,并且有4种不 ...

  7. Tomcat 跨域问题的解决

    先下载CORS对应的Jar: 下载链接: https://download.csdn.net/download/u010739157/10565169 在tomcat的Web.xml中加上如下配置: ...

  8. memset()函数用法及其作用

    memset()函数原型是: extern void *memset(void *buffer, int c, int count) //buffer:为指针或是数组, //c:是赋给buffer的值 ...

  9. win10 安装Oracle 11g release 2

    参考资料: Oracle Database 11g Release 2 安装详解 - WIN 10 系统 准备工作: 安装 Oracle 11g 之前,要确保在此操作系统上未安装过 Oracle,或者 ...

  10. js code

    //在页面增加一个放置图标的区块 if(!document.getElementById('_span_jiucuo')) document.write("<span id='_spa ...