• CSS基础学习(一)


    1.设置背景颜色:background-color

    例:background-color:#d0e4fe;或background-color:blue;

    2.字体颜色·:color

    例:color:red;

    3.对齐方式:text-align

    例:text-align:right;            //右对齐

    4.字体样式:font-family

    例:font-family:"楷体";

    5.字体大小:font-size

    例:font-size:50px;

    6.左外边距/右外边距:margin-left/margin-right

    例:margin-left:50px;

    7.CSS注释以 /* 开始, 以 */ 结束.

    8.id选择器可以为标有特定 id 的 HTML 元素指定特定的样式,以 "#" 来定义。

    注:ID属性不能以数字开头

    例:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>CSS id</title>
    <style>
    body{
    background-color:pink;
    }
    #id1
    {
    text-align:center;
    color:blue;
    }
    </style>
    </head>

    <body>
    <p id="id1">Hello World!</p>
    <p>这个段落不受该样式的影响。</p>
    </body>
    </html>

    运行结果:

     9.class 选择器用于描述一组元素的样式,在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示。

    class 选择器有别于id选择器,class可以在多个元素中使用。

    例:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>class选择器</title>
    <style>
    body{
    background-color:pink;
    }
    .center
    {
    text-align:center;
    font-family:楷体;
    font-size:25px;
    color:blue;
    }
    </style>
    </head>

    <body>
    <h1 class="center">标题居中</h1>
    <p class="center">段落居中。</p>
    </body>
    </html>

    运行截图:

     可以指定特定的HTML元素使用class选择器,未被指定的html元素使用该class选择器不起作用。

    例:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>class选择器</title>
    <style>
    body{
    background-color:pink;
    }
    p.center
    {
    text-align:center;
    font-family:楷体;
    font-size:25px;
    color:blue;
    }
    </style>
    </head>

    <body>
    <h1 class="center">标题居中</h1>
    <p class="center">段落居中。</p>
    </body>
    </html>

    运行截图:

     10.插入外部样式表

    使用 <link> 标签链接到样式表,<link rel="stylesheet" type="text/css" href="Test1.css">

    浏览器会从文件 mystyle.css 中读到样式声明,并根据它来格式文档。

    外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。

     

    例:

    Test1.css:

    @charset "UTF-8";
    body{
    background-image:url('https://static.runoob.com/images/mix/paper.gif');     //设置图片背景
    }
    .p{
    font-family: 楷体;
    font-size: 25px;
    text-align:center;
    }

     

    Test1.html:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>class选择器</title>
    <link rel="stylesheet" type="text/css" href="Test1.css">
    </head>
    <body>
    <h1 class="center">标题居中</h1>
    <p class="p">段落居中。</p>
    </body>
    </html>

     

    运行截图:

  • 相关阅读:
    网络七层协议之部分协议详解
    C/C++书籍分享(百度网盘版)
    poi导出excel实例
    java map去除空值和null,等一些好用的工具类
    mysql查询出来的sum结果后边有.0如何去除
    java form 表单提交多条数据到后台!
    使用jsp链接jdbc数据库并将数据显示出来
    对接短信平台wsdl获取代码方式!并使用
    Flutter! 记录一下艰难的Flutter+vscode+真机,第一次调试成功
    微信公众号开发-微信公众号网页H5静默授权!!!
  • 原文地址:https://www.cnblogs.com/zyj3955/p/14697501.html
Copyright © 2020-2023  润新知