CSS样式基础

最新推荐文章于 2024-08-21 15:33:15 发布

鸿鹄～

最新推荐文章于 2024-08-21 15:33:15 发布

阅读量1k

点赞数 2

分类专栏：前端学习文章标签： css样式的编写 html css

本文链接：https://blog.csdn.net/yanhingwei/article/details/89224719

版权

前端学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

CSS

在html中我们已经学会了简单的标签的使用，但是这些标签的样式都很基础、单一，那我们如何使用它们编写出各种各样，精美绝伦的网站呢？这就需要CSS样式

那么css样式如何编写呢？
我们通常有三种方式：

在标签上设置style属性
写在head里面，style标签中编写样式
css样式也可以写在单独文件中，然后link标签引用

首先我们先来看第一种方式

1.在标签上设置style属性，例：

<div style="border: 1px solid  indianred;background-color: bisque;">KFC</div>

这段CSS样式展示出来的是什么效果呢？
在这里插入图片描述
首先我们看到的有KFC，这是div标签里的内容，其次我们看到有红色的方框，方框中填充了底色，在这段css样式中，我们看到有两个“；”，我们可以理解为这段css样式对两个东西的属性进行了描述，第一个是border，就是边框，它的粗细是1px（像素），solid说明它是实线框，indianred是线的颜色；第二个是background-color,这是背景色，bisque就是它的颜色，这是一个最基础的css样式

但我们很快就会发现，这样书写实在是过于麻烦，如果我们几个标签都需要相同的css样式，每次都需要在标签的style属性中重复写一次，因此为了解决这个问题，除了在标签的style属性里编写CSS样式以外，还有第二种方法就是
2.在head标签里面的style标签中编写样式（类似于C语言中的结构体和JAVA里面的构造对象），这样我们只需要把同一CSS样式在head标签下的style标签里书写一次，之后在body中需要使用时，只要在标签中调用这些样式即可，那我们如何才能调用这些写好的CSS样式，这就需要选择器，接下来我们会介绍几个常用的选择器

id选择器

<head>
	<style>
		#i1{
			background-color:#2459a2; height:48px;
		}
		#i2{
			background-color:#2459a2; height:48px;
		}
		#i3{
			background-color:#2459a2; height:48px;
		}
	</style>
</head>
<body>
	<div id="il">ff</div>
	<span id="i2">2</span>
	<div id="i3">2</div>
</body>

上面所示就是id的选择器的书写格式
#名称{
…
}
<标签 id=‘名称’></标签>

但是我们很快又会发现，我们使用选择器的初衷就是避免相同代码重复书写，然而我们在使用id选择器后我们还是把相同的样式书写了三遍，唯一不同的是，这回我们把重复的样式写在了style标签里，这并不是选择器没有意义，而是因为在HTML中id值应该唯一，不应出现重复（强行书写成若干个id相同也是可以实现的，但是这是不规范的书写），所以并不能按以下方式书写（下面是错的）

<head>
	<style>
		#i1{
			background-color:#2459a2; height:48px;
		}
	<style>
</head>
<body>
	<div id="il">ff</div>
	<span id="i1">2</span>
	<div id="i1">2</div>
</body>

那难道这个问题就无法解决吗？
这就要说到另外两个选择器

class选择器
组合选择器

让我们先看class选择器

<head>
	<style>
		.c1{
			background-color:#2459a2; height:10px;
		}
	</style>
</head〉
<body)
	<div class="c1">ff</div>
	<span class="c1">2sdfasdf gasdfasdf</span>
	<div class="c1">2</div>
</body)

它的书写格式为：

.名称{
…
}
<标签 class=‘名称’></标签>
我们可以发现class选择器就不再存在id选择器的问题，因为class的值是不要求唯一的，它可以相同

再让我们来看看组合选择器

<head>
	<style>
		#i3,#i2,#i1{
				background-color:#2459a2; height:48px;
		}
	</style>
</head>
<body>
	<div id="il">ff</div>
	<span id="i2">2</span>
	<div id="i3">2</div>
</body>

组合选择器是一个兼并的关系，只要是id=i3，i2，i1的标签都使用此样式，这个从一定程度上也解决了第一个id选择器存在的问题

标签选择器
div{
…
}
标签选择器顾名思义是对标签进行选择，例如上面这个就是所有div标签设置上使用此样式
关联选择器（层级选择器）
.C1 span div{
…
}
关联选择器又叫层级选择器，html标签是可以嵌套的，当你想精确到某个标签下的某个标签使用某CSS样式时就可以使用这个选择器，不同的层级之间用空格隔开，例如上面这个就是class=C1的标签下的span标签下的div标签使用此样式
属性选择器
input[type=‘text’] {
width:100px;
height:200px;
}
属性选择器就是对选择到的标签再通过属性再进行一次筛选，如上就是input标签中type属性为text的使用此样式

到这里我们常用的选择器就已经介绍完了，下面我们就要说一说当我们我们在同一个标签中应用了多个样式，那么到底哪一个样式会生效呢？这就涉及到了优先级的问题
优先级
首先我们看写在style标签中的样式，按照规定在style标签中的样式从上到下，上面的优先级大于下面的优先级，例如class=“c2 c1”,在style标签中c1在c2之上，那么就先执行c1的样式再执行c2的样式，初此之外写在style属性中的按书写顺序优先

CSS中的描述形式
height 高度像素
width 宽度像素，百分比
color 字体颜色
text-align:ceter 横向居中
ine-height 垂直方向居中
font-weight 字体加粗
font-size 字体大小

float

float语句在CSS中有着不可替代的作用，它能够让标签悬浮，并完成拼接
例如：我们先看下面一个语句

<div style="width: 20%;background-color: indianred;">1</div>
<div style="width: 80%;background-color: lightgrey;">2</div>

它所实现的效果就是
在这里插入图片描述
1和2分别各占一行，它们并没有因为一个是20%的长度，另一个是80%的长度就拼接起来，在同一行，现在让我们加上float

<div style="width: 20%;background-color: indianred;float: left;">1</div>
<div style="width: 80%;background-color: lightgrey;float: left;">2</div>

再看看现在的效果
在这里插入图片描述
我们发现1和2 拼接在了一起组成了100%的长度，就占了一行
在这里我们在CSS中添加了float：left，意思是靠左悬浮，当第一个靠着左边悬浮后，第二个只要在这一行有足够的空间，它就会贴着第一个靠左悬浮

虽然float很好用，但是有时候也会出现问题，例如当子标签都float后，可能就会出现遮掩父标签的情况（子标签嵌套在父标签中），这时我们就要在子标签的最后加上

<div style="clear: both;"></div>

这就可以解决这一问题

display
display语句可以改变标签的表现形式
display:none；可以使标签消失
display:inline; 可以使块级标签像行内标签一样占一部分
display:block; 可以使行内标签像块级标签一样占一整行
display:inline-block; 具有inline特点,默认自己有多少占多少，也具有block特点，可以设置高度，宽度，padding，margin

注：