CSS选择器

2018-11-19  本文已影响6人  苗_a

id选择器

什么是id选择器?
作用: 根据指定的id名称找到对应的标签, 然后设置属性
id名称{
属性:值;
}

类选择器

什么是类选择器?
作用: 根据指定的类名称找到对应的标签, 然后设置属性
.类名{
属性:值;
}
格式:
<标签名称 class="类名1 类名2 ...">

后代选择器

什么是后代选择器?
作用: 找到指定标签的所有特定的后代标签, 设置属性
标签名称1 标签名称2{
属性:值;
}

子元素选择器

什么是子元素选择器?
作用: 找到指定标签中所有特定的直接子元素, 然后设置属性
标签名称1>标签名称2{
属性:值;
}
子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
子元素选择器之间需要用>符号连接, 并且不能有空格

交集选择器

什么是交集选择器?
作用: 给所有选择器选中的标签中, 相交的那部分标签设置属性
选择器1选择器2{
属性: 值;
}
选择器和选择器之间没有任何的连接符号

并集选择器

什么是并集选择器?
作用: 给所有选择器选中的标签设置属性
选择器1,选择器2{
属性:值;
}

兄弟选择器

选择器1+选择器2{
属性:值;
}

序选择器

什么是序选择器?
作用: 选中指定的任意标签然后设置属性
:first-child 选中同级别中的第一个标签
last-child 选中同级别中的最后一个标签
nth-child(n) 选中同级别中的第n个标签

通配符选择器

什么是通配符选择器?
作用: 给当前界面上所有的标签设置属性
*{
属性:值;
}
<em>和<strong>
em标签用于表示一段内容中的着重点。
strong标签用于表示一个内容的重要性。
这两个标签可以单独使用,也可以一起使用。
<p>
<strong>警告:任何情况下不要接近僵尸。</strong>
他们只是 <em>看起来</em> 很友好,实际上他们是为了吃你的胳膊!
</p>
通常em显示为斜体,而strong显示为粗体
<i>和<b>
i标签会使文字变成斜体。
b标签会使文字变成粗体。
这两个标签和em和strong类似,但是这两 个标签没有语义。
所以根据html5标准,当我们只想设置文本 特殊显示,而不需要强调内容时就可以使 用i和b标签。
<small>
small标签表示细则一类的旁注,通常包括 免责声明、注意事项、法律限制、版权信 息等。
浏览器在显示small标签时会显示一个比父 元素小的字号。

<p><small>©2018北财. 保留所有权利.</small></p>

sup和sub用于定义上标和下标。
上标主要用于表示类似于103中的3。
下标则用于表示类似余H2O中的2
<ins>和<del>
ins表示插入的内容,显示时通常会加上下 划线。
del表示删除的内容,显示时通常会加上删 除线。
有序列表
使用ol和li来创建一个有序列表。
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
无序列表
使用ul和li来创建一个无序列表。
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
定义列表
使用dl、dd、dt来创建一个定义列表。

<dl>
<dt>定义项1</dt>
<dd>定义描述1</dd>
<dt>定义项2</dt>
<dd>定义描述2</dd>
<dt>定义项3</dt>
<dd>定义描述3</dd>
</dl>
单位
px
如果我们将一个图片放大的话,我们会发现一个图片 是有一个一个的小色块构成的,这一个小色块就是一 个像素,也就是1px,对于不同的显示器来说一个像素 的大小是不同的。
百分比
也可以使用一个百分数来表示一个大小,百分比是相 对于父元素来说的,如果父元素使用的大小是16px, 则100%就是16px,200%就是32px。
em
em和百分比类似,是相对于font-size说的
1em = 1font-size
文字大小
font-size用来指定文字的大小

上一篇下一篇

猜你喜欢

热点阅读