码迷,mamicode.com
首页 > Web开发 > 详细

前端 --- 43 css 属性

时间:2019-01-25 21:02:16      阅读:254      评论:0      收藏:0      [点我收藏+]

标签:fixed   tee   com   效果   多个   百分比   span   ext   ide   

一. 标签嵌套规则

  块级标签能够嵌套某些块级标签和内敛标签(行内标签)

  内敛标签不能嵌套块级标签,只能嵌套内敛标签 

二.   属性

  1.宽和高(块级标签能够设置高度和宽度

       内敛标签不能设置,设置了没有效果

       内敛标签的宽度由内容来决定)

   width:500px;

   height:100px;

  2.字体属性

  ①文字字体 

    font-family   可设置多个字体,

    浏览器使用它可识别的第一个值

  技术分享图片

  ②字体大小

    默认字体大小为  16px 

  技术分享图片

  ③字重(粗细)

  font-weight:     用来设置字体的粗细

  技术分享图片

  ④文本颜色

    color: 设置文本颜色

 

1.十六进制值 - 如: #FF0000 #前两位是表示红,
  中间两位表示绿,后面两位表示蓝,F是最高级别,0表示最低级别(无色) 2.一个RGB值 - 如: RGB(255,0,0) #红绿蓝就是RGB的意思,
  第一个参数是红,最高255,最低0 3.颜色的名称 - 如: red 4.还有rgba(255,0,0,0.3),第四个值为alpha,
  指定了色彩的透明度/不透明度,它的范围为0.0到1.0之间。

  ⑤ 文字对齐    text-align:

 技术分享图片

    line-height: 100px;   (这个值要和  height   相同)

   ⑥ 文字装饰    text-decoration:

技术分享图片

技术分享图片

  ⑦  首行缩进

技术分享图片

  3. 背景属性

  ①背景颜色

  background-color: red;

  ②背景图片

  background-image:url(‘1.jpg‘);

  #url里面是图片路径,如果和你的html文件在一个目录下,

    使用这种相对路径就行了

  ③ 图片展开方式

  技术分享图片

 

  ④背景位置

  a.

  技术分享图片

技术分享图片

   b.雪碧图

   技术分享图片

  #以前大家都用雪碧图,就是将很多的网页上需要的小图片组合成一个大图,

      用这个图中哪个位置的小图片

  ⑤ 总体缩写

技术分享图片

 

一个有趣的例子:

 

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>滚动背景图示例</title>
    <style>
        * {
            margin: 0;
        }
        .box {
            width: 100%;  #凡是这种使用百分比的,都是按照你父标签的宽度的百分之多少来显示
            height: 500px;
            background: url("https://www.luffycity.com/static/img/width-bank.1c9d1b0.png") no-repeat center center; #这个图片好像没有了,自己找一个网上的图片,把这个url路径换一下,可以到摄图网去看看,国内免费的一个图片网站
            background-attachment: fixed;  #就是这个属性,让你的背景图片固定住的意思,attachment是附属、依附的意思
        }
        .d1 {
            height: 500px;
            background-color: tomato;
        }
        .d2 {
            height: 500px;
            background-color: steelblue;
        }
        .d3 {
            height: 500px;
            background-color: mediumorchid;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="box"></div>
    <div class="d2"></div>
    <div class="d3"></div>
</body>
</html>


鼠标滚动背景不动
鼠标滚动背景不动

 

 

 

 

 

 

  

 

前端 --- 43 css 属性

标签:fixed   tee   com   效果   多个   百分比   span   ext   ide   

原文地址:https://www.cnblogs.com/sc-1067178406/p/10321526.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!