JavaWeb - CSS 的使用以及常用属性
CSS 参考手册 ：https://www.w3school.com.cn/cssref/index.asp
JavaWeb - 学习笔记
CSS 样式
内联样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联样式</title>
</head>
<body>
<!--在标签内使用style属性-->
<div style="color:red;">zut</div>
</body>
</html>
内部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内部样式</title>
<style>
div {
color: red;
}
</style>
</head>
<body>
<!--在head标签内定义style标签-->
<div>zut</div>
</body>
</html>
外部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部样式</title>
<link rel="stylesheet" href="css/zut.css">
</head>
<body>
<!--css资源文件-->
<!--head link引入外部资源文件-->
<div>zut</div>
</body>
</html>
div {
color: blue;
}
选择器
基础选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
#div1 {
color: red;
}
div {
color: blue;
}
.cls {
color: aquamarine;
}
</style>
</head>
<body>
<!--id选择器:建议唯一-->
<div id="div1">zut</div>
<div class="cls">zut1</div>
<!--元素选择器:id选择器优先级高于元素选择器-->
<!--类选择器:类选择器优先级高于元素选择器-->
<p class="cls">zut</p>
</body>
</html>
扩展选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>扩展选择器</title>
<style>
/*选择所有元素*/
* {
}
/*并集选择器*/
div, p {
color: aqua;
}
/*子选择器*/
div p {
color: red;
}
/*父选择器*/
div > p {
background: black;
}
/*属性选择器*/
input[type='text'] {
border: 2px solid;
}
/*伪类选择器*/
a:link {
color: deeppink;
}
a:hover {
color: aqua;
}
a:active {
color: yellow;
}
a:visited {
color: red;
}
</style>
</head>
<body>
<!--https://www.w3school.com.cn/cssref/index.asp-->
<div>
<p>zut</p>
</div>
<p>zut</p>
<!--属性选择器-->
<input type="text"><br>
<input type="password"><br>
<!--伪类选择器:选择一些元素具有的状态-->
<!--a link:初始化状态,visited:被访问过的状态,active:正在访问的状态,hover:鼠标悬浮状态-->
<a href="#">zut</a>
</body>
</html>
CSS 常用属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS常用属性</title>
</head>
<style>
p {
color: red;
font-size: 20px;
text-align: center;
line-height: 50px;
/*宽度,实线,黑色*/
border: 1px solid black;
}
div {
border: 1px solid black;
width: 100px;
/*height: 600px;*/
/*width: 600px;*/
/*background: red;*/
/*background: url("https://img2020.cnblogs.com/blog/1615081/202004/1615081-20200425192425460-532751811.jpg") no-repeat center;*/
}
.div1 {
width: 100px;
height: 100px;
/*margin: 50px;*/
}
.div2 {
width: 200px;
height: 200px;
/*内边距撑大盒子*/
/*padding: 50px;*/
/*设置盒子属性保证盒子大小不发生变化*/
box-sizing: border-box;
padding: 50px;
}
.div3 {
float: left;
}
.div4 {
float: left;
}
.div5 {
float: right;
}
</style>
<body>
<!--字体、边框:复合属性,每一个边都可以设置-->
<p>zut</p>
<div></div>
<!--盒子模型:控制布局-->
<!--margin:外边距-->
<!--padding:内边距-->
<div class="div2">
<div class="div1">
</div>
</div>
<!--float浮动-->
<div class="div3">1</div>
<div class="div4">2</div>
<div class="div5">3</div>
</body>
</html>
