CSS之选择符、链接、盒子模型、显示隐藏元素
2024-09-30 18:38:33
<html>
<head>
<meta charset="utf-8">
<title>选择符、链接、盒子模型、显示隐藏元素</title> <style>
a:link{
color:red;
}
a:visited{
color:black;
}
a:hover{
color:blue;
}
a:active{
color:green;
}
</style> </head>
<body>
<!--链接设置-->
<ul style="list-style:none">
<li>
<a href="#" id="link">
a:link
链接未访问前的样式red
</a>
</li><li>
<a href="http://www.baidu.com" id="visited">
a:visited
链接已访问的样式black
</a>
</li><li>
<a href="#">
a:hover
鼠标悬停到链接的样式blue
</a>
</li><li>
<a href="#" style="text-decoration:none">
a:active
活动的链接,即是获得焦点的链接(比如点击鼠标左键不放)green
</a>
</li>
</ul>
<hr/>
<!--选择符-->
CSS选择符------六种选择符
通配选择符(*)
* { color: red; }
<br/>
类型选择符(HTML标签)
a
{
text-decoration: none;
}
<br/>
包含选择符(空格)
li span
{
color: red;
font-weight: bold;
}
<br/>
ID选择符(#)
#p1
{
color: red;
}
<br/>
Class选择符(.)
.center {
text-align: center;
width: 200px;
border: solid 1px #ccc;
}
<br/>
伪类选择符(:)
a:link
a:visited
a:hover
a:active
<br/>
<hr/>
<!--盒子模型-->
盒子模型<br/>
描述一个HTML元素形成的矩形盒子。<br/>
外边距(margin) margin: 20px 15px 10px 5px;<br/>
边框(border) border: [border-style] [border-width] [border-color] border: solid 5px #ccc;<br/>
如果需要精确控制每个边框的样式,可以设置如下属性:
border-left-style/border-left-width/border-left-color<br/>
border-style值有:none、dashed、dotted、double、groove、inset、outset、ridge、solid
<br/>
内边距(padding) padding: 10px 20px;<br/>
宽度和高度(width/height) <br/>
<br/>
偏移量<br>
--------------------------------------------<br/>
|外边距______________________________ |<br/>
| |边框______________________ | |<br/>
| | |内边距__________ | | |<br/>
| | | | | | | |<br/>
| | | | | | | |<br/>
| | | | | | | |<br/>
| | | |_________| | | |<br/>
| | |_____________________| | |<br/>
| |_____________________________| |<br/>
| |<br/>
--------------------------------------------<br/>
<hr/>
<!--显示隐藏元素-->
display<br/>
--block <br/>
--块对象的默认值。对象之后添加新行。 <br/>
--none<br/>
--隐藏对象。隐藏的对象不占据物理空间。<br/>
--inline<br/>
--内联对象的默认值。对象后不添加行。<br/><br/> visibility<br/>
--visible<br/>
--对象可视 <br/>
--hidden<br/>
--对象隐藏,隐藏的对象占据物理空间<br/><br/> display:none; 与 visibility:hidden 的区别?<br/>
display:none;不占据页面空间<br/>
visibility:hidden; 占据页面空间<br/><br/> </body>
</html>
最新文章
- MATLAB地图工具箱学习总结(四)自定义投影
- fir.im Weekly - 给女朋友的 iOS 开发教程
- [转]Mybatis3.x与Spring4.x整合
- 【转发】SSH无密码登录的配置
- Kettle简介
- 系统数据文件和信息之附加组ID
- spring beans源码解读之--XmlBeanFactory
- hdu GCD and LCM
- 跨域访问解决方案:JSONP
- ref:linux用户和组管理,/etc/passwd,/etc/shadow和/etc/group 文件内容解释
- PHP只显示姓名首尾字符,隐藏中间字符并用*替换
- Fix-Dell iDRAC 7 error: RAC0218: The maximum number of user sessions is reached
- eclipse导入spring aop xml约束
- SSZipArchive解压失败的原因
- vue-cli脚手架里如何配置屏幕自适应
- 【BZOJ 4031】 4031: [HEOI2015]小Z的房间 (Matrix-Tree Theorem)
- *.app 无法打开或已损坏解决办法
- LeetCode: Next Greater Element I
- uva658(最短路径+隐式图+状态压缩)
- jsp smartupload学习
热门文章
- 【NOIP2016】天天爱跑步(树上差分)
- 【ZJOI2017 Round1练习】D8T2 sequence(DP)
- CentOS虚拟机与本机同步时间
- yum install tree 出错primary.sqlite.bz2: [Errno -1] Metadata file does not match checks 解决办法
- TCP网络库:Acceptor、TcpServer、TcpConnection
- yarn 和 npm 的区别
- 加入收藏BUG改善
- scu oj 4442 Party(2015年四川省acm程序设计竞赛)
- C/C++生成可执行文件过程
- #pragma pack (n) 惹的祸