CSS能完成的样式学习

CSS文本属性

在这里插入图片描述

CSS字体属性

在这里插入图片描述

CSS链接属性

link visited hover active 分别是刚开始链接的格式已经访问连接鼠标移动到连接上和鼠标点击时候的格式
L(link)OV(visited)E and H(hover)A(active)TE

CSS列表属性

在这里插入图片描述
列表属性就是设置罗列小点的点，点的大小位置或用图片作为小点的标志

CSS表格属性

HTML标签使用：table为头，然后里面文字的元素都是以tr为标签之间，表头是th，表格元素是td。

<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>

表格边框

设置表格的边框为1px和黑色

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

折叠边框

设置边框为单一的边框，（默认的表格边框是双层的，不太懂为啥）

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

表格宽度和高度就不说了，说下对齐方式

td
{
    text-align:right;//行文方向
    height:50px;
    vertical-align:bottom;//表格中元素的对齐属性
}

表格颜色

CSS盒子模型

首先，我们得知道：所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。所以设置一个元素占的大小，要把每一层都设置到。
在这里插入图片描述

边框属性

border-style设置边框的样式，颜色和宽度很好理解

从上面的盒子属性我们知道：HTML里面的元素都是一个盒子，所以我们需要对这个盒子的边框设置。下面的代码对于段落元素进行设置，对于边框各边设置，对于宽度还有背景颜色设置。

p{
				border-width: thick;
				border-bottom-style: none;
				border-left-style: inset;
				border-left-color: #000000;
				border-right-style: none;
				border-top-style: none;
				background-color: aliceblue;
			}

简写模式：可以在border：xxx xxx xxx设置。

Outline属性和边框类似，只是在盒子模型里面处于最外面

Margin属性定义元素周围的空间，即是元素与元素之间的距离

在这里插入图片描述

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

Pading属性指的是元素内容的填充设置

下面的代码设置上下填充有25px，左右填充有50

 padding:25px 50px;

分组和嵌套选择器

分组选择器

当样式表中具有相同样式的元素，可以将这些元素综合在一起。例如：

h1,h2,p
{
    color:green;
}

嵌套选择器

在下面的例子设置了三个样式：

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

CSS Display显示属性

Display和Visibility属性

隐藏元素：

display：none；//隐藏元素，元素不会占用空间
visibility：hidden；//隐藏元素，但是元素还会占用空间

块和内联元素

块元素（h1、p、div）是一个元素，占用了全部宽度，在前后都是换行符。内联元素（span、a）只需要必要的宽度，不强制换行。
如何将元素显示改变：

div{display：inline}//块级元素转换为内联
span{display：block}//内联元素转换为块级

CSS定位Positon

元素可以根据top，bottom，left，right来定位元素与网页各边的距离。但是这些属性必须先设定position属性。有五种这样的属性：

position：static；//静态定位。HTML元素的默认值，文档流；不会受top，bottom，left，right影响
position：fixed；//定位的元素与浏览器窗口为固定位置，即滑动浏览器，元素始终在窗口的相对位置；此定位的元素会与其他元素重合。
position：relative；//相对定位，相对其正常的位置；
posotion：absolute；//绝对定位，相对于最近的已定位父元素，如果没有已定位的父元素，则相对html。
position：sticky；//粘性定位，当定位的元素在窗口内，它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置（自己设置）。

重叠的元素

利用z-index属性指定元素的堆叠顺序。z-index可以设置正数和负数，根据z-index值的大小堆叠元素。
没有设置就按照定位的顺序来堆叠，后定位的在上面。

一些属性

overflow：溢出设置，属性值为auto自动处理，scroll下滑框处理。
在这里插入图片描述
cursor：光标设置，当鼠标移动到元素上，光标发生变化。

浮动属性

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。
我的理解就是：当浏览器窗口缩小之后，设置为浮动的元素会尽可能留在窗口里面，因此向着设置的方向浮动，把其他元素挤开。
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。如果图像是右浮动，下面的文本流将环绕在它左边
如果把几个浮动的元素放在一起，如果有空间，他们会彼此相邻。

CSS布局之对齐

元素在容器中居中对齐

利用下面代码设置元素的居中对齐，这里的对齐指的是整个元素，其中要设置元素的宽度，不然这个代码没用

margin：auto

文本居中对齐

text-align用来设置文本居中对齐

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

向左向右对齐，绝对定位法

直接设置元素框的位置。

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

元素框内设置垂直居中，padding法

padding设置框内除了内容之外的填充属性，回想一下元素的盒子属性。所以设置文本的上下填充相同就可以设置垂直居中了。

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

在上面的基础上加上文本的居中，就可以实现水平居中。

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

利用line-height实现垂直居中，使line-height和元素高度一样实现垂直居中
使用transform属性来设置垂直居中

.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

CSS组合选择符

后代选择器(以空格分隔): 下面的代码设置的是在div元素里面所有p元素的属性

div p
{
  background-color:yellow;
}

-子元素选择器(以大于号分隔）：下面的代码设置的只是作为div元素的子元素为p元素的属性，如果是div元素下面的孙元素为p，则不会对此p元素做设置。

div>p
{
  background-color:yellow;
}

相邻兄弟选择器（以加号分隔）：顾名思义此选择器设置的是前一个元素相邻的加号加的那个元素的属性。

div+p
{
  background-color:yellow;
}

后续兄弟选择器（以破折号分隔）：选择器选取所有指定元素之后的相邻兄弟元素。

CSS伪类

伪类被用来添加一些选择器的特殊效果