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. pod install warning

    warning: Insecure world writable dir /usr/local/bin in PATH, mode 040777 解决方法: sudo chmod 775 /usr/l ...

  2. python写的百度贴吧相册下载

    突然想搞个这样的工具,写来写去都不知道在干嘛了,本来两个文件,现在整合在一起了. 乱得不行,懒得整理了,能用就行. 下载部分用了多线程,但是下载一个文件还是用的单线程,也就是没管http头的range ...

  3. 【PAT Advanced Level】1008. Elevator (20)

    没什么难的,简单模拟题 #include <iostream> using namespace std; int main() { int num; cin>>num; int ...

  4. 数据挖掘十大经典算法(9) 朴素贝叶斯分类器 Naive Bayes

    贝叶斯分类器 贝叶斯分类器的分类原理是通过某对象的先验概率,利用贝叶斯公式计算出其后验概率,即该对象属于某一类的概率,选择具有最大后验概率的类作为该对象所属的类.眼下研究较多的贝叶斯分类器主要有四种, ...

  5. C 高级编程3 静态库与动态库

    http://blog.csdn.net/Lux_Veritas/article/details/11934083http://www.cnblogs.com/catch/p/3857964.html ...

  6. 解决iphone横屏时字体变大问题或者内容大小不一样等

    在样式表中增加: @media screen and (max-device-width: 320px){body{-webkit-text-size-adjust:none}} @media scr ...

  7. hive-安装0.13.1（hadoop2.2.0）

    hadoop2.2.0 hive0.13.1 (事先已经安装好hadoop.MySQL以及在MySQL中建好了hive专用账号,数据创建不创建都可以) 1.下载解压 2.把MySQL驱动加入hive的 ...

  8. Java SE ---关系运算符

    java里的关系运算符有这么几种:大于(>).小于(<).等于(==).不等于(!=).大于等于(>=).小于等于(<=), 关系运算的结果是个boolean值,关系式成立为t ...

  9. 浅谈JS执行环境及作用域

     今天刚刚开通博客,也是第一次写博文,略感紧张.作为一个表达能力弱弱的人来说,自己花三分钟理解一个知识点,当别人问起时,也许需要30分钟才只是让别人知道自己在说什么,一点也不夸张,希望在博客上可以练习 ...

  10. javaweb学习总结三(枚举)

    一:枚举的概念 定义特定的数据,尤其像一些状态位. 二:定义枚举类 1:定义枚举,其中Grade枚举可以看做类,A.B.C.D.E可以看做对象,因为它定义了有参数的构造方法,所以 对象后面必须带参数. ...