网站首页 > 技术文章 正文
前面我们了解了HTML的标签
今天我们来一起聊聊CSS的样式
昨天咱们用table标签布局了一个注册的页面~,但是table的布局存在一定的缺陷就是都写死了,不利于修改~
现在一般采用DIV+CSS来进行布局,那我们来一起聊聊吧~
什么是DIV?
Div是HTML标签,一个块级元素(单独占一行).单独使用没有任何意义,必须和CSS联合起来一起使用,主要用于页面的布局,
span 是一个HTML标签,一个内联元素,单独使用没有任何意义,必须和CSS联合起来一起使用,主要用于对括起来的内容进行样式的修饰.
什么是CSS?
1)CSS是指层叠样式表(Cascading Style Sheets),样式定义的是HTML元素是如何显示的。
2)把样式添加到HTML页面中,是为了解决内容与表现分离的问题
3)外部样式通常存储在CSS文件中,使用外部样式可以极大的提高工作效率
CSS的作用
HTML是整个网站的骨架
CSS是对网站骨架的内容进行美化
CSS的语法和规范
选择器{
属性 1:属性值 1;
属性 2:属性值 2;
属性 3:属性值 3;
}
CSS选择器
CSS的基本选择器有三种:
元素选择器
如果多个相同的元素设置相同的样式,使用此选择器最合适.
元素名{
属性 1:属性值 1;
属性 2:属性值 2;
属性 3:属性值 3;
}
类选择器
对多个元素设置相同的样式,此时使用类选择器比较合适
.类名{
属性 1:属性值 1;
属性 2:属性值 2;
属性 3:属性值 3;
}
ID选择器
id是唯一的
#ID{
属性 1:属性值 1;
属性 2:属性值 2;
属性 3:属性值 3;
}
CSS的其他选择器
层级选择器
层级选择器设置元素样式的语法
元素名 子元素名{
属性 1:属性值 1;
属性 2:属性值 2;
属性 3:属性值 3;
}
属性选择器
元素名[属性名="属性值"]{
属性 1:属性值 1;
属性 2:属性值 2;
属性 3:属性值 3;
}
CSS的引入方式
有三种:
1)行内引入
2)内部引入
3)外部引入
关于这三种方式的优先级问题:
就近原则:
谁离需要修饰的元素近,谁的样式生效,其它的被覆盖掉~
行内样式>内部样式>外部样式
今天就先到这里了
再见了
我是萌新娜娜
立志做一个不翻车的老司机
学习Java的路上请多多指教
大家如果想要更深入了解java相关知识,私信我回复:【Java】 即可知道你们想要知道的java相关问题
- 上一篇: 原生前端之样式类的操作---classList
- 下一篇: CSS知识点-设置a标签的高度和宽度
猜你喜欢
- 2025-06-09 极客Web前端开发资源大荟萃#016(极客大学前端进阶训练营百度网盘)
- 2025-06-09 CSS伪类选择器大全:提升网页交互与样式的神奇工具
- 2025-06-09 必备-新媒体运营常用10种广告文案配图样式!
- 2025-06-09 样式混乱调不好?1 个样式隔离技巧
- 2024-09-29 BootStrap-常用样式--乐字节前端 乐字节crm项目
- 2024-09-29 HTML网页制作中常用的样式属性,学会就离前端开发更近一步
- 2024-09-29 Web前端入门新人必看,怎样使用CSS修改HTML的样式
- 2024-09-29 前端开发,在项目中常用的css样式整理
- 2024-09-29 前端-奇技淫巧-console.log的样式
- 2024-09-29 前端资源展示-前端作品展示 前端效果大全
你 发表评论:
欢迎- 最近发表
-
- Three.js vs Unity:工业可视化为何选择Web方案?
- 一款全新Redis UI可视化管理工具,支持WebUI和桌面——P3X Redis UI
- 时间线可视化实战:三款AI工具实测,手把手教你制作人生轨迹图
- 【推荐】一款可视化在线 Web 定时任务管理平台,支持秒级任务设置
- 重磅更新!FastDatasets 推出可视化 Web 界面
- 模具设计之UG钣金实例教程(3)_ug钣金基础教程
- 前端基于 RBAC 模型的权限管理实现
- 别再把JWT存在localStorage里了!2025年前端鉴权新思路
- 模具设计之曲面造型中不圆润的曲面如何处理技巧
- 9个专业级别的CSS技巧区分了解和精通的鸿沟
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle约束 (54)
- oracle 中文 (51)
- oracle链接 (54)
- oracle的函数 (58)
- oracle面试 (55)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)