# css
Cascading层叠 Style样式 Sheet表，层叠样式表，css技术用来美化html页面，html相当于盖房子，css相当于装修，使用css可以把样式代码和html分离
# html页面中引入css的方式
- 内联样式：在标签的style属性中引入css,不推荐使用
<div style="color: red; border: 2px solid blue">我是一个div</div>
我是一个div
- 内部样式通过style标签引入css,可以在当前页面复用，学习时经常使用，工作中不推荐使用，因为不能多页面复用
<head>
<style type="text/css">
h2{
color: yellow;
background-color:red;
}
</style>
</head>
<body>
<h2>通过style标签引入css</h2>
<h2>第二个h2</h2>
</body>
- 外部样式：通过link标签引入外部css样式文件，可多页面复用，推荐工作中使用,需要单独创建样式文件
引入的first.css文件
h2{
color: blue;
}
<head>
<!-- 引入外部css文件 rel=relation-->
<link rel="stylesheet" href="first.css">
</head>
<body>
<h3>通过link标签引入样式文件</h3>
</body>
# 验证优先级 多种引入方式操作同一个标签，以那个为准
- 内联优先级最高
- 内部和外部样式同时存在，则就近原则(后执行生效，起始就是进行了覆盖)
- 标签默认效果优先级最低
# 选择器
选择器可以帮助我们选中需要添加样式的标签
- 标签名选择器：通过标签名的名称找到指定标签
格式：
元素名{ }
- 类选择器：通过标签的class属性值选中指定标签,多个标签可以有相同的class值
格式
<div class="d1">div1</div>.d1{ }
- id选择器: 通过id找到标签，一个html文件中id不能重复
格式：
<div id="divid">id选择器</div>#divid{ color:blue; }
- 派生选择器（后代选择器）：类似于路径，找到符合要求的标签，会匹配所有的后代标签
- 格式：
ul li a{
color:purple;
}
<ul>
<li>北京</li>
<li><a>上海</a></li>
<li><span><a>广州</a></span></li>
</ul>
- 子元素选择器：和后代类似，但是只能获得子元素
- 格式：ul>li>a{}
ul>li>a{
clolr:red;
}
<h2>子元素选择器</h2>
<a>城市</a>
<ul>
<li>北京</li>
<li><a>上海</a></li>
<li><span><a>广州</a></span></li>
</ul>
- 分组选择器：可以将多种选择器结合到一起，用来统一设定样式
- 格式：
h3,#fz,.c{
color:pink;
}
<h3>分组选择器</h3>
<div id="fz">分组div</div>
<span class="c">分组span</span>
- 伪元素选择器：伪元素选择器选择的是元素的状态
- 状态分为以下几种
- link 表示元素未被点击时的状态
- hover 表示鼠标悬停时的状态
- active 表示元素被点击时的状态
- visited 表示元素被点击后的状态
- 格式：#id:hover{ }
#wys:hover{
color:red;
}
<h3>伪元素选择器</h3>
<span id="wys">伪元素选择器</span>
# css常用属性
# 布局相关
- 设置宽高： width和height 赋值像素或百分比,宽度可以通过百分比设置，高度不生效
- 设置位置：
- 外边距 指当前元素距父元素或相邻元素的距离
- 格式：
margin-top(left,right,bottom)
margin:10px 四个外边距值都为10px
margin:10px 20px 上下10px 左右20px
margin: 0px auto 上下0 左右居中
margin: 10px 20px 30px 40px 上右下左
- 内边距：元素内容距元素边框的距离,改变内边距的值，元素的宽高会随着改变
- 浏览器会默认给一些元素添加内边距或外边距，所以工作的时候会使用一下的代码，把默认内外边距清零，从而达到不同浏览器效果统一的目的
#{
padding:0;
margin:0;
}
- 边框：可以为元素上下左右四个方向设置不同的边框效果。
- 格式：border:1px solid red;(宽度，线形，颜色)
# 盒子模型
css渲染页面的时候，使用了一种规则，就是盒子模型，盒子模型包括12个数值，分别是：外边距的上下左右，内边距的上下左右，边框的上下左右
- 一个元素在页面中所占宽度的公式： 左外边距+左边框的宽度+左内边距+内容宽度+右内边距+右边框的宽度+右外边距
# 盒子模型显示元素的注意事项
- 块级元素
- 默认占一行，宽度默认100%，高度默认为内容高度
- 上下相邻的两个块级元素，上下外边距会有坍塌效果，会取两个外边距的最大值
- 行内元素
- 默认多个行内元素占一行
- 不可以设置宽高，宽高为内容的宽高
- 给行内元素设置左右外边距/边框/内边距都会生效，上下的不生效，或显示异常。
# 颜色赋值
- 赋值方式
<head>
<style type="text/css">
div{
width: 200px;
height: 200px;
/* 1.通过颜色名称赋值 */
background-color: red;
/* 2.通过6位的16进制赋值 ff=255
每两个值表示一个颜色 红绿蓝 */
background-color: #E89AA8
/* 3. 3位的16进制写法*/
bacground-cocol:#0f0
/* 4.通过rgb 10进制赋值 */
background-color:rgb(255,0,0);
/* 5.通过rgb 10进制赋值 带透明值 a=alpha */
background-color: rgba(0,0,255,1);
}
#small{
width: 100px;
height: 100px;
background-color: rgba(255,255,0,1);
}
</style>
</head>
<body>
<div>颜色div
<div id="small"></div>
</div>
</body>
# 背景图片
- 给元素设置背景图片，图片不会占用内容的位置
<head>
<style type="text/css">
.d1{
width: 300px;
height: 300px;
background-color: yellow;
background-image: url("timg2.jpg");
background-size: 100px 100px;
background-repeat: no-repeat;
background-position: center bottom;
/* 百分比控制位置 第一个值水平 第二个值垂直*/
background-position: 10% 80%;
/* 通过像素控制位置 */
background-position: 10px 30px;
/* 通过bg-clip控制背景显示区域,边跨盒、内边距框、内容框 */
background-clip: border-box/paading-box/content-box/;
}
</style>
</head>
<body>
<div class="d1">背景div</div>
</body>
# 文本相关属性
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.d1{
width: 250px;
height: 70px;
background-color: yellow;
color: red; /* 字体颜色 */
font-size: 30px; /* 文本大小 */
text-align: right;/* 文本对齐 */
/* 通过设置行高 让文本上下居中 */
line-height: 70px;
/* 文本修饰 如果值为none,是将自带的去除掉 */
text-decoration: underline;
font-family: cursive;/* 字体设置 */
font-weight: bolder;/* 字体粗细 */
font-style: italic;/* 字体样式 */
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<div class="d1">文本测试div</div>
<a href="http://www.baidu.com">这是超链接</a>
</body>
# 学子商城首页练习代码见：
- 圆角属性：border-radius: 2px;
- 光标样式：cursor: pointer;
# 溢出属性 overflow
- visiable 溢出部分可见
- hidden 溢出部分隐藏
子元素使用浮动后将不占用空间，这时父元素高度为将为零。通过添加父元素并设置 overflow 属性可以清除浮动。（并不会影响到子元素的浮动）
将会使用父元素产生 BFC 机制，即父元素的高度计算会包括浮动元素的高度。 - scroll 溢出部分滚动显示
# display属性
该属性控制元素的显示方式
- block: 块级元素的默认值
- inline：行内元素的默认值
- inline-block: 一行可以显示多个，也可以修改宽高和上下的内外边距。
<head>
<style type="text/css">
div{
background-color: blue;
display: inline;
}
span{
border: 1px solid red;
display: block;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<span>span1</span>
<span>span2</span>
<span>span3</span>
</body>
# 定位
# 文档流定位
在不进行任何设置的时候，默认为文档流定位。元素的定位为从上到下，从左到右的方式控制元素的位置
# 浮动定位
- 通过float属性让元素脱离文档流定位，向当前所在行的左侧或右侧浮动，浮动到边框或碰到另外一个浮动元素时停止，由于浮动脱离文档流，浮动元素后面的其他元素会自动填充浮动元素原来的位置
- 使用clear属性实现文档流不跟随浮动：clear: left/rigth/both/none/inherit
# 形状浮动
- 通过形状浮动可以让内容围绕图片，类似于我们在word中的环绕排版。要求图片是有透明度的PNG格式。
- shape-outside：margin-box/padding-box/border-box/content-box
- 外边距环绕/内边距环绕/边框环绕/内容环绕
# 通后浮动把无序列表的内容横向排列
<head>
<style type="text/css">
li{
width: 150px;
height: 50px;
background-color:purple;
border: 1px solid red;
float: left;
list-style-type: none;
margin-left: 30px;
}
</style>
</head>
<body>
<ul>
<li>我是元素一</li>
<li>我是元素二</li>
<li>我是元素三</li>
<li>我是元素四</li>
</ul>
</body>
# position定位
static: 静态定位 （默认）就是指文档流定位,不能使用tlrb控制位置
fixed：固定定位，固定在窗口的某个位置，不会因为内容的滚动而改变位置，通过top,left,right,bottom四个属性控制位置（相对于整个窗口），通过z-index控制整个层级。值越大越靠上默认为0，使用固定定位允许设置宽高，和通过top,left,right,bottom四个属性控制位置，否则可能会出现显示bug
<style type="text/css">
#top{
height: 100px;
width: 100%;
background-color: red;
position: fixed;
/* 通过top left right bottom控制位置，
否则可能会出现bug */
top: 0px;
left: 0px;
z-index: 3;
}
#content{
margin-top: 150px;
height: 2000px;
background-color: yellow;
z-index: 1;
}
#small{
height: 50px;
width: 50px;
background-color: blue;
top: 75px;
right: 50px;
position: fixed;
z-index: 2;
}
</style>
</head>
<body>
<div id="top">我是top</div>
<div id="small"></div>
<div id="content"></div>
</body>
- relative： 相对定位,也是通过top,left,right,bottom四个属性控制位置，元素不会脱离文档流，trlb相对的是元素的初始位置
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: yellow;
}
#div2{
background-color: green;
position: relative;
}
#div2:HOVER{
top: 10px;
left: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</body>
- sbsolute： 绝对定位,也是通过top,left,right,bottom四个属性控制位置，元素会脱离文档流,t l r b 相对于祖先元素中使用了position（不能是static)定位的元素如果父级元素都没有设置除static外的position：则相对于body定位
<style type="text/css">
#big{
width: 500px;
height: 500px;
background-color: red;
margin-left: 50px;
margin-top: 50px;
overflow: hidden;
}
#middle{
width: 300px;
height: 300px;
background-color: yellow;
margin-left: 30px;
margin-top: 30px;
position: relative;
}
#small1{
width: 100px;
height: 100px;
background-color: green;
position: absolute;
top: 10px;
}
#small2{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="big">
<div id="middle">
<div id="small1"></div>
<div id="small2"></div>
</div>
</div>
</body>
# 定位总结：
- float：脱离文档流，需要把纵向改横向排列时使用，float最多只有2层。
- fixed: 脱离文档流，需要固定在窗口中时使用
- relative: 不脱离文档流，位置改变不会影响其他后面的元素
- absolute：脱离文档流，有弹出窗口时使用，不会影响页面布局(需要祖先元素先做position定位，非static)
# css的三个特性
包括：继承性，重叠性，优先级
- 继承性：子元素可以使用父元素的部分属性
- 只能继承color/font-开头/text-开头/line-开头这些属性。
- 继承不仅仅儿子元素可以继承，所有的后代元素都可以继承。
- a标签文字颜色和下划线是不能继承的，h1-h6字体的大小不会继承
层叠性：通过不同的选择器可以多次指向同一个元素，如果作用的属性不同，则全部生效，如相同则依据优先级进行控制。
优先级：
- 是否直接选中？继承属于简介选中，此时直接选中的生效
- 如果是相同选择器，后执行的生效。
- 不同选择器：id>类>标签名>继承>默认效果
# 常见错误
- 把多个元素显示到一行
- 通过float浮动定位后的元素，不受纵向对齐方式的影响，可以随意调整外边距
- 行内或行内块元素，受纵向对齐方式影响，不可以随意调整上下外边距
- 通过相对定位改变元素的位置最简单快捷
- 如果元素内部的所有子元素全部浮动,则元素的高度为0（在父元素不设置高度的前提下，父元素的高度就会以子元素的内容高度为高度)，通过overflow=hidden属性，就算子元素浮动了也能识别内容的高度。
- 总结：元素的所有子元素浮动后，元素高度为0