首页 > Web开发 > 详细

CSS层叠样式表--使用

时间:2019-02-13 21:05:48      阅读:128      评论:0      收藏:0      [点我收藏+]

一、CSS常用属性

1、颜色属性

  (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>

 

2、字体属性 

  (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>

 

 

3、背景属性

(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   

 例:有这样一张图片、

技术分享图片

想使用其中的一个标签,下面是我的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;
        }

 

我得到了下面这个图标

技术分享图片

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

技术分享图片 

 

CSS层叠样式表--使用

原文:https://www.cnblogs.com/start20180703/p/10371701.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!