CSS 样式表

CSS:层叠式样式表

一,对层标签进行操作

I。层标签的宽度,高度,底色

基本格式:

<div ></div>

"          " 中:       (宽度)      100px/50%;         100px表示宽度为100个像素(px必须有)/50%表示占网页宽度的一半(如果嵌套在一个层标签中,占该层标签的50%)

                          (高度)      height:100px/50%;        100px表示高度为100个像素(px必须有)/如果嵌套在一个层标签中,占该层标签的50%(最外层层标签无法使用%,未知网页长度)

                          (背景色)   background-color:red;     red可以#颜色代码也可以

II。层标签中文字样式的修改(加粗,倾斜,下划线,字体,大小,颜色)

格式:<div ></div>

"         "中:          (加粗)             font-weight:100/bold;

                           (倾斜)             font-style:italic;           

                           (下划线)          text-decoration:underline;  

                           (大小)             font-size:10px;         (正常浏览一般12px-16px)

                           (颜色)             color:red/#颜色代码;

                           (字体)             font-family:黑体;

常用的是这几个,其它的在按出:后会自动弹出,随用随调取。

III.流式布局    (将浏览器内容自动适应浏览器大小)

格式:<div ></div>

"          "中:             float:left/right         (left,流式布局是以左侧为基准 。 right,流式布局时以右侧为基准)    

                               margin-left/right/top/ bottom            (left,层标签左侧间距。right,层标签右侧间距。top,层标签上部间距。bottom,层标签底部间距。)   

IV。将层标签定位到网页中间

观察此图,可知层标签并没有设置到网页正中央,他是以层标签左上角的点为基准,而不是以层标签的中心作为中心点,所以应该将以左上角点为基准,左右各减去自身宽度,高度的一半的像素:

格式:<div ></div>

"                "中:            border:5px solid red;                  (层标签外框宽度5个像素,实线,颜色是红色)

                                    position:abslute;                         (绝对定位,定位层标签左上角的点)

                                    margin-left/right/top/ bottom            (left,层标签左侧间距。right,层标签右侧间距。top,层标签上部间距。bottom,层标签底部间距。) 

二,层标签分组使用

I。对层标签进行分组(可以把分组后个层标签看成一个文件(有多个单一层标签元素))

<head>

<style type="text/css">

.组名{width:                                ;

        height:                                ;

         …………(各种标签格式)          ;

      }

</style>

</head>

<body>

<div class="组名"></div>

<div class="组名"></div>

<div class="组名"></div>

</div>

分组后的层标签按照<head>内的格式统一。

三,背景

I。背景图片

格式:

<body margin: 0px; padding: 0px;">background-repeat:选择背景放置方式">

II。层标签贴边(层标签和HTML页边框没有缝隙)

代码:

<head>

* {
    margin:0px;
    padding:0px;
   }

</head>

原文地址:https://www.cnblogs.com/changxiaosen/p/6647989.html