HTML基础（CSS）

最新推荐文章于 2020-10-24 01:41:45 发布

JachinDo

最新推荐文章于 2020-10-24 01:41:45 发布

阅读量234

点赞数

分类专栏： JAVA后端学习文章标签： java 后端前端 CSS

本文链接：https://blog.csdn.net/Newbie_J/article/details/88738343

版权

JAVA后端学习专栏收录该内容

21 篇文章 0 订阅

订阅专栏

HTML基础（CSS）

一、html代码中引入CSS代码

<!-- 1css的需求.html -->
<head>
	<!-- 方法一： -->
	<style type="text/css">
		a{
			color: #F0F;
			text-decoration: none;
		}
	</style>
	<!-- 方法二 -->
	<link href="1.css" rel="stylesheet"/>
	<!-- 方法三 -->
	<style type="text/css">
		@import url("1.css");
	</style>

	<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
	<title>CSS</title>
</head>
<body>
	<!-- 方法四 -->
	<a style="color:#F0F;text-decoration: none" href="#">新闻标题1	</a>
	<a href="#">新闻标题2	</a>
	<a href="#">新闻标题3	</a>
	<a href="#">新闻标题4	</a>
</body>

其中方法二、三为引入外部CSS文件:

/*1.css*/
a{
	color: #F0F;
	text-decoration: none;
}

二、选择器

1、标签选择器

上述代码中：a{…}为标签为a的所有内容应用该CSS代码。

2、类选择器

.class{…}。

相当于可以自定义应用CSS代码的范围，在需要应用的内容的标签增加class属性（不能以数字开头）。且类选择器样式优先于标签选择器。

<head>
	<style type="text/css">
		/*div{
			color: #F00;
			font-size: 24px;
		}*/
		.two{
			background-color: #0F0;
			color: #F00;
			font-size: 24px; 
		}
	</style>
	<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
	<title>CSS</title>
</head>
<body>
	<div>这个是第一个div标签</div>
	<div class="two">这个是第二个div标签</div>
	<a href="#">新闻标题</a>
</body>

3、id选择器

优先级优于类选择器
id属性值也不能以数字开头
id属性值在一个html页面只有一个

#one{
			background-color: #FF9;
			color: #999;
			font-weight: 500;
		}
<div id="one">这个是第二个div标签</div>

4、交集选择器

对选择器1中的选择器2里面的数据进行样式化。

div span{
			background-color: #999;
			font-size: 24px;
		}

<div id="one" class="test">这个是<span>第一个div标签</span>...</div>
<div id="one" class="two">这个是<span>第二个div标签</span>...</div>
<a href="#">新闻标题</a>

结果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aQd6yRQ4-1582809045114)(/Users/jc/Library/Application Support/typora-user-images/image-20190311140753471.png)]

5、并集选择器

span,a{
	border-style:solid;
	border-color:#F00;
}

6、伪类选择器

对元素处于某种状态下进行的样式。

<!-- 3.伪类选择器.html -->
<head>
<style type="text/css">
	a:link{color:#F00} /*没有被点击过*/
	a:visited{color:#0F0} /*已经被访问（点击）过*/
	a:hover{color: #00f;font-size: 24px} /*鼠标经过*/
	a:active{color: #FF0} /*选中：鼠标点击未松开*/
</style>
	
	<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
	<title>无</title>
</head>
<body>
	<a href="#">百度</a>
</body>

注意：hover必须置于link和visited之后才有效；

active必须置于hover后才有效。

三、定位

1、相对定位

以当前标签左上角为基准移动。

2、绝对定位

以页面左上角为基准移动。

3、固定定位

以浏览器左上角为基础，移动之后不会根据页面的滚动而发生变化。

三种定位情形代码如下：

<!-- 10.定位.html -->
<head>
	<style type="text/css">
		div{
			border-style: solid;
			width: 100px;
			height: 100px;
		}
		.one{
			background-color: #F00;
		}
		.two{
			background-color: #0F0;
			position: relative;
			top: 10px;
			left: 10px;
		}
		.three{
			background-color: #00F;
		}

		#ad{
			width: 400px;
			height: 200px;
			border-style: solid;
			font-size: 24px;
			color: #F00;
			position: absolute;
			top: 280px;
			left: 380px;
		}

		#ad2{
			position: fixed;
			top: 350px;
			left: 1000px;

		}

	</style>


	<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
	<title>22</title>
</head>

<body>
	<div class="one"> one</div>
	<div class="two"> two</div>
	<div class="three"> three</div>
	<div id="ad">
		<marquee scrollamount="30"> 广告</marquee>
	</div>
	<div id="ad2">
		<img src="/Users/jc/Desktop/15110529867346495.jpg" />
	</div>
</body>

网页综合结果如下:

在这里插入图片描述

JachinDo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础（CSS）

CSS一、html代码中引入CSS代码<head>  <style type="text/css"> a{ color: #F0F; text-decoration: none; } </style> ...
复制链接

扫一扫

专栏目录