写HTML5时一些CSS样式的基本小点（个人笔记持续更新）

mac2025-03-26 8

HTML5在大一的时候学过，之后一直没用到，丢了一年，一些比较好用的小语法要一个个去查，很麻烦，特此记录

文章目录

边框padding：内边距-margin：外边框（设置顺序“左、右、下、上”）外边距合并超链接（标签a）的样式问题1.定义全部超链接样式2.定义局部超链接样式，只要在前面加入指定id或者class就可以了关于列表样式position 溢出元素的处理（overflow标签的使用）和层叠层叠

边框

padding：内边距

我理解的就是文字离框的距离，用left,right,top和bottom来决定左右上下文字离框的距离（如果觉得抽象可以用 border : 1px red solid ; 给你的div设置一个实线框来做实验感受一下）

-margin：外边框（设置顺序“左、右、下、上”）

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。

值复制： 1.如果缺少左外边距的值，则使用右外边距的值。 2.如果缺少下外边距的值，则使用上外边距的值。 3.如果缺少右外边距的值，则使用上外边距的值。

但我目前还是喜欢直接全写出来，不用值复制

外边距合并

需要注意的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。就是说，只要两个外边距碰到一起，小的那个就会被“消耗”掉，然后合成一个，而且是值为大的那个 CSS外边距合并

超链接（标签a）的样式问题

超链接有几个常用的以下几个伪类： a:link，定义正常链接的样式； a:visited，定义已访问过链接的样式； a:hover，定义鼠标悬浮在链接上时的样式； a:active，定义鼠标点击链接时的样式。

1.定义全部超链接样式

a:link { text-decoration: none; }/*所有超链接无下划线*/ a:hover{text-decoration:underline; } /*鼠标放上去有下划线*/ a:hover{ cursor:pointer;}/*鼠标上去显示手*/ a:visited{ color:red;}/*鼠标点过为红色*/ a:hover{ color:yellow;}/*鼠标放上去为黄色*/

2.定义局部超链接样式，只要在前面加入指定id或者class就可以了

.text a:link{ text-decoration: none; color: blue; /*没有操作时，class为text的超链接无下划线，且字体为蓝色*/ }

关于列表样式

ul li{ list-style-type:none; /*格式化列表符*/ list-style:none;/*去除list前的点*/ list-style-image: url(images/xxx.gif);/*把列表符变成自定义图片*/ } <ul> <li>我前面没有点</li> </ul>

这个是我发现的一个很详细的讲导航栏的帖子，贴一下然后我自己又改进了一下*，效果图如下代码如下

/*导航CSS样式*/ #menu{ font:"华文新魏", 18px ; width:100%; height:45px; background-color:#003; } .nav{/* 让导航栏后边一排都有颜色 */ width: 1200px; height: 45px; margin: auto; } #menu, #menu li { list-style:none; /* 将默认的列表符号去掉 */ padding:0; /* 将默认的内边距去掉 */ margin:0; /* 将默认的外边距去掉 */ float: left; /* 往左浮动 */ display: block; } #menu li a { display:block; width:235px; height:45px; line-height:45px; /* 让文字垂直居中 */ text-align:center;/* 文字水平居中 */ background:#003; color:#09F; text-decoration:none; border-right:1px #333333 solid; /* 左侧 1px 的，#33333色号的实线 */ } #menu li a:hover{ /* 设置悬停效果 */ text-decoration:none; cursor:pointer; background:#146C9C; color:#09F; } #menu li a.last{ border-right:0; /* 去掉左侧边框 */ }

HTML代码如下

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>导航</title> <link href="../sty/topbox.css" type="text/css" rel="stylesheet"> <body>    <ul id="menu"> <nav class="nav"> <li><a href="index.html" >首页</a></li> <li><a href="">讨论</a></li> <li><a href="">个人主页</a></li> <li><a href="">商城</a></li> <li><a href="" class="last">联系我们</a></li> </nav> </ul> </body> </html>

position

我又找到了一篇讲的很好很详细的博客，我是搬运工···

补充：如果之前用了浮动（float），那么position:absolute后会清除浮动效果，挨个设置div可以达到目标效果

溢出元素的处理（overflow标签的使用）和层叠

overflow: scroll; /*用滚动条来显示元素溢出的内容*/ overflow: hidden; /*隐藏溢出内容（可用于背景图像）*/ overflow: auto; /*浏览器自动处理溢出*/

层叠

z-index 默认的优先级是z-index:0;如果设置图像z-index为-1，那么图像则在文字下方，反之，如果z-index为1，那么图像将覆盖文字代码如下

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> .a{ position:absolute; top:0; left:0px; z-index:-1; } h2{ position:absolute; left:100px; } </style> </head> <h2>这<br>是<br>一<br>段<br>做<br>实<br>验<br>的<br>文<br>字</h2> <img class="a" src="UNR{NYME_4S2N8H@}[@_IQT.jpg"> <body> </body> </html>

文章我会随着我的学习进度随时更新，因为都是我自己辛苦打出来的，如果用了评论告诉我一声也算是给我的一种鼓励吧！

特此感谢W3School！！

最新回复(0)