CSS学习
1、CSS简介
- CSS 指层叠样式表 (Cascading Style Sheets)；
- 样式定义如何显示 HTML 元素，简单的理解就是用CSS美化HTML；
- 样式通常存储在样式表中；
- 外部样式表可以极大提高工作效率；
- 外部样式表通常存储在 CSS 文件中；
- 多个样式定义可层叠为一；
2、CSS创建
CSS样式表有三种：外部样式表、内部样式表和内联样式；
- 外部样式表
如 <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
- 内部样式表
如 hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
- 内联样式
如 <p style="color:sienna;margin-left:20px">这是一个段落。</p>
- 多重样式优先级
（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
4、css选择器
- 标签选择器
如 p{color:"pink";text-align:center;}
- id选择器
如 #para1
{
text-align:center;
color:red;
}
image
ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
- class选择器
如.center {text-align:center;}
p.center {text-align:center;}
image
类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
5、CSS盒子模型
image
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
6、CSS背景
CSS 背景属性用于定义HTML元素的背景。
CSS 属性定义背景效果:
background-color
background-image
background-repeat
background-attachment
background-position
7、CSS文本格式
- text-align:设置文本对齐方式；
- text-decoration:属性用来设置或删除文本的装饰；
- text-indent:文本缩进；
8、CSS字体
font-style:字体样式；
font-size:字体大小像素；
9、CSS链接
a:link - 正常，未访问过的链接；
a:visited - 用户已访问过的链接；
a:hover - 当用户鼠标放在链接上时；
a:active - 链接被点击的那一刻；
10、CSS定位
-
static 定位
HTML元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到 top, bottom, left, right影响。 -
fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动。 -
relative 定位
相对定位元素的定位是相对其正常位置。 -
absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。
总结：对CSS还是不能熟练运用，应多加练习。
网友评论