CSS常用样式

  • 一、color：字体颜色
  • 二、width height:宽高
  • 三、背景样式
  • 1.背景色：background-color
  • 2.背景图片：background-image
  • 3.背景平铺：background-repeat
  • 4.背景位置：background-position
  • 四、文本样式
  • 1.字体：font
  • 2.文本
  • 五、列表样式
  • 六、边框样式
  • 七、Display(显示) 与 Visibility（可见性）
  • 两者的区别
  • display 改变元素的类型
  • 八、连接：a


一、color：字体颜色

1、颜色的单词 red blue…
2、rgb(红，绿，蓝)三色的取值范围是0-255 rgb(255,0,0)
rgba（红，绿，蓝,透明度），透明度取值：0-1 0 全透明 1-不透明 0.5 半透明rgba(255,0,0,0.4)
3、#值1值2值3 ：值的范式是00-FF 十六进制数字组成的 例如：#FF0000

二、width height:宽高

只有块状元素可以设置宽高，行级元素设置不生效。
1：数值 绝对数字 单位是像素PX
2：百分比：占据父元素的比例

三、背景样式

1.背景色：background-color

2.背景图片：background-image

3.背景平铺：background-repeat

不设置的时候默认xy轴同时平铺
repeat-x:横轴平铺
repeat-y:纵轴平铺
repeat:同时平铺
no-repeat:不平铺

4.背景位置：background-position

第一个参数：x轴上的偏移距离，正数向右移动，负数向左移动
第二个参数：y轴上的偏移距离，正数向下移动，负数向上移动。

四、文本样式

1.字体：font

font:bold 24px "微软雅黑";
字体缩写：粗细	大小		样式

font-size:18px;
字体大小

font-weight:bold;
字体粗细

font-family:"微软雅黑";
字体样式

2.文本

text-decoration:underline;
划线位置：
line-through--中划线
underline--下划线
none--没有划线

test-align:center;
文本的水平对齐方式:left right center;

line-height:400px;
文本的垂直水平对齐方式:没有单个属性可以设置垂直对齐，一般单行的时候使用高度等于行高设置垂直居中；多行使用盒子模型

letter-spacing:10px;
文字之间的间隙

五、列表样式

list-style:square url() inside;
列表样式缩写:列表样式	自定义图片	位置

list-style-type:decimal;
列表样式:
none--无样式
square--正方形
circle--空心圆
decimal--数字

list-style-image:url();
列表样式为自定义图片

list-style-position:outside;
列表样式为放置的位置

常用的列表样式
list-style:none;

六、边框样式

border:solid green 5px;
边框缩写:样式	颜色	宽度

border-width:2px;
边框宽度

border-color:red;
边框颜色

border-style:dashed;
边框样式
solid --实线
dotted --点线
dashed --虚线

边框可以分为四个方向
border-top
border-bottom
border-left
border-right

七、Display(显示) 与 Visibility（可见性）

两者的区别

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

display 改变元素的类型

CSS样式有以下三个：
display:block – 显示为块级元素
display:inline – 显示为内联元素
display:inline-block – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

八、连接：a

a:link {
color: red;
/*默认颜色是红色*/
}
a:visited {
	color: blue;
	/*访问过的页面是蓝色*/
}
a:hover {
	color: green;
	/*鼠标悬浮是绿色*/
	font-size: 28px;
}
a:active {
	color: gold;
	/*按下鼠标不放手是金色*/
	font-family: "微软雅黑";
}