样式表

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. js架构设计模式——MVVM模式下，ViewModel和View，Model有什么区别

    MVVM模式下,ViewModel和View,Model有什么区别 Model:很简单,就是业务逻辑相关的数据对象,通常从数据库映射而来,我们可以说是与数据库对应的model. View:也很简单,就 ...

  2. RMAN-06217: not connected to auxiliary database with a net service name

    RMAN> duplicate target database to clonedb from active database; Starting Duplicate Db at 28-JAN- ...

  3. Mangos笔记

    $lt.$lte.$gt.$gte和$ne $in.$nin.$or $mod.$not $exists 条件句式内层文档的键,修改器是外层文档的键,一个键可以有多个 条件,但是一个键不能对应多个更新 ...

  4. 内功心法 -- java.util.ArrayList<E> (5)

    写在前面的话:读书破万卷,编码如有神--------------------------------------------------------------------下文主要对java.util ...

  5. 打开phpmyadmin显示高级功能尚未完全设置部分功能未激活

    问题:老师,打开phpmyadmin显示高级功能尚未完全设置部分功能未激活,应该如何解决? 这是前一阵子学生问过我的一个问题,今天我就在博客里解答你的疑问吧. 总共三步可以搞定 1.导入相关文件到数据 ...

  6. js-tab选项卡

    说道tab选项卡,顾名思义,就是切换不同内容分类,想必学过前端的都知道,tab有很多方法可以实现,最近刚跟师傅学了一种,感觉很简便,很实用哦.    一.先看一下结果 二.可以根据图来布局,首先上面标 ...

  7. 通过 Chrome 在 Windows 中调试运行在 iphone-safari 上的 页面

    本文重点讨论如何在 Windows 系统中通过chrome 浏览器调试运行在 iPhone Safari 浏览器中的网页.如果你有一台 iMac/MacBook,可忽略该文档.iMac 环境下,直接通 ...

  8. tomcat的配置

    配置tomcat需要 先下载JDK JDE配置环境http://jingyan.baidu.com/article/870c6fc33e62bcb03fe4be90.htmlXML配置 路径——> ...

  9. sql递归查询语句

    sql Bom 递归查询: with t as(select * from Department where id=6union allselect a.* from Department a,t w ...

  10. Java静态代理和动态代理总结

    静态代理 第一种实现(基于接口): 1>接口 public interface Hello { void say(String msg);} 2>目标类,至少实现一个接口 public c ...