CSS基础总结

最新推荐文章于 2022-04-29 10:45:43 发布

败天一子

最新推荐文章于 2022-04-29 10:45:43 发布

阅读量163

点赞数

文章标签：新手前端知识

本文链接：https://blog.csdn.net/qq_39732088/article/details/79174091

版权

CSS基础总结

引入样式的方法

行内式：在标签的style属性上设置样式
```
<标签名 style=" 属性 : 属性值 ; ">
```

内嵌式：将CSS代码写在HTML文件的head标签中，用style标签包裹

<head>
<style type="text/CSS">
    选择器 { 属性 : 属性值;}
    选择器2 { 属性 : 属性值;}
</style>
</head>

外联式：将所有样式写在CSS文件中，通过link标签将CSS文件链接到HTML文档中
```
<head>
  <link href="CSS文件" type="text/CSS" rel="stylesheet" />
</head>
```

CSS选择器

基础选择器

1、标签选择器：
直接用标签进行选择，选择符为 标签名
例如：

div {
    color : red;
}    //  所有div标签的字体颜色为红色

特殊：
通配符选择器：
*{} 代表选择当前页面所有标签
例如：

* { 
    margin: 0;   
    padding: 0; 
}    //清空所有标签的内外边距

2、类选择器：
用标签中的class属性进行选择，选择符为 .
例如：

.class1 {
    color:red;
}   //class值为class1的标签字体颜色为红色。

3、id选择器（唯一）：
用标签中的id属性进行选择，选择符为 #
例如：

#p1{
    color : red; 
}     //id值为p1的标签字体颜色为红色

*Tips:
id的值只允许出现字母、下划线（大小写区分）、数字；只允许字母开头不允许出现标签名*

id与类的区别：
一个class可以被多个标签使用，一个id只能被一个标签使用。
一个标签可以有多个class，一个标签只能有一个id。

复合选择器

用来选择被多个基础选择器的特殊组合选中元素，由两个或多个的基础选择器组合而成

1. 后代选择器：

用来选择元素的后代（不只下一级）。
外层标签写在前面，中间加一个空格，内层标签写在后面。使用后代选择器时会选中外层标签下的所有内层标签。
原理：从右往左，先找到内层标签，然后看上一级标签是否是外层标签。

例如：

.box li {
    color : red;
}   //类为box的元素下 所有的li元素的字体颜色为红色。

2. 子代选择器：

用来选择下一级的元素（仅仅是下一级）。上下级间用大于号隔开。
例如:

div > p {
    color: red;
}        //div标签中 下一级标签中为p的元素的字体为红色。

3. 并集选择器：

用来选择所选选择器（所有类型都行）的并集，每个选择器中间用逗号隔开。

例如：

.abc, 
h1, 
#id {
    color: red;
}      //使用了这三个选择器中任意一个的元素的字体颜色为红色。

4. 交集选择器

用来选择被多个基础选择器的同时选中的元素，由两个或多个的基础选择器组合而成，直接连写所有选择器

例如：

h3.abc {
    color: red;
}       //既是h3标签 又是.abc类的元素的字体颜色变成红色

5.相邻兄弟选择器

用于选择紧接在另一元素后的元素，且二者有相同父元素。每个选择器间用加号隔开

例如：

h1 + .sibling {
    color:  red;
} //h1标签后的第一个类为sibling的元素(拥有同样的父元素)的字体颜色为红色

伪类选择器

1. 锚伪类
:link 未被访问的元素
:visited 已经被访问过的元素
:hover 鼠标指针悬停在上面的元素
:active 被激活的元素(当前选定的元素)

Tips: 写此类选择器时应遵守lvha的顺序，因为此类选择器的效果会互相覆盖
1、:link 效果在被访问之前会一直生效，如果将:hover 和 :active写在其前面，会被其覆盖， :visited同理
2、在触发:active时有可能会触发:hover属性，为避免:active的效果被:hover覆盖，所以将:active效果放在最后

2. 结构伪类其一
:first-child: 选取属于其父元素的首个子元素的指定选择器
:last-child: 选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n): 匹配属于其父元素的第n个子元素，不论元素的类型

例如：

div > :first-child {
    color: red;
}   // div下的第一个子元素，字体颜色设置为红色

Tips:
1、:first-child、:last-child 、:nth-child(n)等结构伪类选择器若和其他选择器一起使用，如：span:first-child，选中的不是第一个span标签，而是选中既是第一个子元素、又是span标签的元素。
如：

<div>    //最外层div
    <div>狗年大吉</div>
    <span>狗年大吉</span>    //目标元素
</div>

若此时使用div > span:first-child,则无法选中目标元素。因为目标元素仅仅是span标签，而不是最外层div的第一个子元素

2、:nth-child(n)括号中的n可以是常量，也可以是一个一元方程，例如：
:nth-child(2n) 代表选中第偶数个元素

3. 结构伪类其二
:first-of-type: 表示一组兄弟元素中其类型的第一个元素。
:last-of-type: 表示一组兄弟元素中其类型的最后一个元素。
:nth-of-type(n): 表示一组兄弟元素中其类型的第n个元素。

Tips:用法与其一中的相同，但选中的元素却有所不同。

1、span:first-of-type 选中的是其父元素下第一个span元素，不管其在兄弟内的位置如何。
如：

<div>    //最外层div
    <div>狗年大吉</div>
    <span>狗年大吉</span>    //目标元素
</div>

若此时使用div >span:first-of-type ,则可以选中目标元素。

2、div > :first-of-type 使用此选择器时，会产生类似于通配符的选择效果
如：

<div> //最外层div
    <span>狗年大吉!span</span>  //被选中
    <span>狗年大吉!span</span>
    <p>狗年大吉!p</p>  //被选中
    <p>狗年大吉!p</p>
    <em>狗年大吉!em</em>  //被选中
    <em>狗年大吉!em</em>
</div>

伪元素选择器

::first-letter文本的第一个单词或字（如中文、日文、韩文等）
::first-line 文本第一行；
::selection 可改变选中文本的样式；
::before 和 ::after
在元素内部的开始和结束创建一个行内元素 (必须要结合content属性使用)

Tips:
::after的妙用：清除浮动影响（在需要清除浮动影响的元素上添加clearfix类）

.clearfix::after {  
    content: "."; 
    display: block; 
    clear: both; 
    height: 0; 
    visibility: hidden;  }

伪类与伪元素的区别

CSS3.0中 “:”用来表示伪类，“::”用来表示伪元素。
伪类与伪元素用法虽相似，但是原理不同。
伪类选择器相当于给被选中的元素添加一个类（被选中的元素是已经存在的）。
伪元素选择器相当于创建一个新的元素来标识被选中的内容。

CSS三大特性

层叠性

若有多个选择器设置同一个属性到同一个元素上时，会按照CSS书写的顺序来改变元素的样式，以最后一个选择器为准（在优先级相同的情况下）
例如：

<style>
    div > p {
      color: green;
    }
    div p {
      color: red;
    }
</style>

<div class="box" id="box">
    <p>狗年大吉</p>  //字体颜色为红色
</div>

后面的选择器（div p）会将前面的选择器（div > p）覆盖

继承性

书写CSS样式表时，子标签会继承父标签的某些样式
1、text-，font-，line-这些元素开头的以及color属性，可继承。
2、关于盒子的、定位的、布局的属性，不能继承。
3、某些元素的某些元素比较特殊，无法继承，
如：
a标签的color属性和 h系列标签的font-size属性

优先级（权重）

若有多个选择器设置同一个属性到同一个元素上时，会计算每个选择器的优先级。
优先级顺序：
继承 < 通配符 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < ！important
如:

<style>
    #box p {
      color: green;
    }
    .box p {
      color: red;
    }
</style>

<div class="box" id="box">
    <p>狗年大吉</p>  //字体颜色为绿色
</div>

因为id选择器的优先级比类选择器优先级高,所以字体颜色为绿色 Tips: !important用于将某个属性的权重提高到最大，例如：

p {
    color: red !important; 
    //不管其他选择器如何写，p标签的字体颜色就是红色
}

权重计算

当出现很多复合选择器的时候，需要对每个选择器进行权重的计算
一般情况下会计算复合选择器中 id选择器、类选择器、标签选择器的多少
如:

<style>
    #ppp { //1 0 0
        color: blue;
    }

    div.box p { // 0 1 2
      color: green;
    }
    .box p {  // 0 1 1
      color: red;
    }
</style>

<div class="box" id="box">
    <p id="ppp">狗年大吉</p>  //字体颜色为蓝色
</div>

110 > 012 > 011 所以字体颜色是蓝色

败天一子

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS基础总结

CSS基础总结引入样式的方法行内式：在标签的style属性上设置样式 &lt;标签名 style=" 属性 : 属性值 ; "&gt;内嵌式：将CSS代码写在HTML文件的head标签中，用style标签包裹&lt;head&gt;&lt;style type="text/CSS"&gt; 选择器 { 属性 : 属性值;} 选择器2 { 属性 : 属...
复制链接

扫一扫