一、基础学习

1、何为CSS

CSS是Cascading Style Sheets(层叠样式表)的简称，是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语 言).

CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀， 可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以
她是每一个网页设计人员的必修课。

2、语法

2.1引用

链接式（href

  1. <head>
  2. <link rel="stylesheet" type="text/css" href="http://www.dreamdu.com/style.css" />
  3. </head>

href -- 指定需要加载的资源(CSS文件)的地址URI 

               rel -- 指定链接类型 

               type -- 包含内容的类型,一般使用type="text/css"

导入样式（@import

  1. <head>
  2. <style type="text/css">@import url(http://www.dreamdu.com/style.css);</style>
  3. </head>

内嵌式

  1. <style type="text/css">
  2. /* ----------文字样式开始---------- */
  3. /* 梦之都白色12象素文字 */
  4. .dreamduwhite12px
  5. {
  6. color:white;
  7. font-size:12px;
  8. }
  9. /* 梦之都黑色16象素文字 */
  10. .dreamdublack16px
  11. {
  12. color:black;
  13. font-size:16px;
  14. }
  15. /* ----------文字样式结束---------- */
  16. </style>

注意:style标签应该在head标签内部.

行内样式

  1. <p style="font-size: 10px; color: #FFFFFF;">
  2. 使用CSS内联引用表现段落.
  3. </p>

把CSS样式直接作用在XHTML标签中.

2.2选择器

CSS选择器就是CSS样式的名字,当在XHTML文档中表现一个CSS样式的时候,就要用到一个CSS.

标签选择器

 类别选择器

 ID选择器

 实例总结

id与class选择符在CSS与XHTML中的用法总结

 

CSS中的写法

XHTML中的写法

标签选择符

p{font-size:12px;}

<p>www.dreamdu.com</p>

id选择符

#id_selector{font-size:12px;}

<p id="id_selector">梦之都</p>

class选择符

.class_selector{font-size:12px;}

<p class="class_selector">梦之都</p>

3、优点

内容与表现分离,有了CSS,网页的内容(XHMTL)与表现就可以分开了.

使用CSS可以减少网页的代码量,增加网页的浏览速度

二、总结

1、导图

2、难点剖析

2.1外部引用CSS中
链接式（link）与导入样式（@import）的区别

（1）所属类别不同。

link属于XHTML标签，而@import完全是CSS提供的一种方式。

                   link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。

          （2）加载顺序的差别。

当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。

          （3）兼容性的差别。

由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

          （4）使用dom控制样式时的差别。

当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

2.2表格与表单的区别

表格用于布局，表单用来传输数据，在表格里面可以包含表单，在表单里面也可以包含表格，用表格来布局表单里面的数据，

如果你有数据提供给后台程序，比如一个输入框，文本框等，这些元素通常要放到一个表单，这样才可以完成数据的提交。

3、小编寄语

CSS主要是用来控制网页显示的样式。通过CSS可以让HTML里的内容展现出绚丽的效果，就好比给一个人化妆，用的恰当，效果就好。

本文只是对CSS一些简单的内容作了一下整理，至于其他强大的功能还需要我们继续探索，在以后的学习中逐渐深入。


CSS入门学习（转）的更多相关文章

  1. 【干货】Html与CSS入门学习笔记4-8

    四.web镇之旅,连接起来 找一家托管公司如阿里云,购买域名和空间,然后将网页文件上传到购买的空间的根目录下. 1.绝对路径url url:uniform resource locators 统一资源 ...

  2. 【干货】Html与CSS入门学习笔记1-3

    从23号开始用了4天时间看完了<Head First Html与CSS>这本书,本书讲解方式深入浅出,便于理解,结合习题,便于记忆,是一本不错的入门书.下面是本书的学习笔记: 一.认识HT ...

  3. 【干货】Html与CSS入门学习笔记9-11

    九.盒模型 与元素亲密接触 1.盒模型 css将每个元素都看做一个盒子,包括以下属性: 内容区content area:包含内容,内容可以决定大小,也可以自行设定宽度和高度.元素的width属性指定的 ...

  4. 【干货】Html与CSS入门学习笔记12-14【完】

    十二.HTML5标记 现代HTML html5新增的元素:header nav footer aside section article time 这些新增元素使页面结构更清晰,取代<div i ...

  5. CSS入门学习

    一.What? CSS的全称是CascadingStyle Sheet,汉语意思是"级联样式表".通常又称为"风格样式表(StyleSheet)".它是用来进行 ...

  6. CSS入门级学习

    css入门学习1:认识CSS 1.1:css简介,css全称是层叠样式表,Cascading style sheets 1.2:css的作用,主要是用于定义html内容在浏览器内的显示样式,如文字大小 ...

  7. [HeadFist-HTMLCSS学习笔记][第七章CSS入门：加一点样式]

    CSS入门 style元素设置CSS 基本格式 <style type="text/css"> body { background-color: #eaf3da; } ...

  8. ReactJS入门学习二

    ReactJS入门学习二 阅读目录 React的背景和基本原理 理解React.render() 什么是JSX? 为什么要使用JSX? JSX的语法 如何在JSX中如何使用事件 如何在JSX中如何使用 ...

  9. Bootstrap3.0入门学习系列

    Bootstrap3.0入门学习系列规划[持续更新]   前言 首先在此多谢博友们在前几篇博文当中给与的支持和鼓励,以及在回复中提出的问题.意见和看法. 在此先声明一下,之前在下小菜所有的随笔文章中, ...

随机推荐

  1. Mac电脑手动清理

    Xcode的无用的文件如图找到DerivedData文件夹,删除里面文件就可以了(先找到隐藏的文件)

  2. WPF学习笔记-自定义窗口

    代码部分 <Style x:Key="for_noresize_window" TargetType="{x:Type Window}"> < ...

  3. Java中遍历Map的几种方法

      转自: http://blog.csdn.net/wzb56/article/details/7864911 方法分为两类: 一类是基于map的Entry:map.entrySet(); 一类是基 ...

  4. ParentWindow属性及其一系列函数的作用——适合于那些不需要父控件管理内存释放的子控件

    TWinControl = class(TControl) property ParentWindow: HWnd read FParentWindow write SetParentWindow; ...

  5. Maven的常用命令

    转载:http://www.cnblogs.com/phoebus0501/archive/2011/05/10/2042511.html Maven库: http://repo2.maven.org ...

  6. 【C++基础之十五】内联函数

    1.优点 为什么使用内联函数,而不使用宏定义,虽然宏本身采用的展开来替代函数调用的压栈出栈返回等操作,提高了代码的效率,但是会有两个问题: (1)边际效应 宏只是展开代码而已,所以在一些操作符的优先级 ...

  7. 14.5.3 Locks Set by Different SQL Statements in InnoDB

    14.5.3 Locks Set by Different SQL Statements in InnoDB 通过不同的SQL语句设置的锁 在InnoDB中 一个锁定读, 一个UPDATE 或者一个D ...

  8. 【转】JNI 对象处理

    原文网址:http://leidiqiu.iteye.com/blog/720307 JNI 的基本问题就是解决 Java 和 C++ 代码互相调用的通信问题,在 C++ 代码编写过程中最大的问题莫过 ...

  9. Spfa费用流模板

    ; ,maxm=; ,fir[maxn],nxt[maxm],to[maxm]; int cap[maxm],val[maxm],dis[maxn],path[maxn]; void add(int ...

  10. 保留n位四舍五入小数

    一:可选择保留位数,注释很解释的很详细,上图 二:全部代码 using System; using System.Collections.Generic; using System.Component ...