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较细：100bold较粗：700bolder很粗：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元素向右浮动

---

待更新

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。