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: 单独设置