CSS基础

最新推荐文章于 2024-07-14 10:34:53 发布

奔跑的小雄

最新推荐文章于 2024-07-14 10:34:53 发布

阅读量95

点赞数

分类专栏： CSS 文章标签： html css

本文链接：https://blog.csdn.net/m0_51712775/article/details/109207166

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS基础

CSS的概念
- CSS的作用
- CSS能做什么
CSS基础特性
CSS的基础语法
CSS选择器

第一篇不知道从哪里开始下手写起，写了CSS基础，为了方便自己后期复习用，其它的慢慢补充，希望各位大佬多指正。

CSS的概念

CSS全称 Cascading Style Sheets，中文名称为层叠样式表(层联样式表)，主要用来操作页面元素的样式。

CSS的作用

我们在设计网页的时候，通常需要对网页中的元素进行样式设置，以达到美化页面的效果，在没有CSS的情况下，我们直接通过设置元素的属性来操作样式，如下所示：

	<body bgcolor="red" text="white">
		床前明月光<br>
		<font bgcolor="green" color="black">疑是地上霜</font>
	</body>

在这里插入图片描述

但是可以看出通过元素属性来操作样式有一些弊端，例如：在body标签中设置颜色使用的是text属性，而在font标签中设置颜色使用的是color属性，这样没有一个统一的标准对于开发人员来说增加了记忆量就是一种负重。又比如说在body中使用bgcolor来设置背景色，但是在font用bgcolor设置背景色却是不起作用的，说明了还具有局限性。正是因为存在这些问题，所以需要一种技术来解决这种问题，它就是CSS。

CSS能做什么

它为每一个元素添加了一个共同的属性，例如style属性,这个属性专门用于设置元素的样式，只要是元素的样式都可以通过这个来设置。

<font style="color: red;">1</font>
<p style="color: orange;">二</p>
<h2 style="color: pink;">a</h2>
<button style="color: blue;" type="button">A</button>

在这里插入图片描述

通过上面的代码我们知道，设置元素的样式使用style属性就可以了，如果需要设置颜色，使用color来设置就可以了。

CSS基础特性

统一性
CSS统一性指的是在设置元素样式的时候，它们拥有统一的属性名style，统一的语法来进行元素样式的设计，解决了不同元素需要不同属性去设置样式的问题。
便捷性
CSS的便捷性在于它提供了多种多样的选择器，可以通过不同的元素来批量或者单独选择元素进行样式设计，避免了在设计过程中需要去重复编写相同的代码。
分离性
CSS的分离性主要指的是在在web标准里将结构(HTML)和样式(CSS)进行分离。

CSS的基础语法

CSS的语法非常简单主要体现在以下几个部分：

行内样式
行内样式就是写在网页元素里面的CSS样式，如下代码：

<font style="color: red;">静夜思</font>
<p style="color: blue;">床前明月光</p>
<h2 style="color: pink;">举头望明月</h2>
<button style="color: green;">按钮1</button>
<h2 style="color: red;background-color: blue;">
我应在江湖悠悠
</h2>

扩展：在网页中所有元素都具有两种颜色，前景色(color)和背景色(background-color)，在CSS中只要看到了background那么它就是指背景，可能是背景图片，可能是背景颜色，也可能是背景定位等…

通过上面的代码我们知道CSS行内样式的语法格式为：

<标签名 style = "属性名:属性值;属性名:属性值"><标签名/>

内部样式表
编写到header中的style标签里面，通过CSS的选择器来选择元素进行样式设置，如下：

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				color: red;
			}
		</style>
	</head>
	<body>
		<p>1</p>
		<p>2</p>
		<p>3</p>
	</body>

通过上面的代码我们知道内部样式表的格式为：

<style type = "text/css">
	选择器{
		属性名:属性值;
		属性名:属性值；
	}
</style>

外部样式表
将CSS代码编写到外部的css文件中，然后通过link标签引入进来，引入格式如下：

<head>
   <link rel="stykesheet" href="css样式所在路径">
</head>

CSS选择器

标签选择器
标签选择器是最简单也是最常见的选择器，它通过标签的名称来选择元素，代码如下：

/* 选择了所有的p标签*/
p{
	color:blue;
	background-color:red;
}

上面的代码选中了所有的p标签为它们加了前景色和背景色

ID选择器
id选择器使用#来标识，他有几个注意事项
（1）id名称不能重复，不能为中文，也不能以数字开头
（2）一个id名只能被一个元素使用，一个元素也只能接收一个id名

<style type="text/css">
	#p1{
		color:red;
	}
</style>
<p id = "p1">哈哈哈哈</p>

上述代码则为通过id名称#p1来选择了指定的p标签，

class类选择器
class类选择器使用.来标识，它具有一些和id选择器对立的特点
（1）class名不能为中文，不能以数字开头，但是可以重复
（2）一个元素可以有多个class类名，一个class类名也可以给多个元素使用

<style type="text/css">
/* .代表的就是class   .p1代表的就是class = "p1" */
.p1{
	color:blue;
}
</style>
<p class="p1">1</p>

后代选择器
使用空格作为后代选择器，不加任何符号

<style type="text/css">
	div p{
		font-size: 20px;
	}
	/* 这个时候选中的就是div中的两个P标签，他们的字体明显变大了*/
</style>
<div id="">
	<p>A</p>
	<font size="" color="">a</font>
	<p>A</p>
</div>

子代选择器
子代选择器也是后代选择器的一种，但是比后代更为严格，它一定是子级元素，使用>来表示。

<style type="text/css">
	body>p{
		color: red;
	}
</style>
<body>
	<div id="">
		<p>百度一下，也不知道</p>
	</div>
	<p>1111</p>
</body>

在这里插入图片描述

由上面的代码可以知道，只选中了第二个p标签，而div下的p没有选中，所以可以知道子代选择器必须选择子级元素。

分组选择器
分组选择器使用,来标识，它将不同的选择器进行分组，可以将相同的样式写在一起，更加的方便。

<style type="text/css">
p,ul{
	color: red;
}
</style>
<p>111</p>
<ul>
	<li>222</li>
</ul>

上面的代码即为分组选择器的写法。

相邻兄弟选择器
使用+来标识相邻兄弟选择器，可以理解为选取紧挨着这个元素的选择器

<style type="text/css">
	div>p+h2 {
		color: red;
	}
</style>
<div>
	<p>床前明月光</p>
	<h1>海上月是天上月</h1>
	<h2>兴百姓苦</h2>
	<p>眼前人是心上人</p>
	<h2> 恨不相逢未嫁时</h2>
	<h2>似曾相识燕归来</h2>
</div>

效果图为：
在这里插入图片描述
可以看到选取的是<h2> 恨不相逢未嫁时</h2>这个元素
扩展：在开发过程中可以利用相邻兄弟选择器去排除前几项

<style type="text/css">
/* eg：排除ul下面的前三项li */
	ul>li+li+li+li{
		color: red;
	}
</style>
<ul>
	<li>第一项</li>
	<li>第二项</li>
 	<li>第三项</li>
 	<li>第四项</li>
 	<li>第五项</li>
 	<li>第六项</li>
 	<li>第七项</li>
</ul>

在这里插入图片描述

可以看到前三项已经被排除了

普通兄弟选择器
普通兄弟选择器用~来标识，它相比于相邻兄弟选择器更为松散一些，只要是后面的兄弟都可以,之前上面的相邻兄弟选择器中，将选择器改为

div>p~h2 {
	color: red;
}

效果为所有的p的兄弟h2标签都能选中
9. 属性选择器
属性选择器用[ ]来标识，它根据属性来选择元素

<style type="text/css">
	[type="text"] {
		width: 200px;
	}
</style>
姓名<input type="text" /> <br />
密码<input type="password" /> <br />
昵称<input type="text" />

上面的代码选中了type属性值为text的所有元素

扩展：属性选择器的高级用法
（1）^ 代表开始匹配

[src^="img"]{
	width:50px;
}
/* 这个表示选中src属性的属性值是以img开头的元素 */

（2）$ 代表结束匹配

[src$="jpg"]{
	width:100px;
}
/* 表示选中src属性的属性值是以jpg结尾的元素 */

（3）* 任意位置匹配

[src$="beijing"]{
	width:150px;
}
/* 表示选中src属性的属性值包含beijing的元素*/

奔跑的小雄

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS基础

CSS基础CSS的概念CSS的作用CSS的概念CSS全称 Cascading Style Sheets，中文名称为层叠样式表(层联样式表)，主要用来操作页面元素的样式。CSS的作用我们在设计网页的时候，通常需要对网页中的元素进行样式设置，以达到美化页面的效果，在没有CSS的情况下，我们直接通过设置元素的属性来操作样式，如下所示：...
复制链接

扫一扫