文档章节

CSS基础语法

effto
 effto
发布于 2016/05/03 17:18
字数 509
阅读 26
收藏 0

CSS语法


css规定由两个主要的部分构成:选择器,以及一条或多条声明。

selector{

declaration1; declaration2; ... declarationN

}

选择器通常是您需要改变的样式的Html元素。

每条声明由一个属性和一个值组成。

属性(property)是您希望设置的样式属性(style attribute)。每一个属性有一个值。属性和值被冒号分开。

selector{property:value}

下面代码作用是将h1元素内的文字颜色定义为红色,同时将字体大小设置为14像素。

在这个例子中,h1是选择器,color和font-size是属性,red和14px是值。

h1{color:red;font-size:14px;}

下面示意图为您展示了上面代码的结构:


提示:请使用花括号来包围声明。


值的不同写法和单位

除了英文red,我们还可以使用十六进制颜色的值#ff0000:

p{color:#ff0000;}

为了节约字节数,我们可以使用css的缩写来表示:

p{color:#ff0;}

我们还可以通过RGB值:

p{color:rgb(255,0,0);}

p{color:rgb(100%,0%,0%);}

请注意:当使用rgb百分比时,即使当值为0时也要写成百分比符号。


记得写引号:

提示:如果值为若干单词,则要给值加引号;

p{font-size:“sans serif”;}


多重声明:

提示:如果要定义不止一个声明,则需要用分号将每个声明分开。

例如展示一个红色文字的居中段落。

p{text-align:center;color:red;}

这样写视乎对我们的阅读性降低了,现在来改变一下是不是更美观了:

p{

   text-align:center;

   color:black;

    font-family:arial;

}

空格和大小写

大多数样式表包含不止一条规则,而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑:

body{

    color:#000;

   background:#fff;

   margin:0;

   padding:0;

   font-family:Georgia,Palation,serif;

}

是否包含空格不会影响css在浏览器的工作效果。css对大小写不敏感。

© 著作权归作者所有

上一篇: 《偷影子的人》
下一篇: html音频
effto
粉丝 3
博文 56
码字总数 28418
作品 0
长春
私信 提问
compass&sass高级应用

一./背景知识/ 1.Sass是什么?   Sass可以简化你的Css工作流,并可以使你的Css的扩展和维护工作变的更加容易!例如,曾几时何,因为客户的需求的变更,你必须不断的通过查找和替换来更改一...

Billydotzhang
2016/10/27
5
0
13个最常用的CSS和HTML快速开发工具

1)CleverCSS CleverCSS是个为CSS开发而产生的小型的标记语言,它的设计灵感来自Python,使得能够以一种简洁、结构化的方式构建样式表。在很多方面,它比CSS2更加爱简洁和强大。 它与CSS最明显...

彭博
2012/02/09
8K
7
完整的网页制作视频

基础:http://edu.51cto.com/course/12283.html 进阶:http://edu.51cto.com/course/12338.html 课程目标在第一阶段HTML&CSS网页制作基础课程的前提下,力求通过一个实际网站页面的编写,让学...

杨胜强的号
2018/01/22
0
0
【Hello CSS】第一章-CSS的语法与工作流

首发:krisachan.github.io 作者:陈大鱼头 github: KRISACHAN 在上一篇CSS起源中介绍了的诞生原因以及发展历史,了解了的存在意义。从正篇篇开始将会正式开始介绍这门语言的特点与功能。本...

陈大鱼头
02/18
0
0
前端开发利器 Emmet 介绍与基础语法教程

在前端开发的过程中,编写 HTML、CSS 代码始终占据了很大的工作比例。特别是手动编写 HTML 代码,效率特别低下,因为需要敲打各种“尖括号”、闭合标签等。而现在 Emmet 就是为了提高代码编写...

xxiu
2014/02/11
0
1

没有更多内容

加载失败,请刷新页面

加载更多

一文让你轻松了解JAVA开发中的四种加密方法

文章目录 一、工具类 md5加密工具类 base64加密工具类 Bcrypt工具类 二、加密测试 MD5加密测试 base64加密测试 SHA加密测试 BCrypt加密测试 一、工具类 1. md5加密工具类 package 加密Teste...

爱编程的浪子
8分钟前
2
0
注解Annotation实现原理与自定义注解例子

什么是注解? 对于很多初次接触的开发者来说应该都有这个疑问?Annontation是Java5开始引入的新特征,中文名称叫注解。它提供了一种安全的类似注释的机制,用来将任何的信息或元数据(metad...

Java面经
9分钟前
2
0
并发模式与 RPS 模式之争,性能压测领域的星球大战

本文是《如何做好性能压测》系列专题分享的第四期,该专题将从性能压测的设计、实现、执行、监控、问题定位和分析、应用场景等多个纬度对性能压测的全过程进行拆解,以帮助大家构建完整的性能...

阿里云云栖社区
18分钟前
1
0
Knative Service 之流量灰度和版本管理

本篇主要介绍 Knative Serving 的流量灰度,通过一个 rest-api 的例子演示如何创建不同的 Revision、如何在不同的 Revision 之间按照流量比例灰度。 部署 rest-api v1 代码 测试之前我们需要...

阿里云官方博客
20分钟前
2
0
金融壹账通与菲律宾联合银行合作 共推科技平台赋能中小企业融资

中小微企业融资是世界性的难题,在破解这一难题上,中国平安集团一直在用科技手段贡献来自中国的解决方案,而区块链技术的引入更为这一问题的解决带来了新的方向,同时平安对外赋能的脚步也借...

IFTNews
21分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部