w3school css笔记

原创 2018年04月17日 10:13:55

背景

背景图平铺Background-repeat:repeat-xy

背景图固定background-attachment:fixed

文本

文本缩进text-indent:5em

div居中<center>可以使包裹的元素在父元素内居中 h5不支持

字间隔:word-spacing

字母间隔:letter-spacing

字符大小写text-transform

空格:white-space:normal(默认:合并为一个空格)  pre:不会忽略空格和换行,按原来的样式显示

超链接的样式修改

a:link {color:#FF0000;}    /* 未被访问的链接 */

a:visited {color:#000000;} /* 已被访问的链接 */

a:hover {color:#FF00FF;}   /* 鼠标指针移动到链接上 */

a:active {color:#0000FF;}  /* 正在被点击的链接 */

margin的合并:

注释:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并

定位:

CSS 相对定位

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素相对于它的起点进行移动。

1)设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留

2)注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。

绝对定位

因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

水平导航栏

li转换为行内元素li {display:inline}

a 设置paddinga:hover 设置不同的padding会有好玩的效果)

text-decoration:none去掉超链接下的横线

更改鼠标光标:

cursor:wait

cursor:pointer(小手)

hover

鼠标悬浮:

a:hover      img:hover

设置透明度:

opacity0

 

 

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_36547601/article/details/79970781

用HTML加CSS模仿的W3school的主页

作为一个HTML和CSS的初学者,我模仿了一个比较简单的静态网页,就是W3school的主页,虽然有些内容以我目前的能力还没有做到一模一样,但这是我第一次自己动手做的网页,我还是很开心的。如果有人看了...
  • zwt_1
  • zwt_1
  • 2016-12-10 18:35:53
  • 790

JS学习笔记(w3school)

变   量 1.声明了变量却未赋值,则该变量的值实际上是undefined 2.如果重新声明了变量,其值还是之前的值,并不会丢失 3.数据类型     数字、字符串、布尔值、数组、对象、null、un...
  • VivianHope
  • VivianHope
  • 2015-05-30 14:36:00
  • 1378

w3school官方文档,包含html/css/javascript等

  • 2017年10月17日 22:16
  • 12.2MB
  • 下载

w3school JavaScript笔记1

教程地址:http://www.w3school.com.cn/js/js_intro.aspHTML 中的脚本必须位于 &amp;lt;script&amp;gt; 与 &amp;lt;/scrip...
  • beijingpengpeng
  • beijingpengpeng
  • 2018-02-16 16:52:27
  • 28

kindle-专用版 w3school-css参考手册

  • 2014年03月29日 14:44
  • 823KB
  • 下载

W3School离线手册(2017.03.11版).zip

  • 2017年07月20日 09:13
  • 21.5MB
  • 下载

超全的css新手学习笔记

适合新手的css学习笔记,超级全面
  • qq_34477549
  • qq_34477549
  • 2016-10-11 10:27:52
  • 2188

神奇的css属性css3 属性pointer-events

转载: 绝对定位元素盖住链接或添加某事件handle的元素后,那么该链接的默认行为(页面跳转)或元素事件将不会被触发。 现在Firefox3.6+/Safari4+/Chrome支持一个称为p...
  • Zoe_Wang_ing
  • Zoe_Wang_ing
  • 2014-10-17 11:40:59
  • 549

css的选择器

  • 2016年07月17日 23:17
  • 9KB
  • 下载

w3school css参考手册 飞龙整理 20141002

  • 2014年10月02日 14:52
  • 2.31MB
  • 下载
收藏助手
不良信息举报
您举报文章:w3school css笔记
举报原因:
原因补充:

(最多只允许输入30个字)