css入门二-常用样式总结
基本标签样式
-
背景色background-color
-
高度height;
-
宽度width;
-
边框对齐以及详细设定举例
width/*宽度*/: 80%; height/*高度*/: 48px; border/*边框*/:1px solid red; font-size/*字体大小*/: 26px; text-align/*左右居中*/: center; line-height/*根据标签高度自适应垂直居中*/: 48px; font-weight/*加粗*/: bold; -
块级标签堆叠
float属性: float: left float: right <div style="clear: both;"></div> -
块级标签与内联标签
块级标签：div标签，h标签、p标签，用不完整块也要占领 内联标签：a标签、span标签，用多少占领多少 -
内边距与外边距
- padding内边距、margin外边距
- body中的默认margin:8px 就是与网页整体相隔8个像素
<body style="margin: 0 auto"> 这样设定后div才会与整个页面的上下没有缝隙 <div style="background-color: red;">asdadasd</div> </body> -
display
- 重要：内联标签无法设定高度、宽度、padding、margin
- 举例：
<div style="background-color: red;display: inline;">asdadad</div>
<!--display实现了块级标签与内联标签之间的转换-->
<span style="background-color: red;display: block;">asdadad</span>
<span style="background-color: red;height: 50px; 70px">Leon</span>
<!--对于内联标签，无法设置高度height、宽度width、margin、padding，但是块级标签是可以的-->
<a style="background-color: red;height: 50px; 70px">Leon123</a>
<!--但是当display:inline-block的时候，默认自己有多少占多少，但可以设置上面四个属性-->
<span style="background-color: red;height: 50px; 70px;display: inline-block">Leon</span>
<!--display:none 让标签消失-->
字体
- 文字大小font-size
font-size:14px; font-size:1em; font-size:10%; 备注：1em=16px，推荐使用em设置字体大小 - 文字粗细font-weight
font-weight:normal; normal=400 font-weight:bold; 加粗 font-weight:900;
文本
- 文本缩进text-indent: 5em;
- 单词间隔word-spacing: 30px;但是对中文好像没什么作用
链接
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
备注：
1. 为了使定义生效，a:hover 必须位于 a:link 和 a:visited 之后
2. 为了使定义生效，a:active 必须位于 a:hover 之后
边框border
<div style="border: 1px solid red">1像素，实体边框</div>
<div style="border: 1px dotted red">1像素，虚线边框</div>
<div style="border-top: 1px dotted red">1像素，上虚线边框</div>
<div style="border: 1px dotted red;border-radius: 10%;display: inline-block">1像素，虚线边框,并设定边框的圆角程度</div>
透明度opacity
<div style="z-index: 9;background-color: #C2C8D4;opacity: 0.3">设定改div的背景的透明度为0.3</div>
over-flow处理不符合元素框的内容
<!--hidden会只显示div设定的区域，其他的区域将看不到-->
<div style="height: 200px; 200px;overflow: hidden">
<img src="WechatIMG1611.jpeg" >
</div>
<br/>
<!--下面两种是有滚动条的显示-->
<div style="height: 200px; 200px;overflow: auto">
<img src="WechatIMG1611.jpeg" />
</div>
<br/>
<div style="height: 200px; 200px;overflow: scroll">
<img src="WechatIMG1611.jpeg" />
</div>
:hover选择鼠标指针浮动在其上的元素，并设置其样式
.pg-header .menu {
display: inline-block;
padding: 0 10px;
color: white;
}
.pg-header .menu:hover {
/*当鼠标移动到这个标签的位置的时候，会应用下面的样式*/
background-color: blue;
color: #000;
}
z-index重叠显示顺序
z-index: 9 /*数字越大，在位于最上面*/