HTML中的CSS属性

Posted 2020-07-29

CSS的作用是给html打扮所用；

CSS在HTML中显示的方式有三种；内联，内嵌和外嵌；

外嵌

<like rel="stylesheet" href="这里面写连接路径"/>

内嵌
<style>在这里面添加CSS属性</style>

内联

<div style="在这里面写CSS属性"></div>

以下是一些简单常用的CSS属性；

id选择器，class选择器，属性选择器：基本的内嵌和外嵌的调用方法；

font-family:字体的设置；

a:link：未访问时;

a:visited:访问以后;

 a:hover:移入 悬停;

 a:active:点击时;

:root相当于HTML页面设置;

td:empty:给空白的添加效果，一般用于表格;

focus鼠标聚焦时;

::selection选择文字时的改变;

第一排first-line字的设置;

first-letter:第一个字；

倒数第几个：li:nth-last-of-type(1)

派生：p标签下面所有的span标签 （p span）；

p标签的子级span才改变，span下面的span标签不会改变但是会继承父亲的属性（p>span）

并集选择器:对所有选中的标签添加属性

font-style：设置字体为斜线。

文字缩进：text-indent: 20px;

字之间的间隔：letter-spacing: 20px;

单词之间的距离：word-spacing: 30px;

所有英文字母大写：text-transform: uppercase;

所有英文字母小写：text-transform: lowercase;

首字母大写：text-transform: capitalize;

文字居中

text-align: center;

文字居右
text-align: right;
上划线
text-decoration: overline;
删除线
text-decoration: line-through;

填充颜色
background: firebrick;
行间距
line-height: 50px;

图片适应
background-repeat: no-repeat;
图片横向平铺
background-repeat: repeat-x;
纵向平铺
background-repeat: repeat-y;
背景图片固定
background-attachment: fixed;
图片大小/
background-size: 300px auto;
图片大小的百分比
background-size: 20% 10%;

background-size: cover;
自适应文本框来变化大小
background-size: contain;

double双线条
border: 5px double #000;
上边框
border-top:5px solid #000;
右边框 dasheed为虚线
border-right: 5px dashed #269abc;
下边框
border-bottom: 6px double aquamarine;
右边框 dotted点线
border-left: 5px dotted greenyellow;

无序列表去点
list-style: none;
把小点换成句号
list-style-type: circle;
把小点换成实心小正方形
list-style-type: square;
把小圆点换成外国一二三
list-style-type: lower-roman;
把圆点换成图片
list-style-image: url("添加图片");