• 简单了解并使用CSS


    CSS(Cascading Style Sheets)层叠样式表

      作用:用于美化页面且修饰字体大小没限制

      css样式代码在<style></style>标签中书写,<style></style>标签放置在<head>标签中

      格式规范:

    选择器名称{ 属性名:属性值;属性名:属性值;..............}
    选择器:指定css样式作用在哪些html标签之上
    如果属性值有多个则用空格隔开

    CSS注释:/* CSS注释内容 */

    CSS选择器:元素选择器、类选择器、id选择器

    元素选择器:(元素==标签) 选择CSS样式代码作用于对应标签名的标签上

    类选择器:class属性

    格式:

    .类名{.........}
    源代码:
        <span class="类名">xxxx</span>

    id选择器:id的属性值必须在本页面是唯一的      特点:更集聚针对性

    格式:

    #id值{....}
    源代码:
        <span id="id值">xxxx</span>

    基本选择器的结合方式: 层级关系

    格式:

      选择器1 选择器2 .....{............}           寓意:选择器1下的选择器2

    边框属性:  所有的html标签都有边框,默认边框不可见

    设置边框的格式:宽度 样式 颜色

    线条样式:solid 实线、 none 无边、 double 双线

    背景颜色设置的两种方式:1.英文单词  2.颜色代码 格式:#红绿蓝 每一个颜色用两个16进制位数表示

    例如:#ff1100 红色:ff;绿色:11;蓝色:00      (用于微调颜色)

    float浮动属性:

    格式:   选择器{float: 属性值}

    常用属性值:none 元素不浮动 (默认)、left 元素向左浮动、 right 元素向右浮动

    display属性: 使元素在行内元素和块元素之间相互转换

    格式:选择器{dispaly: 属性值}

    常用属性值:block:块元素、inline:行内元素、none:此元素将被隐藏,不显示也不占用页面空间

    字体样式: font-size 设置字体的大小、 color 设置字体的颜色

    CSS盒子模型:

    设置css边框大小:border-top : xx;  border-bottom : xx;  border-left : xx;  border-right : xx

    内边距padding:css边框里面内容体的距离

    格式:padding-top : xx;  padding-bottom : xx;  padding-left : xx;  padding-right : xx

    外边距margin:css边框与边框的距离

    格式:margin-top : xx;  margin-bottom : xx;  margin-left : xx;  margin-right : xx

    css样式和html的结合方式:

    内部样式:

      (适合针对性)行内样式:通过style属性来设置元素的样式

       例:

    <a style="xxxx:xxxx;">xxxxxxxxxx</a>

      (适合在页面中进行复用)标签方式

      例: 

    <style>xxxxxxxxxxxxxx</style>

    外部样式:

    外部样式: <link/>又称为链入式,是将所有的样式放在一个或多个以.css为拓展名的外部样式表文件中,通过<link/>标签将样式连接到html文档中。

    格式:<link rel="stylesheet" type="text/css" href="css文件路径"/>

    rel="stylesheet" 固定值 表示样式表

    type="text/css" 固定值 表示css类型

    href 表示css文件位置

    以上就是css的基本介绍。 注:仅适合给后端人员了解css,前端人员不太适合,因为不够全面。

                                                   加油!

                                             时间:2020-03-20 01:15:44

  • 相关阅读:
    16进制字节和数字转换
    Vs2013 使用EF6 连接mysql数据库
    设计模式-单例模式(Singleton)
    WPF 10天修炼 第十天- WPF数据绑定
    WPF 10天修炼 第九天
    WPF 10天修炼 第八天
    WPF 10天修炼 第七天- WPF资源、样式、控件模板
    WPF 10天修炼 第六天- 系统属性和常用控件
    WPF 10天修炼 第五天- 内容控件
    WPF排版布局经验总结(干货)简短不疲倦
  • 原文地址:https://www.cnblogs.com/Charles-H/p/Learning_CSS.html
Copyright © 2020-2023  润新知