css总结

最新推荐文章于 2024-05-18 06:08:21 发布

認＆椉φ

最新推荐文章于 2024-05-18 06:08:21 发布

阅读量28

点赞数 1

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_73700909/article/details/133687780

版权

1. css的引入方式和css选择器

三种引入方式：

行内样式

可以在 HTML 头部（<head>标签内）的<style>标签中定义 CSS 样式，使用内嵌样式表定义的 CSS 样式只能在当前网页内使用，

 <p style="color: aqua;"> 行内</p>

因为内嵌样式表需要将 CSS 样式定义在 HTML 文档的内部，所以会导致文档的体积变大，而且当有其它文档也需要使用内嵌样式表中同样的样式时，无法引入到其他文档，必须在其它文档中重新定义，会导致代码冗余，不利于后期维护

内部样式

外部样式

需要将 CSS 样式定义在一个 .css 格式的文件中，然后使用 HTML 的<link>标签将这个 .css 格式的样式文件应用到 HTML 文档中。

示例

选择器有：

1.通配选择器

通用选择器用星号*表示，它不匹配某个特定的 HTML 元素，而是匹配 HTML 文档中的每个元素。在开发中，我们通常使用通用选择器来清除 HTML 元素中默认的内外边距，

如下所示
* {
    margin: 0 auto;
    padding: 0;
}

2.标签选择器

一个完整的 HTML 文档由各式各样的标签组成，而标签选择器可以通过具体的标签名称来匹配文档内所有同名的标签

p 选择器能够匹配文档中所有的<p>标签

<style>
p {
    color: blue;
}
</style>

3.ID选择器

ID 选择器用来匹配 HTML 文档中具有指定 ID 属性的标签，ID 选择器的定义需要用到井号#，后面紧跟 ID 属性的值，如下所示

#nav选择器能够匹配文档中具有id="nav"属性的标签

<style>
#nav {
    color: red;
}
</style>

4.类选择器

类选择器可以根据标签的 class 属性匹配具体的 HTML 标签，所有符合条件的标签都会根据选择器内的样式进行格式化。类选择器的定义需要用到一个英文的句号.，后面紧跟 class 属性的值，如下所示

<style>
.black {
    color: black;
}

</style>

black选择器能够匹配文档中所有具有class="black"属性的标签

5.后代选择器

当一个<p>标签嵌套在一个<div>标签内部的时候，就可以将这个<p>标签看作是<div>标签的后代。当我们需要选择一个标签的后代标签时，就可以使用后代选择器。后代选择器的定义方式就是将标签名、class 属性或 id 属性等按照标签的嵌套关系由外到内的依次罗列，中间使用空格分开，如下所示：
<style>
ul li a {
    text-decoration: none;
}
</style>
ul li a选择器仅会匹配无序列表<ul>标签的所有后代<a>标签

6.子代选择器

子选择器与后代选择器类似，不过子选择器只会匹配某个元素的直接后代（元素与其子元素之间只有一层嵌套关系），子选择器由两个或多个选择器组成，选择器之间用大于号>分隔开，如下所示：
<style>
p > strong {
    color:red;
}
</style>
p > strong选择器会将下面代码中第一个<p>标签的子标签<strong>内的文字设置为红色，但对第二个<p>标签中的<strong>标签则没有影响

7.相邻兄弟选择器

相邻兄弟选择器用于匹配某个元素之后紧邻的另一个元素，这两个元素拥有同一个父级元素并且不存在嵌套关系。相邻兄弟选择器的定义需要用到加号+，加号两边为相邻的两个元素，选择器会匹配加号后面的元素，如下所示
<style>
h1 + p {
    color: blue;
    font-size: 18px;
}
ul.task + p {
    color: #f0f;
    text-indent: 30px;
}
</style>
h1 + p选择器会匹配同一父级元素下紧邻<h1>标签并在其后的<p>标签。ul.task + p选择器则会匹配同一父级元素下紧邻<ul>标签并在其后的<p>标签，但<ul>要具有class="task"属性。

8.普通兄弟选择器

普通兄弟选择器与相邻兄弟选择器非常相似，但却没有那么严格。通用兄弟选择器同样会匹配同一父级元素下的兄弟元素，但兄弟元素之间无需紧邻。定义通用兄弟选择器需要用到波浪号~，波浪号两边为同一父级元素下的两个元素，选择器会匹配波浪号后面的元素，如下所示：
<style>
h1 {
    font-size: 36px;
    font-weight: normal;
}
h2 {
    font-size: 28px;
    font-weight: normal;
}
h3 {
    font-size: 22px;
    font-weight: normal;
}
</style>
h1 ∼ p选择器会匹配同一父级元素下<h1>标签之后的所有<p>标签。

9.属性选择器

属性选择器用来匹配具有特定属性的元素。属性选择器的定义方式与标签选择器相似，只不过需要在标签的后面使用方括号[ ]来指定标签具有的属性信息，如下所示：
<style>
input[type="text"] {
   color: blue;
}
</style>
input[type="text"]选择器会匹配所有具有type="text"属性的<input>标签。

属性选择器中方括号[ ]内的属性信息还支持以下几种写法：

[target]：选择所有带有target属性元素；
[target=_blank]：选择所有具有target="_blank" 属性的元素；
[title~=flower]：选择title属性包含单词“flower”的所有元素；
[lang|=en]：选择lang属性正好是“en”或以“en”为开头的所有元素。

2.css优先级和css字体样式

优先级

!important 的作用是提升优先级，换句话说。加了这句的样式的优先级是最高的（比内联样式的优先级还高)。当 !important 规则被应⽤在⼀个样式声明中时，该样式声明会覆盖CSS中任何其他的声明，⽆论它处在声明列表中的哪个位置。

css选择规则的权值不同时，权值高的选择器优先
css选择规则的权值相同时，后定义的选择器规则优先
css属性后面加 !important 时，无条件绝对优先
总体来说： !important > 行间样式 > id选择器 > class选择器||属性选择器 > 标签选择器 > 通配符选择器注意：减少选择器的个数：“在css规则中尽可能的使用较少的选择器”。

字体样式

ont-style 设置字体样式

normal：指定⽂本字体样式为正常的字体
italic：指定⽂本字体样式为斜体。
<style>
.normal {
    font-style:normal
}
.italic {
    font-style:italic
}
</style>

font-family 属性设置⽂本的字体 font-family 属性应该设置⼏个字体名称作为⼀种"后备"机制，如果浏览器不⽀持第⼀种字体，他将尝试下⼀种字体
  <style>
 .a {
            font-family: "my-fonta";
        }

</style>

字体粗细
font-weight：定义字体粗细

normal：正常的字体。相当于number为400
bold：粗体。相当于number为700
bolder：特粗体。也相当于strong和b标签的作⽤
lighter：细体
：⽤数字表示⽂本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
    <style>
span {
            font-weight: bold;
            font-family: "my-fonta";
            font-size: 25px;
            font-style: italic;
           

        }

</style>

字体⼤⼩
font-size：定义字体⼤⼩

把字体的尺⼨设置为不同的尺⼨。可选参数值：xx-small | x-small | small | medium | large | x-large | xx-large
相对于⽗对像中字体尺⼨进⾏相对调节。使⽤成⽐例的em单位计算。可选参数值：smaller | larger
⽤数值指定⽂字⼤⼩。不允许负值
⽤百分⽐指定⽂字⼤⼩。其百分⽐取值是基于⽗对象中字体的尺⼨。不允许负值
* 设定段落⽂字⼤⼩为⾮常⼤ */
p { font-size: xx-large }
/* 设定⼀级标题的⽂字⼤⼩为2.5倍⼤⼩ */
h1 { font-size: 250% }
/* 设定span⾥的⽂字⼤⼩为16px */ 
span { font-size: 16px; } 
.larger { font-size: larger; }
.point { font-size: 24em; } 
.percent { font-size: 200%;}


    <style>
span {
            font-weight: bold;
            font-family: "my-fonta";
            font-size: 25px;
            font-style: italic;
           

        }

</style>

字体行高
lin-height：设置行高

normal：默认值。
：⽤⻓度值指定⾏⾼。可以为负值。
：⽤百分⽐指定⾏⾼，其百分⽐取值是基于字体的⾼度尺⼨。可以为负值。
：设置数字，此数字是当前的字体⼤⼩的倍数。
<style>
span {
          line-height:;
           }
</style>

CSS字体属性font定义字体，加粗，⼤⼩，⽂字样式。该属性是复合属性

引入外部字体

为了避免用户字体缺省，需要在服务器端设置好页面的字体样式，让网页以最佳方式进行展示直接将下载好的字体复制到当前文件夹下（网站下载新字体）想要使用外部字体，需要进行引入

認＆椉φ

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css总结

三种引入方式：行内样式可以在 HTML 头部（标签内）的标签中定义 CSS 样式，使用内嵌样式表定义的 CSS 样式只能在当前网页内使用，因为内嵌样式表需要将 CSS 样式定义在 HTML 文档的内部，所以会导致文档的体积变大，而且当有其它文档也需要使用内嵌样式表中同样的样式时，无法引入到其他文档，必须在其它文档中重新定义，会导致代码冗余，不利于后期维护内部样式外部样式需要将 CSS 样式定义在一个 .css 格式的文件中，然后使用 HTML 的
复制链接

扫一扫