CSS知识总结

最新推荐文章于 2024-05-27 00:00:00 发布

Fighter_AI

最新推荐文章于 2024-05-27 00:00:00 发布

阅读量437

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/fighter_ai/article/details/114782289

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS概述

CSS（英文全称：Cascading Style Sheets）层叠样式表, 是⼀种用来表现HTML（标准通用标记语言的⼀个应用）或XML（标准通用标记语言的⼀个子集）等文件样式的计算机语言。
CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的⼀种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。
CSS是用来美化网页的，没有网页则CSS毫无用处，所以CSS需要依赖HTML展示其功能。通俗一点讲，CSS就像油漆，而HTML是房子，若没有房子，油漆拿来也没有用处。

CSS的基本使用

CSS的基本语法

一条CSS样式规则由两个主要的部分构成：选择器，以{ }包裹的一条或多条声明:

这条规则表明，页面中所有的一级标题都显示为蓝色，字体大小为12像数。
说明：

选择器是您需要改变样式的对象（上图的规则就一级标题生效）。
每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用{ }包裹，且声明用;分割）
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
即：选择器名 { 属性 : 属性值; ...... }

注释

同c/c++的多行注释相同，css的注释方法为：/* 注释内容 */

CSS的使用

CSS有三种使用方式，分别有以下：

行内样式
直接写在标签上的样式，在标签上通过style属性定义的样式
内部样式
定义在style标签中的样式，style标签一般设置在head标签中
外部样式
定义在外部的css文件中，通过link标签引入
<link rel="stylesheet" type="text/css" href="css文件的路径" />
【注：当有多重样式时，遵循就近原则，当样式较多时，推荐使用外部样式引入的方法，不仅可以使整个的代码层次更清晰，而且样式的复用性大大提高】

CSS选择器（较全）

CSS基本选择器

           1. 通用选择器 *
				* {
					属性名:属性值;
					...
				}
			2. 元素选择器
				元素名/标签名 {
					属性名:属性值;
					...
				}
			3. ID选择器 #
				#id属性值 {
					属性名:属性值;
					...
				}
			4. 类选择器 .
				.class属性值 {
					属性名:属性值;
					...
				}
			5. 分组选择器
				选择器1,选择器2,x选择器3... {
					属性名:属性值;
					...
				}

CSS组合选择器

             1. 后代选择器（选择指定元素的所有指定后代元素，以空格隔开）
				 选择器 指定元素 {
					属性名:属性值;
					...
				}
		     2. 子代选择器（选择指定元素的第一代子元素，以大于号>隔开)
				选择器 > 指定元素 {
						属性名:属性值;
						...
					}
			3. 相邻兄弟选择器(选择指定元素的下一个指定元素（只会找一个），两者有相同的父元素，以加号+隔开)
					选择器 + 指定元素 {
						属性名:属性值;
						...
					}
			4. 普通兄弟选择器(选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号~隔开)
					选择器 ~ 指定元素 {
						属性名:属性值;
						...
					}

CSS常用属性

颜色

颜色在css样式甚至整个网页文件里面都占据着至关重要的地位，通常我们在使用颜色时，一个是直接使用表达某种颜色的英文单词，还有一种时使用颜色代码，一般是RGB格式的。这里以设置背景颜色为例：body { background-color:#ff0000; }

对齐方式

对齐方式有很多种，最常用的有向左对齐（left），向右对齐（right），居中对齐（center），两端对齐（ justify）（这个在文本对齐用得比较多）等，我们在使用这样的对齐方式时，只需要和使用其他CSS属性一样即可。

尺寸

我们可以用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %等。比如：
建立一个html文件为：

<html>
  <head>
    <link rel="stylesheet" href="./mycss.css">
  </head>
  <body>
    <div class="example-1">
      这个元素高 200 pixels，占据全部宽度
    </div>
    <div class="example-2">
      这个元素宽200像素,高300像素
    </div>
  </body>
</html>

再建对应的 CSS 文件如下：

.example-1 {
  width: 100%;
  height: 200px;
  background-color: powderblue;
  text-align: center;
}
.example-2 {
  height: 100px;
  width: 500px;
  background-color: rgb(73, 138, 60);
  text-align: right;
}

字体

字体有很多的属性，比如： font-family：该属性设置文本的字体； font-size：设置字体大小；font-style：设置字体风格，主要有：normal，italic，oblique等等；font-weight：该属性设置⽂本的粗细。还有很多关于字体的属性，由于篇幅有限，就不一一列举了。

浮动

在一个区域或容器内，我们可以设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。float 的属性值有none、left、right。

只有横向浮动，没有纵向浮动。
会将元素的display属性变更为block。
浮动元素的后⼀个元素会围绕着浮动元素（典型运⽤是⽂字围绕图⽚）
浮动元素的前⼀个元素不会受到任何影响（如果需要两个块状元素并排显示，必须让两个块状元素都应⽤
float）。
如果希望浮动元素后面的元素在其下方显示，可使用clear: both样式来进行清除。
举例说明：

<html>
<head>
  <style>
    .example-float-right {
      float: right;
    }
  </style>
</head>
<body>
  <img src="https://mdbootstrap.com/img/Photos/Others/placeholder1.jpg" class="example-float-right" alt="">
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem, architecto officiis, repellendus
  corporis obcaecati, et commodi quam vitae vel laudantium omnis incidunt repellat qui eveniet fugiat totam
  modi nam vero!</p>
</body>
</html>

盒子模型

由内容content，内边距padding，边框border，外边距margin构成盒子模型，盒子模型在实际使用过程中是比较多的，通常我们在浏览器里面鼠标右击“检查”，然后找到Elements选项卡，右边的styles部分，往下滑动到底即可看到盒子模型。
盒子模型的每一个部分都能够在实际的美化过程中起到至关重要的作用。
举例说明：
新建一个HTML文件如下：

<html>
  <head>
    <link rel="stylesheet" href="./mycss.css">
  </head>
  <body>
    <div class="box1">我是内容一，外面红色的是我的边框。注意边框的内外都有25px的距离。</div>
    <div class="box2">我是内容二，外面蓝色的是我的边框。注意与上面元素的外边距，发生了叠加，不是50px而是25px。</div>
  </body>
</html>

再建立对应的css文件以美化样式：

.box1 {
  height: 200px;
  width: 200px;
  background-color:#615200;
  color: aliceblue;
  border: 10px solid red;
  padding: 25px;
  margin: 25px;
}
.box2 {
  height: 300px;
  width: 300px;
  background-color:#004d61;
  color: aliceblue;
  border: 10px solid blue;
  padding: 25px;
  margin: 25px;
}

定位

position属性能用于队元素进行定位。该属性有以下值：static 静态，relative 相对，fixed 固定，absolute 绝对。设置了元素的position属性后，我们才能使用top, bottom, left, right属性，否则定位无效。

static
设置为静态定位position: static;，这是元素的默认定位方式，也即你设置与否，元素都将按正常的页面布局进行。
relative
设置为相对定位position: relative;，这将把元素相对于他的静态（正常）位置进行偏移.
fixed
设置为固定定位position: fixed;，这将使得元素固定不动（即使你上下左右拖动浏览器的滚动条）。此时元素固定的位置仍由top, bottom, left, right属性确定，但相对的是视口（viewport，就是浏览器的屏幕可见区域）。
absolute
设置为绝对定位position: absolute;，将使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。如果该元素的所有父元素都没有设置定位属性，那么就相对于<body>这个父元素。值得注意的是，绝对定位并不像字面上意思那样绝对，仍是相对的，不过是相对最近的父元素。

溢出

当元素内容超过其指定的区域时，我们通过溢出overflow属性来处理这些溢出的部分。
溢出属性有一下几个值：

visible 默认值，溢出部分不被裁剪，在区域外面显示
hidden 裁剪溢出部分且不可见
scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
auto 裁剪溢出部分，视情况提供滚动条

边框与边距

边框border，边距有padding，margin。其设置样式的方式都是大同小异的，比如，设置边框有如下代码：

.元素的class值 {
  border: 1px solid grey;
  border-radius: 15px; /* 边框圆角 */
}

设置边距也是同理，这里以设置内边距为例：

padding: 20px; /* 上下左右都相同 */
padding-top: 20px;
padding-bottom: 100px;
padding-right: 50px;
padding-left: 80px;
padding: 25px 50px 75px 100px; /* 简写形式，按上，右，下，左顺序设置 */
padding: 25px 10px; /* 简写形式，上下为25px，左右为10px */

注意：以上代码在设置padding的值时遵循上，右，下，左方向，或为顺时针方向。

伪类和伪元素

伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。在实际的开发过程中，伪类和伪元素的使用在样式的美化上使用颇多，最常见的就是当鼠标移到网页上的某个按钮时，按钮的背景颜色会发生变化……
下面列举出一些常用的伪类/伪元素的简单使用：

a:link {color:#FF0000;}     /* 未访问的链接 */
a:visited {color:#00FF00;}  /* 已访问的链接 */
a:hover {color:#FF00FF;}    /* 鼠标划过链接 */
/* 鼠标移到段落则改变背景颜色 */
p:hover {background-color: rgb(226, 43, 144);}
p:first-line{color:blue;}   /* 段落的第一行显示蓝色 */
p:first-letter{font-size: xx-large;}   /* 段落的第一个字超大 */

h1:before { content:url(smiley.gif); } /* 在每个一级标题前插入该图片 */
h1:after { content:url(smiley.gif); } /* 在每个一级标题后插入该图片 */