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

css基础知识

时间:2019-09-21 01:18:00      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:red   dde   超出   border   parent   溢出   body   多平台   bottom   

非布局样式:

字体(多平台下的字体适配:fallback机制)、字重、颜色、大小、行高

字体适配:

/*多平台下的字体适配:fallback机制*/
.text { font-family: Menlo, Monaco, Consolas,
"Courier New", monospace, Arial, "Microsoft YaHei",
"黑体", "宋体", sans-serif; }

行高:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{font-size: 10px;vertical-align: middle}
        .two{font-size: 20px;vertical-align: middle}
        .three{font-size: 30px;vertical-align: middle}
        img{vertical-align: bottom}
    </style>
</head>
<body>
<div style="background:greenyellow">
    <!--默认以文字的基线对齐 添加 vertical-align 可以改变文字的对齐方式-->
    <span class="one">第一段</span>
    <span class="two">第二段</span>
    <span class="three">第三段</span>
    <!--图片设置 vertical-align:bottom 可以消除图片的缝隙-->
    <img src="./img/5.png">
</div>
</body>
</html>

背景、边框

背景:纯色背景、渐变色背景、多背景叠加、图片背景(雪碧图){雪碧图可以减少http请求优化性能}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渐变色背景</title>
    <style>
        .div1,.div2,.div3{
            height: 200px;
            width: 200px;
            line-height: 50px;
            font-weight: bolder;
            float: left;
            margin: 20px;
        }
        .div1{ background: linear-gradient(to right,yellow,green);}
        .div2{ background: linear-gradient(45deg,green,yellow);}
        .div3{ background: linear-gradient(45deg,red 0, yellow 30% , green 70%);}
    </style>
</head>
<body>
<div class="div1">背景色按方向渐变</div>
<div class="div2">背景色按角度渐变</div>
<div class="div3">背景色以某个角度开始多段颜色渐变</div>
</body>
</html>

边框:线型,大小,颜色   边框背景图     边框衔接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框的衔接和用边框做三角形e</title>
    <style>
        .div1{
            width: 0px;
            border-bottom: 30px solid red;
            border-right: 30px solid blue;
            border-top: 30px solid green;
            border-left: 30px solid yellow;
        }
        .div2{
            width: 0px;
            border-bottom: 30px solid red;
            border-right: 30px solid transparent;
            border-left: 30px solid transparent;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>

滚动: visibel 当内容的体积超出容器时 内容直接溢出容器

    hidden 当内容的体积超出容器时 超出部分隐藏 

      scroll 当内容的体积超出容器时 滚动条显示

      auto 当内容的体积超出容器时 滚动条显示 内容体积小于容器时 滚动条隐藏

粗体:font-weight  ( 可以以数字的形式规定字体的粗细 、bold 和 normal项目中比较常用 )

斜体 :font-style: itatic

下划线:text-decoration :underline

指针 : cursor : pointer  (指针变手)

其它

图标引入方式:引入在网上下载图标的css包再使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="iconfont/iconfont.css">
</head>
<body>
    <i class="iconfont icon-aixin"></i>
</body>
</html>

css基础知识

标签:red   dde   超出   border   parent   溢出   body   多平台   bottom   

原文地址:https://www.cnblogs.com/rickyctbur/p/11525415.html

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