前端学习——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 语法:  <keyw ...
前端学习笔记——CSS选择器
学习css选择器之前我们先了解下css规则: CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 1.id选 ...
前端学习之 CSS（一）
一:什么是 CSS? ·CSS 指层叠样式表 (Cascading Style Sheets) ·样式定义如何显示 HTML 元素 ·样式通常存储在样式表中 ·把样式添加到 HTML 4.0 中,是为 ...
前端学习笔记 - Css初级篇
有话先说:我是一只菜鸟,一只都是,从前是现在也是. CSS中的会计元素与行内元素块级元素特性:占据一整行,总是重起一行并且后面的元素也必须另起一行显示.内联元素特性:和其他内联元素显示在同一行. 可 ...

随机推荐

vue全家桶（2.7）
3.11.1.vue-router中的全局钩子函数在vue-router中,路由发生变化,我们可以做一些事情,例如:可以决定是否进入导航,可以决定跳转到哪里,官方文档中又叫做导航守卫首先来看一个全 ...
spring quartz 每30分钟执行一次cronExpression表达式怎么写
<cron-expression>0 0/30 * * * ?</cron-expression>:每隔30分钟 <cron-expression>0 0/15 ...
栈的顺序存储和链式存储c语言实现
一. 栈栈的定义:栈是只允许在一端进行插入或删除操作的线性表. 1.栈的顺序存储栈顶指针:S.top,初始设为-1 栈顶元素:S.data[S.top] 进栈操作:栈不满时,栈顶指针先加1,再到栈 ...
半导体质量管理_SQM 供应商质量管理
供应链上的质量保证 SPACE的此附加组件可帮助您与全球生产现场的供应商和分包商更紧密地合作.基于电子分析证书(eCOA,电子分析证书),您可以为整个供应链实施具有约束力的质量标准,并可以对其进行验证 ...
Solaris 10上Oracle 10g安装步骤图解
文章目录 1. 说明 2. 查看相关包 3. 添加用户和组 4. 设置oracle环境变量 5. 创建Oracle软件目录 6. 修改OS参数 7. 上传Oracle软件包并解压 8. 开始安装 9. ...
Docker中提交任务到Spark集群
1. 背景描述和需求数据分析程序部署在Docker中,有一些分析计算需要使用Spark计算,需要把任务提交到Spark集群计算. 接收程序部署在Docker中,主机不在Hadoop集群上.与Spa ...
《The Design of a Practical System for Fault-Tolerant Virtual Machines》论文总结
VM-FT 论文总结说明:本文为论文 <The Design of a Practical System for Fault-Tolerant Virtual Machines> 的个人 ...
css sprites（精灵图）如何使用？
CSS Sprites是一种性能优化技术,一种网页图片应用处理方式:将多个图像组合成单个图像文件以在网站上使用的方法,以提高性能:也被称为css 精灵图. 网页通常包含多个图像.这些包括图标,按钮,徽 ...
day48 navicat使用及pymysql的使用
目录一.navicat介绍 1 基本使用 2 练习题 2.1 查询所有的课程的名称以及对应的任课老师姓名 2.2 查询平均成绩大于八十分的同学的姓名和平均成绩 2.3 查询没有报李平老师课的学生姓名 ...
python面试题七: mysql数据库
---------------------------------------------------------------------------------------------------- ...

前端学习（八）：CSS

进击のpython