03 - CSS3知识点汇总一

2016-12-03 本文已影响41人西巴撸

本文是针对刚学编程的小白,都是一些基础知识,如果想了解更多深层一点的东西,欢迎移步本人博客!!

博客地址点击跳转

内容LongLongLong是一种情怀

朋友总说我写的博客老长老长了,谁会有耐心去阅读呢 ? 而我觉得我把全部的知识概要罗列出来,每一个路过的人至少他不用费心竭力的去网上各种搜各种找,然后还外带各种坑,学习起来太费劲 ! 也不系统 ! 如果是一个真正想进入互联网行业,想成为一个真正的工程师的人,他应该不会觉得长的.希望我的文章对你有所帮助 !

CSS格式

一定要用一对style标签包裹起来而且必须要写在head标签之内 titile标签的下面
示例代码 :

<style type="text/css">
        P{
            text-align: center;
            color: green;
        }
</style>

文字属性

示例代码 :

<style>
        p{
            font-style: italic;
            /*快捷键*/
            /*fs font-style:italic; fs然后按Tab就会自动补全，其实想要写的代码首字母*/
            
            font-weight: bold;
            /*快捷键*/
            /*fwb font-weight:bold; fwb然后按Tab就会自动补全，其实想要写的代码首字母*/

            font-size: 30px;
            /*快捷键*/
            /*fz30 font-size:30px; */

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

如果我们设置的字体用户电脑不存在，那么系统会用默认的字体来显示宋体
如果设置的字体不存在，而我们又不想用默认的字体来显示怎么办？
如果想给中文和英文分别单独设置样式怎么办？
开发中一般常见的字体
中文：宋体/黑体/微软雅黑
英文：Arial/Time New Roma
示例代码 :

<style>
    p{
        /*font-family: '乱七八糟的字体','微软雅黑'; *//*(备选方案用逗号隔开)*/

        font-family: 'Arial','微软雅黑';
        /*font-family: '微软雅黑','Arial';*/

        /*中文字体可以处理英文字体样式，但是英文字体无法处理中文字体样式，用备选方案即可*/
    }
</style>

文字属性的缩写

示例代码 :

<style>
    p{
        /*font-style: italic;*/
        /*font-weight: bold;*/
        /*font-size: 30px;*/
        /*font-family: '楷体';*/

        /* 缩写格式，中间用空格隔开，style和weight可以省略和互换位置，size和family不可以省略，也不可以互换位置，size必须写在family的前面，否则没有任何效果 */

        font: italic bold 30px '楷体';

        /*14px代表字号 24代表行高 楷体代表字形 这是一个语法 缺一不可*/
        font:14px/24px "楷体";

        /*中文字体的别名*/
        font-family:"Microsoft YaHei";  /*微软雅黑*/
        font-family:"SimSun";   /*宋体*/

        /*缩写*/
        font:24px/44px "Times New Roman","Microsoft YaHei","SimSun";
    }
 </style>

文本属性

文本装饰的属性
格式：
text-decoration: underline;
取值：
underline:下划线
line-through：删除线
over-line：上划线
none：什么都没有最常见的用途就是删除超链接的下划线
文本水平对齐的属性
格式：
text-align: center;
取值：
left/right/center
文本缩进的属性
格式：
text-indent: 2em;
取值：
em缩进两个字符

颜色的属性

在CSS中如何通过color属性来修改文字颜色
格式：color：值;
取值：

1.英文单词（表达有限制，不是所有颜色都可以用英文来表达的）
2.rgb
三原色，r代表red，g代表green，b代表blue） rgb（0，0，0）里面的取值就是取色的比例，0-255
红色：rgb(255,0,0);
绿色：rgb(0,255,0);
蓝色：rgb(0,0,255);

黑色：rgb(0,0,0);
灰色：rgb(150,150,150);
只要让其中的取值都相同就是灰色，值越小越偏黑，值越大越偏白。企业开发中一般都用灰色的多

3.rgba
CSS3的时候推出来的，前面的rgb和上面的都是一样的，后面的a是代表透明度，最大值是1
4.十六进制
十六进制的本质就是rgb，例如：#FFEE00 FF代表r EE代表g 00代表b
十进制是0-9，逢十进一
十六进制是0-F，逢十六进一
十六进制和十进制转换的公式
用十六进制的第一位 x16 + 十六进制的第二位 = 十进制
15 == 1x16 + 5 = 21
12 == 1x16 + 2 = 18
FF == Fx16 + F = 15x16 + 15 = 240 + 15 = 255
00 == 0x16 + 0 = 0
5.十六进制缩写
在CSS中只要十六进制的颜色每两位的值都是一样的，那么就可以简写为一位
例如：#FF0000 = #F00
6.注意点：
如果当前颜色对应的数字不一样，那就不能简写，例如：#123455
如果两位相同的数字不是属于同一个颜色的，也不能简写，例如：#122334

标签选择器

作用：根据指定的标签名称，在当前界面找到找有该名称的标签，然后设置属性
格式：
标签名称{
属性：值；
}
注意点：

1.标签选择器选中的是当前界面中所有的标签，而不能单独选中某一个标签
2.标签选择器无论标签藏的多深，被包裹几层，都能选中
3.只要是HTML中的标签就可以作为标签选择器

示例代码 :

    <style>
        p{    /* p标签 就是一个标签选择器 */
           color: red;
        }
    </style>

id选择器

作用：根据指定的id名称找到对应的标签，然后给它设置属性，
格式：id前面必须 + #
注意点：

1.每个HTML标签都有一个属性就做id，每个标签都可以设置id
2.id是独一无二的，必须是唯一的
3.id选择器前面必须加 #
4.id的名称只能由字母/数字/下划线（a-z，0-9，_），其他的一律不行
5.id的名称不能由数字开头
6.id名称不能是HTML标签的名称（a，img，h1...）
7.在开发中一般情况下如果只是为了设置样式，我们不会用id，因为在前端开发中id是留给js使

示例代码 :

<p id="identity1">迟到毁一生</p>
<p id="identity2">早退穷三代</p>
<p id="identity3">按时上下班</p>
<p id="identity4">必成高富帅</p>
    <style>
        #identity1{
            color: red;
        }
        #identity2{
            color: blue;
        }
        #identity3{
            color: green;
        }
        #identity4{
            color: yellow;
        }
    </style>

类选择器

作用:根据指定的类名称找到对应的标签,然后设置属性
格式:
. 类名{ }
注意点:

1.每个HTML标签都有一个属性就做class，每个标签都可以设置class
2.class是可以重复的
3.id选择器前面必须加 .
4.类名的命名规范和id名称的命名规范一样
5.类名就是专门用来给某个特定的标签设置样式的
6.在HTML中每一个标签可以同时绑定多个类名
7.格式:
<标签名称 class="类名1 类名2...">
<p class="类名1" class="类名2" ...></p> 错误的写法

id选择器和class选择器的区别

id相当于人的身份证不可以重复
class相当于人的名称可以重复
一个HTML标签只能绑定一个id名称
一个HTML标签可以绑定多个class名称
id选择器是以#开头
class选择器是以.开头
开发中到底用id选择器和class选择器呢

1.id一般情况下是给js使用的,所以除非是特殊情况,否则不要使用id去设置样式
2.在企业开发中一个开发人员对类的使用可以看出这个开发人员的技术水平
3.一般情况在企业开发中要注重冗余代码的抽取,可以将一些公共的代码抽取到一个类选择器中,然后让标签和这个类选择器绑定即可

后代选择器

找到指定标签的所有后代标签,设置属性
格式:
标签名称1 标签名称2{
属性:值;
}
先找到名称叫做标签1的标签,然后再在这个标签下面查找所有名称叫做标签2的标签,然后设置属性
注意点:

1.后代选择器必须用空格隔开
2.后代选择器不仅仅是儿子,也包括孙子/重孙子,只要最终是放到指定标签中的都是后代
3.后代选择器不仅仅可以使用标签的名称,还可以选择其他的选择器**

子元素选择器

作用:找到指定标签中所有特定的直接资源色,然后设置属性
格式:
标签名称1>标签名称2{
属性:值;
}
注意点:

1.子元素选择器只会查找儿子,不会查找其他的元素
2.子元素选择器之间需要用>符号链接不能有空格
3.子元素选择器不仅仅可以使用标签的名称,还可以选择其他的选择器
4.子元素选择器可以通过>符号一直延续下去

示例代码 :

<p>我是段落</p>
<div id="identity">
    <p>我是段落</p>
    <p>我是段落</p>
    <ul>
        <li>
            <p>我是段落</p>
        </li>
    </ul>
</div>
<p>我是段落</p>
    <style>
        /*
        div>p{
            color: red;
        }
        */
        /*
        #identity>p{
            color: red;
        }
        */
        div>ul>li>p{
            color: red;
        }
    </style>

后代选择器和子元素选择器

区别

后代选择器使用空格作为连接符号
子元素选择器使用>作为连接符号
后代选择器会选中指点标签中所有的特定后代标签也就是会选中儿子/孙子... 只要被放到指定标签中的特定标签都会被选中
子元素选择器智慧选中指定标签中所有的特定直接标签也就是只会选中- 特定的儿子标签

共同点

后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器
后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去
开发中如何选择
1.如果想选中指定标签中所有特定的标签那么就使用后代选择器
2.如果纸箱选中指定标签中的所有特定的儿子标签那么就使用子元素选择器

交集选择器

作用:给所有选择器选中的标签中相交的那部分标签设置属性
格式:
选择器1选择器2{
属性:值;
}
注意点:

1.选择器和选择器之间没有任何的连接符号
2.选择器可以使用标签名称/id名称/class名称
3.只做了解开发中很少用到

示例代码 :

<p class="para1" id="identity">我是段落</p>
<p class="para1">我是段落</p>
p.para1#identity{    color: red;}

并集选择器

作用:给所有选择器选中的标签设置属性
格式:
选择器1,选择器2{
属性:值;
}
注意点:

1.并集选择器必须用,隔开
2.选择器可以使用标签名称/id名称/class名称

示例代码 :

<h1 class="ht">我是标题</h1>
<p class="para">我是段落</p>
    <style>
        /*
        .ht{
            color: red;
        }
        .para{
            color: red;
        }
        */
        .ht,.para{
            color:blue;
        }
    </style>

兄弟选择器

相邻兄弟选择器 CSS2

作用:给指定选择器后面紧跟的那个选择器选中的标签设置属性
格式:
选择器1+选择器2{
属性:值;
}
注意点:

1.相邻兄弟选择器之间必须用+连接起来
2.相邻兄弟选择器只能选择紧跟其后的那个标签不能选中被隔开的标签

通用兄弟选择器=

作用:给指定选择器后面的所有选择器选中的所有标签设置属性
格式:
选择器1~选择器2{
属性:值;
}
注意点:
1.通过兄弟选择器必须用~隔开
2.通用兄弟选择器选中的是指定选择器后面某个选择器中所有的标签不管中间有没有被其他标签隔开
示例代码 :

<h1 class="ht">我是标题</h1>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<h1>我是标题</h1>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
    <style>
        /*
        .ht+p{
            color: red;
        }
        */
        h1~p{
            color: blue;
        }
    </style>

序选择器

CSS3中新增的选择器最具代表的就是序选择器

同级别中的第几个

:first-child 选中同级别中的第一个标签
:last-child 选中同级别中的最后一个标签
nth-child(n) 选中同级别中的第n个标签
:nth-last-child(n) 选中同级别中的倒数第n个标签
:only-child 选中父元素中唯一的这个元素
注意点:这几个都不区分类型

同级别同类型中的第几个

:first-of-type 选中同级别中同类型的第一个标签
:last-of-type 选中同级别中同类型的最后一个标签
:nth-of-type(n) 选中同级别中同类型的第n个一个标签
:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
:only-of-type 选中父元素唯一类型的某个标签
:nth-child(odd) 选中同级别中的所有奇数
:nth-child(even) 选中同级别中的所有偶数
:nth-child(xn+y)
x和y是用户自定义的而n是一个计数器从0开始递增
示例代码 :

    <style>
        p:first-child{
            color: red;
        }
        p:first-of-type{
            color: blue;
        }
        p:last-child{
            color: red;
        }
        p:last-of-type{
            color: blue;
        }
        p:nth-child(3){
            color: green;
        }
        p:nth-of-type(3){
            color: red;
        }
        p:nth-last-child(2){
            color: red;
        }
        p:nth-last-of-type(2){
            color: red;
        }
        p:only-child{
            color: purple;
        }
        p:only-of-type{
            color: red;
        }
        p:nth-child(odd){
            color: red;
        }
        p:nth-child(even){
            color: blue;
        }
        p:nth-of-type(odd){
            color: red;
        }
        p:nth-of-type(even){
            color: blue;
        }
        p:nth-child(2n+0){
            color: red;
        }
        p:nth-child(3n+0){
            color: red;
        }
    </style>

属性选择器

作用:根据指定的属性名称找到对应的标签设置属性
格式:
[attribute=value]
1.作用:找到有指定属性并且属性的取值等于value的标签然后设置属性
2.最常见的场景就是区分input属性
示例代码 :

input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">
<input type="checkbox" name="" id="">
<input type="radio" name="" id="">

示例代码 :

<p id="identity1">我是段落1</p>
<p id="identity2" class="cc">我是段落2</p>
<p class="cc">我是段落3</p>
<p id="identity3" class="para">我是段落4</p>
<p>我是段落5</p>
    <style>
        /*
        p[id]{
            color: red;
        }
        */
        p[class=cc]{
            color: blue;
        }
    </style>

属性选择器2

属性取值是以什么开头的

[attribute^=value] CSS3
[attribute|=value] CSS2
区别:

1.CSS2中的只能找到value开头 value是被-和其他内容隔开的
2.CSS中只要是以value开头的都可以找到,无论它是不是被隔开
3.属性的取值是以什么结尾的
[attribute$=value] CSS3
4.属性的取值是否包含某个特定的值
[attribute~=value] CSS2
[attribute=value] CSS3*

示例代码 :

<img src="" alt="abcwwwmmm">
<img src="" alt="wwwmmmabc">
<img src="" alt="wwwabcmmm">
<img src="" alt="def abc">
<img src="" alt="ppp abc">
    <style>
        /*
        img[alt^=abc]{
            color: red;
        }
        */
        /*
        img[alt|=abc]{
            color: red;
        }
        img[alt$=abc]{
            color: blue;
        }
        */
        img[alt*=abc]{
            color: red;
        }
    </style>

通配符选择器

由于通配符选择器是设置界面上所有的标签属性所以在设置之前会遍历所有的标签如果当前界面的标签比较多那么性能就会比较差所以在企业开发中一般不会使用通配符选择器
示例代码 :

    <style>
        /* 不推荐使用 */
        *{
            margin:0;
            padding:0;
        }
    </style>

CSS三大特性之继承性

什么是继承性

作用:给父元素设置的属性他的子元素也可以使用
注意点:

** 1.并不是所有的属性都可以继承只有以color/font-/text-/line开头的属性才可以继承
2.在CSS的继承中不仅仅是儿子可以继承只要是后代都可以继承
3.CSS继承性中的特殊性
a标签的文字颜色和下划线是不能继承的
h标签的文字大小是不能继承的**

应用场景:
一般用于设置网页上的一些共性信息例如网页的文字颜色字体字体大小等内容 body{}
示例代码 :

<div>
    <p>我是段落</p>
</div>
<div>
    <ul>
        <li>
            <p>我是段落</p>
        </li>
    </ul>
</div>
<div>
    <a href="#">我是超链接</a>
</div>
<div>
    <h1>我是大标题</h1>
</div>
    <style>
        div{
            color:red;
            font-size: 30px;
        }
    </style>

CSS三大特性之层叠性

什么是层叠性

作用:层叠性就是CSS处理冲突的一种能力
注意点:
层叠性只有在多个选择器选中"同一个标签" 然后又设置了"相同的属性" 才会发生层叠性
CSS全称 Cascading StyleSheet
示例代码 :

<p id="identity" class="para">我是段落</p>
    <style>
        p{
            color: red;
        }
        .para{
            color: blue;
        }
    </style>

CSS三大特性之优先级

什么是优先级

作用:当多个选择器选中同一个标签并且给同一个标签设置相同属性时如何层叠就由优先级来确定
优先级判断的三种方式

1.是否是直接选中(间接选中就是继承) 遵循就近原则谁离的近就层叠谁的样式
2.相同的选择器如果都是直接选中都是同类型的选择器谁写在后面就层叠谁的样式
3.不同的选择器如果都是直接选中但是是不同类型的选择器
id>类>标签>通配符>继承>浏览器默认

示例代码 :

<ul>
    <lu>
        <li>
            <p id="identity" class="para">我是段落</p>
        </li>
    </lu>
</ul>
    <style>
        p{}
        #identity{}
        .para{}
        ul{
            color: red;
        }
        li{
            color: blue;
        }
    </style>

优先级之 important

作用:用于提升某个标签直接选中标签的选择器的某个属性的优先级的可以将被指定的属性的优先级提升为最高
注意点:
1.important只能用于直接选中不能用与间接选中
2.通配符选择器选中的标签也是直接选中的
3.!important只能提升被指定的属性的优先级其他属性的优先级不会被提升
4.!important必须写在属性值的后面感叹号不能省略必须写在分号里面
示例代码 :

<ul>
    <lu>
        <li>
            <p id="identity" class="para">我是段落</p>
        </li>
    </lu>
</ul>
    <style>
        #identity{
            color: red;
        }
        p{
            color: deepskyblue ;
        }
        li{
            color: blue !important; (间接选中的无效)
        }
    </style>

优先级之权重问题

作用:当多个选择器混合在一起使用时我们可以通过计算权重来判断谁的优先级最高

权重的计算规则

首选计算选择器中谁的id最多
如果id的个数一样那么再看类名的个数类名个数多的优先级别高
如果类名的个数一样那么再看标签名的个数标签名个数多的优先级别高
如果id/类名/标签名的个数都一样那么谁写在最后面就层叠谁的样式
注意点:
只有选择器是直接选中标签的才需要计算权重
示例代码 :

<div id="identity" class="box1">
    <ul>
        <li>
            <p id="identity1" class="box2">我是段落</p>
        </li>
    </ul>
</div>
    <style>
        #identity1.box2{
            color: red;
        }
        .box1 .box2{
            color: aqua;
        }
        div ul li p{
            color: blue;
        }
    </style>

div和span标签

div

作用:配合CSS完成网页的基本布局

span

作用:一般配合CSS修改网页中的局部信息

div和span有什么区别

div会独占一行而span不会独占一行
div是一个容器级别的标签而span是文本级别的标签
容器级的标签和文本级的标签的区别

容器级的标签

容器级的标签中可以嵌套其他所有的标签
文本级的标签中只可以嵌套文字/超链接/图片
容器级的标签
例如:div h ul ol dl li ...
文本级的标签
例如:span p buis strong em ins del...
注意点:
那些标签是文本级的那些标签是容器级的不用可以记忆在企业开发中要嵌套都是嵌套在div中

CSS元素的显示模式

在HTML中将所有的标签分为两类分别是容器级标签和文本级标签
在CSS中也将所有的标签分为两类分别是块级标签和行内标签

块级标签特点:独占一行

所有的容器级标签都是块级标签
例如:p div h ul ol dl li ...

行内标签特点:不会独占一行

所有文本级的标签都是行内标签除p标签以外
例如:span b u i s strong em ins del...

块级标签和行内标签的区别

块级标签

1.独占一行
2.如果没有设置宽度默认和父元素一样宽高
3.如果设置了宽高那就按照设置的来显示

行内标签

1.不会独占一行
2.如果没有设置宽度默认和字体宽度一样
3.行内标签是不可以设置宽度和高度**

行内块级标签
为了能够让标签既能够不独占一行又可以设置宽度和高度就出现了行内块级标签
示例代码 :

<div>我是div</div>
<p>我是段落</p>
<h1>我是标题</h1>
<hr>
<span>我是span</span>
<b>我是加粗</b>
<strong>我是强调</strong>
<hr>
![](images/picture.jpg)
![](images/picture.jpg)

<style>
        div{
            background-color: red;
            width: 200px;
            height: 100px;

        }
        img{
            width: 50px;
            height: 50px;
        }
</style>

**显示模式**

CSS显示模式转换

转换CSS中元素的显示模式
通过display属性来转换
display取值:

inline ----- > 行内
block ------ > 块级
inline-block -----> 行内块级

示例代码 :

<div>我是div</div>
<div>我是div</div>
<span>我是span</span>
<span>我是span</span>
<p class="cc">我是段落</p>
<b class="cc">我是加粗</b>

    <style>
        div{
            display: inline;
            background: red;
            width: 200px;
            height: 200px;
        }
        span{
            display: block;
            width: 200px;
            height: 200px;
            background: green;
        }
        .cc{
            background: blue;
            width: 200px;
            height: 200px;
            display: inline-block;
            /*
            快捷键
            di display: inline;
            db display: block;
            dib display: inline-block;
          */
        }
    </style>