CSS代码结构
css代码由选择器和声明两个部分构成
如 h1 {color : red }
选择器 声明
CSS引用方法
内联式
在开始标签内添加style属性样式
<div style="width:100px; height:100px;">123</div>
嵌入式
<style type="text/css">
h2{
color:blue;
font-size:30px;
}
</style> //style写在head标签内
<body>
<h2>嘿 这是蓝色</h2>
</body>
链接式
<link rel="stylesheet" href="css_text.css"> //写在head标签里面
href里面这样写是html和css样式在同一目录底下
<link rel="stylesheet" href="./css/css_text.css" > //css样式写在上一级的页面底下的css目录里面
<link rel="stylesheet" href="css/css_text.css" > //css样式写在页面所在目录的css文件夹里面
导入式
用import引入外部css
@import写在style标签内
<style type="text/css">
@import "css_test.css";
@import url("css_test.css");
</style>
有的浏览器有兼容性问题，不支持import这种用法，不推荐使用
对比引用css样式的四种做法，推荐使用链接式。
css选择器
- 标签选择器
h1{
color:red;
} //将所有h1标签的颜色都设置成红色
- 类选择器
.big{
color:red;
}
<h1 class="big"></h1>
同一个标签可以设置多个类进行样式设置 之间用空格隔开
如下
.big{
font-size:50px;
}
.green{
color:green;
}
<h1 class="big green"></h1>
- ID选择器
#big{
color:red;
}
<h1 id="big">这里用id设置样式</h1>
- 群组选择器
#big,#high,h1,.small{
color:red;
}
<h1 id="big">这里用id设置样式</h1>
<h1 id="high">这里用id设置样式</h1>
<h1 class="small">这里用id设置样式</h1>
- 通配符（全局）选择器
适用于所有的标签
*{
color:red;
}
- 后代选择器
h2 span{
color:red;
}//选择的就是h2标签下的span标签
.green span{
color:red;
}//选择的就是类是green的标签下的span标签
#green span{
color:red;
}//选择的就是id为green标签下的span标签
<h2><span>123</span></h2>
- 子选择器
h2>span{
color:red;
}//选择的就是h2标签下的span标签 只能是父子关系的标签
<h2><span>123</span></h2>
- 伪类选择器
a:link{color:red;} //默认状态下的a标签
a:hover{color:green;} //鼠标停在上面的a标签
a:visited{color:grey;} //点击过的a标签
a:active{color:blue;} //按下的时候的a标签
a标签还没点击时候是红色， 悬停在a标签上是绿色
按下a标签的时候是蓝色 ，点击后变成了灰色。
css继承
p{
color:red;
}
<p><em>测试</em><p>
这样设置虽然没直接设置em样式的字体颜色，
但是em会继承父标签p的字体颜色
继承可以很好的减少css代码量
可继承的有color,text-align,text-indent,font-size,font-family等等
不可继承的有盒子模型属性，定位布局属性
css优先级
默认样式<继承<通用选择器<标签选择器<类选择器<ID选择器<内联样式<!important
根据权重来看的话
通用选择器权重为0000
标签选择器权重为0001
类选择器权重为0010
ID选择器权重为0100
内联样式权重为1000
在选择器选择多的时候权重相加进行比较
body #left{xxx}
权重就是0001+0100=0101
body .container .middle .left{xxx}
权重就是0001+0010+0010+0010=0031
盒模型
盒子模型由四个部分组成
- 内容->content
- 填充->padding
- 边框->border
- 外边距->margin
打个比方 把他当成一个快递 content就是快递里面的东西，padding就是填充物如塑料泡沫等 border就是快递盒子 margin就是两个盒子之间的距离
常用的属性有margin ,width,height,padding 等。
margin设置方式有两种如下
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 400px;
height: 400px;
margin-top: 30px;
margin-right: 10px;
margin-bottom: 40px;
margin-left:20px;
/* margin:30px 10px 40px 20px; */
/* margin:30px 10px 40px ;*/ 这样子设置的话呢就是把左右两把的margin设置成10px 上为30px 下为40px
/* margin:30px 10px ;*/ 这样子设置的话呢就是把左右两把的margin设置成10px上下设置成30px
/* margin:30px ;*/ 这样子设置的话呢就是把上下左右的边距都设置成了30px
border-width: 3px;
}
</style>
</head>
margin还可以设置auto属性 表示居中。
大家不妨拿起编译器试试看呢
padding属性也有相似的设置
如下
padding: 10px 20px 30px 40px;
padding-top:10px ;
padding-right: 20px;
padding-bottom: 30px;
padding-left:40px ;
padding三个参数和两个参数和一个参数的设置都和margin是一样的
标准盒模型
符合W3C标准 声明
元素总宽度=内容宽度+padding+border+margin
元素总高度=内容高度+padding+border+margin
ie盒模型
在IE内核下的怪异盒模型
元素总宽度=内容宽度+margin
元素总高度=内容高度+margin
内容部分包括padding和border
box-sizing
标准盒模型下 box-sizing属性：content-box（默认）
IE盒模型下box-sizing属性:border-box
css浮动
标准文档流
元素在排版布局的时候，自动自上而下分成一行一行，每行从左到右排序
HTML元素分成块级元素和行级元素
块级元素例如div独占一行自上而下
行级元素如span标签从左到右顺序排序
块级元素和行级元素构成了文档流
CSS浮动会使元素脱离文档流，并向左或者向右移动
属性float：left 左浮动 right 有浮动 none 不浮动默认
下面有一个例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul{
list-style:none ;
}
ul li{
width: 200px;
height: 200px;
border: 3px #000000 solid;
float: left;
text-align: center;
line-height: 100px;
}
/* ul::after{
display: block;
clear: both;
content: '';
} */
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
<!-- <p>2134354265</p> -->
</body>
</html>
设置了七个li元素排版如上，但是当我们加入了一个块级元素p标签后会发现
p标签没有在我们预定的显示的li元素下方 而是放在了右边
那是因为使用浮动后发生了高度塌陷使ul这个元素的高度设置成了0
高度塌陷解决办法
那我们如果要使p标签在预定的这几个方格的下面实现要怎么实现呢？
有两种办法！
第一是！在li标签后面加一个div 这个div的clear属性设置成both，但是我们不建议这样使用 因为ul里面最好只有li标签
.cleardivs{
clear: both;
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<div class="cleardivs"></div>
</ul>
第二种:设置伪元素
ul::after{
display: block;
clear: both;
content: '';
}
那我们怎么清除浮动呢？
答案是
添加一个带clear的空白元素
设置after伪元素（推荐使用）
在父元素添加overflow属性 overflow:hidden;
CSS定位
CSS定位有四种 设置的属性为 position
静态定位：static（默认属性）
绝对定位：absolute
相对定位：relative
固定定位 ：fixed
相对定位relative
元素相对原来位置进行偏移 没有脱离文档流
例如
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul{
list-style:none ;
}
ul li{
width: 200px;
height: 200px;
border: 3px #000000 solid;
position: relative;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li style="top: 100px ;left:100px;">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>
</html>
显示效果如上
比较原来的显示效果
相对于原来位置有一个top：100px left：100px的偏移。
绝对定位absolute
元素相对第一个带有定位属性的祖先元素进行偏移
定位属性：position的值不是static的元素
如果祖先元素都不是定位元素，那么会相对于整个网页进行偏移。
元素会脱离文档流
下面看一个例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul{
list-style:none ;
}
ul li{
width: 200px;
height: 200px;
border: 3px #000000 solid;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li style=" position: relative;top: 100px ;left:100px;">2</li>
<li style="position:absolute ; top:10px ;right:10px">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>
</html>
这样来看，ul的第三个li元素进行了相对于文档流的偏移，因为我们没设置它的祖先元素的定位属性。
大家不妨试试看如果它有祖先元素呢？它又会是什么样子？
固定定位 fixed
元素相对浏览器的可视窗口进行偏移
不随着滚动条滚动
元素脱离文档流
这个主要作用就是用来放一些固定的广告啊 时时刻刻让你看得见
2462
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
