样式表

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. Java学习之旅基础知识篇：数组及引用类型内存分配

    在上一篇中,我们已经了解了数组,它是一种引用类型,本篇将详细介绍数组的内存分配等知识点.数组用来存储同一种数据类型的数据,一旦初始化完成,即所占的空间就已固定下来,即使某个元素被清空,但其所在空间仍然 ...

  2. 字符串的长度超过了为 maxJsonLength 属性设置的值

    当出现类似标题的错误时,可以按照如下方法解决: 1. 检查是否传递的JSON字符串长度过长 2.增加JSON串的长度设置,设置如下: <system.web.extensions>     ...

  3. 关于在官网上下载Eclipse遇到的问题！！

    首先Eclipse是什么? Eclipse 是一个开放源代码的.基于Java的可扩展开发平台.就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境. 幸运的是,Eclipse 附带了一 ...

  4. NSObject头文件解析 / 消息机制 / Runtime解读 (一)

    NSObject头文件解析 当我们需要自定义类都会创建一个NSObject子类, 比如: #import <Foundation/Foundation.h> @interface Clas ...

  5. Tomcat的安装配置与JavaWeb入门教程

    本文开发环境: windos7 , Eclipse-mars , JDK1.7 , Tomcat7.0 1.关于Tomcat 先来看一段Tomcat的介绍: Tomcat是Apache 软件基金会(A ...

  6. iOS网络层设计感想

    App的开发无外乎从网络端获取数据显示在屏幕上,数据做些缓存或者持久化,所以网络层极为重要.原来只是把AFNetwork二次封装了一下,使得调用变得很简单,并没有深层次的考虑一些问题. 前言 参考: ...

  7. php数组排序

    sort() - 以升序对数组排序rsort() - 以降序对数组排序asort() - 根据值,以升序对关联数组进行排序ksort() - 根据键,以升序对关联数组进行排序arsort() - 根据 ...

  8. javaweb log4j显示完整sql日志

    javaweb显示完整sql日志 所需jar包: log4j-1.2.17.jar log4jdbc-1.2.jar slf4j-api-1.7.12.jar slf4j-log4j12-1.7.12 ...

  9. SharePoint 2016 配置用户请求应用程序

    最近看了看SharePoint的应用程序,觉得还是不错的,以前都没怎么注意过这样的功能.当然,应用程序除了让用户和管理员添加外,还可以让他们进行请求,把应用程序添加到应用程序目录,然后由统一的管理员进 ...

  10. [Noi2014]魔法森林( 动态mst lct)

    以前一直觉得lct特别难写，自从学了丽洁姐的lct之后，觉得lct居然能这么短，这个主程序能40行左右解决~~~~ 这道嘛~~虽说能用spfa解决，但还是写下lct吧 把边按a值排序后一条一条插入并维 ...