样式表&类选择器分类

样式表分类：

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. MySql各种查询

    1.简单查询 select * from info; select Code as '代号',name as '姓名' from info; 2.条件查询 select * from car wher ...

  2. Python爬虫总结

    Python爬虫的原理:1通过URLopen()来获取到url页面, 这个过程可以加代理 2这个页面上都是字符串,所以我们而通过字符串查找的方法来获取到目标字符串,用到了正则来匹配目标re.finda ...

  3. MyEclipse中Source Folder，package，folder的区别

    1.在eclipse下,package, source folder, folder都是文件夹. 但它们有区别如: 2. package:当你在建立一个package时,它自动建立到source fo ...

  4. 监控-CPU使用率

    原始脚本来自TG,自己对部分脚本做了调整,分享出来仅供参考,请勿整篇Copy! 使用以下语句获取[CPU使用率] USE [DBA_Monitor] GO /****** 对象: StoredProc ...

  5. .net异步性能测试（包括ASP.NET MVC WebAPI异步方法）

    很久没有写博客了,今年做的产品公司这两天刚刚开了发布会,稍微清闲下来,想想我们做的产品还有没有性能优化空间,于是想到了.Net的异步可以优化性能,但到底能够提升多大的比例呢?恰好有一个朋友正在做各种语 ...

  6. markdown编辑器的学习

    markdown编辑器的学习 1 标题 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 2列表 无序列表 1 2 3 4 有序列表 1 2 3 4 3引用 这里是引用,哈哈我也不知道到我引 ...

  7. Hello PyQt5

    在 ubuntu 系统上 GUI 编程,PyQt5 是个不错的选择.首先,当然是安装 PyQt5 了.终端输入命令: pip3 install PyQt5 即可. 1. 建立一目录 x01.PyQtH ...

  8. 一款优秀的JavaScript框架—AngularJS

    AngularJS简介 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angular ...

  9. 【重点突破】——two.js模拟绘制太阳月亮地球转动

    一.引言 自学two.js第三方绘图工具库,认识到这是一个非常强大的类似转换器的工具,提供一套固定的接口,可用在各种技术下,包括:Canvas.Svg.WebGL,极大的简化了应用的开发.这里,我使用 ...

  10. （转）simhash算法原理及实现

    simhash是google用来处理海量文本去重的算法. google出品,你懂的. simhash最牛逼的一点就是将一个文档,最后转换成一个64位的字节,暂且称之为特征字,然后判断重复只需要判断他们 ...