• 【网页前端】CSS的基本样式边框、布局、字体

    🔎这里是【前端网页】，关注我学习前端不迷路
    👍如果对你有帮助，给博主一个免费的点赞以示鼓励
    欢迎各位🔎点赞👍评论收藏⭐️

    👀专栏介绍

    【前端网页】 目前主要更新HTML，一起学习一起进步。

    👀本期介绍

    本期主要介绍CSS的基本样式边框、布局、字体

    文章目录

    1.边框属性

    1.1border

    1.2 width

    1.3 height

    1.4 background-color

    1.5 background-image

    2.布局

    2.1 float

    2.2 clear

    3.字体

    3.1 font-size

    3.2 color

    1.边框属性

    所有的 HTML 标签都有边框，默认边框不可见

    1.1border

    设置边框的样式
    格式：宽度 样式 颜色
    例如： border:1px solid red ， 1 像素粗的 实线 红色边框。
    线条样式： solid 实线， none 无边， double 双线
    示例：

    效果：

     

    1.2 width

    用于设置标签的宽度

    示例：

    效果：

    1.3 height

    用于设置标签的高度
    示例：

    效果：

    1.4 background-color

    用于设置标签的背景颜色
    背景颜色设置的两种主流方式：
    ①英文单词
    例如： red,blue,yellow
    ②颜色代码
    格式： # 红绿蓝， 每一个颜色用两个 16 进制位数表示
    例如： #ff1100 红色 ff ，绿色 11 ，蓝色 00 ，红色颜色最重，绿色其次，没有蓝色
    示例：

    效果：

    1.5 background-image

    用于设置元素背景图片。
    格式： background-image : url ( "图片路径" );
    例如：某个小狗爪子图片

    作为背景图片引入一个长宽 25 的 DIV 标签中，

    因为图片太小，所以为了铺满背景，CSS 采取了重复显示多个的策略。
    若需要对背景图片是否重复显示进行调整，有以下几个常见设置

    2.布局

    2.1 float

    通常默认的排版方式，将页面中的元素从上到下一一罗列，而实际开发中，需要左右方式进行排
    版， 就需要使用浮动属性
    格式：
    选择器 {float: 属性值 ;}
    常用属性值：
    none ：元素不浮动（默认值）
    left ：元素向左浮动
    right ：元素向右浮动
    注意：因为元素设置浮动属性后，会脱离原有文档流（会脱离原有的板式），从而会影响其他元素
    的
    样式，所以设置浮动以后，页面样式需要重新调整
    准备代码： 
    1.  
    2. <div id="d1">div> 
    3. <div id="d2">div> 
    4. <div id="d3">div>
    示例 1 ：

    效果 1：

    示例 2：

    效果 2： 

     

    2.2 clear

    由于浮动元素不再占用原文档流的位置，所以它会对页面中其他元素的排版产生影响。
    如果要避免影响，需要使用 clear 属性进行清除浮动。
    格式：选择器 {
    clear: 属性值 ;
    }
    常用属性值：
    left ：不允许该元素左侧有浮动元素（清除左侧浮动的影响）
    right ：不允许该元素右侧有浮动元素（清除右侧浮动的影响）
    both ：同时清除左右两侧浮动的影响（一般用 both ）

    3.字体

    3.1 font-size

    用于设置字体的大小。

    3.2 color

    用于设置字体的颜色。
    示例：

    效果：

  • 相关阅读:
    vue-router当中内置component标签(组件)的使用
    RabbitMQ
    详细解读字节跳动视频生成模型StoryDiffusion：连环画创作和长视频生成
    【Codeforces】 CF1685C Bring Balance
    Cocos Creator 3D资源的导入与动画播放详解
    5.14.1.2 Get Log Page – Smart Log
    博客系统项目详解
    Android通过jni调用本地c/c++接口方法总结
    分布式安装安装LNMP_......
    【Java成王之路】EE初阶第十九篇: 前端三剑客 HTML基础篇2
  • 原文地址：https://blog.csdn.net/weixin_45481821/article/details/125817058