美文网首页设计师学前端
设计师学习HTML/CSS之路-06

设计师学习HTML/CSS之路-06

作者: HU_Wei | 来源:发表于2018-08-19 14:46 被阅读0次

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start!

    第6章 开始学习CSS,为网页添加样式

    6-1 认识CSS样式

    CSS全称:Cascading Style Sheets叠层样式表

    主要用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。

    如下列代码:

    p{
     font-size:12px;
     color:red;
     font-weight:bold;
    }
    

    6-2 CSS样式的优势

    以下举例:

    <html>
     <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <style type="text/css">
       span{
       color:blue
       }
      </style>
     </head>
     <body>
      <p>CSS全称:<span>Cascading Style Sheets</span>叠层样式表 
    主要用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。</p>
     </body>
    </html>
    

    <p style="color: red; margin-left: 20px">
    This is a paragraph
    </p>

    <p style="color: red; margin-left: 20px">
    This is a paragraph
    </p>
    

    注:掘金markdown只能识别内联式style。

    6-3 CSS代码语法

    css 样式由选择符和声明组成,而声明又由属性和值组成:

    image
    选择符又称选择器,指明网页中要应用样式规则的元素。

    声明在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:”分隔。当有多条声明时,中间可以英文分号“;”分隔,如下所示:

    p{font-size:12px;color:red;}
    

    注意:

    1、最后一条声明可以没有分号,但是为了以后修改方便,一般也加上分号。

    2、为了使用样式更加容易阅读,可以将每条代码写在一个新行内,如下所示:

    p{
       font-size:12px;
       color:red;
    }
    

    6-4 CSS注释代码

    如同<html>的<!--声明内容-->一样
    
    > CSS的注释语法为:<br>
    > /*这是注释内容*/ <br>
    > p{<br>
    > color:green;<br>
    > font-size:24px;<br>
    }
    

    tips:注释内容可以放在任意地方。

    相关文章

      网友评论

        本文标题:设计师学习HTML/CSS之路-06

        本文链接:https://www.haomeiwen.com/subject/tuuciftx.html