CSS技术入门

最新推荐文章于 2024-09-06 15:44:48 发布

做个疯狂的程序员

最新推荐文章于 2024-09-06 15:44:48 发布

阅读量392

点赞数 1

分类专栏： javaWeb 文章标签： css

本文链接：https://blog.csdn.net/qq_44972915/article/details/108295210

版权

javaWeb 专栏收录该内容

21 篇文章 3 订阅

订阅专栏

CSS （层叠样式表）

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

CSS工作原理

CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和显示的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。
样式规则是可应用于网页中元素，如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中，外部样式单保存在独立的文档中，网页通过一个特殊标签链接外部样式单。
名称CSS中的“层叠（cascading）”表示样式单规则应用于HTML文档元素的方式。具体地说，CSS样式单中的样式形成一个层次结构，更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定，从而实现级联效果

以上内容均采自百度百科 CSS定义的规则具体如下：

选择器{属性1：属性值1；属性2：属性值2；…}

选择器用于指定CSS样式作用的HTML对象，花括号内的属性是对该对象设置的具体样式。其中，属性和属性值以“键值对”的形式出现。

CSS样式的引用方式

CSS的引用方式有4中，分别为：链入式、行内式（内联样式）、内嵌式和导入式。

1.内嵌式

将CSS代码集中写在HTML文档的 head 头部中，并用style标记定义
在这里插入图片描述

2.链入式

可以将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link .>标记将外部样式表文件链接到HTML文件中，其基本语法为：

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

herf : CSS文件地址
type : 定义所链接文档的类型，“”text.css“表示链接的外部文件为CSS
rel : 表明前文档与被链接文档的关系，“sylesheet”表示被连接文档为一个样式表文件

改编上面的例子

html文件内容

<!DOCTYPE html PUBLIC>
<html>
<head>
	<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
	<p>这是一段宋体，字体大小50px，红色的字体</p>
</body>
</html>

style.css文件内容

p{color:red; font-size:50px; font-family:宋体;}

效果图

在这里插入图片描述

CSS选择器和常用属性

CSS共有四种选择器类型：

标记选择器

标记名{属性1：属性值1；属性2：属性值2；…}

类选择器

. 类名{属性1：属性值1；属性2：属性值2；…}

id选择器

#id名{属性1：属性值1；属性2：属性值2；…}

通配符选择器

*{属性1：属性值1；属性2：属性值2；…}

<!DOCTYPE html public>
<html>
<head>
	<title>CSS选择器</title>
	<style type="text/css">
		<!--类选择器-->
		.red{color:red;}
		.green{color:green;}
		<!--id选择器-->
		#font30{font-size:30px;}
		#font50{font-size:50px;}
		<!--通配符选择器-->
		*{font-weigh:bold;}
	</style>
</head>
<body>
	<p class="green" id="font30">红色/大小为30px</p>
	<p class="green" id="fint50">绿色/大小为50px</p>
</body>
</html>