5.CSS基础

最新推荐文章于 2025-04-06 18:00:05 发布

小阿宁的猫猫

最新推荐文章于 2025-04-06 18:00:05 发布

阅读量205

点赞数 2

分类专栏： # CSS WEB 文章标签： css html php

本文链接：https://blog.youkuaiyun.com/dyjkl/article/details/125646638

版权

WEB 同时被 2 个专栏收录

33 篇文章

订阅专栏

CSS

7 篇文章

订阅专栏

CSS基础

1.什么是CSS

层叠样式表

样式可定义HTML元素的显示效果
样式通常存储在样式表中
使用外部样式表可以极大提高工作效率，外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

2.CSS语法

(1)CSS 由两个部分构成：

选择器，以及1条或多条声明

比如:

h1{color:blue;font-size:16px;}
其中:

h1：选择器
color、font-size：属性
blue、16px：值
选择器通常是需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性是希望设置的样式属性。每个属性有一个值，多个属性和值被冒号分开。

(2)注释：

以 /* 开始, 以 */ 结束

3.CSS选择器

(1)id选择器：
id选择器可以为标有特定 id 的 HTML 元素指定样式，HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

(2)class选择器：
class 选择器用于描述一组元素的样式，class选择器有别于id选择器的是可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示，

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
.center {text-align:center;}

指定特定HTML元素使用class

p.right
	{
		text-align:right;
		color:red;
	}

4.CSS样式表

(1)外部样式表(External style sheet)

用于当样式需要应用于很多页面时

要先建立一个css文件,在里面写好内容,在html头部引入

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

css文件:

hr {color:sienna;}
p {margin-left:20px;}
body {background-color:blue;}

(2)内部样式表(Internal style sheet)

用于单个文档需要特殊的样式设计

用<style>,里面可以写各种选择器

(3)内联样式(Inline style)

会要将表现和内容混杂在一起，会损失掉样式表的许多优势，需请慎使用。

(4)多重样式优先级

内联样式 > 内部样式 >外部样式 > 浏览器默认样式

5.运行代码

<!DOCTYPE html>
<html>
<head>
	<title>语法、选择器与样式表及其优先级</title>

	<!-- 定义外部样式 -->
	<link rel="stylesheet" type="text/css" href="amiao.css">


	<style>         /* 定义内部样式表 */

    /* 选择器实例 */
	h1
	{
		color:blue;      /*颜色的英文不要写错了*/
		font-size:20px;
	}

	/* id选择器实例 */
	#part1                /* 定义了id选择器的样子 */
	{
		width:400px;
		text-align:center;
		color:red;
	}

	/* class选择器实例 */
	.center
	{
		text-align:center;      /* 输入的内容居中 */
		color:green;
	}

	/* 指定特定HTML元素使用class实例 */
	p.right
	{
		text-align:right;
		color:red;
	}

	/* 定义内联样式 */
	.Font
	{
		font-size:10px;
	}

	</style>

</head>


<body>
	<h1>语法、选择器与样式表及其优先级</h1>
	<div id="part1"> 这是一个id选择器</div>
	<h1 class="center">标题居中</h1>
	<div class="center">区块居中</div>
	<p class="right">p标签right显示</p>
	<div class="right">div标签无效果</div>
	<div class="bigFont">外部样式表</div>
	<p class="Font">非常小的一行字，内联样式</p>
</body>

</html>

amiao.css

.bigFont
{
	font-size:45px;
	font-weight:bold;
}

6.运行结果

在这里插入图片描述