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;}

引入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>

3.内联样式
由于要将表现和内容混杂在一起，即HTML代码和CSS代码混编，这样会不利于文档结构，并且不容易维护，所以一般不要使用这种方式引入样式。例如改变段落的颜色和左外边距：

<p style="color: red; margin-left: 20px;">

This is a paragraph

</p>
作者： ForEvErNoME
出处： http://www.cnblogs.com/ForEvErNoME/
欢迎转载或分享，但请务必声明文章出处。如果文章对您有帮助，希望你能 推荐 或 关注

 
 
 
 
 

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

  1. shell编程基础(二): shell脚本语法之分支语句和循环语句

    一.分支语句 1.条件测试:test [ 命令test或[可以测试一个条件是否成立,如果测试结果为真,则该命令的Exit Status为0,如果测试结果为假,则命令的Exit Status为1(注意与 ...

  2. JavaScript学习 - 基础(二) - 基础类型/类型转换

    基础类型 - 数字类型(Number) 1.最基本的数据类型 2.不区分整型数值和浮点型数值 3.所有数字采用64位浮点格式存储,相当于Java和C语言中double格式 4.能表示的最大值 +- 1 ...

  3. 前端总结·基础篇·CSS（二）视觉

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...

  4. Ruby语法基础(二)

    Ruby语法基础(二) 继续ruby的学习,这次主要把目光放到运算符,条件判断,循环,方法,以及其他ruby特有的基本概念上 运算符 算术运算符:+,-,/,%,**,值的注意的是,ruby中一切皆为 ...

  5. R语言语法基础二

    R语言语法基础二 重塑数据 增加行和列 # 创建向量 city = c("Tampa","Seattle","Hartford"," ...

  6. Golang 基础之基础语法梳理 (二)

    大家好,今天将梳理出的 Go语言基础语法内容,分享给大家. 请多多指教,谢谢. 本次<Go语言基础语法内容>共分为三个章节,本文为第二章节 Golang 基础之基础语法梳理 (一) Gol ...

  7. 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记

    [CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...

  8. Bootstrap <基础二十九>面板（Panels）

    Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...

  9. Bootstrap <基础二十八>列表组

    列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...

  10. Bootstrap<基础二十七> 多媒体对象（Media Object）

    Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的 ...

随机推荐

  1. JS代码风格指南

    一.基本格式 缩进 建议每级4个空格,可以给编辑器设置tab = 4个空格,自动转换 分号 不要省略分号,防止ASI(自动插入分号)错误 行宽 每行代码不超过80个字符,过长应该用操作符手动断行 断行 ...

  2. 使用七牛云存储实现Android的自动更新

    为了修复Bug或更新软件,我们通常需要实现自动更新,没有哪一个牛逼的人能够搞到每一个用户的机子去帮他们更新. 1.自动更新的流程 我们将了解一下自动更新的思路.既然软件要自动更新,那么它必须知道自己是 ...

  3. load css use javascript

    var $ = document; // shortcut var cssId = 'myCss'; // you could encode the css path itself to genera ...

  4. [JS7] 显示从0到99的100个数字

    <html> <head> <title>JS Unleashed</title> </head> <body> <SCR ...

  5. ajaxFileUpload上传文件后提示下载的问题

    在某些版本浏览器下ajaxFileUpload上传文件会提示下载, 1:为什么? 可以观察到,即便返回 JsonResult 在返回的头中也没有任何消息体,直接理解为文本了. 2:解决方案 前端: f ...

  6. IBM的“认知计算时代”

    IBM 提出信息技术进入“认知计算时代”.所有电子设备都有潜力发展出认知能力,换言之,都可以像人一样‘思考’. 何为认知计算时代呢?  认知计算系统能够学习并与人类自然地交流,以扩展人类或机器可亲自执 ...

  7. C++ 类

    <C++ Primer 4th>读书笔记 在 C++ 中,用类来定义自己的抽象数据类型(abstract data types).通过定义类型来对应所要解决的问题中的各种概念.最简单地说, ...

  8. CentOS下搭建NFS服务器总结

    环境介绍: . 服务器: 192.168.0.100 . 客户机: 192.168.0.101 安装软件包: . 服务器和客户机都要安装nfs 和 rpcbind 软件包: yum -y instal ...

  9. atitit.跨平台gui 概览

    atitit.跨平台gui 概览 为什么需要跨平台gui 国际上那些跨平台的GUI程序,除了像Firefox之类的大型项目会重写界面外,中小型的项目基本上都是用GTK+或WxWidgets为多.毕竟要 ...

  10. SQL 2012 镜像 图解（解决1418）

    概念:http://blog.chinaunix.net/uid-11231963-id-2150268.html 写的不错 1.环境准备 1.WIN7+SQL 2012 两台机器 如:10.58.8 ...