css3基础_lorem ipsum dolor sit amet consectetur adipisicing-CSDN博客

CSS3 基础入门(一)

说明

CSS3 中相对于CSS2来说，新增加了很多的内容，其中较为常用的包括下面几点：

选择器
自定义字体(嵌入字体)和字体图标
边框属性
背景属性
文本阴影和盒子阴影
颜色属性
渐变(线性渐变、径向渐变、重复渐变)
过渡
2d变换
3d变换
动画
新的布局方案(flex 布局、多列布局、移动端布局、grid布局)

在本篇文章当中，列出的都是一些css3当中新增加的较为常用并且兼容性较好的属性。

选择器

在这里主要说的是两部分选择器：

属性选择器
伪类选择器

属性选择器

常用的属性选择器如下：

E[attr] 选择具有attr属性的元素
E[attr=value] 选择具有attr属性并且属性值等于value 的元素
E[attr^=value] 选择具有attr属性并且以value 属性开头的元素
E[attr$=value] 选择具有attr属性并且以value属性结束的元素
E[attr*=value] 选择具有attr属性并且属性值中包含value的元素
E[attr~=value] 具有attr属性并且属性列表中包含有value这个属性值的元素
E[attr|=value] 选择具有attr属性并且属性值以value 或者value-开头的属性

下面是示例的demo:

E[attr] 和 E[attr=value]

html代码:
<div class="box1">
    <span class="s1">hello,world</span>
    <span class="s2">hello,world</span>
</div>
css代码:
<style>
    .box1 span[class] {
        color: pink;
    }
    .box1 span[class='s1'] {
        color: red;
    }
</style>

实际的效果:

E[attr^=value] 和 E[attr$=value]

html代码
<div class="box2">
    <span title="hello">this is s1</span>
    <span title="world">this is s2</span>
</div>

css代码:
<style>
    .box2 span[title^='he'] {
        color: pink
    }
    .box2 span[title$='ld'] {
        color: orange;
    }
</style>

实际的效果:

E[attr*=value] 和 E[attr~=value]

html代码
<div class="box3">
    <span class="hellos1">this is s1</span>
    <span class="hello s2">this is s2</span>
</div>

css代码
 <style>
     .box3 span[class*='hello'] {
         color: red;
     }
     .box3 span[class~='hello'] {
         color: purple;
     }
</style>

实际的效果:

E[attr|=value]

html代码
 <div class="box4">
     <span class="hello-s1">this is s1</span>
     <span class="hello">this is s2</span>
</div>

css代码
 <style>
     .box4 span[class|='hello'] {
         color: red;
     }
</style>

实际的效果：

伪类选择器

常用的伪类选择器可以分为下面的几类:

结构伪类选择器
目标伪类选择器
UI元素状态伪类选择器
否定伪类选择器
动态伪类选择器(css2)

下面将会针对这几类的伪类选择器进行梳理。

结构伪类选择器

常用的结构伪类选择器如下:

E:first-child 选择匹配到的第一个子元素。
E:last-child 选择匹配到的最后一个子元素。
E:nth-child(n) 选择匹配到的第n个子元素。
E:only-child 选择唯一的一个子元素。
E:nth-of-type(n) 选择匹配同类型中的第n个同级兄弟元素。
E:only-of-type 匹配属于同类型中唯一的兄弟元素。
E:first-of-type 匹配同级兄弟元素中第一个兄弟元素。
E:nth-last-child(n) 从子元素列表的最后开始查找第n个子元素。
E:nth-last-of-type(n) 从同级兄弟元素列表的最后开始查找第n个元素。
:root 匹配根元素

实例代码:

html代码:
<ul>
    <li>aaa</li>
    <li>aaa</li>
    <li>aaa</li>
    <li>aaa</li>
    <li>aaa</li>
    <li>aaa</li>
</ul>

css代码:
<style>
    ul > li:first-child {
        color: red;
    }

    ul > li:last-child {
        color: green;
    }
    /* odd 奇数行 */
    ul > li:nth-child(odd) {
        font-style: italic;
    }
    /* even 偶数行 */
    ul> li:nth-child(even) {
        font-style: normal;
    }

    ul > li:nth-child(3) {
        color: pink;
    }

    ul > li:nth-child(5) {
        color: orange;
    }
</style>

实际效果:

html代码:
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>

css代码:
<style>
    div:first-of-type {
        color: red;
    }

    div:last-of-type {
        color: green;
    }

    div:nth-of-type(odd) {
        font-style: italic;
    }

    div:nth-of-type(even) {
        font-style: normal;
    }

    div:nth-of-type(3) {
        color: pink;
    }

    div:nth-of-type(5) {
        color: orange;
    }
</style>

实例效果:

目标伪类选择器

常用的目标伪类选择器如下:

E:target 选择器可用于选取当前活动的目标元素(URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element))。

示例代码:

html代码:
<a href="#hello">跳转到锚点hello</a>
<p class="hello" id="hello"> 
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam deleniti, possimus temporibus quibusdam suscipit minima fuga provident. Aliquid distinctio iste tenetur odio! Molestias beatae possimus voluptatem. Error ab ratione totam!
</p>

css代码:
<style>
    .hello:target {
        color: red;
    }
</style>

实际效果:

UI元素状态伪类选择器

常用的UI元素状态伪类选择器如下:

E:enabled 匹配用户界面上处于可用状态的元素
E:disabled 匹配用户界面中处于禁用状态的元素
E:checked 匹配用户界面中处于选中状态的元素
E:selection 匹配用户界面中处于被用户选中或者处于高亮状态元素

下面是示例代码:

html代码:
<div>
    用户名: <input type="text" name="user_name" value="zhangsan">
</div>
<div>
    密码: <input type="password" name="pass_word" value="abc123" disabled="disabled">
</div>
<div>
    喜好: <input type="checkbox" name="like" > <span>电影</span> <br>
    <input type="checkbox" name="like" > <span>音乐</span> <br>    
</div>

<p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe facere explicabo sequi vel, aspernatur fugiat aperiam odit ducimus non, laudantium itaque velit numquam! Officiis dolore quas ex assumenda magnam dolores.
</p>

CSS代码:
<style>
    input:enabled {
        color: red;
    }
    input:disabled {
        color: purple;
    }
    input:checked + span {
        color: pink;
    }
    p::selection {
        color: orange;
        /* user-select: none; 禁止用户选中 */
    }
</style>

实际效果:

否定伪类选择器

常用的否定伪类选择器如下:

E:not() 匹配除了括号内条件的元素

html代码：
<p class="p1">this is p1</p>
<p class="p2">this is p2</p>

css代码:
<style>
    p:not(.p1) {
        color: red;
    }
</style>

动态伪类选择器

动态伪类选择器是css2中就已经存在的选择器，包括下面的几个:

E:link
E:visited
E:hover
E:active

自定义字体(嵌入字体)和字体图标

自定义字体(嵌入字体)

设置自定义字体(嵌入字体)可以通过下面的语法来实现：

@font-face {
	font-family: "字体名称";
	src: url(字体位置)
}

例如，

html代码:
<h1>GAME OVER</h1>

css代码:
<style>
    @font-face {