CSS极速版学习1--选择器与优先级

HTML

前端三大要素：
html：木偶          css：化妆       javascript：动态展示
html四个公有属性：
id='one'         class='two'            style="根据css的语法进行设置"          title='mydiv'

css

1.什么是css？     cascading style sheets_层叠样式表，用于修饰页面元素【人靠衣装马靠鞍，狗配铃铛跑的欢】不能脱离html而单独存在层叠多个样式表修饰同一个元素样式表(声明块){color:#fff;}2.css语法选择器 {样式名:样式值;样式名:样式值;...}1.属性名和属性值之间使用:隔开2.多对属性之间使用;隔开3.最后一对属性可以不加分号：     <div style="width:100px;height:100px;"></div>  div*104.速记写法   简写形式：div：10px盒子：内容区+内边距+边框+外边距margin        内边距:盒子边框与内容之间的距离  ;  外边距：盒子与盒子（元素与元素之间的距离）  padding-left:10px;        padding-right:10px;     padidng-top:10px;       padding-bottom:10px; -->简写：padding:10px;//上下左右均为10px              padding:10px 20px;//上下 左右padding:10px 20px 30px;//上 左右 下        padding:10px 20px 30px 40px;//上 右 下 左margin-left:   -->  margin:border:1px solid red; border-width:1px;border-top-width      border-left-width       border-right-width      border-bottom-widthborder-styleborder-color5.注释     写法：  /*注释内容*  ；  /作用：①解释说明②便于代码的维护和管理    ；注释不能嵌套使用<!--注释<!--inner-->内容-->/*/**/*/6.css可读性【MDN】空白字符              空格、tab字符和换行.class {color:'red';font-size:18px;}7.选择器组.one , .two , .three {color:'red';}

3.如何用

   ①html中引入css的方式：<style>选择器{width:100px;height:100px;}{width:200px;}
</style>1.行内样式_style属性<div style="width:100px;height:100px;"></div>内部style标签【内部样式表】将样式添加到head标签中的style标签里2.内联样式_在html中使用style标签内联style属性【内联样式表】在元素中添加style属性<style>选择器{css语法}</style>3.外部引入建议使用：link标签@import url()外部link导入【外部样式表】将样式单独抽离出来，写成一个css文件，在head标签中通过link标签导入<link rel="stylesheet" href="">创建一个以.css为后缀名的文件link标签：优先解析css不建议使用：@import url()：优先解析html@import导入将样式单独抽离出来，写成一个css文件，在style标签内通过@import导入路径<style>@import './test.css';</style>link和@import的区别1) 所属范围@import 是css的语法，只能导入样式link是html的标签，不仅可以加载样式，还可以定义rel属性rel="stylesheet"表示调用外部样式表2) 加载顺序页面加载的时候，link标签引入的css被同时加载@import引入的css在页面加载完毕后再被加载3) 兼容性@import需要兼容IE5+link标签，不存在兼容性问题②引入方式的优先级：行内样式>内联/外部引入就近原则：哪一个样式更靠近元素，那一个样式的优先级更高上课使用：内联样式更多          后期：外部link标签：实际开发

CSS选择器

基本选择器

 标签选择器： 根据标签名称选择[一类]元素
<div></div>         <span></span>含义：根据指定的标签名，在当前文件中找到所有该名称的标签，设置属性格式：标签名 {样式名:样式值}注意：1. 标签选择器选中的是当前文件中所有的标签, 而不能单独选中某一个标签2. 标签选择器无论标签藏得多深都能选中3. 只要是HTML中的标签就可以作为标签选择器id选择器：通过id属性选择[一个]元素             #value含义：根据指定的id找到对应的标签，设置属性格式：#id {样式名:样式值}注意：1. 在同一个文件中的id不可以重复2. 使用id选择器时要在id前面加上#3. id有一定的规范id的名称只能由字母/数字/下划线a-z 0-9 _id名称不能以数字开头id名称不能是HTML标签的名称类选择器：class              .value含义: 根据指定的类名找到对应的标签, 设置属性格式:.类名{属性:值;}注意:1. 在同一个文件中的class可以重复2. 使用class选择器时要在class前面加上.3. 类名的命名规范和id名称的命名规范一样4. 在HTML中每个标签可以同时绑定多个类名格式:<div class="类名1 类名2 ..."></div>错误的写法:<p class="para1" class="para2"></p>逗号选择器:含义: 同时给多个选择器选中的标签设置属性格式:选择器1,选择器2{样式名:样式值}注意:1. 逗号选择器使用,来连接2. 选择器可以使用 标签名称、id、class组合选择器【了解】含义: 给同时具备多个选择器的标签设置属性格式:选择器1选择器2{样式名:样式值;}注意:1. 选择器和选择器之间没有任何的连接符号2. 选择器可以使用 标签名称、id、class普遍选择器：*：所有*{}div *{}含义: 给当前文件所有的标签设置属性格式:* {样式名:样式值;}

层次选择器

 子代选择器含义: 找到指定标签中所有的直接子元素, 设置属性格式:标签名称1>标签名称2{样式名:样式值;}先找到所有名称叫做"标签名称1"的元素, 然后在这个标签中查找所有第一代子元素名称叫做"标签名称2"的元素注意:1. 子元素选择器只会查找第一代子元素, 不会查找被嵌套的元素2. 子元素选择器之间需要用 > 连接后代选择器含义: 找到指定标签的所有的后代元素, 设置属性格式:标签名称1 标签名称2{样式名:样式值;}先找到所有名称叫做"标签名称1"的元素, 然后再在这个元素下面去查找所有名称叫做"标签名称2"的元素, 然后在设置属性注意:1. 后代选择器必须用空格隔开2. 后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代兄弟选择器1. 相邻兄弟选择器含义: 给指定选择器后面紧跟的那个选择器选中的标签设置属性格式:选择器1+选择器2{属性:值;}注意:1.相邻兄弟选择器必须通过+连接2.相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签2. 通用兄弟选择器含义: 给指定选择器后面的选择器选中的所有标签设置属性格式:选择器1~选择器2{属性:值;}注意:1.通用兄弟选择器必须用~连接2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中后代选择器：     >：选择当前元素的直接子元素        空格：选择当前元素的所有后代元素，包含孙代元素兄弟选择器：      +：选择当前元素之后的一个兄弟#one+div        ～：选择当前元素之后的所有兄弟元素#one~div

属性选择器

 含义: 根据指定的属性名称找到对应的标签, 然后设置属性格式:[attribute]找到所有具有该属性名的标签, 设置属性[attribute=value]找到所有属性值为value的标签, 设置属性[attribute^=value]找到所有以value开头的标签, 无论有没有被-隔开[attribute$=value]找到所有以value结尾的标签[attribute~=value]找到拥有独立value的标签, value不可以和其他属性连接[attribute*=value]只要包含value就可以找到最常见的应用场景, 用于区分inputinput[type=password] {}<input type="text"><input type="password"><input>属性选择器：    根据元素的属性选择一类元素[id]:选择当前页面中具有id属性的元素[class='one']:选择当前页面中具有class属性并且属性值为one的元素[class~='one']:选择当前页面中具有class属性，并且属性值之一为one的元素[class^='o']:选择当前页面中具有class属性。并且属性值以o开头[class$='o']:选择当前页面中具有class属性，并且属性值以o结尾[class*='o']:选择当前页面中具有class属性，并且属性值中包含o字符的多选择器：         使用逗号隔开多个选择器div*5        p*3div,p{width:100px;height:100px;}#one,p,.two{}div .outer1,div outer2{}div .outer1,outer2{}组合选择器：   将多个选择器组合到一起使用div#one:选择当前页面中所有div标签并且选择div标签汇总id为one的元素div.one：

伪类选择器

 在选择器的后面使用: 用于添加特殊的效果1. 与子元素相关:first-child  选中同级别中的第一个标签:last-child     选中同级别中的最后一个标签:nth-child(n)  选中同级别中的第n个标签数字字符oddeven<p>段落一</p><p>段落二</p><p>段落三</p><ul><li><p>段落四</p><p>段落五</p></li></ul>     伪类选择器：       :伪类名称:first-child       :last-child         :nth-child(number/odd/even)odd基数   even偶数和状态相关的：:hover:当鼠标悬停在某个元素上时                     :avtive：当鼠标按下时的状态:link：当当前元素未被点击过的状态           :visited：被访问过之后的状态书写顺序：           link-》visited--〉hover--》activediv:first-child{}div :first-child{}p:first-child{}<div class='one'><span></span><p></p><a href=""></a></div>2. 与状态相关:link       未访问的链接:hover        鼠标悬浮时的元素:active     激活链接:visited    已访问的链接:focus        聚焦时

伪元素选择器

 在选择器的后面使用:: 用于添加元素::after     ::before            伪元素选择器：      ::伪元素名称<div>hello</div>::first-letter:第一个字符div::first-letter{color:red}         ::first-line：第一行::selection:被选择的文本       ::beforecontent:'text'/url()  ::after<div><span>11.11</span>  32.21</div>

选择器优先级【级联】：

    根据特性值进行比较，特性值越大，优先级越高1. !important!important:不计入特性值，优先级最高,不建议使用2. 特性值style属性：1000id选择器：100类选择器/伪类选择器/属性选择器：10元素选择器/伪元素选择器：1div{//1}#one{//100}<div id='one'></div>3. 代码顺序如果样式具有相同的特性值，则看代码顺序，样式离元素近的优先级更高特性值越大优先级越高，当特性值相同时，越靠下的优先级越高

设置样式

颜色单位：1.关键字2.rgb(r,g,b);0-255之间3.rgba(r,g,b,a);a:0-1取值；0代表完全透明 1代表完全不透明4.16进制的颜色值#fff#ccc拾色器/取色器
尺寸单位：1.px：绝对单位2.em 相对单位3.百分比 相对单位<div style="width:100%"><p></p></div>c:/windows/Fonts/
控制面板-》外观--〉字体字体样式：斜体font-style加粗font-weight字体改变text-transform字体font-family文字大小font-size文字排列方式text-align文本修饰text-decoration:缩进text-indent 阴影text-shadow加载网络字体：1.下载字体   2.声明字体.t4{font-family: 'myfont'}/*声明字体*/@font-face{font-family: 'myfont';src:url('./fonts/Matamoras.otf');}3.使用字体字体图标：fontawesome/iconfont
fontawesome:<i class='fa fa-xxx'></i>
iconfont    <i class='iconfont xxx'></i>index.html:<link rel="stylesheet" href="outer.css"><div class='one'></div>
outer.css:.one{background:red}

CSS极速版学习1--选择器与优先级相关推荐

CSS / CSS3（新增）选择器及优先级原则
文章目录一.CSS基本选择器 1.通用选择器 * 2.元素(标签)选择器 3.类选择器 4.ID选择器 5.群组选择器二.关系选择器 1) 后代选择器 2) 子元素选择器 3) 兄弟选择器三.c ...
从零开始前端学习[14]:选择器的优先级
选择器的优先级选择器的优先级的使用注意事项,往往在我们写代码的时候是格外需要注意的. 单独来看标签的优先级 ID个数不同的时候的优先级 ID个数一致的时候,看类选择器个数 ID选择器和类选择器都一致 ...
Linux极速版学习！
Linux: vi编辑器:黑屏界面:命令系统:windowsunubntu 16.04 linux 1.特点 1>开源免费没有售后windows系统不开源收费 2>性能强劲,运行稳定lun ...
CSS学习笔记3：选择器及优先级
CSS选择器的类型: 标签选择器类选择器 ID选择器全局选择器群组选择器后代选择器 1.标签选择器: 以HTML的标签作为选择器,凡是选择了一个标签,那么所有这个标签的内容都是用了css样式 ...
css选择器的优先级
1. 引言选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的,而且两个设置的颜色不一样,这里的<span>到 ...
狂神css3笔记,【CSS】CSS3学习笔记（一）——选择器
✨CSS 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不 ...
***CSS魔法堂：选择器及其优先级
一.前言首先看看一道阿里这期网申的题目吧! 1.找出下面优先级相同的选择器 A. img.thumb:after B.[data-job="frontend"]::fir ...
css的基本操作学习--css样式，选择器，hover，文字属性，文本属性，背景
什么是css? 通配符选择器 <head>/* *通配符选择器匹配任何元素 */*{margin: 0;padding: 0;} </head> css样式有三种一种是内嵌 ...
详解CSS选择器、优先级与匹配原理
选择器种类严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和ID选择器.而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用.而在标签内写入style=""的 ...

CSS极速版学习1--选择器与优先级

HTML

css

CSS选择器

选择器优先级【级联】：

设置样式

CSS极速版学习1--选择器与优先级相关推荐

最新文章

热门文章