css复习

最新推荐文章于 2022-05-17 18:12:43 发布

yezi_ttkeai

最新推荐文章于 2022-05-17 18:12:43 发布

阅读量227

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/yezi_ttkeai/article/details/120503257

版权

本文详细讲解了CSS的作用，从行内式、内嵌式到外链式样式表的区别，以及选择器的使用，包括标签选择器、类选择器、ID选择器和伪类选择器。还涵盖了字体、颜色、背景和布局的基本设置，以及块级元素、行内元素和行内块元素的特性。

摘要由CSDN通过智能技术生成

概念：

CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表）

- 作用：

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

- CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

引入CSS样式表（书写位置）

行内式（内联样式）

- 概念：

称行内样式、行间样式.

是通过标签的style属性来设置元素的样式

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

实际上任何HTML标签都拥有style属性，用来设置行内式

注意：

- style其实就是标签的属性

- 样式属性和值中间是`:`

- 多组属性值之间用`;`隔开。

- 只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余

- 缺点：没有实现样式和结构的分离

内部样式表（内嵌样式表）

- 概念：

称内嵌式

是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义

- 其基本语法格式如下：


<head>
<style type="text/CSS">
    选择器（选择的标签） { 
      属性1: 属性值1;
      属性2: 属性值2; 
      属性3: 属性值3;
    }
</style>
</head>

注意：

- style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。

- type="text/css" 在html5中可以省略。

- 只能控制当前的页面

- 缺点：

没有彻底分离

外部样式表（外链式）

- 概念：

称链入式

是将所有的样式放在一个或多个以**.CSS**为扩展名的外部样式表文件中，

通过link标签将外部样式表文件链接到HTML文档中

- 其基本语法格式如下：

head>
  <link rel="stylesheet" type="text/css" href="css文件路径">
</head>

注意：

- link 是个单标签

- link标签需要放在head头部标签中，并且指定link标签的三个属性

| 属性 | 作用 |:

| rel | 定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。 |

| type | 定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。我们都可以省略 |

| href | 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。 |

css的基础选择器：

标签选择器：

- 概念：

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

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

作用：

标签选择器可以把某一类标签**全部**选择出来比如所有的div标签和所有的 span标签

- 优点：是能快速为页面中同类型的标签统一样式

- 缺点：不能设计差异化样式。

类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名.

- 语法：类名选择器

.类名  {   
      属性1:属性值1; 
      属性2:属性值2; 
      属性3:属性值3;     
  }

优点：可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签

注意：

- 类选择器使用“.”（英文点号）进行标识，后面紧跟类名(自定义，我们自己命名的)

- 长名称或词组可以使用中横线来为选择器命名。

- 不要纯数字、中文等命名，尽量使用英文字母来表示。

Id选择器

id选择器使用`#`进行标识，后面紧跟id名

- 其基本语法格式如下：id选择器

#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

通配符选择器

- 概念

通配符选择器用`*`号表示， * 就是选择所有的标签他是所有选择器中作用范围最广的，能匹配页面中所有的元素。

- 其基本语法格式如下：

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
//常用例子
* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}
//注意：会匹配页面所有的元素，降低页面响应速度，不建议随便使用

css文字文本样式：

font总结：

| 属性 | 表示 | 注意点 |

| font-size | 字号 |我们通常用的单位是px 像素，一定要跟上单位|

| font-family | 字体 |实际工作中按照团队约定来写字体|

| font-weight | 字体粗细 |记住加粗是 700 或者 bold 不加粗是 normal 或者 400 记住数字不要跟单位|

| font-style | 字体样式 |记住倾斜是 italic 不倾斜是 normal 工作中我们最常用 normal|

| font | 字体连写 |1. 字体连写是有顺序的不能随意换位置 2. 其中字号和字体必须同时出现|

font:综合设置字体样式 (重点)

font属性用于对字体样式进行综合设置

- 基本语法格式如下：

css

选择器 { font: font-style font-weight font-size/line-height font-family;}

- 注意：

- 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以**空格**隔开。

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

css外观总结：

| 属性 | 表示 | 注意点 |

| :---------------------------- | :------------- | :------------- |

| color | 颜色 |我们通常用十六进制比如而且是简写形式 #fff|

| line-height | 行高 |控制行与行之间的距离|

| text-align | 水平对齐 |可以设定文字水平的对齐方式|

| text-indent | 首行缩进 |通常我们用于段落首行缩进2个字的距离 text-indent: 2em;|

| text-decoration | 文本修饰 |记住添加下划线 underline 取消下划线 none|

css复合选择器

概念：

后代选择器又称为包含选择器

- 作用：用来选择元素或元素组的**子孙后代**

父级 子级{属性:属性值;属性:属性值;}
.class h3{color:red;font-size:16px;}

子元素选择器：

- 作用：子元素选择器只能选择作为某元素**子元素(亲儿子)**的元素。

其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 `>` 进行连接

语法：


.demo > h3 {color: red;}

交集选择器：

- 条件

交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。

并集选择器（重点）-应用：

- 如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。

- 并集选择器（CSS选择器分组）是各个选择器通过`,`连接而成的，通常用于集体声明。

- 语法：

并集选择器通常用于集体声明，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为和的意思。

比如 .one, p , #test {color: #F00;}

表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。

伪类选择器：

类选择器是一个点比如 .demo {}

通常用于集体声明

-a:link /* 未访问的链接 */

- a:visited /* 已访问的链接 */

- a:hover /* 鼠标移动到链接上 */

- a:active /* 选定的链接 */

写的时候，他们的顺序尽量不要颠倒按照 lvha 的顺序。否则可能引起错误。

标签的显示模式：

标签以什么方式进行显示，比如div 自己占一行，比如span 一行可以放很多个

- 作用：

我们网页的标签非常多，再不同地方会用到不同类型的标签，以便更好的完成我们的网页。

- 标签的类型(分类)

HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。

块级元素(block-level)：

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

块级元素的特点：

（1）比较霸道，自己独占一行

（2）高度，宽度、外边距以及内边距都可以控制。

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

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

注意：

- 只有文字才能组成段落因此 p 里面不能放块级元素，特别是 p 不能放div

- 同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。

行内元素(inline-level)：

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。有的地方也成内联元素

行内元素的特点：

（1）相邻行内元素在一行上，一行可以显示多个。

（2）高、宽直接设置是无效的。

（3）默认宽度就是它本身内容的宽度。

行内块元素（inline-block）：

在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

行内块元素的特点：

（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个

（2）默认宽度就是它本身内容的宽度。

（3）高度，行高、外边距以及内边距都可以控制。

三种模式总结区别：

| ---------- | ---------------------- | ---------------------- | ---------------- | ------------------------ |

| 行内块元素 | 一行放多个行内块元素 | 可以设置宽度和高度 | 它本身内容的宽度

标签显示模式转换 display

- 块转行内：display:inline;

- 行内转块：display:block;

- 块、行内元素转换为行内块： display: inline-block;

行高（line-height）和高度的理解：使用行高实现单行文字垂直居中

行高 = 上距离 + 内容高度 + 下距离

行高和高度的三种关系：

- 如果行高等高度文字会垂直居中

- 如果行高大于高度文字会偏下

- 如果行高小于高度文字会偏上

CSS 背景(background)：

背景颜色(color)

- 语法：

background-color:颜色值;   默认的值是 transparent  透明的

背景图片(image)：

语法：

background-image : none | url (url)

| 参数 | 作用 |

| none | 无背景图（默认的） |

| url | 使用绝对或相对地址指定背景图像 |

背景平铺（repeat）：

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

| 参数 | 作用 |

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

| no-repeat | 背景图像不平铺 |

| repeat-x | 背景图像在横向上平铺 |

| repeat-y | 背景图像在纵向平铺 |

背景位置(position) 重点：

background-position : length || length

background-position : position || position

| 参数 | 值 |

| -------- | :----------------------------------------------------------: |

| length | 百分数 \| 由浮点数字和单位标识符组成的长度值 |

- 注意：

- 必须先指定background-image属性

- position 后面是x坐标和y坐标。可以使用方位名词或者精确单位。

- 如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致

- 如果只指定了一个方位名词，另一个值默认居中对齐。

- 如果position 后面是精确坐标，那么第一个，肯定是 x 第二的一定是y

- 如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中

- 如果指定的两个值是精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标

背景附着：景附着就是解释背景是滚动的还是固定的

background-attachment : scroll | fixed

| 参数 | 作用｜

| scroll | 背景图像是随对象内容滚动 |

| fixed | 背景图像固定 |

背景简写：

- background：属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：

- background: 背景颜色背景图片地址背景平铺背景滚动背景位置;

background: transparent url(image.jpg) repeat-y  scroll center top ;

背景透明(CSS3)：

background: rgba(0, 0, 0, 0.3);

- 最后一个参数是alpha 透明度取值范围 0~1之间

- 我们习惯把0.3 的 0 省略掉这样写 background: rgba(0, 0, 0, .3);

- 注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响

- 因为是CSS3 ，所以低于 ie9 的版本是不支持的。

CSS 三大特性：

CSS层叠性：所谓层叠性是指多种CSS样式的叠加是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。

原则：

- 样式冲突，遵循的原则是**就近原则。*那个样式离着结构近，就执行那个样式。

- 样式不冲突，不会层叠。

CSS继承性：子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可

CSS优先级（重点）：定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，

* 选择器相同，则执行层叠性

* 选择器不同，就会出现优先级的问题。

权重计算公式（这部分是重点，要学会理解）

关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）

| 标签选择器 | 计算权重公式 |

| ---------------------- | ------------ |

| 继承或者 * | 0,0,0,0 |

| 每个元素（标签选择器） | 0,0,0,1 |

| 每个类，伪类 | 0,0,1,0 |

| 每个ID | 0,1,0,0 |

| 每个行内样式 style="" | 1,0,0,0 |

| 每个!important 重要的 | ∞ 无穷大 |

- 值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

- 关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）

- div {

color: pink!important;

}

权重叠加

我们经常用交集选择器，后代选择器等，是有多个基础选择器组合而成，那么此时，就会出现权重叠加。

就是一个简单的加法计算

- div ul li ------> 0,0,0,3

- .nav ul li ------> 0,0,1,2

- a:hover -----—> 0,0,1,1

- .nav a ------> 0,0,1,1

yezi_ttkeai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css复习

概念： CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表）- 作用：- 主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及**版面的布局和外观显示样式。- CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。引入CSS样式表（书写位置）行内式（内联样式）- 概念：称行内样式、行间样式. .
复制链接

扫一扫