• CSS基础篇之了解CSS和它的基本属性


    CSS是什么?

    CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言。这种语言能优化我们编程,把东西简化和优化写法,而且不同的浏览器有不同的CSS前缀

    如果你用的是charome和safari,前缀就是-webkit

    如果你用的是firefox,前缀是-moz

    如果你用的是IE,前缀是-ms

    如果你用的是opera,前缀是-o

    CSS能做什么?

    CSS简化了以前要使用很多图片和脚本实现的效果,只需几行代码就能搞定。方便了程序员的设计过程,更灵活的页面布局和更快的页面加载速度。可以用一个CSS文件控制多个页面属性,只要修改CSS文件中相应的代码,那么页面的效果也会发生改变。设备上也多方面支持手机、打印机、电视机、游戏机等..总的一个目的来说就是为了实现html标签和属性、属性值分开,把HTML属性、属性值用CSS语言来编程使其更简单方便。

    CSS语法构成

    Selector  { Property : Value; }

          ↓             ↓                 ↓

    选择符    属性             值

    选择符就相当于我们HTML的标签。属性和值都差不多,只不过属性与属性值之间用:号隔开结束用;号。

    CSS的引入方式

    有三种引入方式

    1.行内引用在:在标签内进行CSS样式编码,这种方法是不需要写选择器。CSS语言属性style。

    <body style=”background-color:#ccccc;”>
    <p  style=”font-size:16px;background-color:#ccc;”></p>

    2.页内引用:页内引用作为页面中的一个单独部分,由<style></style>标签定位在<head></head>之中。

    例1:

    <html>
    <head>
    <title></title>
    <style type=”text/css”>
        body{
            background-color:#ff0000;
    }
    </style>
    </head>
    <body>
    <p>变红</p>
    </body>
    </html>

    例2:

    <html>
    <head>
    <title></title>
    <style type=”text/css”>
        h1{
            background-color:#ff0000;
            font-size:30px;
    font-family;“微软雅黑;
    }
    </style>
    </head>
    <body>
         h1{标题}*100
    </body>
    </html>

    3.外部样式表:外部样式表是CSS应用中最好的一种形式,它将CSS样式代码单独 放在一个外部文件中,再由网页进行调用。需要在同一个目录下创建一个xxx.css文件名。在里面编辑。

    例1:

    CSS文件里面写

    h1{
            background-color:#ff0000;
            font-size:30px;
    font-family;“微软雅黑;
    }

    在html文件里面写

    <html>
    <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="文件名.css" />
    </head>
    <body>
             h1{标题}*100
    </body>
    </html>

    例2:

    CSS文件里面写

      

    body{
            background-color:#ff0000;
    }

    HTML里面写

    <html>
    <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="文件名.css" />
    </head>
    <body>
    <p>变红</p>
    </body>
    </html>

    上面三中引入方式有分先后级别,三种引用方式里标签越近就优先使用该属性。简称就近原则。行内引用> 页内引用> 页外引用 。不推荐行内引用,最好用页外引用。

    如果我同时在CSS文件里编辑也在HTML编辑看效果使用哪个

    在HTML里面写

    <html>
    <head>
    <title></title>
    <style type=”text/css”>
        p{
            background-color:red;
    }
    </style>
    </head>
    <body>
    <p style=“background-color:green;”>变红</p>
    </body>
    </html>

    在CSS里面写

    p{
            background-color:blue;
    }

    P标签里面有编辑了背景颜色绿色会变成绿色。因为就近原则,把P标签里面的style=“background-color:green;”删除,重新刷新网页你会发现这次背景变回红色了。

    <style type=”text/css”>
    
           p{
    
                  ackground-color:red;
    
    }
    
    </style>

    删除这段,这次是页外引用这次背景变成蓝色了。一定要记住它们的优先级别。

    css 代码注释

    /* 开始 */ 结束

           /* 公共样式*/

           body { margin:0px; padding:0px;}   

          

           /*导航样式开始*/

           #nav {

             ……

           }

           /*导航样式结束*/

    1.通配选择符 *

    把页面内的所有对象进行选择来指定样式。

     <style type="text/css">
                * {
     
                    color: #000;
                }
            </style>
       
    <style type="text/css">
                * {
                    font-family: "微软雅黑";
                    color: #000;
                }
            </style>

    这里设置全部可用此属性的标签的字体样式和颜色。

    2.元素选择符

    指定单个标签进行指定样式,相同的标签都会受到影响

    <style type=”text/css”>
        h1{
            background-color:#ff0000;
            font-size:30px;
    font-family;“微软雅黑;
    }
    </style>
    <style type=”text/css”>
        p{
            background-color:#ff0000;
            font-size:30px;
    font-family;“微软雅黑;
    }
    </style>

    这里就是设置了p和h1标签里面的背景颜色、字体大小、字体样式。

    3.群组选择符

    将所要设计相同属性的标签一起进行改变。

    <style type="text/css">
                h1,p {
                    font-family: "微软雅黑";
                    font-size: 30px;
                    color: #333;
                }
        </style>
    <style type="text/css">
                h1,p,b,big {
                    font-family: "微软雅黑";
                    font-size: 30px;
                    color: #333;
                }
        </style>

    可以对指定的标签同时编辑这三种属性记住标签与标签之间间隔用 ,号。

    现在开始学CSS基础希望能学好吧。大家也要加油!

  • 相关阅读:
    GLASS产品下载
    Google earth engine批量下载MODIS数据并导出
    获取浏览器路径'?'开头,&开头的参数
    Js Vue全屏切换显示 指定div切换全屏显示
    关于Js 进一步应用遇到的小问题--总结
    自定义基于element UI 换行步骤条
    Vue 自定义封装树形表格组件
    js 解决在Vue中阻止重复提交、多次触发、节流函数、防止短时间多次触发问题
    Vue中使用 echarts 实现动态配置参数及类型显示不同形状的图表配置、可视化的echarts图表组件
    数据结构 -- 链表的整表创建
  • 原文地址:https://www.cnblogs.com/azq6252930/p/5751362.html
Copyright © 2020-2023  润新知