css引入方式
- 外部样式表
<!-- rel：relative 表示关联一个样式表 -->
<!-- type属性表示了这是标准的css -->
<link rel="stylesheet", type="text/css",href="URL">
- 内部样式表
<head>标签中引入
<style>
#app{color:red;}
</style>
- 行内样式表
<div style="color:red;">hello world!</div>
css选择器
语法规则
选择器名{
属性名1:值1;
属性名2:值2;
}
元素选择器
选择器名为标签名，如div
id选择器
每个html文件id值必须唯一#id名{}
class选择器
不同标签可以拥有同一个class.class名{}
后代选择器
选择标签内部中所有的某一种标签
<style>
#app p{
color:red;
}
</style>
<div id="app">
<p class="classname">红色</p>
</div>
<!-- 选择id="app"元素下所有的<p>标签 -->
群组选择器
<!-- ,分割不同选择器 -->
<style>
.class,#app,div{
font-size:10px;
color:green;
}
</style>
字体样式
| 属性 | 说明 |
|---|---|
| font-family | 字体类型 |
| font-size | 字体大小 |
| font-weight | 字体粗细 |
| font-style | 字体风格 |
| color | 字体颜色 |
.id{
font-family:Arial;
font-size:10px;
/* 加粗 */
font-weight:bold;
/* 斜体,不常用 */
font-style:italic;
color:#ff0000;
}
文本样式
| 属性 | 说明 |
|---|---|
| text-indent | 首行缩进 与font-size两倍关系 |
| text-align | 水平对齐 center居中 |
| text-decoration | 文本修饰：{none:取消划线效果; underline:下划线; line-through:中划线} |
| text-transform 大小写转换 | uppercase lowercase |
| line-height | 行高,px,em |
| letter-spacing | 字母间距 |
| word-spacing | 词间距 |
边框样式
| 属性 | 说明 | 属性值 |
|---|---|---|
| border-width | 边框的宽度 | |
| border-style | 边框的外观 | none:无样式 dashed:虚线 solid:实线 |
| border-color | 边框的颜色 | 属性可简写 border: 1px solid red; |
边框局部样式
p{
border-top-style:solid;
border-left:1px solid red;
border-bottom:1px solid red;
border-right:1px solid red;
}
列表样式
list-style-type作用于<ul>或<ol>边表,但原生列表项符号很丑，记住下面这个就可以了
/* 不使用原生符号 */
list-style-type:none;
/* 使用图片作为列表项符号 */
/* 实际开发用iconfont图标技术实现 */
list-style-image: url(图片路径);
表格样式
表格标题位置，默认在上方 table{caption-side:bottom;}
表格边框合并，无空隙 table{border-collapse:collapse;}
表格边框间距 table{border-spacing:8px;}
图片样式
- 图片大小:
width=30px;height=20px - 图片边框:
border: 1px solid red; - 图片对齐:
text-align:center(left、right)作用于<img>标签父元素 - 文字环绕:
float: left、right向左环绕和向右环绕
背景样式
| 属性 | 说明 |
|---|---|
| background-color | 定义背景颜色 |
| background-image | 定义背景图片地址 background-image: url(图片路径); |
| background-repeat | 定义背景图片重复，例如横向重复repeat-x、纵向重复repeat-y,只有元素大于图片大小，才会平铺 |
| background-position | 定义背景图片位置 |
| background-attachment | 定义背景图片固定 |
超链接样式
a{
/* 链接未被访问样式 */
color:red;
text-decoration: none;
}
a:hover
{
/* 鼠标经过时样式 */
color:blue;
text-decoration:underline;
}
/* :hover伪类还可以作用于其他标签 */
/* 如div:hover img:hover */
p{
/* 鼠标样式 */
cursor:pointer/text;
}