css详解2

时间 2019-11-10

标签 css 详解栏目 CSS 繁體版

原文原文链接

一、伪类选择器

1.一、a标签的爱恨准则 LoVe HAte 。一个冒号链接

1.二、a标签的示例

给a标签设置个颜色，生效了css

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        a{color: red}
    </style>
</head>
<body>
    <a href="#">百度一下</a>
</body>
</html>

给body设置个颜色，在body中的a标签会继承这个颜色吗？html

    <style>
        body{color: red}
    </style>

没有继承，a标签内部有本身的默认样式浏览器

因此：对于a标签，若是想设置a标签的样式，要做用于a标签上，对于继承性来讲，a标签不起做用的编辑器

1.三、伪类选择器使用案例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
         /*LoVe HAte*/
        /*a标签没有被访问时候设置的属性*/
        a:link{color: red;}
        /*a标签被访问时候设置的属性*/
        a:visited{color:yellow;}
        /*a标签悬浮时设置的属性*/
        a:hover{color: deeppink;}
         /*a标签被摁住的时候设置的属性*/
        a:active{color: deepskyblue;}
    </style>
</head>
<body>
    <a href="#1">百度一下</a>
    <a href="#2">360 一下</a>
    <a href="#3">搜狗 一下</a>
    <a href="#4">过河 一下</a>
</body>
</html>

1.4其它也可使用伪类选择器hover。鼠标放在它上面想让它变个样子就用hover

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{height: 200px;width: 200px;background-color: black;}
       div:hover{background-color: red;}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

1.五、栗子

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{padding: 0;margin: 0} /*通配符选择器去掉全部pading margin*/
        div{height: 200px;width: 200px;background-color: black;
            line-height: 200px;text-align: center;color: #000;
        }
        div:hover{background-color: red;}
    </style>
</head>
<body>
    <div>
        <p>魔降风云变</p>
    </div>
</body>
</html>

效果，黑色框。鼠标悬浮在上面变红色并显示黑色字。工具

1.六、hover栗子

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{padding: 0;margin: 0} /*通配符选择器去掉全部pading margin*/
        div{height: 200px;width: 200px;background-color: black;
            line-height: 60px;text-align: center;color: #000;
        }
        #box p{background-color: #d33333}
        div:hover {background-color: red;}
    </style>
</head>
<body>
    <div id="box"><p>魔降风云变</p></div>
</body>
</html>

鼠标没放上去时：布局

鼠标放上去时：字体

如今的要求是，鼠标放在盒子上，覆盖掉子元素p标签的内容：动画

    <style>
        *{padding: 0;margin: 0} /*通配符选择器去掉全部pading margin*/
        div{height: 200px;width: 200px;background-color: black;
            line-height: 60px;text-align: center;color: #000;
        }
        #box p{background-color: #d33333}
        div:hover {background-color: red;}
      div:hover p{display: none} </style>

伪类选择器选中div，而后选它下面的子元素显示改成none。网站

鼠标没放在上面时：spa

鼠标放在上面时：

把这行注释掉，红色没有了：

    <style>
        *{padding: 0;margin: 0} /*通配符选择器去掉全部pading margin*/
        div{height: 200px;width: 200px;background-color: black;
            line-height: 60px;text-align: center;color: #000;
        }
        #box p{background-color: #d33333}
        /*div:hover {background-color: red;}*/
        div:hover p{display: none}
    </style>

鼠标没放在上面时：

鼠标悬浮后：

css还能够作旋转，3d动画，悬浮离子等。还能作游戏，好比跑酷，愤怒的小鸟等

下面是上面的一个子标签，点击上去以后就改变了，也有hover么？：

由下可见电视有span标签，而且是个a标签。也是无序列表中的一个li元素。这个li下面还包裹了一个div标签。li标签是个块级标签，是独占一行的。而这里是一行显示，若是用块转行内方式那么也会有空白折叠现象(折行)，也很差调整。每一个li标签之间有间距，能够用margin来分开

这里还有一个display none

二、属性选择器

要给每一个input起个名字，若是有不少个input起名很麻烦。这时使用属性选择器，键值键值，值可加引号也可不加引号

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        input[type=text]{background-color: red;}
    </style>
</head>
<body>
    <form action="">
        <input type="text">
        <input type="password">
        <input type="radio">
        <input type="checkbox">
    </form>
</body>
</html>

三、伪元素选择器

3.一、给第一个字添加属性

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        p:first-letter{color: red}
    </style>
</head>
<body>
    <p>我是魔降风云变</p>
</body>
</html>

和伪类选择器使用差很少，加个冒号或者加两个冒号均可以。给第一个字添加属性

3.二、在某个标签内容前面添加内容

    <style>
        p:first-letter{color: red}
        p::before{content: '@'}
    </style>

3.3给某个标签内容后面添加内容

    <style>
        p:first-letter{color: red}
        p::before{content: '@'}
        p::after{content: '$'}
    </style>

给前面加给后面加内容是行内元素，由于和p标签是在同一行内。经过伪元素添加的元素是行内元素。p::after是解决浮动布局经常使用的一个方法

好比这些地方：

这里使用了伪元素选择器。宽高，内容是空，top等

四、font字体

4.1

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        p{font-family: '微软雅黑'}
    </style>
</head>
<body>
    <p>我是魔降风云变</p>
</body>
</html>

点击去掉勾选作调试，没有变化。这里微软雅黑找的是我电脑上的字体，电脑通常默认是有这个字体的。

我将字体改成楷体：

    <style>
        p{font-family: '楷体'}
    </style>

改掉了。

      p{font-family: '楷体',"微软雅黑"}

其它网站也有不少

设置body字体大小14px

 body{font-family: '楷体',"微软雅黑";font-size: 14px}

设置p标签字体大小1em，没有变大小

鼠标点到大小，按向上键，上调body。p标签的字也随之增大

也就是说这里56px就是对应的1em的大小。p标签字体的大小相对于当前盒子（这里是body）来调整大小的

以下：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        body{font-family: '楷体',"微软雅黑";font-size: 14px}
        #box{width: 200px;height: 200px;
            background-color: red;font-size: 20px}
        #box p{width: 100%;
        height: 50px;
            background-color: yellow;}
    </style>
</head>
<body>
    <div id="box"><p>我是魔降风云变</p></div>
</body>
</html>

当前的字体大小是20px

我想p标签里的字体变成body标签的14px，

那就做用于这个标签再设置字体大小

    <style>
        body{font-family: '楷体',"微软雅黑";font-size: 14px}
        #box{width: 200px;height: 200px;
            background-color: red;font-size: 20px}
        #box p{width: 100%;
        height: 50px;
            background-color: yellow;font-size: 14px}
    </style>

这样的话box类里面的20就不起做用了。

若是我将p标签里的14px改成1em，

    <style>
        body{font-family: '楷体',"微软雅黑";font-size: 14px}
        #box{width: 200px;height: 200px;
            background-color: red;font-size: 20px}
        #box p{width: 100%;
        height: 50px;
            background-color: yellow;font-size: 1em}
    </style>

若是我不改p标签内的14px，将p标签的高度改成1em，那么：

4.2

一个普通的盒子：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        body{font-family: '楷体',"微软雅黑";font-size: 14px}
        #box{
            width: 200px;
            height: 200px;
            background-color: red;
            font-size: 20px}
        #box p{
            width: 100%;
            height: 1em;
            background-color: yellow;
            font-size: 30px
        }
    </style>
</head>
<body>
    <div id="box">
        <p></p>
    </div>
</body>
</html>

p标签里的1em等于p标签里的30px字体大小，

这就是一个盒子，如今咱们须要调整盒子里p标签高度，以前每次都须要调整p标签height，如今只须要调整font-size，height就随之改变

若是我将右边p标签显示的height从1em改成60px,那么就height黄色部分的高度就不能随font-size改变而改变。

也就是说若是用em那就是一个相对单位，相对于当前的盒子p的大小。若是我再将height改成1em，黄色高度又能随font-size而改变了。

如今是经过手动调整font-size的大小从而控制height的大小，若是未来有一个自动控制font-size的大小就能自动控制height的大小了。

假设我pc端设置的大小是1200,1em是50px，那么网页到500px大小的移动端就能够自动根据比例调整大小，从而使得移动端等像素大小不一致的设置也能正常使用网页了。若是没有设置相对大小的话，那么只要一个客户端大小不一样，那么就要修改一次像素大小去适应它的尺寸，显然是不合理的。

五、px，ex,rex的区别

5.1

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{padding: 0;margin: 0}
        .box{
 width: 400px; height: 400px; background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

若是我把浏览器从右边缩小显示，红色div大小没有改变，通常网页都是能够根据浏览器的展现大小而调整网页内容大小的，而这里却没有实现这个功能。

也就是咱们如今设置的是400px，浏览器大小改变了它仍是400px,这是一个固定的大小，不能随屏幕大小而适应。这个盒子在pc上400很是好看，若是放到手机上仍是400px，会好看么？400就比手机屏幕小

一点点。px是固定单位，是绝对单位。不论是在多少尺寸的屏幕下，始终是当前尺寸

像这个网页，即便到了手机上依然是能正常去看的

代码入下：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{padding: 0;margin: 0}
        .box{
            font-size: 20px;
            width: 20em;
            height: 20em;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

　如今设置一个font-size为20px，将400px的width和height用em来表示，那么存在一个换算单位，即：1em=20px。因此两者都是20em，这样两者大小是没有变化的

如今我只须要动态修改font-size大小，盒子的大小就随之而改变了

这个em是相对于当前盒子的，就是当前块区域。布局整个网站有不少个这样的盒子，那么有不少个盒子之间有不少个相对大小的关系。那么就有了rem，根元素。

5.二、rem原理图

　　　咱们最开始的最外层标签是html标签，html标签包含head和body标签。head标签又包含meta、title、script、style、link标签。body下又有div、p、ul、ol标签。div标签又有a标签，a标签下面又可能有span标签。p标签里面有input标签。ul标签下又有li标签。li下面又可能有div标签等等。上面的包裹下面的不少个标签。这样构成了一棵树，head，body这样的标签就是它的分叉点。树根是html。有这个图写的时候轻松点。rem的r就是root，就是树根html，给html设置font-size

为何要有rem，这样写的网页能适应不一样终端的屏幕大小。不用老是修改html尺寸去适应不一样的终端，有了rem就就能够动态控制

5.三、使用rem的案例分析

使用rem以前是：

        .box{
 font-size: 20px; width: 400px; height: 400px;
            background-color: red;
        }

使用rem以后是（换算单位是20px=1rem，由此得出子的div的相对宽高）：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{padding: 0;margin: 0}
       html{font-size: 20px}
        .box{
            font-size: 12px;
 width: 20rem; height: 20rem;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">魔降风云变</div>
</body>
</html>

给html根设置一个大小，box继承html大小。

我如今只是写了一个样式，之后只要修改html的font-size大小，个人子元素div就能随之改变大小了。

我就算到了移动上，也只须要修改html的font-size 就能够了。

若是我能用js脚本动态修改html的font-size大小。这个值一遍，和div的换算关系变了，div就变了。

假设个人html的font-size由20变成了40，那么20rem是变大了变小了？若是20rem没有变，那么div随着html的font-size成比例增大，可是他们之间的换算关系变小了，1rem表明的px数变大了。

若是div要保持不变，html的font-size变大了，那么那么div的width和height就要变小，这样单位rem和宽高乘积不变，div大小不变。

        html{font-size: 20px}
        .box{
            font-size: 12px;
            width: 20rem;
            height: 20rem;
            background-color: red;
        }

六、详细字体属性文本属性。来自复制。

https://book.apeland.cn/details/351/

6.1字体属性

字体

在平常工做中，咱们会用到word来编写内容，好比能够对咱们须要设置的内容设置字体、字号、颜色等设置。如图所示。

那么咱们在网页中使用css样式时，一样也能作相关的设置。

看个栗子，为网页中的文字设置字体为微软雅黑。

body{font-family:'微软雅黑'}

这里要注意不要设置不经常使用的字体，好比你给我来个’圆体-简’,由于若是用户本地电脑上若是没有安装你设置的字体，就会显示浏览器默认的字体。也就是说，用户是否能够看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。

如今通常网页中喜欢设置”微软雅黑”，以下代码：

body{font-family:"Microsoft Yahei"}

由于这种字体既美观又能够在客户端彻底的显示出来(用户本地通常都是默认安装的)

备选字体

备选字体是为了防止用户电脑上没有”微软雅黑“这个字体。

语法：

body{font-family:'Microsoft Yahei','宋体','黑体'}

备选字体能够有无数个，那么浏览器在去解析这个代码的时候，是从左往右解析的，若是没有微软雅黑，再去找宋体，最后黑体。

字体颜色

颜色分为三原色：红、绿、蓝，如图所示，三原色进行混合能呈现出不一样的颜色

好比红色+绿色=黄色。

颜色表示方法在css中有三种方式：

英文单词表示法，好比red、green、blue
rgb表示法
十六进制表示法

对于rgb表示法和十六进制表示法，咱们能够经过编辑器中辅助工具（颜色取色器）来取到对应的颜色。这里就不一一赘述了。

字体样式

网站中的字体分为了普通字体和斜体字体，咱们可使用font-style属性来设置对应的字体样式。

属性值	描述
normal	默认的，文本设置为普通字体
italic	若是当前字体的斜体版本可用，那么文本设置为斜体版本；若是不可用，那么会利用 oblique 状态来模拟 italics。经常使用
oblique	将文本设置为斜体字体的模拟版本，也就是将普通文本倾斜的样式应用到文本中。

代码演示：

<meta charset="UTF-8"/>
<title>字体样式</title>
<style type="text/css">
p{
font-style: italic;
}
i{
font-style: normal;
}
</style>
<p>普通字体样式</p>
<i>斜体样式</i>

效果展现：

由于i标签自己具备倾斜的含义，因此能够对已有的倾斜的字体来按照需求进行相应的设置。

字体粗细

网站中咱们能够经过font-weight来设置文字的粗体大小。这里有不少值可选，那么使用最多的就是normal和bold分别表明普通和加粗和字体粗细。

属性值	描述
normal	普通的字体粗细，默认
bold	加粗的字体粗细
lighter	比普通字体更细的字体
bolder	比bold更粗的字体
100~900	400表示normal

6.2文本属性

文本修饰

在网页中有些时候咱们须要对文本设置下划线，或者删除线。如图所示：

若是想实现下划线或者删除线，使用text-decoration属性。

属性值	描述
none	无文本的修饰
underline	文本下划线
overline	文本上划线
line-through	穿过文本的线，~~能够模拟删除线~~。

文本缩进

好比咱们一般写文章的时候，首字母要空两格。那么咱们须要使用text-indent属性来实现。它的属性值是像素(px、em、rem)单位。

代码以下：

<p>在人类漫长的历史长河中，推进社会向前的从不会是那些甘于平凡的多数人，相反，他们每每都是一群特立独行桀骜不驯的疯子！这一群疯子中有位传奇的人物，他颠覆性地将人文与科技完美融合，极大地改变了人类计算机领域，改变了人们的生活方式，其一手建立的计算机公司到现在还是手机行业的传奇，没错！他就是乔布斯！</p>

效果显示：

咱们但愿整段文章描述，首行空两格，那么首先要知道字体大小是多少。好比字体大小默认是16px，那么我须要给它设置text-indent:32px;才能实现效果。

代码以下：

<meta charset="UTF-8"/>
<title>文本缩进</title>
<style type="text/css">
p{
text-indent: 32px;
}
</style>
<p>在人类漫长的历史长河中，推进社会向前的从不会是那些甘于平凡的多数人，相反，他们每每都是一群特立独行桀骜不驯的疯子！这一群疯子中有位传奇的人物，他颠覆性地将人文与科技完美融合，极大地改变了人类计算机领域，改变了人们的生活方式，其一手建立的计算机公司到现在还是手机行业的传奇，没错！他就是乔布斯！</p>

那么问题来了，若是我更改了p标签的字体大小呢？好比，

p{
text-indent: 32px;
font-size:20px;
}

必须再从新的计算text-indent的值来合适。那么这样的话，使得让咱们的开发效率下降，后期不宜维护。如何解决这一问题呢？

咱们能够设置另外一个单位em，它是一个相对单位，相对于p标签的字体大小来进行设置。

若是p标签的字体是16px,那么1em=16px。若是我后期设置了字体大小为20px,那么2em就自动变为40px。

正确设置方式：

p{
text-indent:2em;
font-size:30px;
}

行间距

行间距，也叫行高，表示行与行之间的距离。

上个案例的呈现效果会发现，行与行之间的距离有点近，那么为了使文本显示更加美观，咱们可使用line-height属性来进行设置行间距，它的单位为像素。举个例子，咱们在word文档中对段落设置。如图所示

在css中设置代码以下：

p{
font-size: 20px;
text-indent: 2em;
line-height:2em;
}

line-height:2em;表示2倍行间距。

效果展现：

中文字间距、字母间距

咱们在使用word文档时，一般会对文字之间的间隔进行设置，如图所示。

若是想在网页排版中设置中文字间隔或字母间隔可使用letter-spacing或word-spacing来实现。

代码以下：

p{
/*文字之间的距离*/
letter-spacing:5px;
/*调整英文单词之间的距离*/
word-spacing: 10px;
}

效果显示：

文本对齐

在word文档中，咱们一般都知道对文本甚至图片能够设置对齐方式，好比让文本或者图片居中显示。那么在网页排版中咱们可使用text-align属性来进行设置。

属性值	描述
left	文本左对齐，默认
right	文本右对齐
center	中心对齐

代码以下:

<meta charset="UTF-8"/>
<title>文本对齐</title>
<style type="text/css">
div{
/*给父级标签设置一个边框，表示这是一行，让p段落标签中的内容实现文本对齐的方式，这是文本中心对齐*/
border: 1px solid red;
text-align: center;
}
</style>
<div>
<p>这是了不得的乔布斯</p>
</div>

效果展现：