CSS样式 | 前端笔记（三）

二、CSS部分

（一）CSS样式

1.基础选择器

选择器	写法
标签选择器	标签名{…}
类选择器	class=“类名” .类名{…}
id 选择器	id=“id名” #id 名{…} （一次选一个，只能调用一次）
通配符选择器	*{…} （选全部）

备注：

1.可直接body{…}。

2.可把共同部分放到一个类里，方便调用。

3.可以多类名：.box{...} .red{...} class="box red"

2.字体

样式	含义
font-style:normal/italic	是否倾斜
font-weight：400(normal) / 700(bold)	是否加粗
font-size:100px	字体大小
font-family：“Microsoft Yahei”	字体

备注：

1.可复合为 font：font-style font-weight font-size font-family （要按顺序写，字体大小和字体必须有）

2.font:16px/28px 指的是大小16px，行高28px。

3.文本

样式	含义
text-align：center/left/right	对齐方式
text-decoration：none/underline(下划线) / overline (上划线) / line-through(删除线)	修饰
text-indent：2em	首行缩进
line-heigh：20px	行间距、行高

备注：行间距包括字的上间距和下间距。

4.快写

div*3 ul>li div+p .类名 #id名 w200 .类名&*5（自增，按顺序排列） div{...}*5 div{$}*5

备注：按住鼠标中间滑轮往下拖可以连续选中。

5.复合选择器

选择器	含义
后代选择器 (所有后代都可以)	ul li{…} (ul 的所有 li) ul li a{…}
子元素选择器（只能最近一级子元素）	.nav>a{…} (父>子{…})
并集选择器（多组）	ul , .pig li{…}
伪类选择器（特殊效果）	a:hover{…} a:first-child{…}
链接伪类选择器	a:link（未访问链接） a:visited（已访问链接） a:hover(鼠标经过) a:active（按住不放）
:focus 伪类选择器（针对表单）	input:focus{…}（获取光标）

备注：

1.后代选择器的后代可以是任意基础选择器。

2.链接伪类选择器必须按照LVHA的顺序。

3.想要链接a改变样式，必须单独指定，不能直接body{…}。

4.一般为a:{…} 然后a:hover{…}。

6.元素显示模式

模式	特点
块元素：<h1>-<h6>,<p>,<div>,<ul>,<ol>,<li>,<hr>,<dl>,<form>,<table>	独占一行，高度、宽度（默认 100%）、外或内边距都可以控制，是容器，可放行内或块级元素。（文字类元素例如<p>、<h>内不可放块元素）
行内元素：<a>,<strong>,<h>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>	一行可放多个，无法设置高和宽（默认本身内容宽度），只能容纳文本或其他行内元素。
行内块元素：<img/>,<input/>,<td>	一行可放多个，高度、宽度（默认内容宽度）、外或内边距、高度宽度都可以控制。

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

备注：1.<a>里面可以放块级元素。

文字在盒子内垂直居中：line-height=height，一般和水平居中：text-align:center一起用。若行高偏小，则偏上。

以后继续更新笔记，关注我，不要丢下我。