HTML+CSS学习笔记 (6) - 开始学习CSS

认识CSS样式

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

如下列代码：

p{

   font-size:12px;

   color:red;

   font-weight:bold;

}

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

CSS样式的优势

大丈夫当如此！是英雄，分我杯羹！年少轻狂，只记得眉心一点。举手与天竞自由，豪情纵，胸怀敞。

为什么使用css样式来设置网页的外观样式呢？上面一段文字，我们想把“是英雄”、“豪情纵”、“年少轻狂”这三个短语的文本颜色设置为红色，这时就 可以通过设置样式来设置，而且只需要编写一条css样式语句。

第一步：把这三个短语用<span></span>括起来。

第二步：写入下列代码：

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>，分我杯羹！<span>年少轻狂</span>，只记得眉心一点。举手与天竞自由，<span>豪情纵</span>，胸怀敞。</p>

</body>

</html>

CSS代码语法

css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：

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

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

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

注意：

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

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

p{

   font-size:12px;

   color:red;

}

CSS注释代码

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

HTML+CSS学习笔记 (6) - 开始学习CSS的更多相关文章

  1. 学习笔记：CentOS7学习之二十五：shell中色彩处理和awk使用技巧

    目录 学习笔记:CentOS7学习之二十五:shell中色彩处理和awk使用技巧 25.1 Shell中的色彩处理 25.2 awk基本应用 25.2.1 概念 25.2.2实例演示 25.3 awk ...

  2. 学习笔记：CentOS7学习之二十四：expect-正则表达式-sed-cut的使用

    目录 学习笔记:CentOS7学习之二十四:expect-正则表达式-sed-cut的使用 24.1 expect实现无交互登录 24.1.1 安装和使用expect 24.2 正则表达式的使用 24 ...

  3. 学习笔记：CentOS7学习之二十三： 跳出循环-shift参数左移-函数的使用

    目录 学习笔记:CentOS7学习之二十三: 跳出循环-shift参数左移-函数的使用 23.1 跳出循环 23.1.1 break和continue 23.2 Shift参数左移指令 23.3 函数 ...

  4. 学习笔记：CentOS7学习之二十二： 结构化命令case和for、while循环

    目录 学习笔记:CentOS7学习之二十二: 结构化命令case和for.while循环 22.1 流程控制语句:case 22.2 循环语句 22.1.2 for-do-done 22.3 whil ...

  5. 学习笔记：CentOS7学习之二十一： 条件测试语句和if流程控制语句的使用

    目录 学习笔记:CentOS7学习之二十一: 条件测试语句和if流程控制语句的使用 21.1 read命令键盘读取变量的值 21.1.1 read常用见用法及参数 21.2 流程控制语句if 21.2 ...

  6. 学习笔记：CentOS7学习之二十：shell脚本的基础

    目录 学习笔记:CentOS7学习之二十:shell脚本的基础 20.1 shell 基本语法 20.1.1 什么是shell? 20.1.2 编程语言分类 20.1.3 什么是shell脚本 20. ...

  7. 学习笔记：CentOS7学习之十七： Linux计划任务与日志的管理

    目录 学习笔记:CentOS7学习之十七: Linux计划任务与日志的管理 17.1 计划任务-at-cron-计划任务使用方法 17.1.1 at计划任务的使用 17.1.2 查看和删除at将要执行 ...

  8. 学习笔记：CentOS7学习之十九：Linux网络管理技术

    目录 学习笔记:CentOS7学习之十九:Linux网络管理技术 本文用于记录学习体会.心得,兼做笔记使用,方便以后复习总结.内容基本完全参考学神教育教材,图片大多取材自学神教育资料,在此非常感谢MK ...

  9. 学习笔记：CentOS7学习之十八：Linux系统启动原理及故障排除

    目录 学习笔记:CentOS7学习之十八:Linux系统启动原理及故障排除 18.1 centos6系统启动过程及相关配置文件 18.1.1 centos6系统启动过程 18.1.2 centos6启 ...

随机推荐

  1. 配置iSCSI多路径

    1.添加MPIO功能,完成后打开MPIO进行配置,添加对iSCSI多路径的支持,如下图表示已经添加完成后灰色不可选,再打开 MPIO设备 标签页可以看到已安装完成的MPIO所支持的设备:

  2. 算法代码[置顶] 机器学习实战之KNN算法详解

    改章节笔者在深圳喝咖啡的时候突然想到的...之前就有想写几篇关于算法代码的文章,所以回家到以后就奋笔疾书的写出来发表了 前一段时间介绍了Kmeans聚类,而KNN这个算法刚好是聚类以后经常使用的匹配技 ...

  3. CDOJ 482 Charitable Exchange bfs

    Charitable Exchange Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/s ...

  4. Plus One @LeetCode

    import java.util.Arrays; /** * Plus One * * Given a number represented as an array of digits, plus o ...

  5. asp.net 实现“九连环”小游戏

    asp.net 实现"九连环"小游戏 wildcatsky(原作) public Class ChinaRing1  Inherits System.Web.UI.Page #Re ...

  6. 【模式识别】Learning To Rank之RankBoost

    RankBoost的思想比較简单,是二元Learning to rank的常规思路:通过构造目标分类器,使得pair之间的对象存在相对大小关系.通俗点说,把对象组成一对对的pair,比方一组排序r1& ...

  7. as 中的反射

    flash.utils包中的getDefinitionByName,getQualifiedClassName,getQualifiedSuperclassName..可以当做反射用. 1.getDe ...

  8. grunt自动化工具

    Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器. 安装 CLI 首先,需要先将Grunt命令行(CLI)安装到全局环境中. npm install - ...

  9. mysql的两阶段提交协议

    http://www.cnblogs.com/hustcat/p/3577584.html   前两天和百度的一个同学聊MySQL两阶段提交,当时自信满满的说了一堆,后来发现还是有些问题的理解还是比较 ...

  10. hadoop实例---多表关联

    多表关联和单表关联类似,它也是通过对原始数据进行一定的处理,从其中挖掘出关心的信息.如下 输入的是两个文件,一个代表工厂表,包含工厂名列和地址编号列:另一个代表地址表,包含地址名列和地址编号列.要求从 ...