CSS入门

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

蓝莓小蛋糕.

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

阅读量1.3k

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/weixin_51186210/article/details/113405068

版权

CSS入门

**
1.CSS(Cascading Style sheet)层叠样式表。他是一种不需要编译，可直接由浏览器执行的标记性语言。实现结构与表现的分离。

2.CSS核心基础
2.1CSS样式规则
选择器{属性1：属性值1；属性2：属性值2；属性n：属性值n；}

在以上的样式规则中，选择器用于指定CSS样式作用的HTML对象，大括号内是对该对象设置的具体样式。属性和属性值之间用英文的冒号，连接多个属性之间用英文的分号进行区分。

CSS代码中的特点：
1.CSS样式中选择器严格区分大小写，属性和属性值不区分大小写，通常情况下都使用小写。

2.多个属性之间必须要用英文状态下的分号隔开，最后一个属性后的分号可以省略。但是为了便于增加新样式最好保留。

3.如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的双引号。

4.在CSS代码中，空格是不被解析的，花括号及分号前后的空格可有可无。因此可以使用空格键 TAB键回车键等对样式代码进行排版，可提高代码的可读性。属性值和单位之间不允许出现空格。

2.2引入CSS样式表
常用的方法有3种：行内式、内嵌式、链入式。

1.行内式：行内式也称为内联样式，是通过style属性来设置元素的样式，其基本语法为:
<标记名 style=“属性1：属性值1；属性2：属性值2；属性n：属性值n”>内容</标记名>
行内式只对其所在的标记及嵌套在其中的子标记起作用。
2.内嵌式：内嵌式是将CSS代码集中写在HTML文档的<head>头部标记中，并且使用<style>标记定义，其基本的语法格式如下：

<head>
<style type=”text/css”>
  选择器{属性1：属性值1；属性2：属性值2；属性n：属性值n；}
</style>
</head>

内嵌式CSS样式只对其所在的HTML页面有效，因此，仅设计一个页面的时候，使用内嵌式样式表是个不错的选择，但是如果是一个网站，不建议使用这种方式。

在这里插入图片描述

3.链入式：链入式是将所有的样式放在一个或者多个以.css为扩展名的外部样式文件中，通过标记将外部的样式表文件链接到HTML文档中。其基本语法格式为：

<head>
<link href=”CSS文件的路径” type=”text/css” rel=”stylesheet”/>
</head>

Href:定义所链接外部样式文件的路径，可以是相对路径或者是绝对路径。

Type:定义所链接文档的类型，在这里我们需要指定为text/css，表示链接的外部文件为CSS样式表。

Rel:定义当前文档与被链接文档之间的关系，在这里我们需要指定为stylesheet，表示被链接的文档是一个样式表文件。
例：h2{text-align:center;}
p{
font-size:16px;
color:blue;
text-decoration:underline;
}

链入式最大的优点是同一个CSS样式表可以被不同的HTML页面链接使用，同事HTML页面也可以通过多个标记链接多个CSS样式表。

2.3CSS基础选择器
1.标记选择器：
标记选择器是指用HTML的标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS样式。
语法格式：标记名{属性1：属性值1；属性n：属性值n；}
用标记选择器定义的样式对页面中该类型的所有标记都生效。
标记选择器最大的优点是能够快速为页面中同类型的标记统一样式，同时他的缺点也非常明显，不能差异化设计样式。

2.类选择器：
类选择器使用”.”(英文点号)进行标识，后面紧跟类名，语法格式为：
.类名{属性1：属性值1；属性n：属性值n；}
类选择器最大的优势是可以为元素对象定义单独或相同的样式。
在这里插入图片描述