自学前端02

CSS入门

1.CSS的使用方式：

• 内部样式：权重高，单标签
• 内联样式：少用 ，单页面
• 外部样式：常用 ，多页面

2.CSS常用选择器

	<div class="red"></div>
    <div id="green"></div>
    <div class="red"></div>
    /* 标签选择器 */
    div {
        width: 100px;
        height: 100px;
    }
    /* 类选择器 */
    .red {
        background-color: red;
    }
    /* id选择器 */
    #green {
        background-color: green;
    }

3.font字体

属性	表示	注意点
font-size	字号	通常单位是px，一定要有单位
font-family	字体	多个字体浏览器从左到右选
font-weight	粗细	常用100-700（400标准，700加粗）
font-style	样式	常用normal,倾斜是italic
font	复合全部属性	1.顺序不可变：font-style font-weight font-size/line-height font-family 2.必须保留 font-sizet font-family

4.文本

属性	表示	注意点
color	文本颜色	常用十六进制：#fff
text-align	对齐	text-align:right,left,center
text-indent	缩进	text-indent:2em;相当当前元素的2个字的距离
text-decoration	装饰	underline;下划线；取消none常用
text-height	行高	注意与line-height有什么不同？

5.神奇的emmet语法

熟能生巧型
div + tab ========  <div></div>
.demo     ========  <div class="demo"></div>
#demo	  ========  <div id="demo"></div>
div*3     ========  <div></div><div></div><div></div>
ul>li	  ========  <ul><li></li></ul>

CSS代码大多数首字母即可！
w300      ========  width:300px;

格式化代码：(保存代码自动格式化)
设置----》首选项----》搜索format----》把format on save选项勾上。

6.复合选择器

记住三点：
div .demo ul li {} 空格为后代选择器
div>ul>li          >为子元素选择器
div,p,h1		   ,为并集选择器

7.伪类选择器

• 请确保顺序不变化： LVHA

a:link	选择所有未被访问的链接 或者 a {}（常用）
a:visited	选择所有未已经被访问的链接
a:hover	鼠标位于其上的链接 （常用）
a:active	鼠标活动时（按下未弹起动作）
input:focus	用于选取获得焦点的表单元素

8.元素显示

--元素（标签）在网页中以什么样的方式进行显示。

块标签：有高度，宽度，外边距
	<div>，<p>，<h1>---<h7>，<br />，<hr />，<ul>，<ol>，<li>
    注意：<p><h1>等标签不要包含<div>
    	 即文字类的标签不能包含块元素。
行内元素：宽高无效，但大小有效,默认宽度为本身内容的宽度大小
	<span>，<a>，<strong>，<b>，<ins>
	注意：只有<a>特殊可以容纳块标签
行内块元素：
	<img />，<input />，<td>
    
//元素之间的模式转换：
转换为块元素：display: block;

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

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