css学习

最新推荐文章于 2021-06-18 23:58:03 发布

Adela0916

最新推荐文章于 2021-06-18 23:58:03 发布

阅读量160

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/Adela0916/article/details/103740877

版权

前端学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css层叠样式表使用方式

div标签特点：

自动换行
如果没有设定宽高，宽度是独占一行，高度由内容决定
通常用于布局

span标签特点：

不会自动换行
如果没有设定宽高，宽度和高度都由内容决定
通常用于文本样式调整

行内样式（不适合代码复用）

直接在标签中使用style属性即可

<!--行内样式-->
		<div style="width: 500px; height: 400px; background-color: #ff0;"></div>

内部样式

需要使用style标签来实现

<head>
		<meta charset="utf-8">
		<title>CSS的使用方式</title>
		<link href="testcss.css" rel="stylesheet" />
		<style>
			div{
				width: 200px;
				height: 200px;
				background-color: green;
			}
		</style>
	</head>

外部样式

需要使用link标签来引入外部的css文件

<link href="testcss.css" rel="stylesheet" />
<!--外部样式：需要引入外部样式-->
		<div class="divout"></div>

css常用选择器

语法：
标签选择器：
选择器{
样式属性：属性值；
}
直接通过标签名选中标签

<style>
			div{
				width: 200px;
				height: 200px;
				background-color: green;
			}
		</style>
		<body>
		<div>hello world</div>
		<div>hello html</div>
	</body>

id选择器：听过使用id属性的值来选中标签
#选择器{
样式属性：样式值；
}

#div1{
	color: red;
	}
<div>hello world</div>
<div id="div1">hello html</div>

类选择器：通过标签的class属性选中标签
.选择器{
样式属性：样式值；
}

.border{
	border: 3px solid black ;/*粗细 边框样式(实线、虚线等) 边框颜色*/
	}
<div class="border">hello html</div>

派生选择器：

li strong{
	color: #000;
}

a标签的四种样式

/*点击前字体颜色为红色,无下划线*/
			a:link{
				color: red;
				text-decoration: none;
			}
			/*点击以后字体颜色为黑色*/
			a:visited{
				color: black;
			}
			/*鼠标移上去时,颜色为绿色*/
			a:hover{
				color: green;
			}
			/*鼠标点击未释放时颜色为蓝色;*/
			a:active{
				color: blue;
			}
			<body>
			<a href="#" >这是测试伪类选择器的</a>
			</body>

css常用样式属性

字体样式

#word{
				font-family: "宋体";
				font-size: 20px;
				font-style: italic;/*设置字体为倾斜*/
				font-weight: 400;
			}
			<div id="word">
			测试字体
		</div>

文本样式

#text{
				width: 400px;
				height: 400px;
				background: #ccc;
				color: red;
				/*text-indent: 50px;*//*首行缩进50个像素*/
				text-align: center;/*设置文本水平排列方式center、left、right*/
				line-height: 400px;/*设置行高一般设置文本垂直居中用该属性，当行高与父标签高度一致时，文本垂直居中*/
				text-decoration: underline;
			}
			<div id="text">测试文本样式</div>

鼠标外观

#cursor{
				font-size: 20px;
				cursor: help;/*设置鼠标样式,pointer为手指形状 ,wait为等待的样式 ,help为帮助，text为文本样式*/
			}
			<div id="cursor">测试鼠标样式</div>

背景图片

#bgimage{
				width: 300px;
				height: 300px;
				background-color: #ff0;
				background-image: url("img/11.JPG");
				background-repeat: no-repeat;
				/*background-size: 300px 300px;*/设置图片大小
				background-position: center center;/*设置图片位置*/
			}

浮动

<head>
		<meta charset="{CHARSET}">
		<title>浮动</title>
		<style>
			div{
				width: 200px;
				height: 200px;
			}
			#first{
				background-color: red;
				float: left;
			}
			#second{
				background-color: blue;
				float: left;
			}
			#third{
				background-color: green;
				float: left;
			}
			#last{
				width: 800px;
				height: 400px;
				background-color: yellow;
				clear: both;/*清除前面的浮动对自己的影响*/
			}
		</style>
	</head>
	<body>
		<div id="first"></div>
		<div id="second"></div>
		<div id="third"></div>
		<div id="last">12</div>
	</body>

盒子模型

body{
				margin: 0px;
				padding: 0px;/*消除body自带的8px外边距*/
			}
			#box{
				width: 200px;
				height: 200px;
				background-color: brown;
				/*padding: 10px 20px 30px 40px;*//*上右下左*/
				/*border: 20px solid black;*/
				margin: 0 auto;/*设置左右居中*/
			}

Adela0916

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css学习

css层叠样式表使用方式div标签特点：自动换行如果没有设定宽高，宽度是独占一行，高度由内容决定通常用于布局span标签特点：不会自动换行如果没有设定宽高，宽度和高度都由内容决定通常用于文本样式调整行内样式（不适合代码复用）直接在标签中使用style属性即可 <div style="width: 500px; height:...
复制链接

扫一扫