CSS（一）：CSS概述、CSS引入方式、CSS优先级、CSS代码格式、CSS属性；CSS选择器；尺寸和颜色单位、背景和文本设置

最新推荐文章于 2023-05-07 16:13:20 发布

m0_50134014

最新推荐文章于 2023-05-07 16:13:20 发布

阅读量376

点赞数

分类专栏：前端文章标签： css 前端 css3

本文链接：https://blog.csdn.net/m0_50134014/article/details/120915894

版权

一、CSS

CSS是层叠样式表（Cascading Style Sheets）用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
意为层叠样式表，与HTML相辅相成，实现网页的排版布局与样式美化

组织网页结构主要有两种方式：
表格嵌套表格
DIV+CSS
早期的网页都是表格套表格的方式实现的，这种方式对于比较简单的页面效果尚可，一旦页面稍微复杂一些，使用起来就十分的麻烦，现阶段的大部分网页都主要使用DIV+CSS的方式，只在局部使用表格嵌套方式

利用标签中style属性来改变每个标签的显示样式。
例：

<p style="background-color:#FF0000; color:#FFFFFF">
	p标签段落内容。
</p>

~~~html
<head>
<style type=”text/css”>
p { color:#FF0000;}
</style>
</head>
~~~

通过head标签中link标签来实现，前提也是先要有一个已定好的CSS文件。
例：
<link rel="stylesheet"type="text/css" href="css_3.css" media="screen" />
注：可以通过多个link标签链接进来多个CSS文件。重复样式以最后链接进来的CSS样式为准。

三大原则：就近、具体、重要!important):
内联样式(标签内属性style,1000)->
选择器(匹配文档标签，然后为标签添加样式，在头部style标签中设置)->
外联样式(链接到外部css文件，样式表文件中借助选择器匹配元素应用样式,在头部link标签中设置，如link rel=“stylesheet” href=“demo.css” type=“text/css”,)

选择器名称 { 属性名：属性值1 ; 属性值2 属性值3 ；属性名：属性值；…….}
- 属性与属性之间用分号隔开
- 属性与属性值直接按用冒号连接
- 如果一个属性有多个值的话，那么多个值用空格隔开。

我们知道元素分为行内元素和块级元素，而display属性可以修改元素的显示方式。
如图-1所示：
在这里插入图片描述

*visibility也可以实现隐藏，不同的是display不显示，也不占用空间，而visibility隐藏，但是空间仍然占用。

属性	含义
vertical-align	设置或检索对象内容的垂直对其方式。
text-align	设置或检索对象中文本的对齐方式。

关注