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 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：

HTML+CSS学习笔记 (6) - 开始学习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

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

学习笔记：CentOS7学习之二十五：shell中色彩处理和awk使用技巧
目录学习笔记:CentOS7学习之二十五:shell中色彩处理和awk使用技巧 25.1 Shell中的色彩处理 25.2 awk基本应用 25.2.1 概念 25.2.2实例演示 25.3 awk ...
学习笔记：CentOS7学习之二十四：expect-正则表达式-sed-cut的使用
目录学习笔记:CentOS7学习之二十四:expect-正则表达式-sed-cut的使用 24.1 expect实现无交互登录 24.1.1 安装和使用expect 24.2 正则表达式的使用 24 ...
学习笔记：CentOS7学习之二十三：跳出循环-shift参数左移-函数的使用
目录学习笔记:CentOS7学习之二十三: 跳出循环-shift参数左移-函数的使用 23.1 跳出循环 23.1.1 break和continue 23.2 Shift参数左移指令 23.3 函数 ...
学习笔记：CentOS7学习之二十二：结构化命令case和for、while循环
目录学习笔记:CentOS7学习之二十二: 结构化命令case和for.while循环 22.1 流程控制语句:case 22.2 循环语句 22.1.2 for-do-done 22.3 whil ...
学习笔记：CentOS7学习之二十一：条件测试语句和if流程控制语句的使用
目录学习笔记:CentOS7学习之二十一: 条件测试语句和if流程控制语句的使用 21.1 read命令键盘读取变量的值 21.1.1 read常用见用法及参数 21.2 流程控制语句if 21.2 ...
学习笔记：CentOS7学习之二十：shell脚本的基础
目录学习笔记:CentOS7学习之二十:shell脚本的基础 20.1 shell 基本语法 20.1.1 什么是shell? 20.1.2 编程语言分类 20.1.3 什么是shell脚本 20. ...
学习笔记：CentOS7学习之十七： Linux计划任务与日志的管理
目录学习笔记:CentOS7学习之十七: Linux计划任务与日志的管理 17.1 计划任务-at-cron-计划任务使用方法 17.1.1 at计划任务的使用 17.1.2 查看和删除at将要执行 ...
学习笔记：CentOS7学习之十九：Linux网络管理技术
目录学习笔记:CentOS7学习之十九:Linux网络管理技术本文用于记录学习体会.心得,兼做笔记使用,方便以后复习总结.内容基本完全参考学神教育教材,图片大多取材自学神教育资料,在此非常感谢MK ...
学习笔记：CentOS7学习之十八：Linux系统启动原理及故障排除
目录学习笔记:CentOS7学习之十八:Linux系统启动原理及故障排除 18.1 centos6系统启动过程及相关配置文件 18.1.1 centos6系统启动过程 18.1.2 centos6启 ...

随机推荐

EF架构~通过EF6的DbCommand拦截器来实现数据库读写分离~终结~配置的优化和事务里读写的统一
回到目录本讲是通过DbCommand拦截器来实现读写分离的最后一讲,对之前几篇文章做了一个优化,无论是程序可读性还是实用性上都有一个提升,在配置信息这块,去除了字符串方式的拼接,取而代之的是sect ...
MyBatis &lt&semi;if&gt&semi;标签的一些问题
1.常见错误: There is no getter for property named 'parentId' in 'class java.lang.Long'(或者String) org.myb ...
java&lowbar;不知道数据类型情况下，数组遍历-反射
if(items.getClass().isArray){ this.collection = new ArrayList(); int length = Array.getLength(items) ...
Android XML解析器的问题
最近在项目中遇到了一个解析XML的问题,我们是用android自带的DOM解析器来解析XML的,但发现了一个android的问题,那就是在2.3的SDK上面,无法解析像<, >, 等字符串 ...
数据降维技术（2）—奇异值分解（SVD）
上一篇文章讲了PCA的数据原理,明白了PCA主要的思想及使用PCA做数据降维的步骤,本文我们详细探讨下另一种数据降维技术—奇异值分解(SVD). 在介绍奇异值分解前,先谈谈这个比较奇怪的名字:奇异值分 ...
（转载）RHEL7(RedHat 7)本地源的配置
配置yum源 1.首先连接RedHat7的DVD再把挂载DVD光盘到/mnt 因为配置时候路径名里面不能有空格,否则不能识别 [root@ mnt]# mount /dev/cdrom /mnt ...
MySQL高可用方案--MHA部署及故障转移
架构设计及必要配置主机环境 IP 主机名担任角色 192.168.192.128 node_master MySQL-Master| ...
SQL Server 2008数据备份与还原的原理是什么？
为什么SqlServer有完整备份.差异备份和事务日志备份三种备份方式,以及为什么数据库又有简单模式.完整模式和大容量日志模式这三种恢复模式.本文内容适用于2005以上所有版本的SqlServer数据 ...
Http请求连接池-HttpClient的AbstractConnPool源码分析
在做服务化拆分的时候,若不是性能要求特别高的场景,我们一般对外暴露Http服务.Spring里提供了一个模板类RestTemplate,通过配置RestTemplate,我们可以快速地访问外部的Htt ...
vue render函数使用jsx语法可以使用v-model语法 vuex实现数据持久化
render函数使用jsx语法: 安装插件 transform-vue-jsx 可以使用v-model语法安装插件 jsx-v-model .babelrc文件配置: vuex实现数据持久化安装插 ...