CSS基础•下篇——学习周记4

最新推荐文章于 2021-08-03 20:31:25 发布

咸盐月饼

最新推荐文章于 2021-08-03 20:31:25 发布

阅读量277

点赞数 3

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_54919878/article/details/114993760

版权

CSS 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

CSS基础学习二

二、CSS

二、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的学习在本篇文章暂时告一段落了，敬请期待下一篇更精彩有趣的内容吧★

！喜欢的话不要忘记【一键三连】哦！撒花撒花~

咸盐月饼

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础•下篇——学习周记4

CSS基础学习二二、CSS7. css 边框8. css尺寸9. css对齐10. css显示附1.有趣的CSS二、CSS7. css 边框8. css尺寸9. css对齐10. css显示附1.有趣的CSS
复制链接

扫一扫