css学习笔记

css

html：建房子
css：装修

---

---

前言

css基础

---

一、css是什么？

cascading 　style 　sheet
　层叠　　　样式　　表
css不能脱离html而单独存在

二、语法

1.属性的设置

属性名和属性值之间使用冒号分割
多对属性之间使用分号分割
最后一对属性可以不加分号

1.style

<div style="width:100px;height:100px;background-color:red"></div>

2.其他
　　　代码块
　　　选择器{
　　　　　　　width:100px;
　　　　　　　height:100px;
　　　　　　　background-color:red;
　　　　　　}

2.注释

1.写法

/*注释内容*/

2.作用
　　　提升代码的可读性
　　　便于代码的维护和管理
3.注意
注释不能嵌套使用

　　　　　　　<!--outer
				<!--inner-->
			-->
			/*
				outer
				/*inner*/
			*/

3.速记写法

简写形式

        top
		bottom
		left
		right
        内边距
		padding-top:10px
		padding-left:10px
		padding-right:10px
		padding-bottom:10px
        
		padding:10px;
		//上下左右均为10px
		padding:10px 20px;
		//上下10px 左右20px
		padding:10px 20px 30px;
		//上10px 左右20px 下30px
		padding:10px 20px 30px 40px;
		//上 右 下 左
        外边距
		margin-top
		margin-left
		margin-right
		margin-bottom

		margin:padding;
		margin:0 auto;
		//设置给具有宽度的块级元素时，元素可以在父元素中自动居中

		broder:1px solid red;
			border-width:
			border-style:
			border-color:
				border-top-width
				border-top-style
				border-top-color:

三、css作用到html上

1.行内样式

写在标签内部的style属性上

2.内嵌式/内部样式表

在head内部使用style标签设置

3.外部样式表(建议使用)

当前html文件外部，创建一个css文件
.css为文件后缀名
　　1）link标签
　　　　　　　建议使用link标签
　　　　　　　优先加载html
　　2）@import属性
　　　　　　　优先加载css

优先级：
行内样式>内嵌式=外部引入
结论：就近原则：哪一个样式距离html元素更近，谁的优先级更高

四、选择器

1.标签选择器：

通过标签名称选择一类元素

        div{}
		span{}
		p{}

2.id选择器：

通过id属性选择一个元素