Java Web 学习02—css篇

最新推荐文章于 2024-09-10 14:41:34 发布

ink-

最新推荐文章于 2024-09-10 14:41:34 发布

阅读量122

点赞数

文章标签： css html web

本文链接：https://blog.csdn.net/weixin_46638290/article/details/107830538

版权

1.css概述

背景
在css技术诞生之前，页面上定义结构和显示效果的代码耦合在一起，开发和维护都非常繁琐。
为了将显示效果设置从HTML代码中抽离出来，并提供更强大的表现力，w3c组织制定了css标准——Cascading Style Shinee层叠样式表。

2.css编写位置

1).内部
标签的style属性中
在这里插入图片描述
2）.外部
写在外部的css文件中，然后通过link标签引入外部的css文件

**!:注意优先级**

3)基本语法

选择器{声明1;声明2}

选择器{
	样式名1：样式值1;
	样式名2：样式值2;
}

4)选择器
1）元素选择器
标签名
例如：
p{}
a{}
h1{}

2）id选择器
#id
3）类选择器
.class
4）选择器分组
可以使用多个选择器
选择器1，选择器2，选择器N{}

5)声明
样式1：样式值1；

6）常用样式

字体颜色：color
宽度：width
高度：height
背景颜色：background-color

7）颜色
用RGB来表示颜色，可以写成三组两位十六进制数字，这个数字要求以#号开头

8）css定义样式位置的案例
（1）css1.html
在这里插入图片描述
运行结果如图：

2）css2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
  p {
	 color: blue;
	 background-color: yellow;
  }
</style>
</head>
<body>

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

</body>
</html>

运行结果：
在这里插入图片描述
3）css3.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
  #p1,.selectp {
	 color: blue;
	 background-color: yellow;
  }
</style>
</head>
<body>

	<p id="p1">落霞与孤鹜齐飞，秋水共长天一色</p>
	<p>落霞与孤鹜齐飞，秋水共长天一色</p>
	<p class="selectp">落霞与孤鹜齐飞，秋水共长天一色</p>
	<p class="selectp">落霞与孤鹜齐飞，秋水共长天一色</p>

</body>
</html>

运行结果：
在这里插入图片描述

ink-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java Web 学习02—css篇

1.css概述背景在css技术诞生之前，页面上定义结构和显示效果的代码耦合在一起，开发和维护都非常繁琐。为了将显示效果设置从HTML代码中抽离出来，并提供更强大的表现力，w3c组织制定了css标准——Cascading Style Shinee层叠样式表。2.css编写位置1).内部标签的style属性中2）.外部写在外部的css文件中，然后通过link标签引入外部的css文件**!:注意优先级**3)基本语法选择器{声明1;声明2}选择器{ 样式名1：样式值1; 样式名2
复制链接

扫一扫