CSS_notes

最新推荐文章于 2023-04-07 20:36:27 发布

annuusheli

最新推荐文章于 2023-04-07 20:36:27 发布

阅读量75

点赞数

分类专栏： about_code

本文链接：https://blog.csdn.net/annuusheli/article/details/104565340

版权

about_code 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

有CSS中文手册可以去下载。

一、CSS和HTML结合的方式

每一个HTML标签中都有一个style样式属性，该属性的值就是css代码。

<div style="background-color: #23EF3B">这是div区域</div>

使用style标签的方式。（此标签放在head标签中）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style type=“text/css”>
		div{
			background-color: #1E6378;
			color: #C72326
		}
	</style>
</head>
<body>
	<div style="background-color: #23EF3B">这是div区域</div>
	<span style="background-color: #11299B">这是span区域</span>
</body>
</html>

注意

在head中的标签会被首先解析，于是相应的样式就被加载了，后续在body中如果有相同的样式定义，就会被覆盖，这样的原理可以减小工作量。
上面的方式只对，同一个页面有效，对于不同的页面，可以采用下面的方式。

把CSS封装成一个文件进行导入的方式：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style type="text/css">
		/*注意这里是CSS相关的内容，可以使用CSS中的注释方式*/
        @import url("1.css")
	</style>
</head>
<body>
	<div>这是div区域</div>
	<div>这是div区域</div>
	
	<span>这是span区域</span>
</body>
</html>

注意：url括号后面要有分号，如果导进来的样式和本页面定义的样式重复，以本页面的样式为准

使用HTML中的link标签，将相应的CSS文件链接到此文件中。

可以通过多个link标签链接进来多个CSS文件，重复样式以最后链接进来的CSS样式为准

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	
	<link rel="stylesheet" href="1.css" type="text/css"/>
	<style type="text/css">
		/*@import url("1.css")*/
	</style>
</head>
<body>
	<div>这是div区域</div>
	<div>这是div区域</div>
	
	<span>这是span区域</span>
</body>
</html>

3,4中所使用的CSS文件：

@charset "utf-8";
/* CSS Document */
/*可以对每个选择器分别定义CSS文件，也可把所有的都定义在一个CSS文件中。
div{
	background-color: #1E6378;
	color: #C72326
}
span{
	background-color: #E7080B;
	color:#3359C0
}

二、CSS代码格式

选择器名称{属性名：属性值；属性名：属性值。。。}

如果一个属性有多个值的话，那么多个值用空格隔开。

三、选择器

就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。

选择器共三种：

html标签名选择器，使用的就是HTML的标签名，如上例所示；
class选择器，其实就是使用标签中的class属性。（优先级比标签选择器的高）

可以操作同一种类型的标签，还可以操作不同类型的标签：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	type="text/css"/>-->
	<style type="text/css">
		div{
			background-color: #0C10E1;
			color: #FFFFFF
		}
		div.haha{  <!--只对div中class属性为haha的标签进行操作-->
			background-color: #A2C423
		}
	</style>
</head>
    
<body>
	<div>这是div区域</div>
	<div class="haha">这是div区域</div>
	
	<span>这是span区域</span>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	type="text/css"/>-->
	<style type="text/css">
		div{
			background-color: #0C10E1;
			color: #FFFFFF
		}
		.haha{    <!--对所有class属性为haha的标签进行操作-->
			background-color: #A2C423
		}
	</style>
</head>
<body>
	<div>这是div区域</div>
	<div class="haha">这是div区域</div>
	
	<span class="haha">这是span区域</span>
	<p class="haha">这是我的第一行文字</p>
</body>
</html>

注意：class选择器可以定义预定义样式，可以实现一些动态效果，当触发某个事件时，可以修改相应标签中的class属性值，从而让预定义样式发挥作用，实现页面的风格切换

id选择器（其实使用的是标签中的id属性。）

通常该id属性的取值是唯一的，因为此属性除了给css使用外，还可以被js使用

id通常都是为了去标识页面中的一些特定区域去使用的。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style type="text/css">
		#qq{  <!--同样可以在#前面加上相应的标签名称，表示只对这类标签的相应的属性进行操作-->
			background-color: #CED826;	
		}
	</style>
</head>
<body>
	<div id="qq">这是div区域</div>
	<div>这是div区域</div>
	
	<span id="qq">这是span区域</span>
	<p id="qq">这是第一行文字</p>
</body>
</html>

四、样式的优先级

一般倩况下，后加载的为主：由上到下，由内到外，优先级由低到高。

标签选择器<类选择器<id选择器<style属性

五、扩展选择器

关联选择器

标签是可以嵌套的，要让相同标签中的不同标签显示不同的样式，就可以用此选择器

<style>
    span b a img{
        background-color: #09F;
        color:#FFF;
    }
</style>
表示让span中的b标签中的a标签中img标签显示对应的样式。

组合选择器

对多个不同的选择器进行相同样式设置的时候应用此选择器。

<style>
.haha,div b{  /*对多种选择器进行相同样式的定义*/
	background-color:#000;
    color:#C00;
}
</style>

伪元素选择器

其实就是在html中预先定义好的一些选择器。称为伪元素。实际对应标签的不同状态。

L(link), H(hover), A(actived), V(visited)：在所有的标签中应该都可以实现

P标签：

first-line 段落的第一行文本。
first-letter 段落中的第一个字母

:focus 焦点伪元素

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style type="text/css">
		/*未访问*/
		a:link{
			background-color: #060B60;
			color: #FFFFFF;
			text-decoration: none;
			font-size: 18px;
		}
		/*鼠标悬停*/
		a:hover{
			background-color: #FFFFFF;
			color:#234193;
			font-size: 24px;
		}
		
		/*点击效果*/
		a:active{
			background-color: #000000;
			color:#FFFFFF;
			font-size: 36px;
		}
		
		/*访问后效果*/
		a:visited{
			background-color: #3C7608;
			color: #000000;
			text-decoration: line-through
		}
		
		input:focus{    /*对input的焦点伪元素*/
			background-color: #152778
		}
	</style>
</head>
<body>
	
	<input type="text" />
	<input type="text" />
	<hr/>
	<a href="www.baidu.com">伪元素选择器</a>
	<hr/>
	<div id="qq">这是div区域</div>
	<div>这是div区域</div>
	
	<span id="qq">这是span区域</span>
	<p id="qq">这是第一行文字</p>
</body>
</html>

六、CSS的盒子模型（div+CSS完成布局）

之前的布局都是通过table来完成的，但是灵活性不高。于是产生了这种div+CSS的形式。

边距（div盒子本身的边的宽度）: border

上border-top
下border-bottom
左border-left
右border-right

内边距（文字距离div盒子的距离）: padding

padding-top
padding-bottom
padding-left
padding-right

#div_1{
	background-color:#F90;
	padding:20px 100px 200px 300px;/*是指div区域中，文字的内边距，顺序依次是：上右下左， 可以用钟表的顺时针来记忆。*/
}

外边距（div盒子的边距离其外部的距离）: margin

margin-top
margin-bottom
margin-left
margin-right

在这里插入图片描述

CSS的布局-漂浮

Layout 中的float属性

left
right
both
none

定位属性

position

static
absolute
relative

应用

可以完成图像签名的效果，即让文字漂浮在图片上。
在布局时我们大多都是使用div标签将文字和图片进行封装，然后再整体进行整体的封装，之后就方便进行相关的布局操作。

距离其外部的距离）: margin

margin-top
margin-bottom
margin-left
margin-right

[外链图片转存中…(img-z6cCRQQd-1582898446808)]

CSS的布局-漂浮

Layout 中的float属性

left
right
both
none

定位属性

position

static
absolute
relative

应用

可以完成图像签名的效果，即让文字漂浮在图片上。
在布局时我们大多都是使用div标签将文字和图片进行封装，然后再整体进行整体的封装，之后就方便进行相关的布局操作。

annuusheli

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录