JAVA EE(进阶)_CSS
人与人之间总是渐渐疏离
——陳長生.
❀主页：陳長生.-CSDN博客❀
📕上一篇：JAVA EE(进阶)_HTML-CSDN博客
1.CSS
1.1.介绍
如果说HTML是前端的骨架，那么CSS就是前端的外表
可以做到美化网页的效果
1.2.语法
<style>
p{
}
</style>
style：用于定义元素的外观与格式
p：被改变的元素
style一般在head中设置
2.CSS选择器
2.1.标签选择器
css中自带的标签，将它原本的样式改变
<html lang="en">
<head><title>CSS</title><style>p{color: aqua;}</style>
</head>
<body><p>我是自带的p标签</p>
</body>
</html>
将p标签中添加一个颜色为青色的数值
结果：
2.2.class选择器
自定义变量，用于标签中的class类
创建时，变量前面要有个“.”
<!DOCTYPE html>
<html lang="en">
<head><title>CSS</title><style>.ccs{color: aqua; }</style>
</head>
<body><p class="ccs">我是自定义的class变量</p>
</body>
</html>将p标签中类中给一个自定义变量，该变量为一个颜色为青色的数值
结果:
2.3.id选择器
自定义变量，用于标签中的id属性
创建时，变量前面要有个“#”
<!DOCTYPE html>
<html lang="en">
<head><title>CSS</title><style>#ccs{color: aquamarine;}</style></head>
<body><p id="ccs">我是自定义的id变量</p>
</body>
</html>将p标签中类中给一个自定义变量，该变量为一个颜色为青色的数值
结果：
2.4.复合选择器
适用于表格标签，用于找寻列级别标签并设置样式
<!DOCTYPE html>
<html lang="en">
<head><title>CSS</title><style>ul li{color: aquamarine;} ul li a{ color: rgb(255, 0, 0);}</style>
</head>
<body><ul><li>第一行第一列</li><li>第一行第二列</li></ul><ul><li>第二行第一列</li><li> <a href="#">第二行第二列</a> </li><li>第二行第三列</li></ul>
</body>
</html>将ul行li列的元素都赋为青色
将ul行li列a链接的元素赋为红色
2.5.通配符选择器
上述列举的都是给单个属性才能使用的，例如class选择器只能在class中使用，id选择器只能在id中使用，而通配符可以给全局使用
<!DOCTYPE html>
<html lang="en">
<head><title>CSS</title><style>*{color: aqua;}</style>
</head>
<body><p>1</p><p>2</p><p>3</p>
</body>
</html>将全局的颜色都赋为青色
3.CSS样式
3.1.color
设置字体颜色
<!DOCTYPE html>
<html lang="en">
<head><title>CSS</title><style>.color{color: aqua;}</style>
</head>
<body><p class="color">颜色</p>
</body>
</html>将颜色设置为青色
结果：
3.2.font-size
设置字体大小
<!DOCTYPE html>
<html lang="en">
<head><title>CSS</title><style>.font{font-size: 100px;}</style>
</head>
<body><p class="font">字体</p>
</body>
</html>将字体设置为100像素大小
结果：
3.3.border
设置边框
<!DOCTYPE html>
<html lang="en">
<head><title>CSS</title><style>.border{border-width: 10px;border-style: solid;border-color:aquamarine}</style>
</head>
<body><p class="border">边框</p>
</body>
</html>border-width：边框粗细
border-style：边框样式
border-color：边框颜色
结果：
也可以单独为边框的一遍设置粗细
<!DOCTYPE html>
<html lang="en">
<head><title>CSS</title><style>.border{border-top: 10px;border-bottom: 20px;border-left: 30px;border-right: 40px;border-style: solid;border-color: aquamarine;}</style>
</head>
<body><p class="border">边框</p>
</body>
</html>
结果：
3.4.width/height
设置宽和高
只适用于块级引用（“div” “h1-h6” “p”）
不适用于行级引用（“a” "span"）
<!DOCTYPE html>
<html lang="en">
<head><title>CSS</title><style>.ccs{height: 100px;width: 100px;}</style>
</head>
<body><p class="ccs">1</p>
</body>
</html>结果（按F12并移动到对应语句即可出现如图中效果）：
3.5.margin
设置外边距
<!DOCTYPE html>
<html lang="en">
<head><title>CSS</title><style>.ccs{margin: 10px; }</style>
</head>
<body><p class="ccs">外边距</p>
</body>
</html>设置外边距为10像素
同理，外边距也可以像边框一样，单个给上下左右设置像素大小
结果（F12）
3.6.padding
设置内边距
<!DOCTYPE html>
<html lang="en">
<head><title>CSS</title><style>.ccs{padding: 10px; }</style>
</head>
<body><p class="ccs">内边距</p>
</body>
</html>
设置外边距为10像素
同理，外边距也可以像边框一样，单个给上下左右设置像素大小
结果：
