【CSS学习笔记一】初识CSS

最新推荐文章于 2024-06-16 11:13:32 发布

思索与猫

最新推荐文章于 2024-06-16 11:13:32 发布

阅读量154

点赞数

分类专栏： CSS学习文章标签： CSS

本文链接：https://blog.csdn.net/qq_28997735/article/details/97862768

版权

CSS学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一.什么是CSS？

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

特点：

样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

二.语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明

选择器 {属性:值;属性:值;}

选择器通常是需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是希望设置的样式属性（style attribute）。
每个属性有一个值。
属性和值被冒号分开。
CSS声明总是以分号(;)结束，声明组以大括号({})括起来
CSS注释以"/" 开始, 以 "/" 结束

例如：

<style>
	h1
	{
		color:red;
		font-size:12px;
		text-align:center;
	}
</style>

三.选择器

分别有id选择器和class选择器两种

id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 “#” 来定义

#green
{
	color:green;
}

注意： ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

class选择器

class 选择器用于描述一组元素的样式。
class 选择器有别于id选择器，class可以在多个元素中使用。
class选择器以一个点"."号显示：

p
{
	text-align:center; 
	font-size:24px;	
}
p.blue
{
	color:blue;
}
p.yellow
{
	color:yellow
}

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8">
		<title>初识CSS</title>
		<style>
			h1
			{
				color:red;       
				font-size:12px;				
			}
			.center
			{
				text-align:center; /*居中*/
			}
			p
			{
				text-align:center; 
				font-size:24px;	
			}
			p.blue
			{
				color:blue;
			}
			p.yellow
			{
				color:yellow
			}
			#green
			{
				color:green;
			}			
		</style>
	</head>
	<body>
		<h1 class = "center">我一个h1的标题怎么这么小？</h1>
		<p>我只是一个普通的居中段落</p>
		<p id = "green">羊村大草原</p>
		<p class = "yellow">我变成黄色了</p>
		<p class = "blue">我又成为蓝色了！</p>
	</body>
</html>

结果：
在这里插入图片描述

思索与猫

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【CSS学习笔记一】初识CSS

一.什么是CSS？CSS名称层叠样式表(英文全称：Cascading Style Sheets)，它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。特点：样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4....
复制链接

扫一扫

专栏目录