CSS入门

前端学习的第三天

1. 引入CSS:
   • 使用style标签(调试代码使用)

		<style>
			p{
				color : #FF0000;
			}
		</style>

- 使用link标签  `<link rel="stylesheet" type="text/css" href="css/syle.css" />`
- 使用style属性

2. 基本语法

选择器{
	属性: 属性值
	属性: 属性值
}

3. 普通选择器
4. 元素选择器: 直接使用标签名就行
5. class选择器: 标签加入class属性class="my" 加入属性的方法: 使用点(.)加class

.my{
 color : #FF0000;
}

3. ID选择器尽量不要用 使用#加ID值

4. 优先级为ID>class>元素选择器

5. 特殊选择器

6. 并集选择器: 选择器, 选择器{ } h1,.myclaa

7. 交集选择器: (元素)选择器选择器{ } p.myclass

8. 后代选择器 选择器 选择器 .div1 p

9. 子代选择器 选择器>选择器 .div1>p

10. 属性选择器 [属性] 或 [属性=‘属性值’]

11. 全局选择器 * 做统一设置时使用

12. 伪类选择器 (选择元素的状态:hover :active)

13. 常用样式属性

    • color: #FF0000;

    • width: 100px;

    • height: 100px;

    • border: 1px solid black;

    • background-color: whiter;

    • background: url(dir);

    • background-repeat: no-repeat

    • font-size: 44px;

    • font-family: “宋体”;

    • text-decoration: none;(文字修饰)

    • text-align: center;

    • line-height: 600px;

    • list-style: circle;

    • display: block(从上到下排列) inline(行内 从左在右) inlin-block(行内块) none(不显示元素)

    • opacity: 0.5(透明度, 为半透明)

    • overflow: hide; (处理超出边界)

    • float: left;(浮动排列元素)

    • margin: 10px auto (外边距)

    • padding: 10px (内容和边框的距离)

    • padding-left: 5px

    • border-radius: 10px(圆角边框)

    • position

      1. 相对定位

		.c1{
				position: relative;
				left: 20px;
				top: 20px;
			}	

   2. 绝对定位 以页面位置进行偏移

		.c1{
				position: absolute;
				left: 20px;
				top: 20px;
			}	

   3. 默认定位: static 块从上到下 行内 从左到右
   4. 固定定位: fixed 已屏幕的位置进行偏移 适合做小广告