CSS层叠样式表--使用

2022-07-23 09:25:41

一、颜色属性

　　（1）英文单词

<p style="color:blueviolet">独在异乡为异客</p>

　　（2）十六进制数

<p style="color: #ffee33;">独在异乡为异客</p>

　　（3）三原色

<p style="color:rgb(255,0,0)">独在异乡为异客</p>

　　（4）三原色+透明度。透明度为0到1,0完全透明，1完全不透明

<p style="color:rgba(255,0,0,0.6)">独在异乡为异客</p>

二、字体属性　

　　（1）字体大小

　　　①更大或更小

<p style="font-size: larger">独在异乡为异客</p>

<p style="font-size: smaller">独在异乡为异客</p>

　　②像素

<p style="font-size: 20px">独在异乡为异客</p>

　　③百分比

<p style="font-size: 20%">独在异乡为异客</p>

　　（2）字体种类

<p style="font-family:黑体">独在异乡为异客</p>

　　（3）字体粗细。从100到900

<p style="font-weight:900">独在异乡为异客</p>

　　（4）字体样式：是否倾斜等

<p style="font-style: italic">独在异乡为异客</p>

三、背景属性

（1）背景颜色  background-color:

（2）背景图片

<div class="back">

</div>

这是一张200*300的图片，如果代码如下，则背景是好几张拼在一起了。

.back{

    width:800px;

    height:600px;

    background-image: url("鱼群.jpg")

}

如果代码如下，则不重复拼在一起了，但此时背景也不会铺满

.back{

    width:800px;

    height:600px;

    background-image: url("鱼群.jpg");

    background-repeat:no-repeat;

}

横向铺满，纵向的话将x改为y

.back{

    width:800px;

    height:600px;

    background-image: url("鱼群.jpg");

    background-repeat:repeat-x;

}

背景位置，下面是正*，此外还有*靠左 0 center    　　　　　　第一个参数是控制左右，是到左边框的距离；第二个参数是控制上下，是到上边框的距离。      background-position:0px 20px

.back{

    width:800px;

    height:600px;

    background-image: url("鱼群.jpg");

    background-repeat:no-repeat;

    background-position:center center;

}
 想要既有内联标签的属性（在一行显示），又有块级标签的功能（设定大小）     display:inline-block   

例：有这样一张图片、

CSS层叠样式表--使用

想使用其中的一个标签，下面是我的html代码

<span></span>

下面是我的css代码

span{

            display:inline-block;

            width:18px;

            height: 20px;

            background-image: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13");

            background-position: 0px 100px;

        }

我得到了下面这个图标

CSS层叠样式表--使用

f12检查，选中100px，由于这张图左右是不用变的，因此只按上下键，可以看到显示的图标在变，调到我想要的那个图标上，确定好数值，然后修改css代码

CSS层叠样式表--使用

简写：background:　　不用再后面加-color等等了，直接把属性写到background后面即可

四、文本属性

让文本上下左右居中显示

文本横向排列：居中center，

text-align: center;　　

比如，我们定义了一个div标签，它有自己的高度、和背景颜色。。这个背景里可以放多行内容

我想调整文本行的高度，让它等于div的高度。。

此时文本上下左右居中显示

水平居中，是因为text-align:center;

上下居中，是因为line-heigt:100px;等于div的高度

首行缩进

text-indent:35px;　　

字符间距

letter-spacing: 10px;

英文中还有单词间距

word-spacing:10px　　

首字母大写

text-transform:capitalize;

　　

五、边框属性

.div1{

            width:200px;

            height:200px;

            border:1px solid red;

        }

上面的边框为1像素  实线  红色

solid实线    dashed虚线

上面类似于background，也是一种简写

border-width:5px;

border-style:solid;

border-color:red;

只控制左边边框。。。顶部边框、右边边框和底部边框同理

border-left-width:5px;

border-left-style:solid;

border-left-color:red;

六、列表属性  list-style

list-style-type:none;　　没有任何样式，只有内容

list-style-type:circle;　　样式变为小空心圆

list-style-type:square;    样式变为小黑方块

此外还有英文字母排序、罗马数字排序等

七、display属性

本来只有块级标签可以设长宽，使用了display属性，内联标签也可以设长宽

例：要设置div标签、p标签、span标签和a标签的宽度、高度和背景。我们可以分别设置它们，但显然代码量太多，如下图：

CSS层叠样式表--使用

改良一下，把共用的属性设置，拿出来统一设置。减少了代码量。但是看上图，内联标签大小起作用了吗？没有

继续改良，在span标签和a标签的属性设置各加上一行        display:block;        让span拥有块级标签的属性，可以设置长宽。这下内联标签可以设置长宽了

将内联标签改为块级标签        display:block;

将块级标签改为内联标签        display:inline

内联标签和块级标签都有各自的优缺点：内联不能设置长宽，块级不能在一行上显示

display:inline-block        既有内联标签的可以在一行上显示的特性，又有块级标签可以设置长宽的特性

下面演示一下效果看，将span标签和a标签设置为inline-block        请看下图效果

CSS层叠样式表--使用

看上图可以发现，span标签和a 标签可以设置长宽了，并且它们在一行上显示。

可以发现上图span标签和a标签之间有点空隙，如果不想有空隙，怎么做呢？可以使用word-spacing

可以再新建一个div标签把span标签和a标签放到里面，注意不要设置这个div标签为块级标签，不需要设置样式。然后设置这个div的word-spacing属性        word-spacing:-5px;

代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .div2,p,span,a{width:100px;height:100px;}

        .div2{background-color: red;}

        p{background-color: green;}

        span{background-color: blue;display: inline-block;}

        a{background-color: orange;display: inline-block;}

        .outer{word-spacing: -5px;}

    </style>

</head>

<body>

<div class="div2">divvvvv</div>

<p>ppppp</p>

<div class="outer">

    <span>spannnn</span>

    <a href="#">click</a>

</div>

</body>

</html>

若将标签设置为display:none，则不显示了

八、内外边距

1、内边距padding

标签的长和高 外面 有padding内边距，再外面有border边框

 .div1{width:200px; height:200px; background-color:antiquewhite;

            border:20px solid rebeccapurple;padding:10px;}

 .div2{width:200px; height:200px; background-color:green;

            border:20px solid #6DDCBD;}

CSS层叠样式表--使用

　　这个padding设置会改变div的大小。

　　padding用于控制内容与边框之间的距离。

2、外边距margin

直接margin上下左右都有外边距边距，将上面padding改为margin，结果如下图：

CSS层叠样式表--使用

　　div连同border一起对屏幕的上下左右各距20px

　　另外，注意body与html之间也默认也有外边距的

下外边距　　　　margin-bottom:20px;

上外边距　　　　margin-top:20px;

左外边距　　　　margin-left:20px;

右外边距　　　　margin-right:20px;

整体设置　　　　margin:10px 20px 30px 40px;　　　　上右下左的顺序，顺时针的方向　　　　如果写三个则是上  右左  下；如果写两个则是上下　　右左

3、边界塌陷

　　上图中如果div1设置下外边距20，div2设置上外边距40，则div1与div2之间的边距是40。取它们之间的较大值。

　　但是，塌陷只是在上下会发生，左右不会发生

九、float属性

block元素通常被视为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效。inline元素的margin和padding属性。水平方向的padding-left，padding-right，margin-left，margin-right都产生边距效果；但竖直方向的padding-top，padding-bottom，margin-top，margin-bottom不会产生边距效果。

常见的块级元素有：div、form、table、p、pre、h1~h5、dl、ol、ul等

常见的内联元素有：span、a、strong、em、label、input、select、textarea、img、br等

所谓文档流，指的是元素排版布局过程中，元素会自动从左到右，从上到下的流式排列。

脱离文本流，就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文本流的元素不存在而进行定位。

只有绝对定位的absolute和浮动的float才会脱离文档流。

例1：在第一个div上加float:left

.div1{width:100px;height:100px;background-color: beige;float:left}

CSS层叠样式表--使用

可以看到div1已经升起来了，上面空间空出来了，然后div2顶上去了

例2：

.div1{width:100px;height:100px;background-color: beige;float:left}

.div2{width:200px;height:100px;background-color: red;float:left}

 CSS层叠样式表--使用

可以看到div1和div2都升起来了，div3在顶了上去

例3

.div1{width:100px;height:100px;background-color: beige;float:left}

.div2{width:200px;height:100px;background-color: red;float:left}

.div3{width:100px;height:200px;background-color: green;float:left}

CSS层叠样式表--使用

div3也升起来了，依次靠左排列。div4顶上去了

例4 只将div2升起来

.div1{width:100px;height:100px;background-color: beige;}

.div2{width:200px;height:100px;background-color: red;float:left}

.div3{width:100px;height:200px;background-color: green;}

.div4{width:200px;height:200px;background-color: blue;}

CSS层叠样式表--使用

可以看到升起来的div2，只是升起来了而已。因为它上一个div1是在文档流里面的。div3顶上去了

例5 clear清除浮动　　both、left、right

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{margin:;padding:;}

        .container{border:1px solid red;width:300px;}

        #box1{background-color: green;float:left;width:100px;height:100px}

        #box2{background-color: deeppink;float:right;width:100px;height: 100px}

        #box3{background-color: pink;height:40px}

    </style>

</head>

<body>

<div class="container">

    <div id="box1">box1 向左浮动</div>

    <div id="box2">box2 向右浮动</div>

    <div style="clear:both"></div>

</div>

<div id="box3">box3</div>

</body>

</html>

CSS层叠样式表--使用

clear属性只会对自身起作用，不会影响其他元素。如果一个元素的右侧有一浮动对象，而这个元素设置了不允许右边有浮动对象clear:right    则这个元素会自动下移一格，达到本元素右边没有浮动对象的目的。

例6  清除浮动的另一种更优化的写法（推荐）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{margin:;padding:;}

        .container{border:1px solid red;width:300px;}

        #box1{background-color: green;float:left;width:100px;height:100px}

        #box2{background-color: deeppink;float:right;width:100px;height: 100px}

        #box3{background-color: pink;height:40px}

        .clearfix:after{content:"";display:block;clear:both}

    </style>

</head>

<body>

<div class="container clearfix">

    <div id="box1">box1 向左浮动</div>

    <div id="box2">box2 向右浮动</div>

</div>

<div id="box3">box3</div>

</body>

</html>

例7 使用overflow清除浮动（不推荐）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{margin:;padding:;}

        .container{border:1px solid red;width:300px;overflow: hidden}

        #box1{background-color: green;float:left;width:100px;height:100px}

        #box2{background-color: deeppink;float:right;width:100px;height: 100px}

        #box3{background-color: pink;height:40px}

    </style>

</head>

<body>

<div class="container">

    <div id="box1">box1 向左浮动</div>

    <div id="box2">box2 向右浮动</div>

</div>

<div id="box3">box3</div>

</body>

</html>

十、定位 position

1、static

　　静态的，默认的，不起什么作用，按照正常文档流去排列

2、position:relative/absolute

　　relative 相对定位。相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。

*{margin:}

.div1{width:200px;height:100px;background-color: beige;}

.div2{width:200px;height:100px;background-color:

          red;position:relative;left:100px;top:100px;}

.div3{width:200px;height:200px;background-color: green;}

.div4{width:200px;height:200px;background-color: blue;}
<div class="div1"></div>

<div class="div2"></div>

<div class="div3"></div>

<div class="div4"></div>

CSS层叠样式表--使用

可以看到效果，距离左边100个像素，距离上边100个像素。是与自己原来的位置进行了一个定位。虽然位置变了，但并没有人顶上去，因此并没有脱离文档流。

absolute 绝对定位　　设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。

.div2{width:200px;height:100px;background-color: red;position:absolute;left:100px;top:100px;}

CSS层叠样式表--使用

可以看到div2脱离文档流了，偏移也做了。它是以最左上角来定位的，按body来定位的

position:fixed　　对象脱离正常文档流，使用top，right，bottom，left等属性

.returnTop{width:80px;height:50px;position: fixed;bottom:20px;right:5px;background-color:gray;text-align:center;line-height:50px;}

以上模拟的是一个返回顶部标签

十一、margin定位

margin-top

margin-left

上一篇：为OpenResty增加nginx_upload_module模块


下一篇：mysql之字符集与校对集