二、CSS
7. css 边框
- border-style属性用来定义边框的样式
- border-width 属性为边框指定宽度
- border-color属性用于设置边框的颜色。可以设置的颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS边框</title>
<style>
p.none {
border-style:none;}
p.dotted {
border-style:dotted;}
p.dashed {
border-style:dashed;}
p.solid {
border-style:solid;
border-style:solid;
border-color:red;}/*更改边框颜色*/
p.double {
border-style:double;}
p.groove {
border-style:groove;}
p.ridge {
border-style:ridge;}
p.inset {
border-style:inset;}
p.outset {
border-style:outset;}
p.hidden {
border-style:hidden;}
#组合边框
{
border-top-style:dotted;/*上边框：虚线*/
border-right-style:solid;/*右边框：实线*/
border-bottom-style:dotted;/*下边框：虚线*/
border-left-style:solid;/*左边框：实线*/
}
</style>
</head>
<body>
<p class="none">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双边框。</p>
<p class="groove"> 凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">嵌入边框。</p>
<p class="outset">外凸边框。</p>
<p class="hidden">隐藏边框。</p>
<p id="组合边框">组合边框：两个不同的边界样式。</p>
</body>
</html>
运行效果如下图：
8. css尺寸
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS尺寸</title>
<style>
img.big
{
height:200px;
}
img.small
{
height:5%;
width:5%;
}
p.ex
{
height:100px;
width:100px;
}
</style>
</head>
<body>
<img class="big" src="img/图像.jpg"/><br>
<img class="small" src="img/图像.jpg"/>
<p class="ex">这个段落的高和宽是 100px.</p>
<p>这是CSS尺寸的教学代码</p>
</body>
</html>
运行效果如下图：
9. css对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*.right {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}*/
.right {
float: right;
width: 400px;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>元素居中对齐</h2>
<p>水平居中块级元素 (如 div), 可以使用 margin: auto;</p>
<div class="right">
<p>第一个板块哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈。</p>
</div>
<div class="right">
<p>第二个板块哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈。</p>
</div>
</body>
</html>
运行效果如下图：
10. css显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h1.hidden {
visibility:hidden;}
h2.hidden {
display:none;}
p.hidden {
visibility:hidden;}
</style>
</head>
<body>
<h1>这是一个可见标题</h1>
<h1 class="hidden">这是一个隐藏标题</h1>
<h2 class="hidden">这是一个隐藏标题</h2>
<p>这是一个可见段落</p>
<p class="hidden">这是一个隐藏段落</p>
</body>
</html>
运行效果如下图：
附1.有趣的CSS
链接样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
a:link {
color:#000000;} /* 未访问链接*/
a:visited {
color:#00FF00;} /* 已访问链接 */
a:hover {
color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {
color:#0000FF;} /* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
</body>
</html>
运行效果如下图：
1）未访问链接时：
2）已访问链接时：
3）鼠标移动到链接上时：
4）鼠标点击时 ：
（以上链接只有颜色改变，大小并未改变哦！PS：请体谅一下手残人士的截屏水平）
★好啦~CSS的学习在本篇文章暂时告一段落了，敬请期待下一篇更精彩有趣的内容吧★
！喜欢的话不要忘记【一键三连】哦！撒花撒花~