CSS(一)

本文介绍了CSS的基础语法,包括选择器的分类如标签选择器、类选择器和ID选择器,以及字体和文本属性的应用。讲解了如何通过font复合属性设置字体样式,和用text-align实现文本对齐。此外,还探讨了CSS的引入方式和Chrome调试工具的使用技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

CSS语法:

主要的部分构成:选择器以及一条或多条声明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/*
				选择器{样式}
				给谁改样式{改成什么样式}
			*/
			p {
				color: red;
				font-size: 12px;
			}
		</style>
	</head>
	<body>
		<p>这是一个p标签</p>
	</body>
</html>

选择器

一般分类基础选择器复合选择器两个大类
基础选择器:标签选择器,类选择器,id选择器
标签选择器

标签名 {
	属性1: 属性值;
	属性2: 属性值;
	属性3: 属性值;
	...
}

标签选择器可以把某一类标签全部选择出来,比如所有的<div>标签和所有的<span>标签,优点能快速为页面中同类型的标签统一设置样式,缺点不能设计差异化样式,只能选择全部的当前标签
类选择器
如果想要差异化选择不同的标签,单独选一个或某几个标签,可以使用类选择器

.类名 {
	属性1: 属性值;
	...
}

多类名使用
加粗样式

<div class="red font30">亚瑟之王</div>
/*在标签class属性中写多个类名,用空格分开,标签可以分别具有这些类名的样式*/

id选择器
语法

#id名 {
	属性1: 属性值1;
	...
}

通配符选择器
使用"*"定义,它表示选择页面中所有元素(标签)
语法

* {
   属性1: 属性值1;
   ...
 }

字体属性

font-family属性来定义字体

div {font-family: Arial,'Microsoft Yahei',"微软雅黑"}
//如果有Arial就用Arial,没有就用Microsoft Yahei,在没有就使用微软雅黑

font-size设置大小

p {font-size: 20px;}

font-weight设置字体粗细

p {font-weight: bold;}
属性值说明
mormal默认值(不加粗)
bold定义粗体(加粗的)
100-900400等同于mormal,700等同于bold 不用跟单位

font-style文字样式

p {font-style: normal;}
属性值说明
normal默认值,浏览器会显示标准的字体样式
italic浏览器会显示 斜体的字体样式

font复合属性

p {
	font :font-style font-weight font-size/line-height font-family;
	/*
	必须按照上面语法格式书写,不能更换顺序,并且各个属性以空格隔开
	不需要设置的属性可以省略,但必须保留font-size和font-family属性,否则不起作用
	*/
}
属性表示说明
font-size字号通常用单位像素px,一定要跟上单位
font-family字体字体
font-weight字体粗细加粗是700或者bold,不加粗是400或者normal,数字不用跟单位
font-style字体样式倾斜是italic,不倾斜是normal
font字体连写1.有顺序的 不能随意换位置 2.字号和字体必须出现

文本属性

文本的颜色、对齐文本、装饰文本、文本缩进、行间距等
color文本颜色

 p {color: red;}
表示表示属性值
预定义的颜色值如red,green,blue
十六进制#FF0000,#FF6600,#29D794
RGBrgb(255,0,0)或rgb(100%,0%,0%)

text-align对齐文本
注意只能设置水平对齐

div {
	text-align: center;
}
属性值说明
left左对齐
reght右对齐
center居中对齐

装饰文本text-decoration
可以给文本添加下划线、上划线、删除线等

div {
	text-decoration: underline;
}
属性值说明
none默认,没有装饰线
underline下划线。链接a自带下划线
overline上划线
line-through删除线

文本缩进text-indent
通常是将段落的首行缩进

 div {text-indent: 2em;}

em是一个相对的单位,就是当前元素(font-size)1个文字的大小,如果当前元素没有设置大小,则会按照父元素的1个文字大小
行间距 line-height
行间距等于上间距+文本高度+下间距

p {line-height :26px;}
文本属性总结
属性表示说明
color文本颜色通常用十六进制 如#fff
text-align文本对齐水平方式对齐
text-indent文本缩进用于段落首行缩进2个字符 如 text-indent: 2em;
text-decoration文本修饰添加下划线underline 取消下划线none
line-height行高控制行与行之间的距离
CSS的三种引入方式
样式表优点缺点使用情况控制范围
行内样式表书写方便,权重高结构样式混写较少控制一个标签
内部样式表部分结构和样式分离没有完全分离较多控制一个页面
外部样式表完全实现结构和样式相分离需要引入最多,推荐控制多个页面
Chrome调试工具

打开Chrome浏览器按F12 或者右击"检查"
使用小技巧
1.Ctrl+滚轮可以放大开发者工具代码大小
2.左边是HTML元素结构,右边是css样式
3.右边的css可以直接改值进行调试
4.Ctrl+0 复原浏览器大小
5.如果样式前面有黄色叹号提示则是样式属性书写错误

综合案例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
				font:16px/28px 'Microsoft YaHei';
			}
			h1 {
				text-align: center;
				font-weight: 400;
			}
			.gray {
				color: #888888;
				font-size: 12px;
				text-align: center;
			}
			a {
				text-decoration: none;
			}
			.search {
				color: #666;
				width: 170px;
			}
			.btn{
				font-weight: 700;
			}
			p {
				text-indent: 2em;
			}
			.imgs {
				text-align: center;
			}
			.footer {
				color: #888;
				font-size: 12px;
			}
		</style>
	</head>
	<body>
		<h1>北方高温明日达鼎盛 京津冀多地地表温度将超60</h1>
		<div class="gray">2020-07-03 16:31:47 来源: <a href="#">中国天气网</a>  <input class="search" type="text" value="输入查询条件"/> <button class="btn">搜索</button></div>
		<hr>
		
		 <p>
			 中国天气网讯 今天(3日),华北、黄淮多地出现高温天气,截至下午2点,北京、天津、郑州等地气温突破35℃。预报显示,今后三天(3-5日),这一带的高温天气将继续发酵,高温范围以及强度将在4日达到鼎盛,预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃,其中北京和石家庄的最高气温还有望创今年以来的新高。
		 </p>
		 <h4>气温41.4℃!地温66.5!北京强势迎七月首个高温日</h4>
		 <p class="imgs">
			  <img src="../img/pic.jpeg" />
		 </p>
		
		<p>
			今天,华北、黄淮一带的高温持续发酵,截至今天下午2点,陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中,北京、天津、郑州均迎来高温日。
			
		</p>
		<p>
			在阳光暴晒下,地表温度也逐渐走高。今天下午2点,华北黄淮大部地区的地表温度都在50℃以上,部分地区地表温度甚至超过60℃。其中,河北衡水地表温度高达68.3℃,天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。
		</p>
		<h4>
			明日热度再升级!京津冀携手冲击38+
		</h4>
		<p>
			中国天气网气象分析师王伟跃介绍,明天(4日),华北、黄淮地区35℃以上的高温天气还将继续升级,并进入鼎盛阶段,高温强度和范围都将发展到最强。 明天,北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。
		</p>
		<p>
			不过,专家提醒,济南被雨水天气完美绕开,因此未来一周,当地的高温还会天天上岗。在此提醒当地居民注意防暑降温,防范持续高温带来的各种不利影响。(文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽)
		</p>
		<p class="footer">
			本文来源:中国天气网 责任编辑:刘京_NO5631
		</p>
		
	</body>
</html>

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值