(003)CSS基础

一、引言

  CSS能够为页面添加样式,增强和改进内容的外观。提供结构的是XHTML:每个元素都标明了内容中的一个不同部分,而属性则传达了关于元素的更多信息。CSS是影响这些XHTML元素的呈现外观的另外一层要素。颜色、字体、大小、背景以及页面上的布局都属于内容的表现方面的因素,都能通过巧妙运用CSS来加以控制。

二、CSS规则剖析

  如果说元素和属性是xhtml文档的原料的话,那么CSS文档的原料就是“规则”。“规则”是一个指令集,浏览器可以按照其指示基于所提供的描述性的值来改变xhtml元素的外观。一条css规则由几个部分组成,如下图所示:

  选择符(selector)是规则中用于确定样式所应用到的目标元素的部分。它的作用范围大到可以影响某种元素的每一个实例,小到仅仅影响几个甚至一个元素。

  样式声明又包含两个部分:属性和值。属性是元素的表现形式中将被修改的方面,如颜色、宽度或在页面上的位置。CSS语言中有大量属性可供使用。属性的值说明了应被应用到选定的元素上的特定样式。可接受的值取决于属性本身,有些属性的值可以有用空格分隔的多个值。

  样式声明位于一对大括号“{}”之间。可以为一个选择符指定多个样式声明,以便用一条规则改变元素表现形式的多个方面。属性和其值之间用冒号(:)分隔,样式声明以一个分号结尾。分号可以将多个样式声明分隔开,但是如果规则中只有一个样式声明,那么分号是可选的。一系列的样式声明中的最后一个也是如此。为谨慎起见,养成在每个样式声明的后面都加上一个分号(即使只有一个样式声明)的习惯不是件坏事。

  如果css代码没有遵守这些基本的结构和语法,例如,漏掉了闭合括号或分隔属性和值的冒号,那么整条规则甚至整个样式表都可能会失灵。就像xhtml一样,样式表应该是合适的正确构造的。w3c同样也提供了一个css校验器,它可以帮助你找出css样式表的错误。

时间: 2024-10-30 03:19:18

(003)CSS基础的相关文章

蓝鸥零基础学习HTML5—html+css基础

蓝鸥零基础学习HTML5-html+css基础 一.课程目标 1.了解前端开发职位:2.掌握常用标签以及语义及用法:3.掌握常用css的特性,掌握基础布局技巧:4.掌握整站规划概念. 二.适用人群 零基础积极学习html5者 三.课程简介 本课程主要讲解了 html+css的基础知识,包括html模板.标签.css基础样式.布局.表格表单.整站等等,是进行前端开发的基础.Html+css是前端开发的基础,大部分前端开发工程都需要从html+css布局开始,html+css的基础非常重要,是前端开

HTML&CSS基础学习笔记8-预格式文本

<pre>标签的主要作用是预格式化文本.被包围在 pre 标签中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. <pre>标签的一个常见应用就是用来表示计算机的源代码.当然你也可以在你需要在网页中预显示格式时使用它. 会使你的文本换行的标签(例如<h>.<p>)绝不能包含在 <pre> 所定义的块里.尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都是一样的. 更多学习内容,就在码芽网http://www.

前端知识学习一 :CSS基础

一.CSS概述 css指的是层叠样式表,样式定义如何显示HTML元素,样式通常存储在样式表中, 把样式添加到HTML4.0中,是为了解决内容和表现分离的问题.外部样式表通常存储在css文件     中.多个样式定义可层叠为一. 二.层叠次序 一般而言,所有的样式都会根据下面的规则层叠于一个新的虚拟样式表中,其中4拥有最高的优先权. 1.浏览器的缺省设置 2.外部样式表(通过引入的外部.css文件) 3.内部样式表(位于<head>标签内部) 4.内联样式表(在HTML元素内部) 因此属性的优先

Form标签+Css基础

一.Form表单标签 <form action="" method=""></form> 表单就是用来将用户的信息提交到服务器,服务器会将信息存储或者根据信息查询数据(增删改查). 表单中所有的内容都要写在form标签中. <input type="text" value="哈哈哈哈" placeholder="请输入用户名"> Input文本输入框,type类型为tex

HTML&CSS基础学习笔记13—无序列表

无序列表 有时我们的工作繁忙,杂事很多,怕忘记,就会把事情一件件列出来,防止忘记. 它们的排列顺序对于我们来说并不重要,可以随意调换,我们将它称为无序列表,HTML里用<ul>标签来表示无序列表,列表里的项目则用<li>标签来表示: 1 2 3 4 5 <ul>     <li></li>     <li></li>     ... </ul> 看一段实例代码: 对于的浏览器显示结果是这样的: 更多内容学习,请

前端开发:css基础知识之盒模型以及浮动布局。

前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把它写到我的博客中,想知道自己过来翻就好啦 ^_^  下面楼主把当前的自己对css的基础认知一一给大家道来...... 盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们

css基础学习

1.css基础语法 Css规则由两个主要的部分组成:选择器,声明. Selector{declaration1;...declarationN;} 如: H1 { font-size : 32px; color : blue } H1:选择器 Font-size:32px,color:blue:声明 2.css的三种定义方法 内联式: <h1 style="font-size:20px;color:red">内联式</h1> 嵌入式: <style typ

Html5开发——html+css基础二(个人博客一)

今天没有写完,而且写的还有点问题,所以今天就先不上传代码了(ps:快写完了才发现布局有问题,导致代码太多,感觉写的不是很好,所以今天先分析一下布局) 第一步先写一个大的div用来放ABC三个部分,这个大的div居中! 第二步分别写ABC三个部分,ABC三个部分分别使用浮动(float)来定位.A和B都各使用了一张非常小的图片,通过重复(repeat)属性生成A和B 第三步C部分分别写好3~16这几个模块,在通过组合利用浮动定位.分组如下: E:3 F:4.7.10.13 G:5.8.11.14

Html5开发——html+css基础一(百度首页)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度</title> <style type="text/css"> *{margin: 0;padding: 0;} body{text-align: center;} .header{text-align: right;f