**CSS语法**

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。选择器通常是您需要改变样式的 HTML 元素。
```
selector {declaration1; declaration2; ... declarationN }
```
每条声明由一个属性和一个值组成。
属性（property）是样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
```
selector {property: value}
```
例如下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。
在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。
```
h1 {color:red; font-size:14px;}
```
![](http://upload-images.jianshu.io/upload_images/8373224-3d8a41d3eef71d41.gif?imageMogr2/auto-orient/strip)
 
 
**引入CSS样式**

如何插入样式表，当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种：外部样式表、内部样式表和内联样式。

1.外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：
```
<head><link rel="stylesheet" type="text/css" href="site.css" /></head>
```
 
2.内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:

```
<head>
<style type="text/css">
p {margin-left: 20px;}
body {background-image: url("images/test.gif");}
</style>
</head>
（web前端学习交流群：328058344 禁止闲聊，非喜勿进！）
```
 
3.内联样式由于要将表现和内容混杂在一起，即HTML代码和CSS代码混编，这样会不利于文档结构，并且不容易维护，所以一般不要使用这种方式引入样式。例如改变段落的颜色和左外边距：

```
<p style="color: red; margin-left: 20px;">
This is a paragraph
</p>
```

CSS基础：基础和语法的更多相关文章

  1. 第二部分----CSS的基础语法

    PART-1 CSS的基础常识 一.什么是CSS? W3C标准中,倡导有3:其一为内容与表现分离,其二为内容与行为分离,其三为内容结构的语义化.其倡导中第一条的"表现"指的便可以说 ...

  2. 精通CSS+DIV基础总结(一)

    这段时间学习了玩了DIV+CSS的视频,感觉效率不高.前边的Javascript总结的不好,但是看了后边的JQuery,觉得学习的再多一点,再进行Javascript的总结.DIV+CSS总结,估计会 ...

  3. 【CSS入门基础，有需要的看过来哦】心境，心静，不轻言放弃！---致CSS

    整理一下近一周学习的有关CSS的基础知识笔记: CSS语法必须写在<style>标签中哦~/*注释*/ [CSS常用背景属性]background background-color:背景色 ...

  4. CSS 入门基础

    一.CSS 介绍什么是CSS CSS 指的是层叠样式表(Cascading StyleSheet).在网页制作时采用层叠样式表技术, 可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控 ...

  5. 前端工程师面试问题归纳（一、问答类html/css/js基础）

    一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...

  6. .net 开源模板引擎jntemplate 教程：基础篇之语法

    一.基本概念 上一篇我们简单的介绍了jntemplate并写了一个hello world(如果没有看过的,点击查看),本文将继续介绍jntemplate的模板语法. 我们在讲解语法前,首先要了解一下标 ...

  7. 2天驾驭DIV+CSS （基础篇）（转）

    这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...

  8. HTML+CSS+JS基础知识

    HTML+CSS+JS基础知识 目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="sty ...

  9. 【笔记-前端】div+css排版基础，以及错误记录

    现在的网站对于前端的排版已经逐渐不使用<table>,而是使用div+css. 使用这种方法的最大好处就在于在维护页面时,可以只维护css而不去改动html. 可是这种方式对于初学者来说可 ...

  10. CSS 设计彻底研究（一）(X)HTML与CSS核心基础

    第1章 (X)HTML与CSS核心基础 这一章重点介绍了4个方面的问题.先介绍了 HTML和XHTML的发展历程以及需要注意的问题,然后介绍了如何将CSS引入HTML,接着讲解了CSS的各种选择器,及 ...

随机推荐

  1. Hibernate关系映射之many-to-many

    1.建表 2.创建实体类及映射文件 Student.java类 public class Student implements java.io.Serializable { // Fields pri ...

  2. 个人理解---在开发中何时加入日志记录功能[java]

    是这样的:俩个月前做的一个小功能,今天经理突然问我这个'清除复投记录'功能是不是我做的,我说是,很久以前了.他说昨天一个客户找过来了,后台把人家的复投记录清除掉了,不知道何时清除的,我记得当时做的时候 ...

  3. 利用GPU实现无尽草地的实时渲染

    0x00 前言 在游戏中展现一个写实的田园场景时,草地的渲染是必不可少的,而一提到高效率的渲染草地,很多人都会想起GPU Gems第七章 <Chapter 7. Rendering Countl ...

  4. shell脚本获取文件中key/value的小方法

    方法有N种,awk.sad.grep.cut... 以上几种方式不写了,就写两个不太常用到的. 废话少说,直接上代码: cat a.txt aa.gif=aaaa.gif bb.gif=bbbb.gi ...

  5. JDFS:一款分布式文件管理系统，第四篇(流式云存储续篇)

    一 前言 本篇博客是JDFS系列博客的第四篇,从最初简单的上传.下载,到后来加入分布式功能,背后经历了大量的调试,尤其当实验的虚拟计算结点数目增加后,一些潜在的隐藏很深的bug就陆续爆发.在此之前笔者 ...

  6. 一个“.java”文件中是否可以包含多个类（不是内部类）？有什么限制？

    可以,若这个类的修饰符是public则,其类名须与文件名相同.

  7. bzoj2730（矿场搭建）

    矿场搭建,不知道为什么,莫名其妙T了在212上,额,zyh数据真的坑. bzoj200轻松跑过啊. 就是点双联通分量缩点,然后标记割点,一个块如果有>=2个割点,则不需要挖矿洞, 如果只有一割点 ...

  8. 混合高斯模型（Mixtures of Gaussians）和EM算法

    这篇讨论使用期望最大化算法(Expectation-Maximization)来进行密度估计(density estimation). 与k-means一样,给定的训练样本是,我们将隐含类别标签用表示 ...

  9. 【JAVA零基础入门系列】Day2 Java集成开发环境IDEA

    开发环境搭建好之后,还需要一个集成开发环境也就是IDE来进行编程.这里推荐的IDE是IDEA,那个老掉牙的Eclipse还是先放一边吧,(手动滑稽). IDEA的下载地址:http://www.jet ...

  10. 简单Elixir游戏服设计- 游戏玩法介绍

    抄以前的,做了点修改. 到目前为止,我们完成了玩家的数据和进程建模,现在介绍游戏玩法. 为什么我们还不做客户端接入.协议指定呢?为什么还没有网关和数据存储呢.在我接手的游戏, 这些通常已经定下来了,我 ...