前端学习（八）：CSS
进击のpython
*****
前端学习——CSS
现在的互联网前端分为三层：
- HTML:超文本标记语言。从语义的角度描述页面结构
- CSS:层叠样式表。从审美的角度负责页面样式
- JS:Javascript。从交互的角度描述页面的行为
所以说HTML，CSS，JS也被称为前端三剑客
CSS是一个很神奇的东西，设计者可以通过修改样式表的定义从而使我们的网页呈现出完全不同的外观
也就是说，CSS其实就是网页的衣服，将网页打扮的“花里胡哨”
初识CSS
CSS全称为‘’层叠样式表‘（记住这个名字会对你后面的学习很有帮助）
他主要定义了HTML内容在浏览器的显示样式，比如文字的大小，颜色，字体的加粗等等
我们先看一下效果：
看，这个字就从原先的黑色，变成了现在的红色，穿上了一件红色的衣服！
使用CSS
那么，上面的效果是怎么达到的呢？想学吗？我教你啊
那要是想使用CSS，要先学一个标签<style></style>,style标签包含网页的样式信息
默认情况下，该标签的样式信息通常是CSS的格式
比如我有一段文字百因必有果！你的报应就是我！,现在我想让百因必有果！变红
这个时候我们就可以通过设置样式来作用，而且只需要编写一条CSS样式语句
首先在没有样式的时候是这么写的(只改变某一部分，所以用标签单独标记)：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p><span>百因必有果！</span>你的报应就是我！</p>
</body>
</html>
然后我们需要在<head></head>标签里使用<style></style>
并使用以下语句：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
span {
color: red;
}
</style>
</head>
<body>
<p><span>百因必有果！</span>你的报应就是我！</p>
</body>
</html>
接下来看看效果：
注意：单独将标语用span标签标示出来，不会影响文本的正常显示
如果再给span标签设置了样式，那么该span标签就体现了它的语义
那么在网页中，尤其是文本，在不影响文本内容变化的情况下
并且将凸显的内容标识出来，我们就可以使用span标签再配合我们的css来修改样式
CSS语法
那上一节写出了一行CSS代码，我们就要知道这CSS语法是怎么样子的
CSS样式是由选择符和声明组成的，而声明又由属性和值组成：
- 选择符:我们又称为选择器，指明网页中应用样式规则的元素，如上述图中网页的所有(span)的文本变为红色，而其它元素(如ul,ol等等)不会受到影响
- 声明：在英文大括号”{}”中的就是声明，属性和值之间用英文冒号”：“分割。当有多条声明时，中间可以英文分号”;”分割
那其实可以再举个栗子，帮助理解选择符，属性和值：
张三{身高：175cm；体重：50kg}
我想找个张三，然后把张三的身高设置成175cm，把体重设置成50kg
那为了使样式更加容易阅读，一般都将每条代码写在一个新行内
p{
font-size：12px;
color:red;
}
CSS注释
在css也有注释语句：
用/*注释语句*/来表明(html中使用<!--注释语句-->)。就像下面代码：
/*设置段落默认样式*/
p {
font-size：12px;
color: red;
}
*****
*****
前端学习（八）：CSS的更多相关文章
- 前端学习：CSS的学习总结(图解）
前端学习:CSS的学习总结(图解) CSS代码笔记 CSS简介 css的引入方式和书写规范 CSS选择器 CSS属性 CSS盒子模型 CSS的定位
- 2016.01.22 前端学习 HTML/CSS
学习HTML/CSS http://edu.51cto.com/course/course_id-3116.html 明日实践
- 前端学习 之 CSS（三）
九:浮动 浮动是css里面布局最多的一个属性,也是很重要的一个属性. float:表示浮动的意思. 属性值: none: 表示不浮动,默认 left: 表示左浮动 right:表示右浮动 例: htm ...
- 前端学习 之 CSS（二）
五:继承性和层叠性 css有两大特性,即继承性和层叠性. 1. 继承性 面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css就是在设 ...
- web前端学习笔记(CSS盒子的浮动)
在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同. CSS中有一个float属性 ...
- 前端学习之CSS
CSS介绍 CSS(Cascading Style Sheet, 层叠样式表)定义如何显示HTML元素, 给HTML设置样式, 让它更加美观. 当浏览器读到一个样式表, 它就会按照这个样式表来对文档进 ...
- 前端学习 -- Html&Css -- 条件Hack 和属性Hack
条件Hack 语法: <!--[if <keywords>? IE <version>?]> HTML代码块 <![endif]--> <keyw ...
- 前端学习笔记——CSS选择器
学习css选择器之前我们先了解下css规则: CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 1.id选 ...
- 前端学习 之 CSS（一）
一:什么是 CSS? ·CSS 指层叠样式表 (Cascading Style Sheets) ·样式定义如何显示 HTML 元素 ·样式通常存储在样式表中 ·把样式添加到 HTML 4.0 中,是为 ...
- 前端学习笔记 - Css初级篇
有话先说:我是一只菜鸟,一只都是,从前是现在也是. CSS中的会计元素与行内元素 块级元素特性:占据一整行,总是重起一行并且后面的元素也必须另起一行显示.内联元素特性:和其他内联元素显示在同一行. 可 ...
随机推荐
- Alink漫谈(八) : 二分类评估 AUC、K-S、PRC、Precision、Recall、LiftChart 如何实现
Alink漫谈(八) : 二分类评估 AUC.K-S.PRC.Precision.Recall.LiftChart 如何实现 目录 Alink漫谈(八) : 二分类评估 AUC.K-S.PRC.Pre ...
- 入门大数据---Flume整合Kafka
一.背景 先说一下,为什么要使用 Flume + Kafka? 以实时流处理项目为例,由于采集的数据量可能存在峰值和峰谷,假设是一个电商项目,那么峰值通常出现在秒杀时,这时如果直接将 Flume 聚合 ...
- 逻辑式编程语言极简实现（使用C#） - 1. 逻辑式编程语言介绍
相信很多朋友对于逻辑式编程语言,都有一种最熟悉的陌生人的感觉.一方面,平时在书籍.在资讯网站,偶尔能看到一些吹嘘逻辑式编程的话语.但另一方面,也没见过周围有人真正用到它(除了SQL). 遥记当时看&l ...
- day17—max, map, reduce, filter, zip 函数的使用
一.max 函数 l=[3,2,100,999,213,1111,31121,333] print(max(l)) # dic={'k1':10,'k2':100,'k3':30} print(max ...
- Oracle IO性能测试
Oracle IO性能测试 前言 最近发生了迁移测试库后(单节点迁移RAC)因为IO性能问题导致迁移后性能非常差的问题. 原本想在创建ASM磁盘组之前用Orion做测试,但是忘了做就没做结果出了这档子 ...
- 基础-Junit单元测试_反射_注解
一.Junit单元测试 1.1 测试分类: 黑盒测试:不需要写代码,给输入值,看程序是否能够输出期望的值. 白盒测试:需要写代码的.关注程序具体的执行流程. 1.2 Junit使用(白盒测试) 使用步 ...
- Jmeter系列（37）- 详解 ForEach控制器
如果你想从头学习Jmeter,可以看看这个系列的文章哦 https://www.cnblogs.com/poloyy/category/1746599.html 前言 ForEach 控制器一般和用户 ...
- 「MoreThanJava」Day 3：构建程序逻辑的方法
「MoreThanJava」 宣扬的是 「学习,不止 CODE」,本系列 Java 基础教程是自己在结合各方面的知识之后,对 Java 基础的一个总回顾,旨在 「帮助新朋友快速高质量的学习」. 当然 ...
- 如何写出高性能的CSS3动画
小伙伴们在写CSS3动画时,会发现在手机上很多时候会感到卡顿,然后Google到的解决方案大多是开启GPU加速transform: translate3d(0,0,0); 可解决,但是为什么开启GPU ...
- 诊断Java线程死锁
比如我们有运行这样一个程序: 了解多线程的小伙版都知道,这段代码不会有打印结果,因为发生了死锁.我们在服务器上运行试试,没有输出,对应的进程是 32752. 使用 “jstack 32752”排查,后 ...