CSS基础代码整理

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

列表样式

定义列表项符号

list-style-type:取值;

有序列表

属性值	说明
decimal	阿拉伯数字:1、2、3…（默认值）
lower-roman	小写罗马数字:i、ii、iii…
upper-roman	大写罗马数字:I、II、III…
lower-alpha	小写英文字母:a、b、c…
upper-alpha	大写英文字母:A、B、C…

无序列表

属性值	说明
disc	实心圆
circle	空心圆
square	正方形

去除列表项符号

list-style-type:none;

列表项图片:list-style-image

用图片代替列表项符号

list-style-image:url(图片路径);

表格样式

表格标题位置:caption-side

caption-side:取值;

属性值	说明
top	标题在顶部（默认值）
buttom	标题在底部

表格边框合并:border-collapse

border-collapse:取值;

属性值	说明
separate	边框分开，有空隙（默认值）
collapse	边框合并，无空隙

表格边框间距:border-spacing

border-spacing:像素值;

图片样式

图片大小

width:像素值;
height:像素值;

图片边框

border:1px solid red;

图片对齐

水平对齐

text-align:取值;

垂直对齐

vertical-align:取值;

属性值	说明
top	顶部对齐
middle	中部对齐
baseline	基线对齐
bottom	底部对齐

文字环绕

float: 取值;

属性值	说明
left	元素向左浮动
right	元素向右浮动

---

待更新