样式表：

一、样式表的概念：CSS(Cascading Style Sheets)层叠式样式表，作用是美化HTML网页。

二、样式表的分类：样式表分内联式样式表、内嵌式样式表和外部样式表三种。

1、内联式样式表：A、写在标签里面 。

B、style="样式" 例如：<div style="height:200px;"></div>

C、控制精确，样式优先级最高，但是代码重用性差。

2、内嵌式样式表：A、作为一个独立的区域内嵌在网页里，必须写在head标签里面。<style type="text/css">样式</style>

B、控制没有内联的精确，样式优先级第二，代码重用性好。

3、外部样式表：A、新建一个CSS文件，用来放样式表，如果要在HTML文件中调用样式表，一般用<link href="test.css" rel="stylesheet" />

B、控制没有内联的精确，样式优先级最低，代码重用性最好。

选择器：

选择器是样式表用来选择元素的。

选择器分为四种：标签选择器、Class 选择器、ID选择器、复合选择器。

1、标签选择器：A、用标签名做选择器。

B、优先级最低。

例如：<style type="text/css>

p{

样式：

}

</style>

注：格式对P标签起作用。

2、Class选择器：A、根据Class名来筛选元素，都是以"."开头。

B、优先级排名第二。

例如：<head>

<style type="text/css>

.aaa{

样式：

}

</style>

</head>

<body>

<div class="aaa"></div>

</body>

3、ID选择器：A、根据ID名来筛选出唯一元素，都是以"#"开头。

B、优先级最高。

例如：

<head>

<style type="text/css>

#aaa{

样式：

}

</style>

</head>

<body>

<div id="aaa"></div>

</body>

4、复合选择器：

（1）逗号并列：用","隔开，表示并列。

例如：<style type="text/css>

p,span{

样式：

}

</style>

注：格式对P标签和span标签起作用。

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

例如：<style type="text/css>

.p .span{

样式：

}

</style>

注：找到使用样式p的标签，在该标签里面span标签使用该样式。

（3）用"."筛选：用"."表示筛选。

例如：<style type="text/css>

p.span{

样式：

}

</style>

注：在p标签中的class="span"的标签，使用此样式。

2017-3-25 css样式表（一）的更多相关文章

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

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

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

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

  3. CSS样式表

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

  4. JS 控制CSS样式表

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

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

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

  6. DOM与CSS样式表

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

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

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

  8. CSS样式表继承详解

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

  9. 2016年10月27日--css样式表

    CSS样式表 样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. !doctype html> <html> <head> <met ...

  10. CSS样式表 选择器

    1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> &l ...

随机推荐

  1. Spark RDD算子介绍

    Spark学习笔记总结 01. Spark基础 1. 介绍 Spark可以用于批处理.交互式查询(Spark SQL).实时流处理(Spark Streaming).机器学习(Spark MLlib) ...

  2. swift 运算符快速学习（建议懂ＯＣ或者Ｃ语言的伙伴学习参考）

    昨晚看了swift 的运算符的知识点,先大概说一下,这个点和 c 或者oc 的算运符知识点一样,都是最基础最基础的.其他的最基本的加减乘除就不多说了.注意的有几点点..先说求余数运算: 一 :求余数运 ...

  3. java 双击jar包操作

    如何使jar包直接双击运行? 测试:MyMenu.java  类名:MyMenu 写完java代码后,发现物理路径下为: 当我按住Shift键,在此处游记,打开命令行窗口: 执行命令:javac My ...

  4. java字符串比较及小数浮点型的使用

    import java.text.DecimalFormat; /* * 小数类型的常量默认是double类型,声明float类型的常量需要使用F作为后缀. * * 关于equals()和==: 对于 ...

  5. 张高兴的 UWP 开发笔记：用 Thumb 控件仿制一个可拖动 Button

    在 WPF 上可用的控件拖动方法在 UWP 上大多没用,那干脆用 Thumb 仿制一个吧. 关于 Thumb 控件的教程也不多,毕竟在 WPF 控件拖动有很多种方法, Thumb 就显得很鸡肋了.下面 ...

  6. 计算机程序的思维逻辑 (66) - 理解synchronized

    上节我们提到了多线程共享内存的两个问题,一个是竞态条件,另一个是内存可见性,我们提到,解决这两个问题的一个方案是使用synchronized关键字,本节就来讨论这个关键字. 用法 synchroniz ...

  7. windows下搭建Nexus3私服和基于IDEA15的Maven学习笔记

    搭建Nexus私服. 首先去官网下载window下用的zip文件.https://www.sonatype.com/download-oss-sonatype. 解压之后包含下面两个文件 进入nexu ...

  8. 微信公众号开发总结(Node.js + express + winston)

    关于订阅号.服务号.企业号 官方定位 订阅号:主要偏于为用户传达资讯(类似报纸杂志),认证后每天可以群发一条消息,可达到宣传效果,构建与读者之间更好的沟通和管理模式. 服务号:主要偏于服务交互(类似银 ...

  9. 移动端地图技术分享-- 百度高德SDK

    http://blog.csdn.net/zkl99999/article/details/50961155

  10. HL-340编译驱动

    make -C /lib/modules/3.4.39/build SUBDIRS=/home/linaro/Desktop/ch341_drv modulesmake: *** /lib/modul ...