1.基本概念
c cascading 一层一层的 层叠
s style 风格,样式
s sheet 表
层叠 样式 表,必须依托于html
/* css的注释 */
2.书写位置
-写在标签的style属性中(内联样式)
-写在外部css文件中,css
在页面上通过<link>标签将外部标签引入进来
-写在页面style标签中
<style>
css代码
</style>
弊端:如果要美化的目标太多,整个页面就会很臃肿。
3.语法规范
-内联样式)
<a href="" style="属性名:属性值;属性名:属性值;"></a>
弊端:如果样式太多,整个标签就很臃肿
-style标签中以及外部css文件中
-选择器(用于获取美化的目标)
-id选择器
#id名{
属性名:属性值;
属性名:属性值;
属性名:属性值;
}
-class选择器
.class名{
属性名:属性值;
属性名:属性值;
属性名:属性值;
}
-元素选择器/标签选择器
标签名{
属性名:属性值;
属性名:属性值;
属性名:属性值;
}
hover(鼠标悬停)
4.css常见美化操作
- 页面美化布局的标签
- <div></div> 块级元素,通常用于整体的布局
- <span></span> 行内元素,通常用于局部文字美化
-美化基本功
- 位置
外边距 margin
上 margin-top
bug描述:如果一个块级元素的第一个儿子设置了上外边距
这个元素也会跟着儿子一起下来。(上外边距合并)
解决方案:设置父级元素overflow:hidden;
左 margin-left:auto; (自动)
右 margin-right
- 大小
width 宽
height 高
- 背景
background-color
background-image:url("路径")
background-size:100% 100%;
background-repeat:no-repeat; (图片不重复)
- 字体
font-size 大小
font-weight 粗细度 blod(加粗)
font-family 字体类型
- 颜色
color:rgb(色号)
- 边框
border
border-radius:弧度; 100%是圆
border:2px solid black; /* 边框:粗细 实线 颜色 */
border-collapse:collapse; /* 表格和单元格的边框合并 */
- 文本内容
text-align 对齐方式
居中:center
text-indent 文本缩进
text-decoration:none; 去掉下划线
- 显示模式
display (块级block 行内inline 隐藏none)
- 设置光标为小手
cursor:pointer;
5.布局方式
-表格布局
优点:页面整齐,知识点简单。
缺点:如果页面元素太多或者太复杂,就会出现表格的嵌套,页面渲染效率下降
-浮动布局(div+css)
优点:代码相对简洁,舍弃了复杂的表格嵌套,开发效率高。
缺点:如果命名不规范,维护成本很高,学习成本比表格高。
float:left;
6.定位(细节的微调,不影响其他标签)
-相对定位
概念:相对于自己原来的位置进行定位调整。
position:relative;
调整:top left right bottom(下)
-绝对定位
概念:默认情况下相对于浏览器进行定位调整
如果要让元素相对于父级进行定位调整,那么就要设置父级为相对定位或者绝对定位。
position:absolute;
调整:top left right bottom(下)
css学习笔记-基础版
最新推荐文章于 2024-07-12 20:49:16 发布