HTML基础(三)
HTML基础(三)
CSS属性相关
宽和高
width属性可以为元素设置宽度
height属性可以为元素设置高度
块级标签才能设置宽度,内联标签的宽度由内容来决定
字体属性
#文字字体
font-family 可以把多个字体名称作为一个“回退”系统来保存
font-family: "Microsoft Yahei", "微软雅黑",sans-serif;
#字体大小
font-size: 14px;
#自重(粗细)
font-weight: bold;
normal 默认值,标准粗细
bold 粗体
bolder 更粗
lighter 更细
100-900 设置具体粗细,400等同于normal,700等同于bold
#文本颜色
color: 'red';
文字属性
文字对齐
#文字对齐 text-align
text-align:left
text-align:right
text-align:center
text-align:justify 两端对齐
文字装饰
text-decoration: none #默认,标准文本
text-decoration: underline #下划线
text-decoration: overline #上划线
text-decoration: line-through #穿过文本的一条线
#常用的为去掉a标签默认的自划线
a {
text-decoration: none;
}
#将段落的第一行缩进 32像素
p {
text-indent: 32px;
}
背景属性
/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*背景重复
repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
*/
background-repeat: no-repeat;
/*背景位置*/
background-position: left top;
/*background-position: 200px 200px;*/
边框
# 边框属性
#i1 {
border-width: 2px; #i1 {
border-style: solid; -----> border: 2px solid red;
border-color: red; }
}
# 边框样式
none 无边框 dotted 点状虚线边框
dashed 矩形虚线边框 solid 实线边框
#border-radius 设置半径
用这个属性能实现圆角边框的效果。
将border-radius设置为长或高的一半即可得到一个圆形。
border-radius:50%;
#display 用于控制HTML元素的显示效果
display: none HTML文档中元素存在，但是在浏览器中不显示
display: block 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分
display: inline 按行内元素显示，此时再设置元素的width、height、margin和float属性都不会有什么影响
display: inline-block 使元素同时具有行内元素和块级元素的特点
display:"none"与visibility:hidden的区别：
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
CSS盒子模型
margin: margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding: 用于控制内容与边框之间的距离；
Border(边框): 围绕在内边距和内容外的边框。
Content(内容): 盒子的内容，显示文本和图像
/*margin: 15px; #只写一个参数 上下左右全是
/*margin: 10px 20px; #第一个控制的上下 第二个是左右
/*margin: 10px 20px 30px; #第一个控制的上 第二个是左右 第三个是下
/*margin: 10px 20px 30px 40px; #上 右 下 左
float
在 CSS 中，任何元素都可以浮动。
浮动元素会生成一个块级框，而不论它本身是何种元素。
关于浮动的两个特点：
- 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
三种取值:
left：向左浮动
right：向右浮动
none：默认值，不浮动
both : 在左右两侧均不允许浮动元素
清除浮动
主要有三种方式：
- 固定高度
- 伪元素清除法
- overflow:hidden
.clearfix:after {
content: "";
display: block;
clear: both;
}
overflow溢出属性
overflow:visible #默认值。内容不会被修剪，会呈现在元素框之外
overflow:hidden #内容会被修剪，并且其余内容是不可见的
overflow:scroll #内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
overflow:auto #如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
定位(position)
所有的标签默认都是静态的 无法改变位置
position: static;
必须将静态的状态修改成定位之后
relative : 相对定位(了解)
相对于标签原来的位置 移动
absolute : 绝对定位
相对于已经定位过(只要不是static都可以 relative)的父标签 再做定位
fixed : 固定定位(回到顶部)
相对于浏览器窗口 固定在某个位置不动
#位置的辩护是否脱离文档流
1.不脱离文档流
相对定位
2.脱离文档流
浮动的元素
绝对定位
固定定位
z-index
设置对象的层叠顺序。
- z-index 值表示谁压着谁，数值大的压盖住数值小的，
- 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
- z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
opacity
用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明
