CSS:神奇的网页美容师

最新推荐文章于 2024-10-13 21:23:02 发布

Intellectual_Li

最新推荐文章于 2024-10-13 21:23:02 发布

阅读量186

点赞数

文章标签： css

本文链接：https://blog.youkuaiyun.com/Intellectual_Li/article/details/114197138

版权

本文介绍了CSS相关知识。CSS即层叠样式表，可装饰网站。文中阐述了其组成与引入方式，介绍了简单和复合选择器，列举文字、文本、背景等重要属性，强调盒子模型，还讲解了静态、相对、绝对定位等布局方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们有托尼老师为我们量身定制一款发型，而CSS正是网页的美容师。要想使自己的网页精美而又酷炫，那么你有必要学好CSS。

思维导图：

1、CSS简介

1.1 什么是CSS？
CSS为(Cascading Style Sheets)缩写
中文：层叠样式表
1.2 CSS有什么作用
在我们的前期学习中，单用HTML写出来的页面，我们会发现其样式并不好看，但如果有了CSS的加入，东施变西施。
因此，CSS便是用来装饰自己的网站的。
1.3 CSS如何使用
1.3.1 首先知道CSS的组成
CSS 由两个主要的部分构成：选择器，声明（属性+值）。
例如:`

h1 {
/*颜色改为金色/
color: gold;
}

`
*1.3.2 如何引入CSS
1、内嵌式引入，例如


<head>

<style type="text/css">

...此处写CSS样式

</style>

</head>

2、行内样式引入，例如

<h1 style="font-size:36px;">行内样式引入</h1>

3、外链样式引入，例如

<style type="text/css">

@import"mystyle.css"; 此处要注意.css文件的路径

</style>

4、嵌入样式引入，例如

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

2、CSS的选择器

2.1什么是选择器
所谓的CSS选择器就是CSS当中已经定义好的用来选中某些元素的固定语法，他的作用就是选中我们想要设置样式的元素
2.2有哪些选择器
在CSS中有多种选择器，认为的分为两大类：简单选择器和复合选择器
2.3简单选择器
1.标签选择器：通过标签的名字来命名的

 body{color:red;}

2.ID选择器：唯一，不可重复

<style>
	#id名 {
		属性1: 属性值;
		属性2: 属性值;
		··· ···
	}
</style>

3.类选择器：单独一个或几个

<style>
	.类名 {
		属性1: 属性值;
		属性2: 属性值;
		··· ···
	}
</style>

4.全选择器：用于将页面中所用的标签进行统一修改

<style>
	* {
		属性1: 属性值;
		属性2: 属性值;
		··· ···
	}
</style>

2.4复合选择器
1.后代选择器（包含选择器）
可以选择父元素里面的子元素，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。

style>
	<--! 表示元素1里面所有的元素2，只选择了元素2 -->
	元素1 元素2 {
		属性1: 属性值;
		属性2: 属性值;
		··· ···
	}
</style>

2.子（元素）选择器
与后代选择器的区别在于：只能选择某元素的最近一级子元素，即直接后代。
3.并集选择器
用于多组标签选择选择相同的样式。最后一个选择器不需要加逗号。

<style>
	元素1,
	元素2 {
		属性1: 属性值;
		属性2: 属性值;
		··· ···
	}
</style>

4.伪类选择器
用于向某些选择器添加效果，比如给链接添加特殊效果，或选择第一个，第n个元素。

<style>
	a{
		text-decoration: none;
		color: skyblue;
	}
	a:hover {
		color: red;
	}
</style>
<body>
	<a href="#"></a>
</body>

3、CSS的重要属性

3.1文字属性
font-size:字号大小
font-family:字体
font-weight：字体粗细
font-style:字体风格
3.2文本属性
color:文本颜色
line-height:行间距
text-align:水平对齐方式
text-indent:首行缩进
3.3背景属性
background-image：背景图片
background-position：背景位置

4、CSS的盒子模型（重中之重）

一张图，让你明白。
在这里插入图片描述
盒子边框（border）

border : border-width || border-style || border-color 

none：没有边框即忽略所有边框的宽度（默认值）

solid：边框为单实线(最为常用的)

dashed：边框为虚线  

dotted：边框为点线

double：边框为双实线

内边距（padding）

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

外边距（margin）

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:上外边距

margin:上外边距 右外边距 下外边距 左外边

5、CSS的布局

1.静态定位
position:static;
默认值，不写position相当于写上position:static;以前没学定位的时候其实都是静态定位，元素在它原本的位置显示，即使加了top、left等也不起作用。

2.相对定位
相对定位是相对于自身的原始位置进行平移，如果设置position：relative；表示相对定位。
z-index:值越大越在上面
3.绝对定位
子容器相对于父容器的定位，如果没有父容器，则相对于body定位。