HTML+CSS学习笔记 (6) - 开始学习CSS
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的更多相关文章
- 学习笔记：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启 ...
随机推荐
- 怎么SDCard上的获取相册照片
private String getRealPathFromURI(Uri contentUri) { Cursor cursor = null; String result = contentUri ...
- Chrome插件开发 尝试1
1.新建文件夹 如图:整个项目的结构 2.新建一个名为manifest.json的文件,编码模式为utf-8,(可以先建好txt文件然后再将文件后缀txt改为json) 3.用记事本写入代码如下:(m ...
- Codeforces Round #327 (Div. 2) A. Wizards' Duel 水题
A. Wizards' Duel Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/591/prob ...
- Codeforces GYM 100114 C. Sequence 打表
C. Sequence Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100114 Description ...
- 搭建Nginx图片服务器
搭建Nginx图片服务器 Part-I 安装Nginx 安装PCRE 下载 ngx_cache_purge 并解压,用来清除缓存 下载Nginx并解压 cd nginx-1.7.7 编译,--pref ...
- SAP BW 平面文件创建信息立方体
T-CODE:RSA1 1.创建信息范围 2.创建信息范围 创建特性信息对象目录 创建关键指标信息对象目录 3.创建特性信息对象 依次创建客户,销售组织 4.创建关键指标 依次创建单价和金额 5.创建 ...
- javascript常用方法整理--数组篇
1. arrayObject.slice(start,end) 从已有的数组中返回选定的元素 参数 描述 start 必需.规定从何处开始选取.如果是负数,那么它规定从数组尾部开始算起的位置.也就是说 ...
- 琐碎-关于StringTokenizer工具
属于:java.util包 构造函数: 1. StringTokenizer(String str):构造一个用来解析str的StringTokenizer对象.java默认的分隔符是“空格”.“制表 ...
- BootStrap2学习日记5---列表
常用列表标签有3中如下:<ul><li><ol><li><dl><dt><dd> 例子: <div class ...
- 关于FastStone Capture输入中文出现乱码.
关于FastStone Capture 中输入中文出现乱码. 根据我的使用,公司用的生产机是英文操作系统,这个时候用FSCapture输入中文就是乱码.英文是正常的. 自己的机器是中文的.输入中文和英 ...