zoukankan      html  css  js  c++  java
  • 开始学习CSS,为网页添加样式

    目录

     

    认识CSS样式

    CSS样式的优势 

    CSS代码语法

    CSS注释代码

    任务


    认识CSS样式

    CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。

    如下列代码:

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

    使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字有着统一的字体、字号或者颜色等。

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>认识CSS样式</title>
    <style type="text/css">
    p{
       font-size:20px;/*设置文字字号*/
       color:red;/*设置文字颜色*/
       font-weight:bold;/*设置字体加粗*/
    }
    </style>
    </head>
    <body>
    <p>慕课网,超酷的互联网、IT技术免费学习平台,创新的网络一站式学习、实践体验;服务及时贴心,内容专业、有趣易学。专注服务互联网工程师快速成为技术高手!</p>
    </body>
    </html>

    CSS样式的优势 

    为什么使用css样式来设置网页的外观样式呢?右边编辑器是一段文字,我们想把“超酷的互联网”、“服务及时贴心”、“有趣易学”这三个短语的文本颜色设置为红色,这时就 可以通过设置样式来设置,而且只需要编写一条css样式语句。

    第一步:把这三个短语用<span></span>括起来。(见右边代码编辑器13行)

    第二步:写入下列代码:(见右边代码编辑器7-8行)

    span{
        color:red;
    }

    观察结果窗口文字的颜色是否变为红色了。

    CSS代码语法

    css 样式由选择符声明组成,而声明又由属性组成,如下图所示:

    选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响。

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

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

    注意:

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

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

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

    CSS注释代码

    就像在Html的注释一样,在CSS中也有注释语句:用/*注释语句*/来标明(Html中使用<!--注释语句-->)。就像下面代码:

    任务

    我来试一试:为CSS样式代码添加注释语句,来标明代码作用

    1、在右部编辑器中的第8行的font-size:12px;语句后面添加“设置文字字号为12px”注释。

    2、在右部编辑器中的第9行的color:red;语句后面添加“设置文字颜色为红色”注释。

  • 相关阅读:
    BZOJ 1391: [Ceoi2008]order
    BZOJ 4504: K个串
    2019 年百度之星·程序设计大赛
    POJ 2398 Toy Storage (二分 叉积)
    POJ 2318 TOYS (二分 叉积)
    HDU 6697 Closest Pair of Segments (计算几何 暴力)
    HDU 6695 Welcome Party (贪心)
    HDU 6693 Valentine's Day (概率)
    HDU 6590 Code (判断凸包相交)
    POJ 3805 Separate Points (判断凸包相交)
  • 原文地址:https://www.cnblogs.com/strawqqhat/p/10602327.html
Copyright © 2011-2022 走看看