样式表&类选择器分类

样式表分类：

1.内联式样式表：在标签内部写样式代码，精确但不方便，增加工作量，后期修改麻烦。

2.嵌入式样式表：一般写在head内 以<style>......</style>方式可以控制整个页面内的某个标签样式。

3.外联式样式表：单独将样式表定义成一个css文件，然后在css文件中调节页面样式

                            一般会在head标签内写一句：<link type="text/css" rel="styleseet" href="文件所在目录">

注：在css文件中不用在<style></style>标签内用类选择器。！！！

4.注入样式表：在一个css文件中引入另一个css文件

例：

在A.css文件中写  @inport url(B.css);

即表示在A.css文件中引入B.css文件中的样式

类选择器分类：

1.全局选择器：*后跟大括号；作用：控制全局页面整体调。

2.ID选择器：#后跟定义的id名加大括号；用法：一般应用于单个标签。ID值不可以重复

3.class选择器：  .后面跟定义的class名加大括号； 注：class值可以重复，用的最多的应该就是他。

4.标签选择器：直接写标签名跟大括号；

5.复合选择器：大括号前写多种选择器用逗号隔开；如    #c1,.c2,p,a{

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　.......

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　     }

6.关联选择器：说白了就是嵌套使用，用空格彼此分开由外往内选择要选的元素。

例：

div p em{..........}              最普通的标签嵌套格式   其他格式也可以使用。！！！！

<div>

<p>

<em>关联选择器案例</em>

</p>

</div>

7.伪元素选择器：对同一个标签的不同状态使用样式。

例：

a标签格式

a:link{.....}     //a标签链接状态

a:hover{......}  //鼠标放上去的状态

a:visited{.......}   //访问过的状态

<a href="http://www.baidu.com">百度</a>

上述状态会使所有a标签状态都一样

例2：

a标签    伪元素与类选择器同时使用

a.one:link{.....}     //a标签链接状态

a.two:hover{......}  //鼠标放上去的状态

a.three:visited{.......}   //访问过的状态

<a class="one" href="http://www.baidu.com">百度</a>

<a class="two" href="http://www.sina.com.cn">新浪</a>

<a class="three" href="http://www.souhu.com">搜狐</a>

不同的链接样式不一样

 

下面是代码实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<style type="text/css">

/**全局选择器: *后面跟大括号*/
*{

margin: 0px; /*外边距为0像素*/
padding: 0px; /*内边距为0像素*/
}

/*不常用的 自己定义属性的类选择器*/
[doubi="2"]{
color: chartreuse;
}

/*类选择器的关联选择器： 由标签最外层向内找到你所要找的元素 注意没个选择器之间的空格  */
#c2 .class-2 em{
color: crimson;
}

/*复合选择器:大括号前写多种标签并用逗号隔开*/
span,p,a,#c1,.class-1{
width: 200px;
height: 50px;
background-color: cyan;
}

/*id选择器: #直接跟id定义的名*/
#c1{
width: 100px;
height: 140px;
}

/*class选择器: .后面跟class名 */
.class-1{
width: 200px;
height: 100px;
}

/*标签选择器 直接打标签名即可选择标签内元素
注:只要是有span标签的都会被选中(span只是其中一种也可是其他标签)*/
span{
width: 50px;
height: 100px;
/*这里冒号后面必须写"单位"*/
}
</style>
<!-- 引用外部css文件-->
<link type="text/css" rel="stylesheet" href="你新建的CSS文件位置"/>

<title></title>
</head>

<body>
<span>
span选择器更改
</span>

<div class="class-1">
class选择器更改样式
</div>

<!--style="可以随便加样式用；隔开用；结尾"-->
<div style="background: blue; color: black;">
哈哈哈哈哈哈
</div>
<p id="c1">
id选择器使用案例
</p>
<a>
A标签选择器案例
</a>
<center id="c2">
<p class="class-2">
<em>
关联选择器案例
</em>
</p>
</center>

<div doubi="2">
自定义属性选择器案例
</div>

</body>

</html>

说一下优先级的问题

<div style="background: blue; color: black;"> 

</div>

优先级最高所以他的使用率应该是最低的，给自己留一个修改机会。若对同一个元素进行编辑最后编辑的样式会覆盖之前编辑的样式

class用的应该是最多的

注：

div:division   可以吧div理解成一个房子，里面可以放很多东西。

即<div>...........</div>相当于一个容器，里面可以容纳段落，标题，乃至章节，搞要，备注等等。

注意：<p>........</p>内不能放置<div>.....</div>标签，通常会把<p></p>放置于<div></div>内。

我只是一只菜鸟非喜勿喷！有什么不对的地方您可以私信我。请您帮助我成长！

Html 初识样式表&选择器的更多相关文章

  1. CSS样式表 选择器

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

  2. Qt样式表——选择器详解（父子关系）

    在上一节中,小豆君给大家介绍了样式表的基本概念和大致用法.今天我们来详细了解下样式表中选择器的用法. 所谓选择器,就是指定你所设置的样式对哪个或哪些控件起作用. 到目前为止,Qt样式表支持CSS2中定 ...

  3. PHP初入，基础知识点整理（样式表&选择器的使用整理）

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  4. 4、网页制作Dreamweaver（样式表CSS）

    样式表style 制作一个风格统一的网页,需要样式表对颜色.字体等属性的规范,同时也省去在body中多次定义的麻烦,所以一个样式表是必不可少的. 样式表有两种引用的方法:一种是直接写在html的< ...

  5. CSS：CSS样式表及选择器优先级总结

    我们在写网页的时候经常会遇到同一个HTML文件,使用了外部样式.内部样式以及内联样式,那么如果发生冲突时浏览器是怎么抉择的呢? 也会遇到这样的情况,在样式表中,对同一个HTML元素,我们有可能既用到了 ...

  6. css样式表分类、选择器分类、css基础样式

    1 . 样式表  Cascading Style Sheet      css优势: 内容与表现分离 网页的表现统一,容易修改 丰富的样式,使网页布局更加灵活 减少网页代码量,增加网页的浏览速度,节省 ...

  7. CSS样式----图文详解：css样式表和选择器

    主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...

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

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

  9. css样式表和选择器的优先级以及position元素属性值的区别

    css样式表优先级 问题:当同一个HTML元素被不止一个样式定义时,会使用哪个样式呢? 答:一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字4拥有最高的优先权. 1.浏览器缺省 ...

随机推荐

  1. 201521123086《JAVA程序设计》第五周作业

    本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 书面作业 代码阅读:Child压缩包内源代码 Q1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误 ...

  2. 201521123025 <<java程序设计>>第3周学习总结

    1. 本周学习总结 2. 书面作业 Q1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; ...

  3. 201521123121 《Java程序设计》第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前 ...

  4. page分页类

    <?php /** file: Page.class.php 完美分页类 Page */ class Page { private $total; //数据表中总记录数 private $lis ...

  5. Jar文件 META-INF/MANIFEST.MF文件详解

    打开Java的JAR文件我们经常可以看到文件中包含着一个META-INF目录, 这个目录下会有一些文件,其中必有一个MANIFEST.MF,这个文件描述了该Jar文件的很多信息,下面将详细介绍MANI ...

  6. Hibernate第二篇【API讲解、执行流程图】

    前言 从上一篇中已经大致介绍了Hibernate并且有了一个快速入门案例的基础了,-.本博文主要讲解Hibernate API 我们看看快速入门案例的代码用到了什么对象吧,然后一个一个讲解 publi ...

  7. datepickerpopup时间限制选取

    使用popup组件的过程中遇到时间选取的问题 官方文档大致说使用date和mode 可以解决,奈何老夫是看不懂,写的时候参考的有 官方文档.echo2016的博文.liumang361的博文 先看图 ...

  8. readfile & file_get_contents异同

    记录一下:应用memcache时,准备把整个文件缓存到内存中,遇到了比较奇怪的事情,因为最初使用readfile来读取文件,结果这个函数返回一个字节数,而不是一个字符串,于是文件没办法再输出,最后使用 ...

  9. IOS SDWebImage实现基本原理详解（转载）

    1)当我门需要获取网络图片的时候,我们首先需要的便是URl没有URl什么都没有,获得URL后我们SDWebImage实现的并不是直接去请求网路,而是检查图片缓存中有没有和URl相关的图片,如果有则直接 ...

  10. 《MATLAB从入门到放弃》打通 “矩阵” 障碍

    目录: »   矩阵的生成与大小  >   简单矩阵的生成  >  随机矩阵的生成  >   矩阵的大小 »  矩阵的索引与访问 »  矩阵的拼接与裁剪 >  矩阵的拼接 &g ...