样式表

DIV + CSS

一、        样式表的分类

以下均以div标签为例，可以换成其他标签

1、  内联样式表

格式:

style="属性1：属性值1；属性2：属性值2；属性3：属性3.1 属性3.2 属性3.3"

-------注意哪个用冒号哪个用分号  什么时候用空格

<div style="width: 500px; height: 100px; border:1px  solid  black">

</div>

注：优先级最高；border的值必须带有px; solid是指实体线；dash是指虚线

和html联合显示，控制精确，但是可重用性差，冗余多。

2、  内嵌样式表

Def: 作为一个独立区域内嵌在网页里，必须写在head标签里。

<head>

<style type="text/css">

Div

{

width:400px;

height:300px;

border:1px;

}

</style>

</head>

注意：只对div标签起作用；必须在head标签里。不要漏了分号。

3、  外部样式表

新建一个CSS文件，用来放样式表。如果要调用样式表，需要在html文件中点右键----CSS样式-----附加样式表。一般用link链接方式。

<link href="地址" rel="stylesheet/>

注： 放于head中。

补充：

有些标签有默认的边距，一般写样式代码的时候都会先去除（或设置其他样式）。

<style type="text/css">

*

{

margin: 0px;

padding: 0px;

}

</style>

作用： 取消掉所有标签的页边距和间距。

* 表示对所有标签起作用。

二、选择器

1、标签选择器（用标签名作选择器，如上面2、补充就是一个标签选择器）

<style type="text/css">

Div

{

height: 100px;

width: 100px;

}

</style>

2、class选择器 （都是以“.”开头）

<head>

<style type="text/css">

.div

{

width:400px;

height:300px;

border:1px;

}

</style>

</head>

<body>

<div class="div" >

哈哈

</div>

</body>

注：表示class="div"这一类应用该样式。

3、  id选择器（以#开头）

<head>

<style type="text/css">

#div

{

width:400px;

height:300px;

border:1px;

}

</style>

</head>

<body>

<div id="div" >

哈哈

</div>

</body>

4、  复合选择器

（1）用”,”隔开，表示并列。

<head>

<style type="text/css">

div,span,p

{

width:400px;

height:300px;

border:1px

}

</style>

</head>

作用：标签div,span,p都具有相同的样式。

（2）用空格隔开，表示后代

<head>

<style type="text/css">

.div div1

{

width:400px;

height:300px;

border:1px;

}

</style>

</head>

作用： div标签里的div1将应用该标签。

（3）筛选”.”

<head>

<style type="text/css">

div.222

{

width:400px;

height:300px;

border:1px;

}

</style>

</head>

作用：在标签div中class=”222”的标签将会执行该样式。

拓：应用多个样式

<head>

<style type="text/css">

P

{

width:400px;

height:300px;

border:1px;

}

span

{

background-color:blue;

}

</style>

</head>

<body>

<div p span >

哈哈

</div>

</body>

作用：哈哈 所在div标签将会应用p标签和span标签所定义的样式。

Reflextions:

What I have learned today are more than before, and more complex than before , I have to try my best to catch up with them and just go ahead!

Thanks for the day is a sunny day, thanks for the people I love are still with me, thanks for the people always loving me never leave me; thanks for everything; and hope everything goes well, tomorrow, tomorrow' tomorrow, tomorrow' tomorrow'tomorrow.............

css样式表1 2017-03-11的更多相关文章

  1. WEB入门三 CSS样式表基础

    学习内容 Ø        CSS的基本语法 Ø        CSS选择器 Ø        常见的CSS样式 Ø        网页中3种使用CSS的方式 能力目标 Ø        理解CSS的 ...

  2. CSS样式表继承详解

    最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承 特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始. ...

  3. CSS样式表的写作规范

    推荐大家使用的CSS书写规范.顺序 写了这么久的CSS,但自己都没有按照良好的CSS书写规范来写CSS代码,东写一段西写一段,命名也是想到什么写什么,过一段时间自己都不知道写的是那一块内容, 这样会影 ...

  4. WEB入门 四 CSS样式表深入

    学习内容 Ø        CSS选择器深入学习 Ø        CSS继承 Ø        CSS文本效果 Ø        CSS图片效果 能力目标 Ø        掌握CSS选择器的组合声 ...

  5. 深度理解CSS样式表，内有彩蛋....

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. CSS样式表

    CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...

  7. JS 控制CSS样式表

    JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline.  ...

  8. HTML基础（三）——css样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...

  9. DOM与CSS样式表

    在前文 <DOM与元素节点内联样式>中我们了解了用 DOM 提供的接口操作元素节点内联样式的方法,今天我们来学习一下如何用 DOM 操作 CSS 样式表. CSS 样式表概况 通过使用 H ...

  10. 一起学HTML基础-CSS样式表-基本概念、分类、选择器

    一.基本概念: CSS  (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...

随机推荐

  1. 天兔(Lepus)监控系统慢查询分析平台安装配置

    被监控端要安装pt工具 [root@HE1~]## yum -y install perl-IO-Socket-SSL [root@HE1~]## yum -y install perl-DBI [r ...

  2. Google Analytics之增强型电子商务报告

    虽然Google Analytics很多年以前就提供了电子商务报告的功能,但对于电子商务网站来说,这个报告缺失的东西还太多.而Google Analytics即将推出的增强型电子商务报告有望弥补这一短 ...

  3. Java线程：同步

    一 同步的概念 线程的同步是为了防止多个线程访问一个数据对象时,对数据造成的破坏. 例如:两个线程ThreadA.ThreadB都操作同一个对象Foo对象,并修改Foo对象上的数据. MyRunnab ...

  4. 使用python制作ArcGIS插件（1）工具介绍

    使用python制作ArcGIS插件(1)工具介绍 by 李远祥 ArcGIS从10.0开始支持addin(ArcGIS软件中又叫作加载项)的方式进行插件制作.相对于以往9.x系列,addin的无论是 ...

  5. ArcGIS Pro 简明教程（2）基础操作和简单制图

    ArcGIS Pro 简明教程(2)基础操作和简单制图 By 李远祥 本章主要介绍ArcGIS Pro如何加载数据并进行简单的地图制作,以基本的操作为主. 上一章节介绍过,ArcGIS Pro是可以直 ...

  6. 微端游戏启动器LAUNCHER的制作之MFC版一（序和进程通信）

    额...刚开始信誓旦旦说要写launcher制作的博客,还没写完就被抛到脑后了真是没毅力.最近把之前写的wpf的launcher改成了mfc版,遇到很多问题,写了三个星期才写完,好好记录一下吧.我也想 ...

  7. hadoop系列一：hadoop集群安装

     转载请在页首明显处注明作者与出处 http://www.cnblogs.com/zhuxiaojie/p/6384393.html 一:说明 此为大数据系列的一些博文,有空的话会陆续更新,包含大数据 ...

  8. Redis的二八定律

    常用命令: 1.setex key 有效时间 value ----------意思就是添加并设置该键值对的存活时间 2.mset key1 value1 key2 value2 key3 value3 ...

  9. 前端总结·基础篇·CSS（一）布局

    目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...

  10. HashTable源码分析

      本次分析代码为JDK1.8中HashTable代码.   HashTable不允许null作为key和value.   HashTable中的方法为同步的,所以HashTable是线程安全的. E ...