CSS-基础

作者: 通灵路耳 | 来源:发表于2020-06-16 13:52 被阅读0次

笔记 | PHP 2012 前言 | 课程体系 | 教&学方法
CSS-基础
CSS-移动端页面（响应式）
css-基础-应用方式
Less学习总结
css-背景设置
最新JavaWebIDEA2020教程及资料
css 垂直居中的方法
Html5 - 动画开发相关资源
2018-06-03

选择器
样式：背景/大小
样式：文本/字体

CSS将属性抽取出来，进行统一的设置

选择器

标签选择、id选择、类选择、精准选择

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--标签选择器-->
<style type="text/css">
    p{
        color:red;
    }
    #d{
        color:green;
    }
    .e{
        color:blue;
    }
    p.f{
        color:yellow;
    }
</style>
</head>
<body>
    <p>标签选择器</p>
    <p>标签选择器</p>
    <p id="d">Id选择器</p>
    <p class="e">类选择器</p>
    <p class="f">精准选择器</p>
</body>
</html>

样式：背景/大小

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--标签选择器-->
<style type="text/css">
/*
    大小 背景 文本
*/
    p#d{
        width:50%;
        height:50%;
        background-color:pink;
        /*背景不重复*/
        background-repeat: no-repeat;
    }
    p.f{
        width:100px;
        height:50px;
        background-color:green;
        /*背景重复*/
        backgroud-repeat: repeat-x;
    }
    p.e{
        width:100px;
        height:50px;
        background-color:blue;
        /*背景平铺*/
        background-size: contain;
    }
</style>
</head>
<body>
    <p id="d">背景大小</p>
    <p class="e">背景大小</p>
    <p class="f">背景大小</p>
</body>
</html>

样式：文本/字体

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/*文本颜色*/
    div#colorful{
        color:red;
    }
/*文本居中*/
    div#left{
        border:1px red solid;
        text-align:left;
    }
/*文本居左*/
    div#right{
        border:1px red solid;
        text-align:right;
    }
/*文本居右*/
    div#center{
        border:1px red solid;
        text-align:center;
    }
/*上划线*/
    h1{
        text-decoration:overline;
    }
/*下划线*/
    h3{
        text-decoration:underline;
    }

    .p{
    /*行间距*/
        line-height:300%;
    /*字符间距*/
        letter-spacing:2;
    /*单词间距*/
        word-spacing:10;
    /*首行缩进*/
        text-indent:50;
    }
    
    .big{
    /*字体大小*/
        font-size:30px;
    /*字库*/
        font-family:楷体;
    }
</style>
</head>
<body>
    <div id="colorful">文本</div>
    <div id="left">左对齐</div>
    <div id="right">右对齐</div>
    <div id="center">居中</div>
    <h1>上划线</h1>
    <h3>下划线</h3>
    <p class="p">段落：行间距，单词间距</p>
    <p class="big">大</p>
</body>
</html>

样式：边框

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/*实线边框*/
    div.solid{
    /*边框宽度*/
        border-width:20px;
    /*边框颜色*/
        border-color:red;
    /*边框线条*/
        border-style:solid;
    }
/*点状边框*/
    div.dotted{
    /*只有顶部*/
        border-top-style:solid;
        border-top-color:blue;
        border-top-width:10px;
        border-style:dotted;
    }
/*虚线边框*/
    div.dashed{
        border-style:dashed;
        border-width:20px;
        border-color:green;
    }
/*双线边框*/
    div.double{
        border-style:double;
        border-width:20px;
        border-color:yellow;
    }
</style>
</head>
<body>
    <div class="solid">实线边框</div>
    <div class="dotted">点状边框</div>
    <div class="dashed">虚线边框</div>
    <div class="double">双线边框</div>
</body>
</html>

样式：内边距

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    .red{
        border:5px solid red;
        backgroud-color；green;
        padding-left:50px;
    }
    .red2{
       border:50px solid red;
       background-color:green;
       padding: 10 20 30 40;
    }
</style>
</head>
<body>
    <span class="red">左内边距</span>
    <span class="red2">自定义内边距</span>
</body>
</html>

样式：外边距

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    .margin{
       border:1px solid red;
       background-color:green;
       margin-left:10px;
    }
</style>
</head>
<body>
    <span class="margin"> 有左外边距的span  </span>
</body>
</html>