CSS--层叠样式表

weixin_45398401

已于 2023-08-23 20:36:09 修改

阅读量691

点赞数 1

分类专栏：前端文章标签：前端 html5 css

于 2023-08-23 20:34:01 首次发布

本文链接：https://blog.csdn.net/weixin_45398401/article/details/131401325

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

简介

CSS---层叠样式表（Cascading Style Sheets）的简称，是一种标记语言。

也称：CSS样式表/级联样式表

作用：设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

语法规范

CSS结构构成：选择器 + 一条或多条声明

代码风格

属性值、属性值关键字全部使用小写，特殊情况除外；
属性值前面、冒号后面，保留一个空格；
选择器和{}中间保留一个空格；

 <style>
        h3 {
            color: aqua;
            font-size: 12px;
        }
    </style>

选择器

作用：根据不同的需求把不同的标签选出来（选择标签用的）

基础选择器

构成：由单个选择器组成的

包括：标签选择器、类选择器、id选择器和通配符选择器

标签选择器（元素选择器）

用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

基础结构：

<style>
        h3 {
            color: aqua;
            font-size: 12px;
        }
</style>

优点：标签选择器会将页面中某一类标签的样式都改变

缺点：不能差异化的选择某一类标签中的不同标签（类选择器可以解决这个问题）

类选择器（.）

基础结构：

<head>
    <style>
        .green {
            color: green;
        }
    </style>
</head>

<body>
    <h3 class="green">我爱中国！</h3> #h3标签调用green样式，用到class类
</body>

注：1.一个或多个标签都可调用类选择器的样式

2.类选择器名称不能使用标签名称（例如p、span等）

3.不要使用纯数字、中文等命名，尽量使用英文字母来命名类选择器

id选择器（#）

基础结构：

<head>
    <style>
       #pink {
            color: blueviolet;
        }
    </style>
</head>

<body>
    <h3 id="pink">我爱中国！</h3> #只能调用一次！！！
</body>

注：1.只能调用一次

2.一般用于页面唯一性的元素上，经常和JavaScript搭配使用

通配符选择器（*）

作用：定义页面中所有元素（标签）

基础结构：

<style>
        * {
            color: firebrick;
        }
</style>

注：1.不需要调用，自动给页面中所有元素使用样式

2.在特殊场景下才使用

复合选择器

复合选择器建立在基础选择器之上，对基础选择器进行组合，由两个或多个基础选择器构成。

常用复合选择器：后代选择器、子选择器、并集选择器、伪类选择器等

后代选择器（又称包含选择器，重要）

作用：可以对父元素里面的子元素进行样式设置

格式：元素1 元素2 {样式声明}

注：元素1（父）和元素2（子）之间有一个空格，最终选择的是元素2（子）

<head>
    <style>
        ol li {color: pink;}
    </style>
</head>
<body>
    <ol>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ol>
</body>

子选择器（重要）

作用：可以对离父元素最近一级子元素进行设置

格式：元素1>元素2 {样式声明}

注：元素1（父）和元素2（子）之间有一个>，最终选择的是元素2（子）

    <style>
        ol li {color: pink;}
        .kop>li {color: aqua;}
    </style>
</head>
<body>
    <ol>
        <li>你</li>
        <li>好</li>
        <li>同</li>
        <li>学</li>
    </ol>
    <ol class="kop">
        <li>欢</li>
        <li>迎</li>
        <li>回</li>
        <li>家</li>
    </ol>
</body>

注：代码中有两个<ol></ol>标签，想只对其中一个ol标签进行设置，可以利用类选择器（如上图中kop类）。这样在样式设置中可以不写ol li，而写.kop li

并集选择器

作用：可以选择多组标签，同时为它们定义相同的样式。通常用于集体声明。

格式：元素1,元素2 {样式声明}

注：1.并集选择器一般竖着写；

2.最后一个选择器不需要加逗号；

3.任何形式的选择器都可以作为并集选择器的一部分；（例如后代选择器等）

伪类选择器

作用：用于向某些选择器添加特殊的效果，比如给链接添加特殊效果。。。

格式：用冒号（:）表示，如:diff

种类：链接伪类、结构伪类。。。

链接伪类选择器

a:link	选择所有未被访问的链接
a:visited	选择所有已被访问的链接
a:hover	设置鼠标指针移动到链接上的样式
a:active	设置鼠标按下链接但未弹起时的样式

注：1.按照LVHA顺序声明：link、visited、hover、active

2.因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。（若对<body>标签color：pink，则<body>标签内部的<a>标签不会跟着被设置为pink）

<head>
    <style>
        a:link {
            color: blue
        }
        a:visited {
            color: blueviolet
        }
        a:hover {
            color: brown
        }
        a:active {
            color: black
        }
    </style>
</head>
<body>
    <a href="#">我的淘宝主页</a>
</body>

：focus 伪类选择器

作用：选取获得焦点的表单元素

使用范围：焦点=光标。这个选择器主要针对于表单元素来说

<head>
    <style>
        input:focus {
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <input type="text">
</body>

上面代码的效果：当光标点击表单时，表单会变成blueviolet（紫色）

字体属性

作用：定义字体系列、大小、粗细和文字样式（如斜体）

基本属性

属性	表示	描述
font-size	字号	单位：px（一定要带上单位）
font-family	字体
font-style	样式	倾斜：italic 标准：normal（常用）
font-weight	粗细	加粗：700/bold 不加粗：400/normal (不带单位)
font	属性连写	属性值有顺序；字号和字体不可省略掉

注：属性font-family的属性值带引号（例如font-family: 'Arial'）

复合属性

作用：将字体基本属性综合起来写，更节约代码

基本结构：

<style>
    body{
      font: font-style font-weight font-size/line-height font-family;
    }
</style>

注：1.使用font属性时，必须按照以上语法格式中的顺序书写（不能更换顺序），并且各个属性之间用空格隔开

2.可以将不需要设置的属性省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用

文本属性

作用：定义文本的外观，例如文本的颜色、对齐方式、装饰文本、文本缩进、行间距等

文本颜色

color属性

表示	属性值
预定义的颜色值	red、green、blue等
十六进制(常用)	#FF0000、#FF6600等
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

对齐方式

text-align属性

左对齐（left）--默认
居中对齐（center）
右对齐(right)

装饰文本

text-decoration属性

属性值	描述
none（常用）	默认，没有装饰线
underline（常用）	下划线。链接标签<a href></a>自带下划线
overline（几乎不用）	上划线
line-through（不常用）	删除线。

文本缩进

text-indent属性：用来指定文本的第一行缩进，通常是将段落的首行缩进

em是一个相对单位，是当前元素（font-size）1个文字大小，一个文字默认大小为16px。那么2em就是32px，表示缩进当前元素2个文字大小的距离。

如果当前元素没有设置大小，则按照父元素的1个文字大小来设置。

行间距

line-height属性：用于设置行间的距离（行高），可以控制文字行与行之间的距离。

查看行间距的小工具：FSCapture、snipaste、PXcook

引入方式

内部样式表（嵌入式）

写在html页面内部，将所有的CSS代码抽取出来，单独放到一个<style>标签中

<head>
    <style>
        div {
            color: red;
            font-size: 12px;
        }
    </style>
</head>

注：1.<style>标签可以放在html文档的任何地方，但一般会放在文档的<head>标签中

2.可以控制当前整个页面中的元素样式设置

行内样式表（行内式）

在元素标签内部的style属性中设定CSS样式。适合于修改简单样式

<div style="color: red; font-size: 12px;">祖国万岁！</div>

外部样式表（链接式）

将样式单独写到CSS文件中，再将CSS文件引入到html页面中使用

实际开发中都是外部样式表，适合于样式比较多的情况

1.新建一个.css的文件

dl {
    font-size: 55px;
    color: blue;
}

注：不能写将<style></style>标签写入.css文件代码中！

2.使用<link>标签将新建的.css文件引入到html页面中

<head>
    <link rel="stylesheet" href=".css文件的路径">
</head>

注：<link>标签要放到<head>标签内

emmet语法

1.快速生成标签

例：键入div并按Enter或Tab，生成<div></div>标签

键入div*6并按Enter或Tab，生成六个<div></div>标签

2.生成父子级关系的标签----用 >

例：键入ul>li，生成一个内部含有<li></li>标签的<ul></ul>标签

3.生成兄弟关系的标签-----用 +

例：键入div+p，生成一个<div></div><p></p>

4.生成带有类名或者id名字的标签

标签名.类名例：p.name，生成<p class='name'></p>

标签名#id名例：div#mba，生成<div id='mba'></div>

5.生成带有顺序的div类名-----用自增符号 $

键入.kop$*3，

生成<div class="kop1"></div>

6.生成的标签中默认显示文字------用 { }

键入div{我爱我的祖国}，生成<div>我爱我的祖国</div>

键入div{我爱我的祖国}*2，生成两条<div>我爱我的祖国</div>

元素显示模式

定义：元素（标签）以什么方式进行显示。例如<div>自己独占一行。

HTML元素一般分为块元素和行内元素两种类型。

块元素

常见块元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等。其中<div>是最典型的块元素。

特点：1.独占一行

2.高度、宽度、外边距以及内边距都可设置。

3.宽度默认是容器（父级宽度）的100%

4.一个容器及盒子，里面可以放行内或者块级元素。

注：1.文字类的元素内不能使用块级元素

2.<p>标签内不能放块级元素，特别是不能放<div>

行内元素

常见的行内元素：<a>、<strong>、<b>、<u>、<span>等。其中<span>是最典型的行内元素。有的地方也将行内元素称为内联元素。

特点：1.相邻行内元素在一行上，一行可以显示多个。

2.高和宽直接设置是无效的。

3.默认宽度是它本身内容的宽度。

4.行内元素只能容纳文本或其他行内元素。

注：1.链接里面不能再放链接（<a></a>标签内不能在放别的链接）

2.特殊情况：链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全

行内块元素

行内元素中有几个特殊标签：<img/>、<input/>、<td>，它们同时具有块元素和行内元素的特点。它们也被称为行内块元素。

特点：1.和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个。

2.默认宽度就是它本身内容的宽度（行内元素特点）

3.高度、行高、外边距以及内边距都可以设置（块级元素特点）

总结：

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽、高	容器的100 %	容器级可以包含任何标签
行内元素	一行可以刚多个行内元素	不可以设置宽、高	它本身内容的宽度	容纳文本或者其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽、高	它本身内容的宽度

显示模式的转换（常用）

一个模式的元素需要另一个模式的特性。例想要增加链接a的触发范围。

display:block; （转换为块级元素）

display:inline;（转换为行内元素）

display:inline-block;（转换为行内块元素）

样式：

<head>
    <style>
         a {
            background-color: aqua;
            height: 100px;
            width: 100px;
            display: block;
        }
    </style>
</head>
<body>
    <a href="#">链接</a>
</body>

单行文字垂直居中

CSS没有提供文字垂直居中的代码

解决方案：让文字的行高=盒子的高度

注：文字的行高>盒子的高度，文字会偏低

文字的行高<盒子的高度，文字会偏高

CSS的背景

背景颜色

格式：background-color:transparent | 颜色;

元素背景颜色默认值：transparent（透明色）

背景图片

background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者超大的背景图片，优点是非常便于控制位置。

格式：background-image:none | url;

none:无背景图（默认的）；url：背景图的绝对或相对地址

<style>
    div {
            background-color: bisque;
            height: 500px;
            width: 500px;
            background-image: url(../images/taylor.png);
        }
</style>

背景平铺

background-repeat: repeat | no-repeat | repeat-x | repeat-y

repeat:背景图像在纵向和横向上平铺（默认）

no-repeat：背景不平铺

repeat-x：背景在横向上平铺

repeat-y：背景在纵向上平铺

背景图片位置

background-position: x y；

注：x坐标和y坐标。可以使用方位名词或者精确单位。

参数值	说明
length	百分数 \| 由浮点数字和单位标识符组成的长度值
position	top \| center \| bottom \| left \| right 方位名词

参数值为方位名词

1.如果指定的两个值都是方位名词，则两个值前后顺序无关，则效果一致。例如center top和 top center。

2.如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。

参数值为精确单位

1.若指定的两个值都是精确单位，则第一个值是X坐标，第二个值是Y坐标。

2.若只指定一个数值，则第二个值默认垂直居中。

参数值为混合单位（混合使用方位名词和精确单位）

1.若指定的两个值是精确单位和方位名词，则第一个值是X坐标，第二个值是Y坐标。

背景图像固定（背景附着）

background-attachment : scroll | fixed

参数	作用
scroll	背景图像是随对象内容滚动
fixed	背景图像固定

背景复合写法

为了简化背景属性的代码,可将这些属性合并简写在同一属性background中，从而节约代码量。

一般习惯顺序（无固定书写顺序）↓↓↓↓

background：背景颜色背景图片地址背景平铺背景图像滚动背景图片位置

背景色半透明

background：rgba(0,0,0,0.3) 注：（1）3可以写成.3 ；（2）括号后面必须4个值

r:红

g:绿

b:蓝

a(alpha):透明度，取值范围在0~1之间，0表示完全透明。

注：透明是针对盒子的背景色，而盒子里面的文字等并不受影响。

CSS三大特性

层叠性

效果：相同选择器给设置相同的样式，此时一个样式会覆盖（层叠）另一个冲突的样式。

作用：用于解决样式冲突的问题。

原则：“就近原则”，哪个样式离结构近就执行哪个样式。

继承性

子标签会继承父标签的某些样式。（text-、font-、line-这些元素开头的可以继承，以及color属性）

作用：降低CSS样式的复杂性。

行高的继承性

body {
    font:12px/1.5 Microsoft YaHei;
}

注：1.行高的单位可有可无

2.若子元素没有设置行高，则会继承父元素的行高（1.5）

3.按照上图代码，此时子元素的行高为当前子元素的文字大小*1.5

优先级

1.当同一元素指定多个选择器，就会有优先级的产生。

当选择器相同时，执行层叠性；
当选择器不同时，根据选择器权重执行；

选择器权重表：

选择器	权重
继承或*	0，0，0，0
元素选择器	0，0，0，1
类选择器、伪类选择器	0，0，1，0
id选择器	0，1，0，0
行内样式 style=" "	1，0，0，0
!important 重要的	∞无穷大

注：1.权重由4组数字组成，不会有进位；

2.继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重为0；

2.权重叠加

如果是复合选择器，则会有权重叠加，需要计算权重。

盒子模型 136

边框（border）

border-width 边框粗细，单位：px

border-style 边框样式

border-color 边框颜色

border-collapse:collapse; //将相邻边框合并在一起

border-top/right/buttom/left

边框复合写法（没有顺序）例 border:8px soild pink;

内边距（padding）

边框与内容之间的距离 padding-top/bottom/left/right

注：1.padding会影响盒子原本的大小。若正方形盒子原本200px，padding设置为10px，则盒子会变成220px；

2.若盒子本身没有指定width/height属性，则padding不会撑开盒子大小；

外边距（margin）

盒子与盒子之间的距离 margin-top/bottom/left/right

外边距应用

外边距的合并

清除内外边距 154

网页元素很多自带默认的内外边距，而不同浏览器默认的也不一致。因此，在布局前，首先要清除下网页元素的内外边距。

* {
    margin:0;
    padding:0;
 }

注：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以。

圆角边框（重点）

盒子阴影

注：不可以写outset，这个值是默认的。

文字阴影

CSS浮动（float）

标准流（普通流/文档流）

网络布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

什么是浮动？

浮动特效（重难点）

注：浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。（因为浮动之后会脱标）

清除浮动

为什么要清除浮动？

清除浮动的本质

实质：清除浮动元素造成得影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

清除浮动的方法

额外标签法（隔墙法）

这种方法是W3C推荐的做法。

父级添加overflow属性

overflow : hidden/auto/scroll

父级添加after伪元素

//这两段代码是固定写法
.clearfix:after {
    content: '';
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
}
//IE6、7专有
.clearfix {
    *zoom: 1;
}

优点：没有增加额外标签，结构更简单

缺点：照顾低版本浏览器

代表网站：百度、淘宝、网易等

父级添加双伪元素

.clearfix:before,.clearfix:after {
    content: '';
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

注：代表网站、腾讯、小米

CSS属性书写顺序（重点）

页面布局整体思路

定位

定位可以让盒子自由的在某个盒子内移动位置或固定屏幕中某个位置，并且可以压住其他盒子。

定位的组成

定位=定位模式+边偏移

定位模式

定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个：

静态定位

相对定位（重要）

绝对定位（重要）

绝对定位的盒子居中

固定定位（重要）

固定定位的小技巧：固定在版心右侧位置
第一步，让固定定位的盒子 left：50%，走到浏览器可视区（版心）的一半位置。
第二步，让固定定位的盒子 margin-left:版心宽度的一半距离。多走版心宽度的一半位置。

粘性定位（了解）

子绝父相（口决）

边偏移

定位的叠放次序 z-index

定位拓展

1.行内元素添加绝对定位或者固定定位，可以直接设置高度和宽度；
2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小；
3.脱标的盒子不会触发外边距塌陷：浮动元素、绝对定位（固定定位）元素的都不会触发外边距合并的问题；
4.绝对定位（固定定位）会完全压住盒子；浮动元素只会压住它下面标准流的盒子，但不会压住下面标准流盒子里面的文字（图片）；

元素的显示与隐藏

display （重要）

visibility

overflow

CSS高级技巧

精灵图（sprites）的使用

字体图标（iconfont）

使用场景

优点

下载网站

字体图标的引入

字体文件格式

字体图标引入

在CSS样式中全局声明字体：将字体文件通过CSS引入到我们页面中。
找到icommon文件中的style.css文件，将style.css中的前面一部分代码复制到html代码中的style标签内。

字体图标追加

CSS 三角

<style>
    div {
        width: 0;
        height: 0;
        line-height: 0;
        font-size: 0;
        border: 50px solid transparent;
        border-top-color: aqua;
        border-right-color: blue;
        border-bottom-color: brown;
        border-left-color: blueviolet;
    }
</style>

效果：

三角应用

CSS用户界面样式

鼠标样式 cursor

轮廓线--outline

input {
    outline : 0; //或者outline : none;
}

可以去掉表单框默认的蓝色边框；

防止拖拽文本域--resize

textarea {
    resize : none;
}

vertical-align属性

应用

问题：图片底侧有空白缝隙；

原因：行内块元素会和文字的基线对齐，导致出现空白缝隙；

解决：1.给图片添加vertical-align：middle | top | bottom等；

2.给图片转换为块级元素 display：block；

溢出的文字用省略号显示

单行文字溢出显示省略号

三步走：

多行文字溢出显示省略号

常见布局技巧

margin负值的运用

1.让每个盒子margin往左侧移动 -1px ，正好压住相邻盒子边框；

2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位（可保留原位置）；如果有定位，则加z-index）

文字围绕浮动元素

270

行内块的巧妙运用

CSS初始化

weixin_45398401

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
CSS--层叠样式表

注：浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。（因为浮动之后会脱标）
复制链接

扫一扫

专栏目录

CSS--层叠样式表

简介

语法规范

代码风格

选择器

基础选择器

标签选择器（元素选择器）

类选择器（.）

id选择器（#）

通配符选择器（*）

复合选择器

后代选择器（又称包含选择器，重要）

子选择器（重要）

并集选择器

伪类选择器

链接伪类选择器

：focus 伪类选择器

字体属性

基本属性

复合属性

文本属性

文本颜色

对齐方式

装饰文本

文本缩进

行间距

引入方式

内部样式表（嵌入式）

行内样式表（行内式）

外部样式表（链接式）

emmet语法

元素显示模式

块元素

行内元素

行内块元素

显示模式的转换（常用）

单行文字垂直居中

CSS的背景

背景颜色

背景图片

背景平铺

背景图片位置

背景图像固定（背景附着）

背景复合写法

背景色半透明

CSS三大特性

层叠性

继承性

行高的继承性

优先级

盒子模型 136

边框（border）

内边距 （padding）

外边距（margin）

外边距应用

外边距的合并

清除内外边距 154

圆角边框（重点）

盒子阴影

文字阴影

CSS浮动（float）

标准流（普通流/文档流）

什么是浮动？

浮动特效（重难点）

清除浮动

为什么要清除浮动？

清除浮动的本质

清除浮动的方法

额外标签法（隔墙法）

父级添加overflow属性

父级添加after伪元素

父级添加双伪元素

CSS属性书写顺序（重点）

页面布局整体思路

定位

定位的组成

定位模式

静态定位

相对定位（重要）

绝对定位（重要）

内边距（padding）

粘性定位（了解）