第三天
CSS
基本概念:
C:cascading 一层一层 层叠
S:style 风格 样式
S:sheet 表 (语法格式 像 表)
全名:层叠样式表
书写位置:
1写在页面标签的style属性中
<a href="" style="css代码"></a>
注意:一般不推荐,如果美化的内容多,那么标签很臃肿
如果只是简单美化一两条属性,可以写在里面。
2写在页面的style标签中
<style>css代码</style>
注意:一般嵌套在head标签中,学习中推荐,工作中不推荐,如果Style标签美化太多,页面就很臃肿。
3 外部的css文件中(.css)
通过link标签将外部的css文件引入进来,工作中推荐
语法规范
#标签的style属性中(直接编写键值对 key:value;)
<a href="" style="属性名:属性值; 属性名:属性值;"></a>
#style标签和外部css文件中
选择器(获取标签的方式)
1.id选择器 (唯一标识)
#id名{
属性名:属性值;
属性名:属性值;
属性名:属性值;
}
2.class选择器
.class名{
属性名:属性值;
属性名:属性值;
属性名:属性值;
}
3.元素选择器
标签名{
属性名:属性值;
属性名:属性值;
属性名:属性值;
}
4.其他
#复刻页面准备工作
偷图
用于美化的主要标签
<div></div>盒子模型,万物皆可div 块级元素(占一整行)
<span></span>局部文字美化 行级元素
#常见样式处理
位置
margin 外边距
bug:如果div中的第一个子元素设置了上外边距,那么div也会和子元素一起下来上外边距合并的问题。
解决方案:设置父级div的属性 overflow:hidden;
position 位置
大小
width
height
背景
background
字体
font
文本内容
text
边框
border
颜色
color
显示模式 display
快级显示(最多) block
行级显示(最少) inline
隐藏 none
body (根据html)html(根据浏览器)本身没高度