样式表&类选择器分类

样式表分类：

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. 第二次作业：编写一个四则运算的"软件"

    - 题目: 请编写一个能自动生成小学四则运算题目的 “软件”. 让程序能接受用户输入答案,并判定对错. 最后给出总共 对/错 的数量. 需求分析: ●基本功能 ●实现100以内的加法 ●实现100以内 ...

  2. GUI(JMenuBar+JMenu+JMenuItem)

    public class WindowMenu extends JFrame { JMenuBar menubar; JMenu menu,subMenu; JMenuItem item1,item2 ...

  3. 201521123061 《Java程序设计》第十周学习总结

    201521123061 <Java程序设计>第十周学习总结 1. 本周学习总结 1.这周异常方面的知识主要是关于自定义异常,自定义的异常可以继承自Throwable或Exception类 ...

  4. 201521123118《java程序与设计》第七次作业

    1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 2. 书面作业 1. ArrayList代码分析 1.1 解释ArrayList的contains源代码 public bo ...

  5. 201521123001《Java程序设计》第6周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...

  6. 201521123048 《Java程序设计》第1周学习总结

    一 本周学习总结 第一周我们了解了java及其它的由来.刚开始学java显的特别吃力,对于一些概念和程序执行步骤什么的都不好理解,也有很多在编程时容易出错的地方需要花时间理解和记忆.初步一周下来,在我 ...

  7. 201521123063 《Java程序设计》 第14周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图.Onenote或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 1.1 建立数据库test.表students. ...

  8. 201521123069 《Java程序设计》 第14周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...

  9. ecshop商城系统登录出现登录闪退问题

    症状:ecshop商城系统提示登录成功,而且状态也是登录,一刷新,自动退出了,真坑爹 解决方案: 1.点着点着经常无故退出,感觉session被清空了.查找原因:ecshop中有用ip地址来验证,而公 ...

  10. Linux下的定时任务 - Cron服务

    最近搞咕自己的笔记系统,虽然现在是个人的使用,对于数据库的数据还是比较少,但是安全还是一个我必须注意的东西. (特别是前段时间中了比特币的病毒之后,更是让我关注了我的主机的安全的问题.) 今天的随记是 ...