样式表&类选择器分类

样式表分类：

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. 软件工程——构建之法高分Tips

    不想获得高分的学生不是好程序猿,结合助教的经验,要想在这门课程上获得高分先提几个Tips 仔细阅读作业要求,尽可能完成作业的每个点 每次老师作业要求布置的都很详细,想获得高分的同学应该仔细阅读作业要求 ...

  2. 英语学习APP的案例分析

    第一部分 调研, 评测 1.第一次上手体验 首界面友好,因为该软件面向的用户有一大部分是想提升自己英语水平的学生,所以每日例句放在首页以便一打开就能看见,同时配以图片展示,让色彩显得比较丰富,让学生从 ...

  3. 【Beta】 第四次Daily Scrum Meeting

    一.本次会议为第四次meeting会议 二.时间:10:00AM-10:20AM 地点:陆大楼 三.会议站立式照片 四.今日任务安排 成员 昨日任务 今日任务 林晓芳 查询app提醒功能模块和用户登录 ...

  4. 团队作业1--团队展示&选题（SNS）

    团队名称 SNS  (SAME is Not Simple,期待和而不同.共同进步) MEMBER 201421123037(captain) 201421123032 201421123034 20 ...

  5. 201521123032 《Java程序设计》第10周学习总结

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

  6. Java-判断一个数是不是素数

    import java.util.Scanner; /** * @author 薛定谔的猫 * java判断一个数是不是素数 * * 素数又称质数,是指在一个大于1的自然数中,除了1和本身之外,不能被 ...

  7. Selenium_WebDriver_元素方法

    版权声明:本文为博主原创文章,转载请注明出处. 前面已经学习了定位元素,定位只是第一步,定位之后需要对这个元素进行操作,如在百度搜索首页的输入框进行输入文本,对"百度一下"按钮进行 ...

  8. 二分求最长上升子序列 二分LIS

    #include <iostream> #include <cstring> #define N 50010 using namespace std; int n; int n ...

  9. Shiro第一篇【Shiro的基础知识、回顾URL拦截】

    Shiro基础知识 在学习Shiro这个框架之前,首先我们要先了解Shiro需要的基础知识:权限管理 什么是权限管理? 只要有用户参与的系统一般都要有权限管理,权限管理实现对用户访问系统的控制,按照安 ...

  10. Mysql免安装版配置【图文版和文字版】

    图文版 配置环境变量 新建一个my.ini文件,添加下面内容 [mysqld] basedir=C:\\software\Mysql\mysql-5.7.14-winx64 datadir=C:\\s ...