前端02-CSS

CSS的使用

行内样式

<p style="color:red;font-size:50px;">这是⼀段⽂本</p>

嵌入式

<style type="text/css">p {color: blue;font-size: 40px;}</style>

引⼊外联样式⽂件

<link rel="stylesheet" type="text/css" href="style.css">

CSS选择器

通用选择器

* {
 color: orange; 
...
}

元素选择器

p {
 color: red;
 font-size: 20px;
...
}

ID选择器

#id属性值 {
 ......
}

类选择器

.class属性值 {
 ......
}

分组选择器

当⼏个元素样式属性⼀样时，可以共同调⽤⼀个声明，元素之间⽤逗号分隔

选择器1,选择器2,... {
 ......
}

CSS常⽤属性设置

背景

设置元素的背景颜⾊（ background-color ）：

body {
 background-color:#ff0000; 
}

设置元素背景图片（background-image）;

body {
 background-image:url('paper.gif');
}

设置是否及如何重复背景图像（ background-repeat ）；

body {
 background-image: url(img/logo.jpg); 
 background-repeat: no-repeat; 
}

值	说明
repeat	背景图像将向垂直和水平方向重复（默认）
repeat-x	只有水平位置会重复背景图像
repeat-y	只有垂直位置会重复背景图像
no-repeat	background-image不会重复
inherit	指定background-repeat属性设置应该从父类继承

文本

设置⽂本对⻬⽅式（text-align）：

body {
 text-align:center;     //居中对齐
}
h1 {
 text-align:right;      //右对齐
}
h2 {
 text-align:right;      //左对齐
}

规定添加到⽂本的修饰（text-decoration）：

属性值：none 、 underline 、 overline 、 line-through

 

1 ） underline

对⽂本添加下划线，与 HTML 的 u 元素相同。

 

2 ） overline

对⽂本添加上划线。

 

3 ） line-through

对⽂本添加中划线，与 HTML 中的 s 和 strike 元素相同。

 

4 ） none

关闭原本应⽤到元素上的所有装饰。

设置⽂本⾸⾏缩进（text-indent）：

p.ident2 {
 text-indent: 2em; 
}

字体

字体样式（font-family）：

1 ）只有当字体名中含有空格或 # 、 $ 之类的符号时（如 New York ），才需要在 font-family 声明中加引号：

body {
 font-family: "arial black"; 
}

2 ）多个字体系列是⽤⼀个逗号分隔指明

 

/* 靠前的字体先⽣效 */
p{
 font-family: 微软雅⿊,⿊体,"agency fb"; 
}

字体大小（font-size）

字体⻛格，该属性最常⽤于规定斜体⽂本（font-style）：

 

1 ） normal ：⽂本正常显示；

 

2 ） italic ：⽂本斜体显示；

 

3 ） oblique ：⽂本倾斜显示， oblique 是将⽂字强制倾斜。

 

字体加粗，该属性设置⽂本的粗细（font-weight）

 

对齐方式

text-align：

值	描述
left	把文本排列到左边。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承text-align属性的值。

display属性

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认，此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。
list-item	此元素会做为列表显示。

浮动

float 的属性值有 none 、 left 、 right 。

 

盒子模型

border、padding、margin三个属性构成了盒⼦模型。

border

设置所有的边框属性。

1）可同时设置边框的宽度、样式、颜⾊

table, th, td {
 border: 1px solid black; 
}
table {
 width:100%; height:50px; 
}

2 ） 使⽤border-width、border-style、border-color单独设置

table,td {
 border-width: 1px;
 border-style: dotted;
 border-color: green; 
}

3 ） border-style的属性

 

 

4 ） border-collapse

 

设置是否将表格边框折叠为单⼀边框。

属性值： separate （默认，单元格边框独⽴）、 collapse （单元格边框合并）

table {
 border-collapse : collapse; 
}

padding

设置元素所有内边距的宽度，或者设置各边上内边距的宽度。

如果在表的内容中控制⽂本到边框的内边距，使⽤ td 和 th 元素的填充属性：

 

td {
 padding:15px; 
}

单独设置各边的内边距： padding-top 、 padding-left 、 padding-bottom 、 padding-right

默认按照上右下左的顺序设定

 

margin

设置⼀个元素所有外边距的宽度，或者设置各边上外边距的宽度。

p.margin {
 margin: 2px 4px 3px 4px; 
}

单独设置各边的外边距： margin-top 、 margin-left 、 margin-bottom 、 margin-right

 

auto ：⾃动，可以理解为居中的意思。浏览器⾃动计算外边距。