CSS基础概要

最新推荐文章于 2022-05-20 23:52:37 发布

viewerlin

最新推荐文章于 2022-05-20 23:52:37 发布

阅读量154

点赞数

分类专栏： HTML/CSS 文章标签： CSS Web

本文链接：https://blog.csdn.net/viewerlin/article/details/79921670

版权

HTML/CSS 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

CSS学习笔记，附有自己的注释

<!doctype html>
<html>
<head>
    <title>Learning CSS</title>  <!--Cascading Style Sheets 层叠样式表-->

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!--Inter CSS 内部CSS，可以更方便-->
   <style type="text/css">   
        /*
        <!--修改所有段落的格式--> 
        p {
            color:green;
        }
        */
        /*<!--修改指定类所属段落、文字的格式-->*/
        .large {
            font-size:300%;color:red;
        }
        /*<!--修改指定段落的格式-->*/
        #green {
            color:green;
        }
        /*<!--修改指定类所属文字的字体格式-->*/
        .underline {
            text-decoration:underline;
        }
        .bold {
            font-weight:bold;
        }
        /*<!--设定指定类所属区域的格式-->*/

        .box1 {
            background-color:#f0f0f2;
            width:400px;
            height:100px;
          /*float:left; 靠左对齐*/
          /*position:relative;    /*relative 相对的，相对位置，表示距离页面上方和左边的位置，其他区域不会移动*/
          /*position:absolute;    /*absolute 绝对的，绝对位置，其他区域会移动占用区域*/
          /*position:fixed;       /*fixed 固定的，固定位置, 不管页面上下移动始终在那个位置 类似悬浮框*/
          /*position:static;      /*static 静态的，初始位置*/
          /*top:80px;left:100px;  /*向下移动80，向右移动100，意思是在离页面上方80px，离页面左边100px的位置*/
          /*z-index:1             /*z-index Z轴，会跟其他对象的Z轴比较，重叠部分数值大在上面，数值小的则会在下面*/
          /*margin:100px;         /*会在区域四周生成100px的间隙 类似一个无形的边框 不会跟其他区域重叠*/
          /*margin:100px 50px 80px 50px; /*具体设定区域四周的间隙距离，数值对应的是上右下左*/
          /*margin-left:100px;           /*具体设定区域左边的间隙距离*/
          /*padding:50px;                /*padding 留白 在区域周围建立50px的留白，区域边框会随之变大 宽高分别会加上50px*/
          /*padding:50px 100px;          /*上右下左会交替执行50px、100px的留白*/
            padding-left:50px            /*具体设定区域左边的留白*/
        }

        .box2 {
            background-color:#88becf;
            width:600px;
            height:100px;
          /*float:right; /*靠右对齐*/
          /*position:relative;*/
          /*z-index:2    /*重叠部分，第二块区域会在第一块区域的上面*/
        }

        /*
        .floatleft {
            float:left;
        }
        .clear {
            clear:both;
        }
        */
        /*
        p {
            padding:0px;  /*段落初始会有默认的padding和margin值
            margin:0px;
        } 
        */
        <!--
        .box3 {
            width:100px;
            height:100px;
            float:left;
            margin:10px;
        }
        .red{
            background-color:red;
            border:10px yellow solid;   /*border=边框 大小 颜色 样式 solid=实心*/
        }
        .blue{
            background-color:blue;
            border-style:ridge solid dotted dashed;  /*可以分别设置边框的样式，ridge脊状边框，dotted点状边框，dashed虚线*/
            border-width:10px 15px 20px 10px;        /*可以分别设置边框的宽度*/
            border-color:green yellow red black;     /*可以分别设置边框的颜色*/
        }
        .green{
            background-color:green;
            border-radius:10px;   /*设置边框圆角化*/
        }
        -->
        p {
          /*font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif*/
            font-family:"Comic Sans MS", cursive, sans-serif
        }
        .greenbox {
            width:200px;
            height:150px;
            background-color:green; 
          /*text-align:right;   /*文字靠右*/
          /*text-align:center;  /*文字居中*/
            text-align:justify; /*justify=调节 文字会填满区域再换行*/
        }

        a:visited {       /*visited 已经访问*/
            color:green;  /*点击超链接访问后，超链接会变成绿色*/
        }
        a:hover {            /*hover=徘徊 (这里是指鼠标经过超链接的时候)*/
            font-size:50px;  /*鼠标移动到超链接时，超链接会变成50px大小*/
        }
    </style>  
</head>

<body>
<div class="box1">  <!--将这一区域指定到一个类-->
    <p class="large">This is some text</p>  <!--将这一段落指定到一个类，改变这个类的格式会影响所有属于这个类的段落-->
</div>
<div class="box2">
    <p id="green" class="large">This is some more text</p> <!--为这一段落命名，唯一ID不能重复-->
</div>
<!--
<div class="box3 red"></div>
<div class="box3 blue"></div>
<div class="box3 green"></div>
-->
<!--<div class="clear"></div>  如果不写这个，会在左右两边依次对齐，写了以后会在下方靠左或靠右对齐-->  
    <!--<span>...</span>设定一个范围，一个对象可以所属多个类-->
    <!--<p>The third <span class="underline large bold">word</span> in this paragraph</p>--> 
<div class="greenbox">
    <p>This is some text.This is some text.This is some text.This is some text.
This is some text.This is some text.This is some text.This is some text.</p>
</div>
    <br><br>
    <!--targer目标/打开的地方 blank=空白(这里是指空白标签) target=_blank 添加后点击超链接会在新窗口打开-->
    <a href="http://www.baidu.com" target=_blank>Baidu</a>
    <a href="http://www.google.com" target=_blank>Google</a>  
</body>
</html>

这里写图片描述

viewerlin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础概要

CSS学习笔记，附有自己的注释&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;Learning CSS&lt;/title&gt; &lt;!--Cascading Style Sheets 层叠样式表--&gt; &lt;meta charset="utf-8" /&gt;
复制链接

扫一扫

专栏目录