css基础语法

设置元素的文本和装饰部分的颜色

color：

eg: {color : red;}

定义文本的字体

font-family:

eg: {font-family: Arial,“Microsoft Yahei”, “微软雅黑”;}

各种字体之间必须使用英文状态下的逗号隔开
一般情况下,如果有空格隔开的多个单词组成的字体,加引号.
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
最常见的几个字体：body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }

字体大小

font-size:

eg: {font-size: 14px;}

px（像素）大小是我们网页的最常用的单位
谷歌浏览器默认的文字大小为16px
不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
可以给 body 指定整个页面文字的大小

字体粗细

font-weigjt

eg: { font-weight: bold;}

normal: 默认值（不加粗）
bold：定义粗体（加粗的）
100-900：400等同于normal，而700等同于bold 注意数字后面不跟单位
学会让加粗标签（比如 h 和 strong 等) 不加粗，或者其他标签加粗
实际开发时，我们更喜欢用数字表示粗细

字体样式

font-style

eg: {font-style:normal;}

normal: 默认值，显示标准的字体样式。
italic: 浏览器会显示斜体的字体样式。

注意： 平时我们很少给文字加斜体，反而要给斜体标签（em，i）改为不倾斜字体。

字体复合属性

font: font-style font-weight font-size/line-height font-family;

eg: {font:12px/1.5 Microsoft YaHei； }

使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

文本对齐

text-align

eg: {text-align: center;}

left: 左对齐（默认值）
right: 右对齐
center: 居中对齐

装饰文本：可以给文本添加下划线、删除线、上划线等。

text-decoration

eg: {text-decoration: underline;}

none: 默认。没有装饰线（最常用）
underline: 下划线。链接a自带下划线（常用）
overline: 上划线。（几乎不用）
line-through：删除线（不常用）

文本缩进

text-indent

eg: {text-indent: 2em;} # 首行缩进两个字符

行间距

line-height

eg: {line-height: 26px;}

注：当行间距和盒子一样高时文字就垂直居中显示

后代选择器

元素1 元素2 {样式声明}

eg: ul li { 样式声明 } / 选择 ul 里面所有的 li标签元素 /

元素1 和 元素2 中间用空格隔开 
元素1 是父级，元素2 是子级，最终选择的是元素2 
元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可 
元素1 和 元素2 可以是任意基础选择器 

子选择器

元素1 > 元素2 { 样式声明 }

eg：div > p { 样式声明 } / 选择 div 里面所有最近一级 p 标签元素 /

元素1 和 元素2 中间用 大于号 隔开 
元素1 是父级，元素2 是子级，最终选择的是元素2 
元素2 必须是亲儿子，其孙子、重孙之类都不归他管. 你也可以叫他 亲儿子选择器

并集选择器

元素1,元素2 { 样式声明 }

并集选择器可以选择多组标签, 同时为他们定义相同的样式。通常用于集体声明.  
并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

eg: ul,div { 样式声明 } / 选择 ul 和 div标签元素 /

元素1 和 元素2 中间用逗号隔开 
逗号可以理解为和的意思 
并集选择器通常用于集体声明 

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。 
伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。 
因为伪类选择器很多，比如有链接伪类、结构伪类等，所以这里先给大家讲解常用的链接伪类选择器。 

链接伪类选择器

定义：

	伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

语法：

	伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。

	**a:link**	没有点击过的(访问过的)链接
	**a:visited**	点击过的(访问过的)链接
	**a:hover**	鼠标经过的那个链接
	**a:active**	鼠标正在按下还没有弹起鼠标的那个链接

链接伪类选择器注意事项

	为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active。

	记忆法：love hate 或者 lv 包包 hao 。

	因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

链接伪类选择器实际工作开发中的写法：

/* a 是标签选择器  所有的链接 */  
a {        
color: gray; 
} 
/* :hover 是链接伪类选择器 鼠标经过 */ 
a:hover {      
color: red;  /* 鼠标经过的时候，由原来的 灰色 变成了红色 */ 
}

:focus 伪类选择器

定义：

:focus 伪类选择器用于选取获得焦点的表单元素。

焦点就是光标，一般情况< input >类表单元素才能获取

eg:
input:focus {  
  background-color:yellow; 
}  

元素显示模式转换：

display

eg: {display: block; }

转换为块元素：display:block; 
转换为行内元素：display:inline; 
转换为行内块：display: inline-block; 

背景颜色

background-color

eg: {background-color:颜色值; }

一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色。 
background-color:transparent; 

背景图片

background-image

eg: {background-image : none | url (url) ;}

none: 无背景图（默认的）
url: 使用绝对或相对地址指定背景图像

背景平铺

background-repeat

eg: {background-repeat: repeat | no-repeat | repeat-x | repeat-y ;}

repeat: 背景图像在纵向和横向上平铺（默认值）
no-repeat: 背景图像不平铺
repeat-x: 背景图像在横向上平铺
repeat-y: 背景图像在纵向平铺

背景图片位置

background-position

eg: {background-position: x y; }

length: 百分数|由浮点数字和单位标识符组成的长度值
position: top|center|bottom|left|center|right 方位名词

背景图像固定（背景附着）

background-attachment

eg: {background-attachment : scroll | fixed ;}

scroll: 背景图像随对象内容滚动
fixed: 背景图像固定

背景复合写法

background

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

eg: background: transparent url(image.jpg) repeat-y fixed top ;

背景色半透明

background

eg: {background: rgba(0, 0, 0, 0.3); }

最后一个参数是 alpha 透明度，取值范围在 0~1之间 
我们习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3); 
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响 
CSS3 新增属性，是 IE9+ 版本浏览器才支持的 
但是现在实际开发,我们不太关注兼容性写法了,可以放心使用 

盒子模型：边框（border）

border

样式：{border : border-width || border-style || border-color ; }

eg: {border: 1px solid red; 没有顺序 }

border-width: 定义边框粗细，单位是px
border-style: 边框的样式
border-color: 边框颜色

broder-style 设置值如下:

none：没有边框即忽略所有边框的宽度（默认值） 
solid：边框为单实线(最为常用的) 
dashed：边框为虚线   
dotted：边框为点线 

边框分开写： border-top，border-left， border-bottom，border-right

表格的细线边框

border-collapse

语法：border-collapse:collapse;

collapse 单词是合并的意思 
border-collapse: collapse; 表示相邻边框合并在一起 

盒子模型：内边距（padding）

内边距分开写： padding-left，padding-right，padding-top，padding-bottom

padding 属性（简写属性）可以有一到四个值。

值的个数	表达的意思
padding: 5px;	1个值，代表上下左右都有5像素内边距
padding: 5px 10px;	2个值，代表上下内边距是5像素，左右内边距是10像素；
padding: 5px 10px 20px;	3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素；
padding: 5px 10px 20px 30px;	4个值，上是5像素，右10像素，下20像素，左30像素，顺时针；

当我们给盒子指定 padding 值之后，发生了 2 件事情：

1. 内容和边框有了距离，添加了内边距。
2. padding影响了盒子实际大小。

也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

解决方案： 如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。

盒子模型：外边距（margin）

margin

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

margin 简写方式代表的意义跟 padding 完全一致。

外边距可以让块级盒子水平居中，但是必须满足两个条件：

① 盒子必须指定了宽度（width）。

② 盒子左右的外边距都设置为 auto 。

常见的写法，以下三种都可以：

1. margin-left: auto; margin-right: auto;

2. margin: auto;

3. margin: 0 auto;

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

清除内外边距

* {
  /*每一个html引用时都需要添加 设置将外边距和边框设置为0*/
  margin: 0;
  padding: 0;
}

去掉li前面的项目符号（小圆点）

list-style

eg: {list-style: none;}

圆角边框

border-radius:

eg: {border-radius: 10px;}

• 参数值可以为数值或百分比的形式
• 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%
• 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
• 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius
  和 border-bottom-left-radius

未完待续！