CSS部分内容知识总结_css知识总结-CSDN博客

本文链接：https://blog.csdn.net/m0_63338686/article/details/121184162

CSS:一个简单的文档改变所有页面的布局和外观

1.css简介

主要规则：以选择器和一个或多个声明组成
每条声明由一个属性和一个值组成（每个属性有值。属性和值被冒号分开）
CSS声明总是以分号(;)结束，声明总以大括号({})括起来
CSS注释以 /* 开始, 以 */ 结束

2.css选择器`
（1）id选择器：

以"#"来定义

#para1
{
	text-align:center;
	color:red;
} 
<p id="para1">Hello World!</p>`在这里插入代码片

不要以数字开头

(2)class选择器：

以一个"."点号来显示
可在多个元素中使用

3.文本（text）

text-decoration 属性用来设置或删除文本的装饰。(主要用来删除链接的下划线)

{text-decoration:none;}

text-transform文本转换（指定一个文本中大写或小写字母）
text-indent 指定文本第一行缩进
text-align 文本对齐
line-height 设置行高

4.css链接（可以用css任何属性如：颜色，字体等）

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

（当设置为若干链路状态的样式，也有一些顺序规则：
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面）
5.css列表

无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
有序列表 ol - 列表项的标记有数字或字母
list-style-type-用于移除小标记

ul.demo {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

6.表格
（1）border属性设置边框（双边框）

table,th,td
{
	border:1px solid black;
}

（2）border-collapse属性（单边框）

table {
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid black;
}

（3）padding 表格填充（单元格与内容之间空白）
7.盒子模型

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像

在这里插入图片描述
（1）当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。
（2）

8.border边框
（1）border-style属性用来定义边框的样式
border-style的部分值如下：

dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。两个边框的宽度和 border-width 的值相同
none：默认无边框

（2）边框可以单独设置单边：top right bottom left

9.轮廓（outline）：位于边框周围的外围
（可规定样式，颜色，宽度）
在这里插入图片描述
（3）注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。
10.css分组和嵌套
（1）分组选择器：相同样式的元素设置样式时可用逗号隔开（下面h1,h2,p 中的元素均为green）

h1,h2,p
{
	color:green;
}

（2）嵌套选择器：可能适用于选择器内部的选择器的样式

p{ }: 为所有 p 元素指定一个样式
.marked{ }: 为所有 class=“marked” 的元素指定一个样式
.marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式
p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式

11.display(显示)：块和内联元素

display:none 隐藏元素，不占用空间
visibility:hidden 隐藏元素，占用空间
inline 和相邻的内联元素在同一行
inline-block 等高对齐
display-block：两个元素之间的换行符

span
{
	display:block;
}
<span>display 属性值为 "block" 的结果</span> <span>这两个元素之间的换行符。</span>

即：display 属性值为 “block” 的结果
这两个元素之间的换行符。
12.Position(定位)

static: 无特殊定位，遵循正常的文档流对象
fixed: 相对浏览器的位置是固定的，即使窗口移动它也不滚动
relative: 定位是相对其正常位置定位的
absolute: 相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:
sticky(粘性定位):，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
z-index（堆叠那个元素在前，那个元素在后）：
若：z-index:-1; 则在后

img
{
	position:absolute;
	left:0px;
	top:0px;
	z-index:-1;
}
<img src="w3css.gif" width="100" height="140" />
<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>

在这里插入图片描述
left:-20px 即从左侧最开始减去20px
left:20px 即从左侧最开始加上20px

13.css Overflow:用于控制内容溢出元素框时显示的方式。
在这里插入图片描述

overflow:添加滚动条
overflow: visible：内容溢出元素框

div {
    background-color: #eee;
    width: 200px;
    height: 50px;
    border: 1px dotted black;
    overflow: visible;
}

即：
在这里插入图片描述
14.Floathe（浮动）:元素只能左右移动

float属性：几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻 (float:left)
clear属性：元素浮动之后，周围的元素会重新排列，而clear 属性则指定元素两侧不能出现浮动元素。

（1）段落第一个字母大写：

span
{
	float:left;
	width:1.2em;
	font-size:400%;
	font-family:algerian,courier;
	line-height:80%;
}
<span>这</span>是一些文本。

如下：在这里插入图片描述
（2）标题和图片向右浮动：

div
{
	float:right;
	width:120px;
	margin:0 0 15px 20px;
	padding:15px;
	border:1px solid black;
	text-align:center;
}
<div>
<img src="logocss.gif" width="95" height="84" /><br>
CSS is fun!
</div>

如下：

加粗样式
15.css布局水平&垂直对齐：

仅仅为了文本在元素内居中对齐：text-align:center
水平居中块级元素 (如 div):margin-auto
左右对齐，使用position定位：

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}
<div class="right">
  <p>菜鸟教程 -- 学的不仅是技术，更是梦想！！</p>
</div>

如下：在这里插入图片描述

图片居中对齐可用:margin-auto

img {
    display: block;
    margin: 0 auto;
}

在这里插入图片描述

右对齐用 float方式：float:left(若子元素高度大于父元素，且子元素设置了浮动，那么子元素将溢出，可通过使用"clearfix"清除浮动来解决或者父元素上添加overflow:auto)
垂直居中对齐用:padding.center { padding: 70px 0; border: 3px solid green; }
水平垂直都对齐：padding和text-align:center

.center {
    padding: 70px 0;
    border: 3px solid green;
    text-align: center;
}

垂直居中：line-height
垂直居中还可以：padding和transform

16.组合选择符

后代选择器(以空格分隔)
子元素选择器(以大于 > 号分隔）
相邻兄弟选择器（以加号 + 分隔）
普通兄弟选择器（以波浪号～分隔）

17.伪类

p:first-child:匹配第一个p元素
p>i:first-child:所有p元素中的第一个i元素
p:first-child i:匹配所有作为第一个子元素中的所有的i元素

伪元素

p:first-line{}:对p元素的第一行文本进行格式化
first-letter:向文本首字母设置样式
:before:可以在元素的内容前面插入内容
:after:可以在元素的内容后面插入新内容
:focus选择器:一个输入字段获得焦点时选择的样式

18.导航栏

激活/当前导航条

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}


<h2>垂直导航条</h2>
<p>在点击了选项后，我们可以添加 "active" 类来标准哪个选项被选中。</p>

<ul>
  <li><a class="active" href="#home">主页</a></li>

如下在这里插入图片描述

添加分割线

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
li:last-child {
    border-right: none;
}