3/11 css样式类别与语法

最新推荐文章于 2022-09-24 19:40:45 发布

某风吾起

最新推荐文章于 2022-09-24 19:40:45 发布

阅读量293

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_43871650/article/details/104791785

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

css 取色方式
css样式类别
CSS语法
- 选择器

css 取色方式

使用颜色名

不建议在网页中使用颜色名，特别是大规模的使用，避免有些颜色名不被浏览器解析，或者不同浏览器对颜色的解释差异。
使用百分比
这是一种最常用的方法，例如：

color: rgb(100%, 100%, 100%);

使用数值
数字范围从 0~255，例如：

color: rgb(255, 255, 255);

十六进制颜色
这是最常用的取色方法，例如：

color: #ffffff;

其中要在十六进制前面加一个#颜色符号。上面这个声明将显示白色，相反，可以设置#000000为黑色，用 RGB 来描述：

color: #RRGGBB;

从 0~255，实际上十进制的 255 正好等于十六进制的 FF，一个十六进制的颜色值等于 3 组这样的十六进制的值，它们按顺序连接在一起就等于红、蓝、绿3种原色。

css样式类别

内联样式（绝不使用）

在这里插入图片描述

内部样式表

将样式编写到head中的style标签里
然后通过cSS的选择器来选中元素并为其设置各种样式
可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用
问题:

我们的内部样式表只能对一个网页起作用，
它里边的样式不能跨页面进行复用

<style >
	h1{	
			color:blue;
	}
</style>

h1表示指定的标签

外部样式表（最佳）

为了解决css样式表难以跨页面使用的问题。
可以将css写在一个外部的CSS文件中,意味着只要想使用这些样式的网页都可以对其进行引用
第三种方式(外部样式表) 最佳实践

可以将CSS样式编写到一个外部的CSS文件中, 然后通过link标签来引入外部的CSS文件外部样式表需要通过link标签进行引入，
意味着只要想使用这些样式的网页都可以对其进行引用使样式可以在不同页面之间进行复用
将样式编写到外部的Css文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。

<link rel="stylesheet" href="./style.css"/>

rel表示样式表

CSS语法

<style>
<h1>style 中不再是html,而是css的格式，这么写是错误的写法</h1>
</style>

<style>
/*
CSS中的注释类似C语言，注释的内容会自动被浏览器忽略
*/
</style>

<style>
/*
CSS基本语法:
1 选择器：p
	通过选择器可以选中页面中的指定元素
	比如p的作用就是选中页面中所有的p元素

2 声明块：{}
	通过声明块指定样式
	声明块由一个个声明组成。
	声明是一个名值对结构，一个样式名对应一个样式值，名和值之间以:连接，以;结尾，如color:blue;

	
*/
	p{
		color:red;
	}
</style>

选择器

想选择h1的其中一个作出样式的改变，怎么办

id选择器： #id{}

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
	h1{
		color:red;
	}
</style>

</head>

<body>
<h1>落霞与孤鹜齐飞</h1>
<h1>秋水共长天一色</h1>
</body>

在这里插入图片描述
只想选择h1的其中一个作出样式的改变，怎么办？

id选择器

作用:根据元素的id属性值选中一个元素
语法: #id属性值{}
例子: #box{} #red{}
注意：id不能重复，与class作区别

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title>无标题文档</title>
		<style>
			#red{
				color:red;
			}
		</style>
	
	</head>
	
	<body>
		<h1>落霞与孤鹜齐飞</h1>
		<h1 id="red">秋水共长天一色</h1>
	</body>
</html>

在这里插入图片描述

class选择器： .class{}

class 是一个标签的属性，它和id类似，不同的是class可以重复使用
可以通过class属性来为元素分组

类选择器

作用:根据元素的class属性值选中一组元素
语法: .class属性值{}

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title>无标题文档</title>
	<style>
		.blue{
			color:blue;
		}
		
	</style>

</head>

<body>
	<p class="blue">床前明月光</p>
	<p class="blue">我是郭德纲</p>
</body>

在这里插入图片描述
可以同时为一个元素指定多个class属性，用空格作为分隔 <p class="blue abc">我是郭德纲</p>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title>无标题文档</title>
		<style>
			.blue{
				color:blue;
			}
			.abc{
				font-size:50px;
			}
			
		</style>
	</head>
	
	<body>
		<p class="blue">床前明月光</p>
		<p class="blue abc">我是郭德纲</p>
	</body>
</html>

在这里插入图片描述

通配选择器： *{}

通配选择器
作用：选中页面中的所有元素
语法：*

<style>
	*{
		color:red;
	}	
</style>

交集选择器(同时满足) ：

相同的类，不同的标签可以通过在类选择器前+标签名选定指定的标签。
交集选择器

作用:选中同时复合多个条件的元素
语法:选择器1选择器2选择器3选择器n{}
注意点:交集选择器中如果有元素选择器，必须使用标签选择器开头
如：必须是div.red{} ，不能是.red.div{}

div.blue{}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title>无标题文档</title>
		<style>
			.blue{
				color:blue;
			}

			div.blue{
				font-size:30px;
			}
		</style>
	</head>
	
	<body>
		<p class="blue">床前明月光</p>
		<div class="blue">我是郭德纲</p>
	</body>
</html>

在这里插入图片描述

并集选择器(满足其一)：

选择器分组(并集选择器)

作用:同时选择多个选择器对应的元素
语法:选择器1,选择器2, 选择器3,选择器n{}

div,p{}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title>无标题文档</title>
		<style>
			div,p{
				font-size:30px;
			}
		</style>
	</head>
	
	<body>
		<p class="blue">床前明月光</p>
		<div class="blue">我是郭德纲</p>
	</body>
</html>

在这里插入图片描述

某风吾起

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3/11 css样式类别与语法

文章目录css样式类别内联样式（绝不使用）内部样式表外部样式表（最佳）CSS语法选择器id选择器： #id{}class选择器： .class{}通配选择器： *{}交集选择器(同时满足) ：并集选择器(满足其一)：css样式类别内联样式（绝不使用）内部样式表将样式编写到head中的style标签里然后通过cSS的选择器来选中元素并为其设置各种样式可以同时为多个标签设置样式，并且修...
复制链接

扫一扫

专栏目录