CSS基础
基本概念
CSS Cascading Style Sheet（层叠样式表）
CSS用来控制网页的外观
CSS引入方式
外部样式表
<link rel="stylesheet" type="text/css" href="文件路径" />
内部样式表
<style type="text/css">
......
</style>
行内样式表
<div style="color:red;">行内样式表</div>
CSS选择器
元素选择器
div {
width:100px;
height:100px;
}
id选择器
#box {
width:100px;
height:100px;
}
<div id="box">id选择器</div>
class选择器
.box {
width:100px;
height:100px;
}
<div class="box">class选择器</div>
后代选择器
选择某一种元素的所有元素
#father div {
width:100px;
height:100px;
}
<div id="father">
<div>选择</div>
<p>不选择</p>
</div>
群组选择器
h3,p {
width:100px;
height:100px;
}
字体样式
字体样式属性
| 属性 | 说明 |
|---|
| font-family | 字体类型 | | font-size | 字体大小 | | font-weight | 字体粗细 | | font-style | 字体风格 | | color | 字体颜色 |
font-family
div {
font-family:Arial,"Times New Roman","微软雅黑";
}
字体类型只有一个英文单词，不用加双引号，多个单词或中文需要加上双引号。
font-size
font-size:像素值;
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
任意浏览器的默认字体高都是16px
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
font-weight
font-weight:取值;
font-weight的属性取值有两种：100~900的数值，另一种是关键字
| 属性值 | 说明 |
|---|
| normal | 正常：400（默认） | | lighter | 较细：100 | | bold | 较粗：700 | | bolder | 很粗：900 |
font-style
font-style:取值;
| 属性值 | 说明 |
|---|
| normal | 正常（默认） | | italic | 斜体 | | oblique | 斜体 |
有些字体有斜体italic属性，有些字体没有italic属性。oblique可使没有italic属性的字体拥有斜体效果。两者产生斜体效果一致。
color
color:颜色;
关键字
color:blue;
十六进制RGB
color:#048C02;
文本样式
文本样式属性
| 属性 | 说明 |
|---|
| text-indent | 首行缩进 | | text-align | 水平对齐 | | text-decoration | 文本修饰 | | text-transform | 大小写转换 | | letter-spacing,word-spacing | 行高 | | 字母间距，词间距 |
text-indent
首行缩进
text-indent:2em;
text-align
| 属性值 | 说明 |
|---|
| left | 左对齐（默认） | | center | 居中对齐 | | right | 右对齐 |
text-decoration
test-decoration:取值;
| 属性值 | 说明 |
|---|
| none | 去掉所有的划线效果（默认值） | | underline | 下划线 | | line-through | 中划线 | | overline | 顶划线 |
test-transform
| 属性值 | 说明 |
|---|
| none | 无转换（默认值） | | uppercase | 转换为大写 | | lowercase | 转换为小写 | | capitalize | 只将每个英文单词首字母转换为大写 |
line-height
控制一行文本的高度
line-height:像素值;
letter-spacing
控制字与字之间的间距
letter-spacing:像素值;
word-spacing
控制词与词之间的间距
word-spacing:像素值;
边框样式
整体样式
border-width
border-width属性用于定义边框的宽度，取值是一个像素值
border-style
border-style用于定义边框的外观
| 属性值 | 说明 |
|---|
| none | 无样式 | | dashed | 虚线 | | solid | 实线 |
bolder-color
bolder-color属性用于定义边框的颜色，取值可以是“关键字”或“十六进制RGB值”
简写形式
bolder:1px solid red;
bolder-width:1px;
bolder-style:solid;
bolder-color:red;
局部样式
上边框 bolder-top
bolder-top-width:1px;
下边框 border-bottom
bolder-bottom-style:solid;
左边框 border-left
右边框 border-right
列表样式
待更新
|