JavaEE学习笔记（2）——css
一、语法规则
注：一般每一行写一个属性
注释：/**/
二、CSS和html结合方式
方式一：
在标签的style属性上设置key：value
<div style="border: 1px #4e55ff solid">标签1</div>
方式二：
在head标签中，使用style标签来定义各种自己需要的css样式
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
border: 1px solid red;
}
</style>
</head>
<body>
<div>标签1</div>
<div>标签2</div>
<div>标签3</div>
</body>
方式三：
把css样式写成一个单独的css文件，再通过link标签引入
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--link标签用来引入css样式代码-->
<link href="1.css" type="text/css" rel="stylesheet"/>
</head>
三、CSS选择器
3.1 标签名选择器
格式是：
标签名{
属性：值
}
作用：指定哪些标签为所设定的样式
3.2 id选择器
格式：
#id 属性值{
属性：值
}
可以通过id属性选择性的去使用这个样式
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#1001{
border: 1px;
font-size: 1px;
}
</style>
</head>
<body>
<div id="1001">标签1</div>
<div id="1002">标签2</div>
<div>标签3</div>
</body>
3.3 类选择器
格式：
.class 属性值{
属性：值
}
可以通过class属性有效的选择性的去使用这个样式
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.class01{
}
</style>
</head>
<body>
<div class="class01">标签1</div>
<div class="class02">标签2</div>
<div class="class01">标签3</div>
</body>
3.4 组合选择器
格式：
选择器1，选择器2，。。。选择器n{
}
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#001,.class01{
}
</style>
</head>
<body>
<div class="class01">标签1</div>
<div class="class02">标签2</div>
<div id="001">标签3</div>
</body>
四、常用样式
color:red;
border:1px yellow solid;
width: 300px;
height: 300px;
background-color: green;
font-size: 20px;
/*div居中*/
margin-left: auto;
margin-right: auto;
/*文字居中*/
text-align: center;
/*下划线*/
text-decoration: none;
/*边框合并*/
border-collapse: collapse;
/*列表去除修饰*/
list-style: none;
439
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
