CSS--1.CSS启程

2019-03-27  本文已影响0人  涨财司
CSS

注:本文内容为本人学习慕课网前端知识时整理摘录,方便后续查阅。具体可访问原链接

1.认识CSS样式
  CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等,当然最重要的还是页面布局。

如下列代码:

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

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

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

第一步:把这三个短语用<span></span>括起来。
第二步:在style标签(type为text/css)里写入下列代码:

span {
  color:red;
}

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

示例:

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

结果:

image

3.CSS代码语法
  css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示:

css语法构成

  选择器:指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响。
  声明:在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:”分隔。当有多条声明时,中间可以英文分号“;”分隔,如下所示:

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

注意:

  (1)最后一条声明可以没有分号,但是为了以后修改方便,一般也加上分号。
  (2)为了使用样式更加容易阅读,可以将每条代码写在一个新行内,而不要像上面那个样两个属性放到同一行书写

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

<style type="text/css">
    /*设置段落默认格式*/
    p{
       font-size:12px;/*设置文字字号为12px*/
       color:red;/*设置文字颜色为红色*/
    }
</style>

阿里云推广:
通用代金券领取链接:https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=qtyyc38p
优惠链接:(总有一款适合你)
1)【开年HI购季】爆款云产品5折:https://www.aliyun.com/acts/product-section-2019/new-users?userCode=qtyyc38p
2)【助力企业上云】性能级主机2-5折:https://promotion.aliyun.com/ntms/act/enterprise-discount.html?userCode=qtyyc38p
3)【全民云计算】云主机低至2折:https://promotion.aliyun.com/ntms/act/qwbk.html?userCode=qtyyc38p
4)【商标注册服务】低至300元:https://tm.aliyun.com/?userCode=qtyyc38p
5)【超高返现】购物车全产品返25%:https://promotion.aliyun.com/ntms/act/shoppingcart.html?userCode=qtyyc38p
6)【阿里云自营建站】买一年送一年:https://www.aliyun.com/jianzhan/?userCode=qtyyc38p

上一篇 下一篇

猜你喜欢

热点阅读