样式表

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. origin中把多个拟合曲线放在一张图

    双击其中一个.或者New一个graph.这里直接双击其中一个图. 右键,找到layer contents. 可以看到,一个scatter配一个polynomial fit line.把剩下的B,C,D ...

  2. JavaScript 扯几句单线程相关

    JavaScript 扯几句单线程相关 众所周知,Javascript是单线程执行的,这也就是说:JavaScript在同一个时间上只能处理一件事.他不像C,Java等这些多 线程的,可以开不同的线程 ...

  3. 如何在asp.net页面使用css和js

    一.如何在asp.net页面中使用css1.可以直接写在需要样式控制的控件里 例如:<div style="border:#ff6100 1px solid">< ...

  4. Storm InvalidTopologyException: null

    异常信息: backtype.storm.generated.InvalidTopologyException: null at backtype.storm.daemon.common$valida ...

  5. mysql表名忽略大小写

    安装完数据库,建表查询发现表不存在,原来是表名大小写写错了,原来Linux下的MySQL默认是区分表名大小写的,这样的话对变成灰带来很大的不变,如何才能使mysql表名不区分大小写呢? 通过如下设置, ...

  6. B+树的插入、删除（附源代码）

    B+ Tree Index B+树的插入 B+树的删除 完整测试代码 Basic B+树和B树类似(有关B树:http://www.cnblogs.com/YuNanlong/p/6354029.ht ...

  7. WdatePicker 日历控件使用方法+基本常用方法

    WdatePicker 日历控件使用方法+基本常用方法,记录一下. 很好的文章. 网上转来的. 1. 跨无限级框架显示 无论你把日期控件放在哪里,你都不需要担心会被外层的iframe所遮挡进而影响客户 ...

  8. 深圳尚学堂：JavaScript中常见的字符串操作

    快到春节放假了,春节后又是一大波的找工作热潮,在前端实招聘笔试时,必不可免额会考到关于JavaScript中字符串的处理问题.考的不是你会不会,而是你能不能在不借用XX手册或者XX指南再或者百度谷歌的 ...

  9. Linux下JDK安装

    最近在学习linux,倒腾了半天.终于把jdk安装好了,写篇博客记录下来,关键是jdk环境变量的配置和保存了 我用的SecureCRT连接linux,然后再在SecureCRT上敲命令,关于Secur ...

  10. 日志组件 logback

    一.简介 Logback是由log4j创始人设计的又一个开源日志组件.logback当前分成三个模块:logback-core,logback- classic和logback-access.logb ...