001_CSS基础入门之一【HTML中嵌套使用CSS的三种方式 + border属性】

最新推荐文章于 2023-10-24 14:45:29 发布

Bytenerd_0

最新推荐文章于 2023-10-24 14:45:29 发布

阅读量742

点赞数

分类专栏： Web前端 # CSS 文章标签： CSS层叠样式表 HTML嵌套使用CSS三种方式 border-color border-width border-style

本文链接：https://blog.csdn.net/weixin_43821410/article/details/113917803

版权

Web前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

文章目录

一、初识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>

页面效果如下：

Bytenerd_0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
001_CSS基础入门之一【HTML中嵌套使用CSS的三种方式 + border属性】

文章目录一、初识CSS1、是什么2、作用3、文件扩展名二、HTML中嵌套使用CSS的三种方式1、内联定义方式 (内联样式)2、样式块方式 (内部样式表)3、????链入外部样式表文件【最常用】三、CSS border属性1、边框颜色 border-color2、边框粗细 border-width3、边框样式 border-style一、初识CSS1、是什么CSS: 层叠样式表或级联样式表 (CascadingStyle Sheet)2、作用修饰HTML页面，CSS可以控制HTML标签对象的
复制链接

扫一扫