样式表&类选择器分类

样式表分类：

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. 201521123072《Java程序》第二周总结

    201521123072<Java程序>第二周总结 标签(空格分隔): Java学习 [TOC] 1,本周小结 1,字符串的使用, (字符串变量作为对象来处理),所以字符串相等就要用到eq ...

  2. 201521123112《Java程序设计》第1周学习总结

    1.本周学习总结 本周通过面授课和上机课,以及在课后通过对<Java学习笔记>前一二章的阅读,初步了解了Java在计算机领域中的重要性,以及Java为什么能够这么广泛的运用在编程中.通过上 ...

  3. 201521123092《java程序设计》第十周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 1.finally 题目4-2 1.1 截图你的提交结果(出 ...

  4. 201521123030 《Java程序设计》 第9周学习总结

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

  5. 201521123031 《Java程序设计》第9周学习总结

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

  6. Java：类类型变量

    在java中有一种被称为类类型的变量,它不同于基本类型变量存储值的方式.不管是基本变量还是类类型变量,都实现为一个内存位置.但是,由于基本变量所需的内存数量是相同的,所以系统可以给它设置一个固定的空间 ...

  7. Android SDK Manager 闪退的解决办法

    (一)方案一 原理:  SDK Manager.exe 通过调用 android-sdk-windows\tools\lib\find_java.bat 确认  java.exe 的路径 启用 cmd ...

  8. Spring第六篇【Spring AOP模块】

    前言 Spring的第五篇也算是AOP编程的开山篇了,主要讲解了代理模式-..本博文主要讲解Spring的AOP模块:注解方式和XML方式实现AOP编程.切入点表达式.. AOP的概述 Aop: as ...

  9. Intellij idea 断点调试

    前言 之前使用Intellij Idea断点调试都是极其简单的,都是下一步下一步下一步这样子-..还有最坑爹的以为:IDEA只能调试一次.调试完就要重启Tomcat服务器-..因此花了大量的冤枉时间- ...

  10. [python学习笔记] pyinstaller打包pyqt5程序无法运行

    问题 pyinstaller打包的pyqt5程序在部分电脑上会失败.用户截图提示下边错误日志 无法定位程序输入点 ucrtbase.terminate 于动态链接库 api-ms-win-crt-ru ...