前端学习笔记day03--CSS样式

前端学习笔记day03–CSS样式

一、span和div元素
1.span
span是一种行内元素,没有任何样式。

<h1><span></span></h1>

在这里插入图片描述

在style标签中声明span元素的属性之后,再看h1标签中的字。
		<style>
			h1{
				font-size: 30px;
			}
			span{
				color: red;
			}
		</style>

在这里插入图片描述
2.div
div是一种块元素,同样的,它本身没有样式。eg:给div标签设置背景色。

		<style>
			div{
				background: greenyellow;
			}
		</style>

		<body>
			<div>
				我在放假
			</div>
		</body>

在这里插入图片描述

二、字体样式
font-family 字体类型。

1.修改默认的字体样式。eg:修改h1标签的默认字体。

		<style>
			#first{
				font-family: "楷体";
			}

			#en{
				font-family: "roman";
			}

			#th{
				font-family: "roman" "楷体";
			}

			#fu{
				font-family: "楷体" "roman";
			}
		</style>
		
		<body>
			<h1>
				hello你好
			</h1>

			<h1 id="first">
				hello你好
			</h1>
			
			<h1 id="en">
				hello你好
			</h1>

			<h1 id="th">
				hello你好
			</h1>

			<h1 id="fu">
				hello你好
			</h1>
		</body>

在这里插入图片描述
上图中分别是原样式修改中文字体样式修改英文字体样式混合样式的效果。中文字体对中英文都有影响,英文字体只影响英文,混合样式需要先设置英文字体后设置中文字体。设置字体时应注意选用常用字体。

(1)一些相关属性
1)font-size 字体大小
2)color 字体颜色:英文单词所能表达的颜色是很有限的,除了英文单词以外还可以用rgb(三原色)来配颜色 color: rgb(a,b,c) ,三个值的取值范围都是0(黑)–255(白);在三原色之上还可以增加透明度 color: rgba(a,b,c,d) ,取值范围0(完全透明)–1;十六进制0-FF来表示更多的颜色 color:#00AA00,如果每两位的值相同的话,可以简写为其中的一个值,如:#00AA00可以简写为#0A0。如果我们想使用图片中的某种配色,但是不知道它的十六进制编码,我们可以用取色器来读出它的颜色。

		<style>
			#first{
				font-family: "楷体";
				font-size: 40px;
				color: rgba(25,255,255,0.4);
		</style>
		<body>
			<h1>
				hello你好
			</h1>
		
			<h1 id="first">
				hello你好
			</h1>
		</body>

在这里插入图片描述

背景设置透明度的效果

在这里插入图片描述
3)font-weight 字体粗细,范围100-900,有normal(400),bold(700)等。

		<style>
			h1{
				font-weight: bold;
			}
		</style>

在这里插入图片描述
4)font-style 字体风格,如斜体、宋体、微软雅黑等等,还可以设置字体大小。

		<style>
			h1{
				font:italic 50px "微软雅黑"
			}
		</style>

在这里插入图片描述

font-style还可以和font-weight组成混合属性。
		<style>
			h1{
				font-weight: bolder;
				font-style: italic;
			}
		</style>

图略。

复合属性在使用时有顺序要求:font-style font-weight font-size font-family。


三、文本样式
需要在head标签中,写相应标签的选择器
1.background 背景颜色。
2.text-align 文本的对齐方式。
3.text-indent 首行缩进,可以是距离(2em),也可以是百分比。
4.font-size 字体大小。
5.line-height 行高。多行调整行间距,单行使数据集中。
6.text-decoration 文本装饰。

		<style>
			p{
				background: red;
				
				text-align: left;
				
				text-indent: 2em;
				
				font-size: 30px;
				
				line-height: 40px;
				
				text-decoration: underline;
			}
			span{
				background: yellow;
				text-align: center;
			}
		</style>

		<body>
			<p>中秋</p>
		</body>

在这里插入图片描述


四、竖直对齐
1.vertical-align 设置元素的竖直对齐方式。默认方式为bottom,middle可以使图文竖直对齐,对图片添加该属性。
2.text-shadow 文本阴影。

阴影颜色  X轴偏移量(正值,向右偏移)  Y轴偏移量(正值,向下偏移) 清晰度(越小越清晰,越大越模糊)
如text-shadow:green 10px 10px 10px;
		<style>
			img{
				vertical-align: middle;
			}
			
			span{
				font-size: 40px;
				text-shadow:green 10px 10px 10px;
			}
		</style>

		<body>
			<p>
				<img src="img/下载图标.gif">
				<span>111</span>
			</p>
		</body>

在这里插入图片描述


五、超链接
CSS可以设置超链接访问前、点击时和访问过等的样式。
1.E:link 未访问时的状态。

		<style>
			a{
				font-size: 30px;
			}
			a:link{
				color: black;
			}
		</style>

		<body>
			<a href="文本样式.html">
				1234
			</a>
		</body>

在这里插入图片描述2.E:visited 访问过的状态。

		<style>
			a:visited{
				color: yellow;
			}
		</style>

在这里插入图片描述

3.E:hover 鼠标悬浮时的状态。

		<style>
			a:hover{
				color: red;
			}
		</style>

在这里插入图片描述4.E:active 鼠标点击时的状态。

		<style>
			a:active{
				color: blue;
			}
		</style>

在这里插入图片描述


六、列表样式
1.list-style: none;或者 list-style-type: none; 去掉无序列表前面的小圆点。

		<style type="text/css">
			ul{
				list-style: none;
				/*list-style-type: none;*/
			}
		</style>

		<body>
			<ul>
				<li>11</li>
				<li>22</li>
				<li>33</li>
			</ul>
		</body>

在这里插入图片描述


七、背景
1.background-color 背景色。如:background-color: gray;
在这里插入图片描述

2.background-image 背景图片。如:background-image: url(../../img/下载图标.gif);
在这里插入图片描述
3.background-repeat 背景重复样式,background-repeat: repeat默认值,表示在水平方向(x轴)和垂直方向(y轴)同时平铺,background-repeat: no-repeat表示不平铺。
在这里插入图片描述
4.background-position 背景位置,可以用px、百分比或者位置的单词,也可以混合使用。如:background-position: 50% center;
在这里插入图片描述
5.background: url(路径/img) 90% center 混合使用时没有顺序要求。如:background: url(../../img/下载图标.gif) 50% center no-repeat yellow;
在这里插入图片描述
6.background-size (1)px:可能会压缩、拉伸、留白;(2)百分比:基于控件会压缩、拉伸、留白;(3)cover:不会留白,但会裁剪;
(4)contain:不会压缩或者拉伸,但会有留白,建议背景图像像素高一些,比例和控件比例一致。

		<style type="text/css">
			p{
				background-color: gray;
				background-image: url(../../img/下载图标.gif);
				background-repeat: no-repeat;
				background-position: 50% center;
				background: url(../../img/下载图标.gif) 50% center no-repeat yellow;
			}
			
			div{
				width: 200px;
				height: 200px;
				background: url() no-repeat;
				background-size: 100%;
				border: 1px soild red;
			}
		</style>

		<body>
			<p>
				新闻
			</p>
		</body>

7.背景渐变
background: linear-gradient()可以设定一个图像块区域,然后在该区域内设置颜色渐变的方向、顶部颜色和底部颜色。 如:background: linear-gradient(to bottom,red,green); to bottom指方向从顶部指向底部,red位置是顶部颜色,green位置是底部颜色。

		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				border: 1px soild red;
				background: linear-gradient(to bottom,red,green);
			}
		</style>

在这里插入图片描述


背景实例1----制作一个登录按钮
要求:使用图片作为背景

		<style type="text/css">
			.btn{
				background: url(../img/按钮.png);
				width: 100px;
				height: 50px;
				background-size: 100% 100%;
				border: none;
			}
		</style>

		<body>
			<input type="button" class="btn" value="登录"/>
			<input type="button" class="btn" value="注册"/>
		</body>

在这里插入图片描述

背景实例2----淘宝商品页面
效果图
在这里插入图片描述

		<style type="text/css">
			/*设置字体大小、添加背景色*/
			.plist{
				width: 240px;
				background-color: gainsboro;
			}
			.plist h2{
				background-color: red;
				color: white;
				line-height: 40px;
				font-size: 20px;
				/*缩进*/
				text-indent: 15px;
				background: url(../img/red.jpg) no-repeat 95% center;
			}
			/*添加右端箭头(url括号中是向右箭头的图片)*/
			.plist ul li{
				 list-style: none;
				 list-height: 30px;
				 font-size: 16px;
				 background: url();
			}
			/*修改a标签字体*/
			.plist ul li a{
				text-decoration: none;
				color: black;
			}
			/*添加鼠标悬浮时字体颜色*/
			.plist ul li a:hover{
				text-decoration: underline;
				color: orange;
			}
		</style>

		<body>
			<div class="plist">
				<h2>全部商品分类</h2>
				<ul>
					<li>
						<a href="#">图书&nbsp;&nbsp;</a>
						<a href="#">音像&nbsp;&nbsp;</a>
						<a href="#">数字产品</a>
					</li>
					<li>
						<a href="#">家用电器&nbsp;&nbsp;</a>
						<a href="#">手机&nbsp;&nbsp;</a>
						<a href="#">数码</a>
					</li>
					<li>
						<a href="#">电脑&nbsp;&nbsp;</a>
						<a href="#">办公</a>
					</li>
				</ul>
			</div>
		</body>

在这里插入图片描述


八、盒子模型
网页中按内容、功能分出一块矩形区域,每一个区域都是一个盒子
在这里插入图片描述
1.盒子模型的一些属性
(1)边框
1)border: 1px solid red; 复合属性,没有前后顺序。
2)border-width 边框宽度,顺序上、右、下、左,缺省找对边。
3)border-style 边框类型 【1】dashed 虚线【2】solid 实线【3】dotted 点线【4】none 不显示线条。border-left-style 单独设置边框类型。同样,边线类型也可以混合设置,顺序也是上、右、下、左 border-style: dotted dashed solid double;
4)border-color: gold;边框颜色,可以分别设置和混合设置。

	<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				border: 1px double green;
				border-width: 3px 1px 2px 2px;
				margin: 20px;
				/*左边框的宽度*/
				/*border-left-width: 2px;*/
				/*右边框的宽度*/
				/*border-right-width: 2px;*/
				/*顶部框的宽度*/
				/*border-top-width: 1px;*/
				/*底部框的宽度*/
				/*border-bottom-width: 1px;*/
				border-style: dotted dashed solid double;
				border-color: gold blue red black;
			}
			span{
				border: 1px red solid;
			}
		</style>

在这里插入图片描述
(2)外边距

		<style>
			span{
				border: 1px red solid;
			}
		</style>

在这里插入图片描述

		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				border: 1px double green;
				border-width: 3px 1px 2px 2px;
				margin: 20px;
				}
			span{
				border: 1px red solid;
			}
		</style>

在这里插入图片描述

在这里插入图片描述

		<style>
			h1,p,ul,a,div{
				border: 1px solid red;
			}
		</style>

		<body>
			<h1>h1</h1>
			<p>p</p>
			<ul>
				<li>li</li>
			</ul>
			<a>a</a>
			<div>div</div>
		</body>

在这里插入图片描述
每个标签盒子之间的就是外边距。如果想取消外边距,就把margin设为0

在这里插入图片描述
还有一些外边距没有消除,是因为所有的标签都有外边距,还要消除body的外边距。在选择器上加上body:

		<style>
			body,h1,p,ul,a,div{
				border: 1px solid red;
				margin: 0;
			}
		</style>

在这里插入图片描述

在margin属性中添加值auto,可以使盒子自动水平居中,前提必须是块元素。
在这里插入图片描述
尝试设置span标签的margin属性为0 auto,发现并没有发现变化,因为span元素是靠内容填充的。


(3)内间距
写一个p标签,设置边框;给div标签写入内容。
在这里插入图片描述

然后给p标签盒子添加内边距属性

			p{
				border: 1px solid red;
				padding: 20px 10px 5px 5px;
			}

在这里插入图片描述
内边距属性也可以实现居中效果,比如上边的值修改为padding: 15px;

在这里插入图片描述

(4)盒子尺寸
1)width height 块元素设置有效,行内设置无效。
2)box-sizing 盒子尺寸,width内容的宽,不包括padding,边线;
border-box width指的是盒子的宽 包括边线,边距;
content-box width 内容的宽,不包括padding,边线。

(5)盒子半径
1)边角半径:值越大,角度越大;方向:左上,右上,右下,左下;缺省的话,找对角。

		<style>
			div{
				border: 1px solid red;
				width: 100px;
				height: 100px;
				border-radius: 5px 10px 15px 20px;
			}
		</style>

在这里插入图片描述
边角半径修改的是区域的边角,不是边框线的边角,可以尝试把边框线去除看看。

		<style>
			div{
				/*border: 1px solid red;*/
				background-color: blue;
				width: 100px;
				height: 100px;
				border-radius: 5px 10px 15px 20px;
			}
		</style>

在这里插入图片描述
如果半径的值刚好是长、宽的一半,则区域会变成一个圆形。
在这里插入图片描述


盒子模型案例
效果预览图如下:
在这里插入图片描述

		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			body{
				background-color: oldlace;
			}
			.plist{
				margin: 15px;
				background-color: white;
				width: 240px;
			}
			.plist dt{
				background-color: deeppink;
				padding: 10px;
				color: white;
				font-weight: bold;
				font-size: 18px;
			}
			/*设置每行之间的虚线*/
			.plist dd{
				padding: 10px 0px;
				font-size: 16px;
				border-bottom: dashed 1px gray;
			}
			.plist dd a{
				color: gray;
				text-decoration: none;
			}
			.plist dd a:hover{
				color: deeppink;
			}
			.plist dd a span{
				width: 20px;
				height: 20px;
				display: inline-block;
				background-color: gray;
				border-radius: 50%;
				color: white;
				text-align: center;
				line-height: 20px;
			}
			/*设置鼠标悬浮时,span也会发生变化。如果选择器是dd a span:hover,span和文字不会同时变化,需要鼠标分别悬浮至文字和span上分别发生变化*/
			.plist dd a:hover span{
				background-color: deeppink;
			}
		</style>

在这里插入图片描述


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值