CSS(一)

最新推荐文章于 2022-11-25 08:15:00 发布

徐海.

最新推荐文章于 2022-11-25 08:15:00 发布

阅读量427

点赞数

分类专栏：前端文章标签： css3 html

本文链接：https://blog.youkuaiyun.com/JAVAWEB_/article/details/107655541

版权

前端专栏收录该内容

11 篇文章

订阅专栏

本文介绍了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-900	400等同于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
RGB	rgb(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>

在这里插入图片描述