正文

css入门二-常用样式

IP云
IP云V管理员/0 阅读
06/16
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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标签，用多少占领多少

  • 内边距与外边距

    1. padding内边距、margin外边距
    2. 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;width: 70px">Leon</span>
<!--对于内联标签，无法设置高度height、宽度width、margin、padding，但是块级标签是可以的-->
<a style="background-color: red;height: 50px;width: 70px">Leon123</a><!--但是当display:inline-block的时候，默认自己有多少占多少，但可以设置上面四个属性-->
<span style="background-color: red;height: 50px;width: 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;width: 200px;overflow: hidden">
<img src="WechatIMG1611.jpeg" >
</div>
<br/> <!--下面两种是有滚动条的显示-->
<div style="height: 200px;width: 200px;overflow: auto">
<img src="WechatIMG1611.jpeg" />
</div>
<br/>
<div style="height: 200px;width: 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 /*数字越大，在位于最上面*/