CSS三种样式
- 行间样式表
<div style="width:200px;height:100px;background:red">块</div>
- 内部样式表
#div1{
/*同一个页面id不能重名*/
style="width:200px;height:100px;background:red"
}
- 外部样式表
<link rel="stylesheet" href="链接文件地址"/>
CSS基本样式
| 代码 | 意义 | 单位 |
|---|---|---|
| width | 宽度 | px |
| height | 高度 | px |
| border | 边框 | width color style(solid dashed dotted) |
| background | 背景 | color url() repeat position attachment |
| font | 文字 | size weight(bold normal) style line-height family text-indent color text-align text-decoration line-spacing word-spacing |
| pading | 内填充 | px |
| margin | 外边距 | px |
/*字体字号必须添加,否则文字样式会不生效
文字右边会默认空出1像素
不同字体空格所占用的字符大小是不一样的
可视宽 = boder+pading+width;
pading位于内容之外 边框之内 显示背景颜色
margin位于元素之外 不显示背景颜色 相邻元素之间的margin是会重叠在一起的 子元素margin会传递到父级元素
div默认中文下自动换行,英文状态下不会自动换行
*/
常用标签
超链接
<!-- _blank新标签页打开,_self本标签页打开 -->
<!-- a标签的样式需要单独设置样式 -->
<!-- a标签不可以再嵌套a标签 -->
<a href="页面地址\锚点\压缩包" target="_blank">显示文字</a>
base标签
<base href="http://wwww.baidu.com" target="_blank">;
span标签
<!-- span标签和a标签都是不换行的 -->
<span id="span1">显示</span>
其他常用标签
| 标签 | 名称 | 意义 |
|---|---|---|
| <section></section> | 板块标签 | 板块标签 |
| <header></header> | 头部标签 | 头部标签 |
| <footer></footer> | 尾部标签 | 尾部标签 |
| <strong></strong> | 加强标签 | 加粗文字 |
| <ul></ul> | 列表标签 | 无序列表 |
| <ol></ol> | 列表标签 | 有序文字 |
| <li></li> | 列表项标签 | 一条列表项 |
| <p></p> | 段落标签 | 修饰文字 |
| <em></em> | 加强标签 | 倾斜文字 |
常用选择符及优先级
id选择器
/*类选择器可以同时支持多种样式*/
<div id="nam"></div>
#id{
width: 200px;
height: 100px;
background: red;
}
类选择器
/*类选择器可以同时支持多种样式*/
<div class="name name2"></div>
.name{
width: 200px;
height: 100px;
background: red;
}
类型选择器
div{
width: 200px;
height: 100px;
background: red;
}
包含选择器
.name{
width: 200px;
height: 100px;
background: red;
}
群组选择器
div,span{
width: 200px;
height: 100px;
background: red;
}
通配符选择器
*{
width: 200px;
height: 100px;
background: red;
}
选择器的优先级
- 选择器的优先级一致时,后面的样式将会覆盖前面的优先级
行间样式>id>类选择>类型选择>通配
块和内嵌
块:1. 独占一行 2. 支持所有样式
内嵌:1. 可以一行显示 2. 不支持宽高,对margin padding支持也有问题 3. 宽度由内容撑起 4.代码换行会被解析
