css知识总结

1.CSS定义和三种引用方式

CSS全称为“层叠样式表 (Cascading Style Sheets)”，作用是为html元素去定义样式能够实现内容与表现相分离，提高代码的可重用性和可维护性。使用CSS样式的可以通过定义某个样式，使网页不同位置的文字有着统一的字体、字号或者颜色等。一个完整的页面 = HTML + CSS，HTML显示页面内容，CSS构建HTML样式。

CSS引用方式有三种：行内样式、内部样式表、外部样式表

1）行内样式：使用style属性在HTML元素中引入CSS样式（只能控制某一个元素的显示效果)

例：< p style=”font-size：10px；color：red；”></ p>

2）内部样式表：将样式放在< style>标签中，< style>标签写在< head>标签中

例：

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8">
  <title>内部样式表</title>
  <style>
    div{
        color: red;
        width: 500px;
        background: yellow;
    }
  </style>
</head>
<body>
	<div>梨</div>
</body>
</html>

3）外部样式表： 将CSS代码保存在以.css结尾的css样式文件中，再进行引用

用法：在< head></ head>中写以下代码：< link rel=”stylesheet” type=”text/css” href=”链接的css文件地址” />（这是一种常用的方式）

例：

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8">
  <title>外部样式表</title>
  <link rel="stylesheet" href="1.css">
</head>
<body>
	<div>梨</div>
</body>
</html>

特点：实现内容与表现相分离；将可重用性和可维护性体现的最完美(所有的页面都能用)；可以在整个网站乃至于互联网中做通用的样式定义。

样式优先级：行内样式 > 内部样式表 > 外部样式表

内部样式表或外部样式表，级别处于中间位置；就近原则（谁靠下，以谁为主）。

2.CSS语法

基本语法：样式声明：属性：值；样式规则：选择器和样式声明

特征：1）继承性：大部分的CSS样式属性，是可以被继承的。继承：子级不用单独定义样式，可以直接使用父级的东西。2）层叠性：为一个元素定义多个样式的时候，样式不冲突时，多个样式表中的样式可以层叠(合并)为一个。3）优先级：样式冲突时，按照不同样式规则的优先级来应用样式。

rgb色彩模式：R 红色；G 绿色；B 蓝色例：color： rgb（255，0，0）或 rgb（100%，%0，%0）；颜色单位：#rrggbb；每一位取0~9，例：#0123456

3.CSS选择器

1）通用选择器作用：匹配页面中的任何一个元素语法：* {样式规则}

2）元素选择器作用:匹配页面中的指定的元素；语法：元素名称作为选择器，如： body、p等。

3）类选择器作用：定义公共的样式，由任意一个标签进行引用

语法：.className{ ：； } 例：.red_back{ } .red_back{ }

引用：在标签中，通过class属性对类选择器名称进行引用

注意：在一个元素中，可以同时对多个类选择器进行引用。多个类选择器之间用空格隔开。

4）类选择器-分类选择器

作用：将类选择器和元素选择器结合起来使用，从而实现对某种元素不同样式的细分控制

语法：元素选择器 .className { } 例：div.red_back{ }

5）id选择器

作用：通过元素的id值，来声明定义元素的相关样式属性语法：#idValue{ }

6）群组选择器

作用：选择器声明，是以 , 隔开的选择器列表

语法：selector1，selector2，selector3，selector4…{ } 例：div，p，.redback{color：red；}

7）后代、子代选择器

只存在一级的父子关系：可以称之为子代或者后代

多于一级的嵌套关系：只能称之为后代后代语法：selector1 selector2{ }

例：div span{ } / 匹配出所有div元素中的span元素 / #content .redBack{ }

子代作用：只能匹配出父子关系的子级元素

目的：不希望选择任意的后代元素，而是希望缩小范围，只选择某个具体的子元素时使用。

语法：selector1>selector2{ }

8）伪类选择器作用：匹配元素的不同状态语法：：作为开始的

分类：
链接伪类作用：只匹配超链接的状态
：link：适用于尚未访问的超链接：visited：适用于访问过后的超链接
动态伪类
：hover：适用于鼠标悬停在html元素上的状态
：active：适用于html元素被激活时
：focus：适用于html元素获取焦点时的状态

此外还有目标伪类、元素状态伪类、结构伪类、否定伪类。详细的伪类选择器可以参考链接：https://blog.csdn.net/Panda_m/article/details/50084699

4.CSS背景

1）背景颜色：background-color：red（或颜色单位）；

2）背景图片：例：background-image：url(“1.png”)；

3）背景平铺：background-repeat：值

取值：repeat ：即水平方向又垂直方向平铺(默认值)；no-repeat ：没有平铺；repeat-x ：仅水平方向平铺；repeat-y ：仅垂直方向平铺

4）背景固定：background-attachment：值

默认情况，背景图片会随着滚动条而发生滚动，可以通过背景图片固定的方式解决此问题，让背景图保持在网页的可视化窗口的某个固定为止处不随着滚动条发生位置变化。

注意：尽量将背景图片加给body元素

取值：scroll ：背景会随滚动条发生滚动（默认值）；fixed ：固定，背景不会随着内容而发生滚动。

5）背景定位：background-position：x值 y值；

取值：x y ：x水平偏移位置,值为正向右移动，值为负，向左移动
y垂直偏移位置，值为正向下移动，值为负，向上移动
x% y% ：左上角： 0% 0%；右下角：100% 100%；居中显示： 50% 50%
关键字：x ：left，center，right ； y ： top，center，bottom

6）背景属性：将以上几个属性全部综合到一起,通过一个属性描述所有的值

属性:background：值；取值：color url() repeat attachment position；例：backgroud：url（”1.png”） repeat-y；

5.CSS文本格式化

字体样式：例：font-family：”宋体”；字体大小：font-size：16px（默认）；

字体加粗：font-weight：bold；（相当于< b> </ b>）；字体样式：font-style：italic；（斜体）

字体属性：font：font-style font-variant font-weight font-size font-family；常用设置方式：font：12px “微软雅黑”；

文本颜色：color：red；

字符间距：letter-spacing： 0px（默认）；空格距离：word-spacing：0px（默认）；

文字线条修饰属性：text-decoration：值；取值：none 无线条、underline 下划线、overline 上划线、line-through 删除线

文本对齐：text-align：left（默认）、 right 、center、justify（两边对齐）；

文本缩进：text-indent 2px；行高：line-height 3px；

英文大小写：text-transform：uppercase（全大写）、lowercase（全小写）、capitalize（首字母大写）；

6.CSS链接和列表

1）链接

a：link 初始状态；a：visited 已访问过；a：hover 鼠标放在链接上时；a：active 链接被点击时

注意：a：hover 必须跟在 a：link 和 a：visited后面，a：active 必须跟在 a：hover后面

还可以添加状态例如：a：hover{ color：red； font-size：30px；}

2）列表

列表项标志：list-style-type：值；取值：none 无标记（常用）、disc 实心圆、circle 空心圆、square 实心方块……

列表项图像：list-style-image：值；取值：url(图像路径)；功能：使用自定义图像，作为列表项的显示标识

列表项位置：list-style-position：值；取值：outside：列表项标识位于文本之外（默认）； inside：列表项标识更改在文本范围之内

7.CSS盒子模型

外边框：border：5px solid（实线） black；

内边距：padding：20px（上下） 50px（左右）；padding：20px 30px 40px 50px；（顺时针，上右下左）

外边距：margin：30px；（与padding类似）

另外单边设置：margin-top：上外边距； margin-right：右外边距margin-bottom：下外边距； margin-left：左外边距

边框合并：border-collapse：值；取值：separate 分离边框（默认）、collapse 合并边框

更详细盒子模型，可以参考链接：https://www.cnblogs.com/clearsky/p/5696286.html

8.CSS布局与定位

可以参考链接：https://blog.csdn.net/weixin_38902950/article/details/84674199

9.总结

CSS中选择器、盒模型、布局与定位是最重要的几部分，想深入了解可以多找几篇文章看看，本人是初学者所以这几部分就没有详细写。

本文参考的链接：https://www.cnblogs.com/wangdongdong1234/p/6394510.html

参考视频：https://www.bilibili.com/video/av26764447/?p=16