css基础概述
css :cascading Style sheets 层叠样式表
是用于控制页面布局和样式的
css好处:功能强大,将html页面和样式进行分离
降低耦合度,开发效率更高
css和htnl使用
1内联样式<div style = "color="red"></div> //不推荐
2内部样式 --较为常用
<style>
div{
color:red;
}
</style>
<div><div>
外部样式
在head标签定义link属性
<link rel="stylesheet" href="css/a.css">
css选择器 语法
选择器 {
属性名1:属性值1
属性名2:属性值2
}
什么是选择器:是筛选具有相同特征的元素
选择器分类
基础选择器
1类选择器
.类名 {}
2id选择器
#选择器名{}
3元素选择器器
元素名{}
4并集选择器
选择器1,选择器2....{}
扩展选择器
选择所有元素
*{}
后代选择器
选择器1 选择器2{}
子选择器
选择器1>选择器2{
}
属性选择器
元素名称[属性名=属性值]{}
伪类选择器
元素:元素状态 {}
a:link{}
属性:
字体文本
font-size
color:文本
algin:对齐方式
line-height 行高
背景
background
边框
boder
尺寸
width 宽度
height 高度
盒子模型:
mangin 外边距
padding 内边距
box-sizing: border-box; 设置盒子的属性,让width和height就是最终盒子的大小
float 浮动
left 左浮动
right:右浮动
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步