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.伪类选择器
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;