• CSS的基本知识


    与HTML相同,CSS也是一种标识语言,即可以在任何文本编辑器中打开和修改

    CSS的基本结构


    选择器(Selector)

    选择器告诉浏览器该样式将会作用于哪些对象,这些对象可以是某个标签、某个对象、网页中的所有对象、制定Class或ID等。浏览器在解析这个样式时,根据选择器来渲染对象的显示效果,选择器也可称为选择符

    声明(Declaration)

    声明可以增加一个或无数个,这些声明命令浏览器如何去渲染选择器指定的对象,声明必须包含两部分:
    (1)属性
    (2)属性值
    除此之外,还应当使用分号来标识一个声明的结束,在一个样式中最后一个声明可以省略分号。所有声明都被放置在一个大括号内{},然后整体紧邻选择器的后面

    属性(Property):

    属性是CSS提供的设置好的样式选项。属性由一个单词或者多个单词组成,多个单词之间使用连字符相接。

    属性值(Value):

    属性值用于定义显示效果的参数,如color、size等属性。它包含数值和单位、关键字等。

    例如:

    body{font-size:12px;color: #CCCCCC;}
    //定义网页字体大小为12像素,颜色为深灰色
    

    CSS的基本用法:

    CSS样式必须放在特定类型的文件、标签或者属性中,否则无效,即浏览器不会识别和解析。CSS代码一般可以放置在三个地方

    (1)直接放置在style属性中:
    例如:

        ```
            <span style="color:red;">红色字体</span>
            <div style="border:solid 1px blue; 200px;height:200px;"></div>
        ```
    效果:![](https://img2018.cnblogs.com/blog/1863675/201911/1863675-20191120233638502-1624854888.png)
    这种通过style属性直接将样式代码放在标签内的做法被称之为**行内样式**,因为它与传统网页布局中在标签增加属性的设计方法一致,这种方法并未做到把HTML结构和CSS表现分开设计,因此不建议使用
    

    除非是为个别元素设置某个特定的样式而单独定义(开小灶)

    (2)把样式代码放在标签内
    例如:

    在设置style时应当制定type属性,告诉浏览器该标签包含的代码就是CSS源代码。这样当浏览器遇到style之后,会在自动调用CSS引擎进行解析
    这种CSS应用方式被称为网页内部样式。如果仅为一个页面定义CSS时,很高效&方便,但是在一个包含多个界面的网站中,这样做就会显得很绿色。而且会使代码冗杂
    内部样式一般放在网页的头部区域,目标是让CSS源码早于页面源码下载并别解析,从而避免网页信息被下载之后,由于没有CSS样式渲染而使得页面无法显示
    (3)把样式放在单独的文件中,例如本博客的看板娘源码:

    把样式放在单独的文件中,让后使用link标签或者@import关键字导入即可使用
    这种方法称为外部样式,也是最常用、高效、简洁的使用方式。

    需要注意的事:

    1、值的不同写法:

    除了单词之外,还可以使用16进制的颜色值

    ```css
        p{color: #ff0000;}  //表示红色
    ```
    为了节约字节,可以使用CSS的缩写形式:
    
    ```css
        p{color:#f00;}
    ```
    其他的两种方式:
    
    ```css
        p{color:rgb(255,0,0);}
        p{color:rgb(100%,0%,0%);}
    ```
    需要注意的是,即使是0%,**也不能写作0**,必须加上%号
    

    2、记得写引号

    当值为若干单词(如定义字体font-family)

    ```css
        p{font-family:"sans serif";}
    ```
    

    3、多重声明

    如果要定义不止一个声明,则需要用分号将每一个声明分开

       ```css
        p{text-align:center;color:red;}
       ```
    为了增加代码的可读性,最好:
    
    ```css
        p{
            text-align:center;
            color:red;
            font-family:arial;
         }
    ```
  • 相关阅读:
    mysql安装脚本
    vim常用命令
    CentOS 6.5使用国内网易163的源
    053(七十五)
    053(七十四)
    053(七十三)
    053(七十二)
    053(七十一)
    053(七十)
    053(六十九)
  • 原文地址:https://www.cnblogs.com/kangna/p/11901742.html
Copyright © 2020-2023  润新知