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

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

1.边框属性

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

1.1border

设置边框的样式

格式:宽度 样式 颜色

例如:border:1px solid red 1 像素粗的 实线 红色边框。

线条样式:solid 实线,none 无边,double 双线

示例:

image.png

效果:

image.png

1.2 width

用于设置标签的宽度

示例:

image.png

效果:

image.png

1.3 height

用于设置标签的高度

示例:

image.png

效果:

image.png

1.4 background-color

用于设置标签的背景颜色

背景颜色设置的两种主流方式:

①英文单词

例如:red,blue,yellow

②颜色代码

格式:#红绿蓝, 每一个颜色用两个 16 进制位数表示

例如:#ff1100 红色 ff,绿色 11,蓝色 00,红色颜色最重,绿色其次,没有蓝色

示例:

image.png

效果:

image.png

1.5 background-image

用于设置元素背景图片。

格式: background-image: url("图片路径");

例如:某个小狗爪子图片

1.png

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

image.png

因为图片太小,所以为了铺满背景,CSS 采取了重复显示多个的策略。

若需要对背景图片是否重复显示进行调整,有以下几个常见设置

image.png

2.布局

2.1 float

通常默认的排版方式,将页面中的元素从上到下一一罗列,而实际开发中,需要左右方式进行排版, 就需要使用浮动属性

格式:

选择器{float:属性值;}

常用属性值:

none:元素不浮动(默认值)

left:元素向左浮动

right:元素向右浮动

注意:因为元素设置浮动属性后,会脱离原有文档流(会脱离原有的板式),从而会影响其他元素的

样式,所以设置浮动以后,页面样式需要重新调整

准备代码:

<style> 
    #d1{
        background-color: red; 
        width: 100px; 
        height: 100px; 
    } 
    #d2{
        background-color: green; 
        width: 110px; height: 110px; 
    }
    #d3{
        background-color: blue; 
        width: 120px; 
        height: 120px; 
    } 
</style> 
<div id="d1"></div> 
<div id="d2"></div> 
<div id="d3"></div>

示例 1 

image.png

效果 1

image.png

示例 2

image.png

效果 2 

image.png

2.2 clear

由于浮动元素不再占用原文档流的位置,所以它会对页面中其他元素的排版产生影响。

如果要避免影响,需要使用 clear 属性进行清除浮动。

格式:选择器{

clear:属性值;

}

常用属性值:

left:不允许该元素左侧有浮动元素(清除左侧浮动的影响)

right:不允许该元素右侧有浮动元素(清除右侧浮动的影响)

both:同时清除左右两侧浮动的影响(一般用 both

3.字体

3.1 font-size

用于设置字体的大小。

3.2 color

用于设置字体的颜色。

示例:

image.png

效果:

image.png

相关文章
|
1月前
|
前端开发 JavaScript 开发者
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
2月前
|
前端开发 JavaScript API
(前端3D模型开发)网页三维CAD中加载和保存STEP模型
本文介绍了如何使用`mxcad3d`库在网页上实现STEP格式三维模型的导入与导出。首先,通过官方教程搭建基本项目环境,了解核心对象如MxCAD3DObject、Mx3dDbDocument等的使用方法。接着,编写了加载和保存STEP模型的具体代码,包括HTML界面设计和TypeScript逻辑实现。最后,通过运行项目验证功能,展示了从模型加载到保存的全过程。此外,`mxcad3d`还支持多种其他格式的三维模型文件操作。
|
4天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
24 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
1月前
|
前端开发 开发者 UED
《前端技术基础》第02章 CSS基础【合集】
层叠样式表(Cascading Style Sheets,简称CSS)是一种用于描述网页视觉表现的语言。该语言与HTML协同工作,其中HTML负责构建网页的结构,而CSS则负责定义网页的外观和格式。CSS通过一系列规则来实现样式的应用,这些规则由选择器(Selectors)和声明块(Declaration Blocks)构成。选择器的作用是明确指出哪些HTML元素将受到特定样式规则的影响,而声明块则包含了具体的样式声明,这些声明定义了元素的视觉属性和相应的值。
51 1
|
2月前
|
JavaScript 前端开发
jQuery和CSS3斑马线样式range滑块特效
jQuery和CSS3斑马线样式range滑块特效
|
3月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
87 5
|
4月前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
9月前
|
前端开发
|
前端开发
CSS:去除input和button边框以及选中时边框默认样式
CSS:去除input和button边框以及选中时边框默认样式
|
前端开发
零基础CSS入门教程(13)——边框样式
可以通过border-style设置边框样式,常用的有solid实线、dotted点线、dashed虚线三种。大家想必发现了,我们在设定边框样式时,一般都会同时设定边框样式、宽度、颜色,如果逐一定义,比较麻烦。我们前几个小结学习了有序列表无序列表,我们这一小节学习一下边框样式很重要的一个知识点。我们本小节学习了边框样式,内容有点多,大家要学会熟练使用,我们在开发中很常用。可以通过border-width调整边框的宽度,单位一般使用px像素。可以使用bolder-color指定边框的颜色,
零基础CSS入门教程(13)——边框样式

热门文章

最新文章

  • 1
    【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    docker安装nginx,前端项目运行
  • 5
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 6
    详解智能编码在前端研发的创新应用
  • 7
    巧用通义灵码,提升前端研发效率
  • 8
    【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
  • 9
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 10
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程