美文网首页
CSS--1.CSS启程

CSS--1.CSS启程

作者: 涨财司 | 来源:发表于2019-03-27 07:26 被阅读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

相关文章

  • CSS--1.CSS启程

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

  • 启程

    窗外春雨沙沙,犹豫了许久,决定今天开始第一篇简书,因为践行永远是对时光最大的尊重。 今天的标题是启程,对于一...

  • 启程

    七分相念三分醉 同窗几载赴考时 同仁在饮杯中酒 相见何时在故地

  • 启程

    如今我又要启程,不知前面是风雨泥泞还是鲜花盛开,但愿他快快好起来,让一家人好好的生活。

  • 启程

    老公亲自送我们去机场,出发前因为小妞找不到手表电话忙得手忙脚乱,我还在车上喋喋不休的教训她!也因此错过了买零食的时间

  • 启程

    题记:从来不是让你把考试当成人生成败的赌注,只是想让你在年轻的时候体会一次全力以赴。 在风华正茂之年龄小子出生,作...

  • 启程

    这一次出发的比较晚,已经三月十号了。 从过年感冒以后就没有上过几天班了,再后来就决定要去深圳。 为什么要去深圳我也...

  • 启程

    一个偶然的机会,知道了口才改天世界这个公众号,半信半疑的参加了21天口才蜕变班,没抱什么希望,几十块钱,能...

  • 启程

    昨夜西风凋碧树,独上高楼,望断天涯路 我,84女,工作十年,人到中年,为人妻为人母,工作稳定但上升空间有限,...

  • 启程

    来广东半个月了,谁曾想广州却成为了路过~ 再看一眼这里的好天气!!启程~~~ 这好像就是我! 洗洗睡吧,毕竟明天还...

网友评论

      本文标题:CSS--1.CSS启程

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