Java Web 学习笔记02 CSS基本用法

最新推荐文章于 2024-07-09 16:05:57 发布

Yeah_zy

最新推荐文章于 2024-07-09 16:05:57 发布

阅读量84

点赞数

分类专栏： Java Web 文章标签： web

本文链接：https://blog.csdn.net/zhangzhang__yan/article/details/107826731

版权

Java Web 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Css

一、CSS

一、CSS

1、CSS概述

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

2、CSS编写位置

1、内部
标签的style属性中：

<p style="color: red ; font-size: 12px">落霞与孤鹜齐飞，秋水共长天一色</p>

写到style标签中：

<style type="text/css">     
	p {        
		color: blue;        
		background-color: yellow;      
	}
</style>

2、外部
写在外部的css文件中，然后通过link标签引入外部的css文件

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

优先级：行内样式>内部样式>外部样式

自定义样式位置：

<!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、基本语法

选择器 {声明1;声明2}       
选择器 {     
	样式名1:样式值1;     
	样式名2:样式值2;
}

** 注释：**
CSS：/* * /
HTML：<! – -->

4、选择器

（1）元素选择器（标签选择器）
标签名
例子： p{} 、 a{} 、 h1{}
（2） id选择器 #id
（3）类选择器 .class
（4）选择器分组
可以同时使用多个选择器（复合选择器）
选择器1,选择器2,选择器N{}
优先级：ip选择器>class选择器>标签选择器

<!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>

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

5、声明

声明格式：样式名1:样式值1;

6、常用样式

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

7、颜色

在CSS中我们使用RGB值来表示颜色。
RGB值可以写成一个三组两位十六进制数字，这个数字要求以#号开头
#红色绿色蓝色
000000 - ffffff

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
  	#p1,.selectp {
  		color: #000000;
  		background-color: #ff0000;
  	}
</style>
</head>
<body>
	<p id="p1">落霞与孤鹜齐飞，秋水共长天一色</p>
 	<p>落霞与孤鹜齐飞，秋水共长天一色</p>
 	<p class="selectp">落霞与孤鹜齐飞，秋水共长天一色</p>
 	<p class="selectp">落霞与孤鹜齐飞，秋水共长天一色</p>
</body>
</html>