CSS笔记(语法)

##CSS 规则:

这里写图片描述

  • 由选择器和声明(一条或多条)组成:
  • 选择器通常是您需要改变样式的 HTML 元素;
  • 每条声明由一个属性和一个值组成。
  • CSS声明总是以分号(;)结束,声明组以大括号({})括起来:
p {
	color:red;
	text-align:center;
}

CSS 注释:

  • CSS注释以 “/*” 开始, 以 “*/” 结束。

选择器

  • 标签选择器:
标签名 {
	声明1;
	声明2;
	...
}
  • **id、class属性选择器:**在HTML中,标签的id属性与class属性的选择器分别使用“#”、“.”来标识;
  • id、class属性不要以数字开头,在 Mozilla/Firefox 浏览器中不起作用。
/*
假设html中有以下两个标签div、p
<div id="title"></div>
<p class='content'></p>
*/

/* 那么id属性为“title”的div标签选择器为 */
#title {
	color:red;
	text-align:center;
}

/* 那么class属性为“content”的p标签选择器为 */
.content {
	color:red;
	text-align:center;
}

如何插入样式表

外部样式

  • 外部样式是指从外部文件中引入样式,对整个html中相同标签有效;
  • **用法:**使用 link 标签链接到样式表,属性href的值是css文件地址。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式

  • 内部样式是指直接写在html内部css样式,对整个html中相同标签有效;
  • **用法:**在head标签中插入style标签,style标签里写入css样式。
<head>
<style>
hr {
	color:sienna;
}
p {
	margin-left:20px;
}
body {
	background-image:url("images/back40.gif");
}
</style>
</head>

内联样式

  • 内联样式是指直接写在标签中的css样式,只对当前样式有效;
  • **用法:**在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

多重样式

  • 可以多做样式一起混合使用,需要考虑样式的优先级;
  • 优先级:内联样式 > 内部样式 > 外部样式。

欢迎访问我的个人站点:http://bgods.cn/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值