CSS入门教学

最新推荐文章于 2022-12-07 15:15:22 发布

丶吃瓜

最新推荐文章于 2022-12-07 15:15:22 发布

阅读量420

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/m0_55870194/article/details/114734558

版权

本文详细介绍了CSS的基础知识，包括CSS的分类、选择器、元素的分类、常用样式等方面。从CSS简介、入门到选择器的详细讲解，如基本选择器、层次选择器、结构伪类选择器等，再到元素的分类和常用样式，如文本字体样式、背景、边框和浮动等。此外，还讨论了CSS的兼容性和如何处理浏览器之间的差异。

摘要由CSDN通过智能技术生成

CSS

1. CSS简介

层叠样式表(Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS自1994年CSS1发展至今到CSS3。1998年5月W3C发表了CSS2，紧接着2001年微软发布了IE6，很大程度推动了CSS发展。CSS2 的规范是基于 CSS1 设计的，包含了 CSS1 所有的功能，并扩充和改进了很多更加强大的属性。包括选择器、位置模型、布局、表格样式、媒体类型、伪类、光标样式。然后接着就是CSS3，事实上，CSS3早于1999年已经开始制订，直到2011年6月7日，CSS 3 Color Module终于发布为W3C Recommendation。从CSS3开始，CSS规范就被拆成众多模块（module）单独进行升级，或者将新需求作为一个新模块来立项并进行标准化。因此今后不会再有CSS4、CSS5这种所谓大版本号的变更，有的只是CSS某个模块级别的跃迁。

2. 入门

CSS是基于结构，美化结构的，所以结构是基础。
```
<body>
    <h1>标题标签</h1>
</body>
```
CSS代码我们写在head的style标签中，对这个h1标签进行修饰，改变文字颜色为红色。
```
<style type="text/css">
    h1{
      
        color: red;
    }
</style>
```
在游览器中运行，我们发现标题文字已经成功变成红色了。

3. CSS的分类

CSS根据导入的位置可以分为3类：行内样式、内部样式、外部样式。

行内样式

行内样式是定义在标签内部的style属性中。语法为：

<元素 style=" key1: value1 ; key2: value2 ; …" >

<h1 style="color: red;">标题标签</h1>

缺点：结构跟样式混乱，不具有重用性。

内部样式

内部样式是定义在style标签中，语法为：

<style type="text/css">
    选择器{
    	key1: value1;
    	key2: value2;
    	......
    }
</style>

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			h1{
    
				color: red;
			}
		</style>
	</head>
	<body>
		<h1 style="color: red;">标题标签</h1>
	</body>
</html>

缺点：如果有多个文件需要引用这个样式的话，无法重用

外部样式

外部样式把CSS样式定义在外部的CSS文件中。语法同内部样式。

style.css

h1{
   
    color: red;
}

将外部样式文件引入到需要的文件中

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
       <!-- 引入需要的外部样式 --> 
		 <link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
		<h1 style="color: red;">标题标签</h1>
	</body>
</html>

4. 选择器

作用：把定义的样式跟想生效的元素进行配对连接。

4.1 基本选择器

选择器	语法	例子	描述
类选择器	.class	.intro	选择 class=“intro” 的所有元素。
id选择器	#id	#firstname	选择 id=“firstname” 的所有元素。
标签选择器	element	p	选择所有元素。
通配符选择器	*	*	选择所有元素。

4.2 层次选择器

选择器	语法	例子	描述
群组选择器	element,element	div,p	选择所有元素和所有元素。
后代选择器	element element	div p	选择元素后代中所有元素。
子选择器	element>element	div>p	选择元素的所有儿子元素。
相邻弟弟选择器	element+element	div+p	选择紧接在元素之后的弟弟元素。
所有弟弟选择器	element1~element2	div~p	选择元素的所有弟弟元素。

4.3 结构伪类选择器

选择器	语法	例子	描述
第一个子元素	:first-child	p:first-child	选择属于父元素的第一个子元素且这个元素为元素。
最后一个子元素	:last-child	p:last-child	选择属于父元素最后一个子元素且这个元素为元素。
第一个子元素	:first-of-type	p:first-of-type	选择在父元素中第一个p元素。不受其它元素影响。
最后一个子元素	:last-of-type	p:last-of-type	选择在父元素中最后一个p元素。不受其它元素影响。
第N个子元素	:nth-last-child(n)	p:nth-last-child(3)	选择属于父元素的第3个子元素且这个元素为元素。
第N个子元素	:nth-of-type(n)	p:nth-of-type(3)	选择在父元素中第3个p元素。不受其它元素影响。
倒数第N个子元素	:nth-last-child(n)	p:nth-last-child(3)	选择属于父元素的倒数第3个子元素且这个元素为元素。
倒数第N个子元素	:nth-last-of-type(n)	p:nth-last-of-type(3)	选择在父元素中倒数第3个p元素。不受其它元素影响。

4.4 属性选择器

语法	例子	描述
[attribute]	[target]	选择带有 target 属性所有元素。
[attribute=value]	[target=_blank]	选择 target="_blank" 的所有元素。
[attribute*=value]	a[src*=“abc”]	选择其 src 属性中包含 “abc” 子串的每个元素。
[attribute$=value]	a[src$=".pdf"]	选择其 src 属性以 “.pdf” 结尾的所有元素。
[attribute^=value]	a[src^=“https”]	选择其 src 属性值以 “https” 开头的每个元素。

4.5 优先级

选择器	权值

最低0.47元/天解锁文章

丶吃瓜

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS入门教学

CSS1. CSS简介层叠样式表(Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS自1994年CSS1发展至今到CSS3。1998年5月W3C发表了CSS2，紧接着2001年微软发布了IE6，很大程度推动了CSS发展。CSS2 的规范是基于 CSS1 设计的，包含了 CSS1 所有的功能，并扩充和改进了很多更加强大的属性。包括选择器、
复制链接

扫一扫