一 css的引入方式:
1) 行内样式: <p style=”color: green”>我是一个段落</p>
2) 内接样式:
<style type=”text/css”>
/*写css代码*/
span{
color:yellow
}
</style>
3) 外接样式(链接式和导入式)
<link rel=”stylesheet” href=”./index.css”> <!—链接式-->
<style type=”text/css”> <!—导入式-->
@import url(“./index.css”);
</style>
二 css选择器:
基本选择器
标签选择器: 标签选择器可以选中所有的标签元素, 比如div, ul, li, p等,不管标签藏的多么深都可以被选中. 选中的是所有的,并不是某一个标签, 所以说是”共性”, 不是”特性”.
用法: 标签名:{color:red;}
Id选择器: 同一个页面中的id不能重复, 任何标签都可以设置id, id的命名规范,大小写严格区分, aaa和AAA是两个不一样的属性值
用法: #id名{color:red;}
类选择器: 类class和id很相似, 任何标签都可以加类, 但是类是可以重复的. 同一个标签可以有多个类, 用空格隔开.
用法: .类名{color:red;}
总结:
1) 每个类要尽可能小,要有公共的概念,能够让更多的标签使用;
2) 尽可能用class,除非特殊情况可以用id, id一般是用在js中获取元素的
高级选择器:
a, 后代选择器:
使用空格表示后代选择器, 父元素的后代包括(儿子,孙子,重孙子)
用法: .container p{color:red;}
b, 子代选择器:
使用>表示子代选择器, 比如div>p, 只表示当前div元素中的子(不包含孙子)的p
c, 并集选择器:
多个选择器之间使用逗号隔开, 表示选中页面中的多个标签, 一些共性的元素, 可以使用并集选择器
用法: h3,.content{color:red;}
d, 交集选择器
同时用两种选择器选择一个标签元素, 例如div.active, 表示类名是active又是div标签的元素
属性选择器
属性选择器就是根据标签的属性, 选择当前的标签.
用法: [for]{color:red;} 或者 input[type=”text”]{background:red;}
伪类选择器
伪类选择器一般用在超链接a 标签中, 使用a标签的伪类选择器, 我们一定遵循”爱恨准则” LoVe HAte
a:link{color:#666;} /*没有被访问的a标签样式*/
a:visited{color:yellow;} /*访问之后a标签的样式*/
a:hover{color:green;} /*鼠标悬停时a标签的样式*/
a:active{color:#yellowgreen;} /*鼠标按下时a标签的样式*/
注意: link,visited,active这三个只有a标签有, hover其他元素也可以用
伪元素选择器:
/*设置第一个首字母的样式*/
p:first-letter:{color:red; font-size:30;}
/*在…..之前添加内容, 这个属性用的不多,了解即可. 使用这个伪元素选择器就结合content属性*/
p:before{content:”alex”}
/*在….之后添加内容, 使用非常多,与之后的清楚浮动有关*/
P:after{content:”&”; color:red; font-size:40px;}
三 css的继承性和层叠性
继承性
继承：给父级设置一些属性，子元素继承了父级的该属性，这就是我们的css中的继承。
记住：有一些属性是可以继承下来：color 、font-*、text-*、line-* ，主要是文本级的标签元素。
但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。
层叠性:
权重大的标签覆盖掉权重小的标签
总结:
a) 先看标签元素有没有被选中, 如果被选中了, 就数数(id,class,标签的数量)谁的权重大, 就显示谁的属性, 权重一样大的, 后来者居上
b) 如果没有被选中的标签元素, 权重是0
c) 如果属性的被继续下来的, 权重是0. 权重都是0:”就近原则”(谁描述的近,就显示谁的属性)
四 盒子模型
盒子模型有两种: 标准模型, 和IE模型. 我们重点说标准模型
- 盒模型示意图
盒模型属性
内容的宽度
height:内容的高度
padding:内边距,边框到内容的距离(父子之间的距离)
border:边框, 就是指盒子的宽度
margin:外边距, 盒子边框到其他盒子的距离(兄弟之间的距离)
盒模型计算
如果一个盒子设置了width, height, padding, border, margin(先不设置,有坑)
盒子真实宽度 = width+2*padding+2*border
盒子真实高度 = height + 2*padding + 2*border
注意:标准盒模型的width 不等译盒子真是的宽度
另外如果要保持盒子真实的宽度, 加padding 就要减width, 减padding就要加width.
Padding(内边距)
Padding是内边距, 是边框到内容之间的距离.
另外padding的区域是有背景颜色的, 并且背景颜色和内容颜色是一样的. 也就是说background-color填充所有的border以内的区域.
Padding有四个方向:
Padding-top: 30px;
Padding-bottom:40px;
Padding-left:30px;
Padding-right:40px;
/* 上 右 下 左*/
Padding: 20px 30px 40px 50px;
/*上 左右 下*/
Padding:20px 30px 40px;
/*上下 左右*/
Padding:20px 30px
/*上下左右*/
Padding:20px
border(边框)
盒子边框的三要素: 粗细,样式, 颜色.
分别设置三要素:
border-3px;
border-style:solid;(dotted, double, dashed)
border-color:red;
设置三要素同时设定:
border: 10px solid red;
注意:border:none; 或者 border:0; 都表示border没有设置样式
margin 外边距
表示边框到最近盒子的距离.也有四个方向,并且可以设置4个值
/*表示4个方向的外边距离是20px*/
margin:20px
/*表示盒子向下移动了30px*/
margin-top:30px;
/*表示盒子向右移动了30px*/
margin-left:30px;
五 清除默认样式
有一些标签会默认自带样式，比如ul标签默认有padding-left值，有些默认有margin值，ul、ol和a标签也自带一些样式，但是我们一般在做网页的时候不想用那些自带的样式，所以需要清除页面标签中默认的样式，以便我们更好的去调整元素的位置.
*{
padding:0;
margin:0;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
input{
border:0;
- outline:0;
}