JavaWeb ----- CSS
2021/7/18 20:35:06
本文主要是介绍JavaWeb ----- CSS,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
css:页面美化和布局控制
- 概念:层叠样式表
层叠:多个样式可以作用在同一个html的元素上。同时生效 - 好处:
1.功能强大 2.将内容展示和样式控制分离 降低耦合度,解耦 让分工写作更容易 提高工作效率
-
css的使用:css与html结合方式
-
1.内联样式
在标签内使用style属性指定css代码
如:<div style="color:red;">hello css</div>
-
2.内部样式
在head标签内,定义style标签,style标签的标签内容就是css代码 -
3.外部样式 *定义css资源文件 *在head标签内,定义link标签,引入外部的资源文件
注意:
- 1,2,3种方式 css作用范围越来越大
- 1方式不常用,2,3常用
- 3种格式可以写为:
<style> @import "css/a.css"; </style>
css语法:
格式:
选择器{
属性名1:属性值1;
属性名2:属性值2;
… }
- 选择器:筛选具有相似特征的元素
注意:
每一对属性需要使用;隔开,最后一对属性可以不加;
分类:
1.基本选择器
1.id选择器,选择器具体的id属性值的元素 语法:#id属性值{} 2.元素选择器:选择具有相同标签名称的元素 语法:标签名称{} 注意:id选择器优先级高于元素选择器 3.类选择器:选择具有相同的class属性值的元素。 语法:.class属性值{} 注意:类选择器优先级高于id选择器
2.扩展选择器:
1.选择所有元素: 语法: *{} 2.并集选择器: 选择器1,选择器2{} 3.子选择器:筛选选择器1元素下的选择器2元素 语法: 选择器1 选择器2{} 4.父选择器: 语法: 选择器1 >选择器2{} 5.属性选择器:选择元素名称,属性名=属性值的元素 语法: 元素名称【属性名=“属性值”】{} 6.伪类选择器:选择一些元素具有的状态 语法:元素:状态{} 如: `<a>` 状态: link :初始化的状态 visited:被访问过的状态 active:正在访问的状态 hover:鼠标悬浮状态
属性
-
字体、文本
font-size
:字体大小
color
:文本颜色
text-align
:对其方式
line-height
:行高 -
背景
background
: -
边框
border
:设置边框,复合属性 -
尺寸
width
:宽度
height
:高度 -
盒子模型:控制布局
margin
:外边距
padding
:内边距
默认情况下内边距会影响整个盒子的大小
box-sizing:border-box
:设置盒子的属性,让width和height就是最终盒子的大小 -
float:浮动
left
right
这篇关于JavaWeb ----- CSS的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-06小米11i印度快充版ROM合集:极致体验,超越期待
- 2024-10-06【ROM下载】小米11i 5G 印度版系统, 疾速跃迁,定义新速度
- 2024-10-06【ROM下载】小米 11 青春活力版,青春无极限,活力全开
- 2024-10-05小米13T Pro系统合集:性能与摄影的极致融合,值得你升级的系统ROM
- 2024-10-01基于Python+Vue开发的医院门诊预约挂号系统
- 2024-10-01基于Python+Vue开发的旅游景区管理系统
- 2024-10-01RestfulAPI入门指南:打造简单易懂的API接口
- 2024-10-01初学者指南:了解和使用Server Action
- 2024-10-01Server Component入门指南:搭建与配置详解
- 2024-10-01React 中使用 useRequest 实现数据请求