HTML中的CSS属性

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("添加图片");

posted @ 2016-06-25 12:22  风栎  阅读(633)  评论(0编辑  收藏  举报