样式表

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框架Modernizr是什么东西？ 他是前端开发HTML5和CSS3的强有力前端js检测类库

    最近在研究modernizr的前端框架,发现这个Modernir对前端写页面非常友好,并且能够很快的建立起适应任何设备的html页面哦.在这里分享下基础教程,让大伙对modernizr是什么?做什么用 ...

  2. iOS 之UICollectionView 开发步骤 之 OC

    说起来容易做起来难. 那么我就不说了,来做吧.这就是我的style. 鉴于现在的主流还是OC,那么示例程序还用OC来写,后续补写Swift程序,这里先占个坑. 废话不多说,下面开发步骤来了: 1. 创 ...

  3. Typescript中的Class

    let btn = document.createElement('button'); btn.textContent = 'Say Hello'; document.body.appendChild ...

  4. HTML URL

    HTML 统一资源定位器(Uniform Resource Locators) URL 是一个网页地址. URL可以由字母组成,如"runoob.com",或互联网协议(IP)地址 ...

  5. HDU1175(dfs)

    连连看 Time Limit:10000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u   Description ...

  6. Qt入门之基础篇 ( 二 ) ：Qt项目建立、编译、运行和发布过程解析

    转载请注明出处:CN_Simo. 题解: 本篇内容主讲Qt应用从创建到发布的整个过程,旨在帮助读者能够快速走进Qt的世界. 本来计划是讲解Qt源码静态编译,如此的话读者可能并不能清楚地知道为何要静态编 ...

  7. canvas绘图详解-06-绘制一个五角星-常用绘图原理

    先将如何画一个正规的五角星 在五角星的内外画两个圆,五角星有五个角,360/5=72度 所以得出这两个角的度数 然后算出这两个点坐标 角度转弧度 角度/180*Math.PI 所以外顶点坐标 x:   ...

  8. 康复计划#1 再探后缀自动机&后缀树

    本篇口胡写给我自己这样的东西都忘光的残废选手 以及那些刚学SAM,看了其他的一些东西并且没有完全懵逼的人 (初学者还是先去看有图的教程吧,虽然我的口胡没那么好懂,但是我觉得一些细节还是讲清楚了的) 大 ...

  9. python面向对象编程对象和实例的理解

    给你一个眼神,自己体会

  10. 面向UI编程：ui.js 1.1 使用观察者模式完成组件之间数据流转，彻底分离组件之间的耦合，完成组件的高内聚

    开头想明确一些概念,因为有些概念不明确会导致很多问题,比如你写这个框架为什么不去解决啥啥啥的问题,哎,心累. 什么是框架? 百度的解释:框架(Framework)是整个或部分系统的可重用设计,表现为一 ...