css入门二-常用样式

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 /*数字越大，在位于最上面*/