CSS基本语法

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>css基本语法</title>

		<style type="text/css">
			div,a,input{
				width: 100px;
				height: 100px;
			}
		</style>
	</head>

	<!--     	
     	描述:css语法
     	
     	选择器  属性  值
     	选择器{
     		属性:值;
     		属性:值;
     	}
     	
     	选择器:css是用来给html元素设置显示样式的。首先需要确定css样式表是作用于哪些元素的。
     	如何确定?使用选择器来确定css样式表作用的元素。
     	
     -->

	<body>
		<div>
			
		</div>

		<a href="css基本语法.html"></a><br />
		<input type="button" value="按钮" />
	</body>

</html>

### CSS 基础语法教程 #### 一、CSS 的三种引入方式 CSS 可以通过内嵌式、外联式以及行内式这三种方式进行引入。 - **内嵌式** 使用 `<style>` 标签定义样式,通常放置于 HTML 文件的 `<head>` 部分。这种方式仅适用于当前页面的样式设置[^2]。 ```html <head> <style> body { background-color: lightblue; } </style> </head> ``` - **外联式** 将 CSS 样式保存到独立的 `.css` 文件中,并通过 `<link>` 标签将其链接至 HTML 页面。这种方法适合多页面共享同一套样式。 ```html <!-- index.html --> <head> <link rel="stylesheet" href="styles.css"> </head> /* styles.css */ body { background-color: lightgreen; } ``` - **行内式** 利用 `style` 属性直接在 HTML 元素上定义样式。尽管简单直观,但由于其局限性(只针对单一元素生效),一般不建议作为主要方法使用。 ```html <p style="color: blue;">这是一个蓝色的文字。</p> ``` #### 二、CSS 基本语法规则 CSS 规则是由选择器和声明组成。其中,声明又分为属性及其对应的值。 ```css selector { property: value; } ``` 例如: ```css body { color: red; /* 设置文字颜色为红色 */ text-align: center; /* 文字居中显示 */ } ``` 上述代码中的 `color` 和 `text-align` 是属性名称,而 `red` 和 `center` 则是它们各自的取值范围[^3]。 #### 三、基础选择器介绍 为了更灵活地控制文档结构中的不同部分,CSS 提供了几种常见的选择器类型来匹配特定的目标对象。 1. **标签选择器** 这是最简单的形式之一,它基于 HTML 元素的名字来进行定位操作。 ```css p { font-size: 16px; /* 定义段落字体大小 */ } ``` --- #### 总结 以上内容涵盖了 CSS基本概念、引入方式以及初步的选择器应用技巧。掌握这些基础知识有助于进一步深入理解如何高效设计网页布局与视觉效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值