![](https://i-blog.csdnimg.cn/blog_migrate/cd0a3b7946596fc7a7fbbfe64b55fac7.png)
文章目录
一、初识CSS
1、是什么
CSS: 层叠样式表 或 级联样式表 (CascadingStyle Sheet)
2、作用
修饰HTML页面,CSS可以控制HTML标签对象的宽度、高度、float浮动、文字大小、字体、背景等样式,从而达到想要的布局效果,使得HTML页面更为美观 (化妆品,美丽的外衣)。
3、文件扩展名
文件扩展名 (后缀名):.css
二、HTML中嵌套使用CSS的三种方式
1、内联定义方式 (内联样式)
1.1、在标签内部使用style属性设置元素的CSS样式,仅影响一个元素
1.2、语法格式:
<标签 style="样式名: 样式值; 样式名: 样式值; ..."></标签>
2、样式块方式 (内部样式表)
2.1、在 head标签中使用style块
2.2、语法格式:
<head>
<style type="text/css">
选择器{
样式名: 样式值;
样式名: 样式值;
...
}
选择器{
样式名: 样式值;
样式名: 样式值;
...
}
...
</style>
</head>
3、🔺链入外部样式表文件 【最常用】
3.1、将样式写在一个单独的xxx.css文件中,在需要的网页中直接引入CSS文件
3.2、语法格式:
<link type="text/css" rel="stylesheet" href="CSS文件路径" />
3.3、好处:易维护且维护成本较低。
三、CSS border属性
1、border-color 边框颜色
border-color: red; 整个边框都为红色
border-color: red yellow; 上下边框为红色,左右边框为黄色
border-color: red yellow blue; 上边框红色,右边框为黄色,下边框为蓝色,左边框为黄色
border-color: red yellow blue green;【上】边框为红色,【右】边框为黄色,【下】边框为蓝色,【左】边框为绿色
总结:若border-color有多个不同颜色的样式值,是按顺时针【上右下左】给边框布局颜色。
2、border-width 边框粗细
border-width: medium(默认适中) thin(细) thick(粗) 10px(自定义)
border-width: 1px 5px 10px; (顺时钟: 上右下左)
3、border-style 边框样式
border-style: none(默认) solid(实线) double(双线) dotted(点虚线) dashed(短虚线)
可简写成:border: solid red 1px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS border属性</title>
</head>
<body>
<!--HTML中引入CSS的第一种方式:内联定义方式-->
<!--
width 宽度样式
height 高度样式
background-color 背景色样式
display 布局样式 (none表示隐藏,block表示显示)
-->
<!-- 边框属性 border
边框颜色 border-color
border-color: red; 整个边框都为红色
border-color: red yellow; 上下边框为红色,左右边框为黄色
border-color: red yellow blue; 上边框为红色,右边框为黄色,下边框为蓝色,左边框为黄色
border-color: red yellow blue green;【上】边框为红色,【右】边框为黄色,【下】边框为蓝色,【左】边框为绿色
总结:border-color如果有多个不同颜色的样式值,是按顺时针【上右下左】给边框布局颜色
边框粗细 border-width
border-width: medium(默认适中) thin(细) thick(粗) 10px(自定义)
border-width: 1px 5px 10px; (顺时钟: 上右下左)
边框样式 border-style
border-style: none(默认) solid(实线) double(双线) dotted(点虚线) dashed(短虚线)
可简写成:border: solid red 1px;
-->
<div style="width: 300px; height: 300px; background-color: dodgerblue; display: block;
border-color: red; border-width: 4px; border-style: solid;">这是一个div</div>
<br />
<div style="width: 300px; height: 300px; background-color: dodgerblue; display: block;
border: 4px red solid;">这是一个div</div>
<br />
<div style="width: 300px; height: 300px; background-color: dodgerblue; display: block;
border-color: red yellow blue green; border-style: solid; border-width: 4px;">这是一个div</div>
</body>
</html>
页面效果如下: