3-Css样式

css样式

一、边框属性

所有的 HTML 标签都有边框，默认边框不可见

1、border

设置边框的格式

格式：

宽度 样式 颜色
e.g. 
border:1px solid red		1像素 实线 红色

宽度：px

线条样式

solid 实线

none 无边

double 双线

2、width

用于设置边框的宽度

px

3、height

用于设置边框的高度

px

4、backgound-color

用于设置标签的背景颜色

背景颜色设置的两种主流方式

1. 英文单词

   red
   blue
   yellow
   

2. 颜色代码

   #红绿蓝
   每一个颜色用两个16进制位数表示
   #ff1100
   红色ff	最重
   绿色11	其次
   蓝色00	没有
   

---

二、布局

float

通常默认的排版方式，将页面中的元素从上到下ー一罗列，而实际开发中，需要左右方式进行排版，就需要使用浮动属性

格式：

选择器{
	float:属性值;
}

常用属性值：
	none:元素不浮动（默认值）
	left:元素向左浮动
	right:元素向右浮动

注意：因为元素设置浮动属性后，会脱离原有文档流，从而会影响其他元素的样式，所以设置浮动以后，页面样式需要重新调整

---

三、转换

display

HTML 提供丰富的标签，这些标签被定义成了不同的类型，一般分为：块级元素和行内元素。

1. 块元素：以区域块方式出现。每个块标签独自占据一整行或多整行。块结束会自动换行

   常见的块元素：<h1>、<p>、<div>、<ul>，不会自动换行

2. 行内元素：根据内容多少来占用行内空间,不会自动换行

   常见的行内元素：<span>、<a>等

display 属性可以使得元素在行内元素和块元素之间相互转换。

格式

选择器{
	display:属性值;
}

常用属性值
	block：此元素将显为块元素（块元素默认的 display 属性值）
	inline：此元素将显示为行内元素（行内元素默认的 display，属性值）
	none：此元素将被隐藏，不显示，也不占用页面空间。

---

四、字体

写在选择器里

1、font-size

用于设置字体的大小

2、color

用于设置字体的颜色