CSS入门

浮生醉清风i

已于 2022-08-23 14:25:00 修改

阅读量431

点赞数 2

分类专栏： Front end 文章标签： css优先级引入方式

于 2019-05-19 17:50:15 首次发布

本文链接：https://blog.csdn.net/weixin_41678001/article/details/85296047

版权

Front end 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1、CSS的四种引入方式：

行内式：行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。

<p style="background-color: rebeccapurple">hello csdn</p>

嵌入式：嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

链接式：将一个.css文件引入到HTML文件中。通过HTML引入的css，引用次数不限，无延迟，工作方式是先加载css后加在HTML

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

导入式：将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中。通过css引入的css，引入的次数有限制，有延迟，工作方式先加载HTML后加在css

<style type="text/css">
     @import"mystyle.css"; 此处要注意.css文件的路径
</style>

2、CSS选择器selector：

' * ' 通用选择器，匹配任何元素。

* { margin:0; padding:0; }

标签选择器，通过"标签名"选择。

 p { color:green; }

id选择器：' # ' 加 id名。

#info { background:#ff0; }  #  匹配所有id属性等于footer的元素

class选择器：' . ' 加 class名。

.info { background:#ff0; }  # 匹配所有class属性中包含info的元素

多元素选择器：同时匹配所有E元素或F元素，E和F之间用逗号分隔，","代表并列的意思，进行同时处理。

div,p { color:#f00; }

后代元素选择器：匹配所有属于E元素后代的F元素，E和F之间用空格分隔。后代包括儿子、孙子....

 li a { font-weight:bold;  #  会对a标签下所有标签产生影响。

子元素选择器：匹配所有E元素的子元素F。

div > p { color:#f00; }

毗邻元素选择器：匹配所有紧随E元素之后的同级元素F。相邻时才会用，只会向下找，不会向上找。用的不多。

 div + p { color:#f00; }

选择下面所有兄弟：波浪号选择下面是所有的兄弟。

E ~ F{}

选择以 " xxx " 开头的属性值：^= 选取开头

title ^= "abc"

选择以 " xxx " 结尾的属性值：$= 选取开头

title $= "abc"

选择包含 " xxx " 的属性值：*= 选取开头

title *= "abc"{}

注意嵌套规则：

块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt。例如：p标签就不能嵌套div标签。
li内可以包含div
块级元素与块级元素并列、内联元素与内联元素并列。

3、属性选择器

E[att]：匹配所有具有att属性(自定义的属性)的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。）

p [title] { color:#f00; }

E[att=val]：匹配所有att属性等于“val”的E元素，当有多个相同att属性时使用。

 div [class=”error”] { color:#f00; }

4、伪类和伪元素：

Css 伪元素以 :: 开头的都是伪元素的标志，一般需要配合content属性使用。由于是CSS渲染的JS是无法操作的。

before after伪元素：

::before    p::before       在每个<p>元素之前插入内容   通过content属性设置添加的文字
::after     p::after        在每个<p>元素之后插入内容   通过content属性设置添加的文字
例：
/* 在li之前插入心形符号 */
ul li::before{
    content: '♥';
}

CSS伪类是用来给选择器添加一些特殊效果。一般以 : 开头。

anchor伪类：专用于控制链接的显示效果：

a:visited{  #（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
    color: chocolate;
}
a:active{ #  （在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。
    color: blue;
}
a:link{  #  （没有接触过的链接）,用于定义了链接的常规状态。
    color: aqua;
}
a:hover{ #  （鼠标放在链接上的状态）,用于产生视觉效果。
    color: black;
}

常见的伪类：

/* :nth-of-type() 同类型的排序 */
ul li:nth-of-type(even) {
    color: orange;
}

/* :not() 除了not中的条件其他都应用 */
ul li:not(:nth-of-type(2)) {
    color: orange;
}

/* 不同类型的排序，如果第一个子元素不是li则不会应用css  li和first-child 是且的关系*/
ul li:first-child {
    color: orange;
}

5、CSS优先级：

所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。

样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
                                                                  权重
1 内联样式表的权值最高                style=""-------------------  1000
2 统计选择符中的ID属性个数。           #id    －－－－－－－－－－－－ 100
3 统计选择符中的CLASS属性个数或者伪类。.class  －－－－－－－－－－－－ 10
4 统计选择符中的HTML标签名个数。       p     －－－－－－－－－－－－    1
5 通配符                             " * " -----------------------   0
6 继承的样式 没有优先级。

例如下面的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #main .big .small{  # 此时的权重为：100+10+10=120
            color: chartreuse;
        }
        #main .big div{   # 此时的权重为：100+10+1=111
            color: blue; 
        }
    </style>
</head>
<body>
<div id="main">
    <div class="big">
        <div class="small">
            我是结果
        </div>
    </div>
</div>
</body>
</html>

当在一个样式后面加入！important 就会无视优先级。

另外的：

1、文内的样式优先级为1,0,0,0，所以始终高于外部定义。这里文内样式指形如<div style="color:red>blah</div>的样式，而外部定义指经由<link>或<style>卷标定义的规则。 
2、有!important声明的规则高于一切。
3、如果!important声明冲突，则比较优先权。
4、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。
5、由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。

5、元素的定位(position)：

relative 相对定位。相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，并不会脱离文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。不改变元素的属性。而其层叠通过z-index属性定义。

注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。

※ z-index: 设置层级，值是一个整数，值越大代表层级越高，祖先元素层级再高也不会盖住后代元素。只有开启了定位以后设置才会生效。

absolute 绝对定位。

定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框，即行内变成块块变高度和宽度被撑开。

重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。

布局的水平公式由原来的七个值变成了九个值，多了left和right。如果没有一个属性设置为auto，在不满足水平公式的情况下会自动调整right以满足公式成立。left 和 right 默认是auto。

总结：参照物用相对定位，子元素用绝对定位，并且保证相对定位参照物不会偏移即可。

fixed 固定定位

fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。注意点：一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。

sticky 粘滞定位

sticky：在滚动一定长度后就会粘滞在某一个位置不动，有点类似固定定位。