CSS指的是层叠样式表(Cascading Style Sheets)
样式定义如何显示HTML元素,通常存储在样式表中。
css使用方式
内联式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联样式</title>
</head>
<body>
<p style="background: red"> I love China!</p>
</body>
</html>
内部样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联样式</title> <style type="text/css"> p{ background: green; } </style> </head> <body> <p> I love China!</p> </body> </html>
外部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联样式</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p> I love China!</p>
</body>
</html>
CSS语法:
selector {property : value;} 选择器{属性1:值1;属性2:值2;}
常用选择器:
- .ClassSelector(类)
- #IdSelector(id)
- Selector(标签)
基本CSS属性: 背景,文本,字体,尺寸,边距和填充,边框
background (背景)
- background-color 背景颜色
- background-image 背景图像
- background-repeat 背景平铺方式或重复
- background-attachment 背景图像是否固定或随平面滚动
- background-position 背景图像起始位置
Text(文本)
- color 颜色
- line-height 行高
- text-align 文本水平对齐方式
- vertical-align 文本垂直对齐方式
- Text-indent 首行缩进
- Text-shadow 字体阴影
- White-space 空白处理方式
- Word-spacing 字间距
Font
- Font-family 指定文本字体系列
- Font-size 指定文本字体大小
- Font-style 指定文本字体样式
- Font-weight 指定字体粗细
Dimension
- height 设置元素高度
- Line-height 行高
- max-height 元素最大高度
- max-width 元素最大宽度
- min-heigth 元素最小高度
- min-winth 元素最小宽度
- width 设置元素宽度
Margin&Padding
Margin
- Margin-top 上边距
- Margin-bottom 下边距
- Margin-left 左边距
- Margin-right 右边距
Padding
- Padding-yop 上填充
- Padding-bottom 下填充
- Padding-left 左填充
- Padding-right 右填充
Border
- Border-top 上边框
- Border-bottom 下边框
- Border-left 左边框
- Border-right 右边框
- Border-style 边框样式
- Border-width 边框宽度
- Border-color 边框颜色