css的简单学习笔记
1、CSS的简介
*css ：层叠样式表
**层叠： 一层一层。
**样式表：
具有大量的属性和属性值
*使得页面的显示效果更加好。
*css将网页内容和显示样式进行分离，提高了显示功能。
*css不能单独存在，依赖于html
2、css和html 的结合（一共有四种方式）
（1）在每个html标签中都有一个属性 style ，把css和html结合在一起。
--<div style="background-color:red;color:green;">
--设置了本句语句的 背景色 和 字体色。
（2）在html的一个标签：<style> 中（要写在head里面）
*<style type="text/css">
css代码;
</style>
如：
<style type=""text/css>
div{
background-color:blue;
color:red;
}
</style>
(3)在html标签里面，使用一个语句实现（某些浏览器下不起作用）
*@import url(css文件的路径);
--第一步，创建一个css文件。
<style type="text/css">
@import url(css文件名);
</style>
(4)使用头标签 link ，引入外部css文件
--第一步，创建一个css文件。
--<link rel="stylesheet" type="text/css" href="css文件路径" />
注意：第三中方式在某些浏览器下不起作用，一般采用第四种方法。
优先级：
一般来说，从上到下，从外到内，优先级由低到高。
即： 后加载的优先级高。
3、css的选择器（三种）
格式： 选择器名称{属性名: 属性值; 属性名: 属性值;... ...}
（1）标签选择器：
*使用标签名称作为选择器名称
div {
background-color:gray;
}
(2) class选择器：
*每个标签都有一个属性 ：class
-<div class="haha">aaaaa</div>
- .haha {
background-color:gray;
}
（3）id 选择器
*每个标签都有一个属性 ： id
- <div id="hehe"> bbbbbb</div>
- #hehe {
background-color:gray;
}
优先级： style > id选择器 > class选择器 > 标签选择器
4、css的扩展选择器
（1）关联选择器
*<div> <p> wwwww</p></div>
*设置div标签里的p标签的样式，（嵌套标签里面的样式）
* div p {
background-color : green;
}
（2）组合选择器
* <div> sssss</div>
<p>dsdsd</p>
*将div和p标签设置成相同样式，把不同的标签设置成相同的样式。
* div,p {
background-color : orange;
}
（3）伪元素选择器
*css里面提供了一些定义好的样式。
*比如超链接：
**超链接的状态：
原始状态 悬停状态 点击状态 之后状态
:link :hover :active :visited
5、css的盒子模型
**在进行布局前需要把数据封装到一块一块的区域内（div）
（1）边框
（width， height）
border：统一设置
border：2px solid blue(粗细，样式，颜色)
上： border-top
下： border-bottom
左： border-left
右： border-right
（2）内边距
padding： 20px
使用padding进行听统一设置
也可以分别设置，
上下左右四个内边距
（3）外边距
margin： 20px
可以使用margin进行统一设置
也可以分别设置
上下左右四个外边距
6、css的布局漂浮属性（了解，一般不用）
float：
**属性值
left ： 文本流向对象的右边（自己居左，下面一个补到其右边）
right： 文本流向对象的左边（自己居右，下面一个补到其左边）
7、css的布局的定位
position：
**属性值
--abslute ：
***将对象从文档流中拖出
***可以使用 top、bottom、left、right属性进行定位。
(定位到绝对位置，其后面的流对象向前补位)
--relative ：
***不会将对象从文档刘流中拖出。
***也可以使用top、bottom、left、right属性进行定位。
(定位到原来的相对位置，其他流对象还是在原来位置)
8、css的一些常用属性
1、文字属性
font-size:大小
font-family:字体类型
2、文本属性
color:颜色
text-decoration:下划线
属性值：none underline
text-align:对齐方式
属性值：left center right
<div>hello css!!!</div>
<a href="#">click me!!!</a>
<style type="text/css">
div{color:red;text-decoration: underline;text-align: right }
a{text-decoration: none;}
</style>
3、背景属性
background-color:背景颜色
background-image:背景图片
属性值：url("图片地址");
background-repeat:平铺方式
属性值：默认横向纵向平铺
repeat:横向纵向平铺
no-repeat:不平铺
repeat-y：纵向
repeat-x：横向
body{
background-color: black;
background-image: url("images/dog.gif");
background-repeat: repeat-y;
}
4、列表属性
list-style-type:列表项前的小标志
属性值：太多了
list-style-image:列表项前的小图片
属性值：url("图片地址");
<ul>
<li>黑马程序员</li>
<li>黑马程序员</li>
<li>黑马程序员</li>
<li>黑马程序员</li>
</ul>
<style type="text/css">
/* ul{list-style-type: decimal-leading-zero;} */
ul{list-style-image: url("images/forward.gif");}
</style>
5、尺寸属性
width:宽度
height:高度
<div id="d1">div1</div>
<div id="d2">div2</div>
<style type="text/css">
#d1{background-color: red;width: 200px;height: 200px;}
#d2{background-color: pink;width: 200px;height: 200px;}
</style>
6、显示属性
display:
属性值：none:隐藏
block:块级显示
inline：行级显示
<form action="">
name:<input id="name" type="text" /><span id="span">对不起 输入不符合要求</span>
<br>
pass:<input id="pass" type="password" />
<br>
<input id="btn" type="button" value="button" />
</form>
<style type="text/css">
span{color:red;display: none}
</style>
<script type="text/javascript">
document.getElementById("btn").onclick = function(){
document.getElementById("span").style.display = "inline";
};
</script>
7、浮动属性
float:
属性值：left right
clear:清除浮动 left right both
缺点： (1)影响相邻元素不能正常显示
(2)影响父元素不能正常显示
8、css盒子模型
border:
border-width:边框的宽度
border-style:边框的线型
border-color:边框的颜色
border-top:上边框
border-bottom:下边框
border-left:左边框
border-right:右边框
padding:
代表边框内壁与内部元素之间的距离
padding:10px; 代表上下左右都是10px
padding:1px 2px 3px 4px; 上右下左
padding:1px 2px; 上下/左右
padding:1px 2px 3px; 上，左右，下
padding-top: 单独设置
margin:
代表边框外壁与其他元素之间的距离
margin:10px; 代表上下左右都是10px
margin:1px 2px 3px 4px; 上右下左
margin:1px 2px; 下/左右
margin:1px 2px 3px; 上，左右，下
margin-top: 单独设置
