css入门
css
层叠样式表,作用是为标签加效果
<div style="background: red">123</div>
基本选择器
元素选择器
标签名称{css属性:值}
div{width:100px;}
id选择器
id{}
html代码:
<div id="d1">
</div>
css写法:
#d1{
background-color: green;
width: 100px;
height: 100px;
}
类选择器
.class1{属性:值}
html代码:
<div id="d1" class="c1">
baby
</div>
<div id="d2" class="c2">
热巴
</div>
<div id="d3" class="c1">
唐艺昕
</div>
css写法:
.c1{
background-color: green;
width: 100px;
height: 100px;
}
属性选择器
html代码:
<div id="d5" class="c1" xx="ss">
baby
</div>
<div id="d2" class="c2" xx="kk">
热巴
</div>
css写法:
[xx]{
/*属性查找*/
background-color: green;
width: 100px;
height: 200px;
}
[xx='ss']{
/*属性带属性值查找*/
background-color: green;
width: 100px;
height: 200px;
}
后代选择器
html代码:
div id="d1" class="c1" xx="ss">
<span>
<a href="http://www.baidu.com">baby</a>
</span>
</div>
<div id="d2" class="c2" xx="kk">
<a href="http://www.baidu.com">热巴</a>
</div>
<div id="d3" class="c1">
唐艺昕
</div>
<a href="http://www.baidu.com">xxxxxxx</a>
div a{ color: yellow;}
组合选择器
div,a{ color: yellow;}
html代码:
div id="d1" class="c1" xx="ss">
<span>
<a href="http://www.baidu.com">baby</a>
</span>
</div>
<div id="d2" class="c2" xx="kk">
<a href="http://www.baidu.com">热巴</a>
</div>
<div id="d3" class="c1">
唐艺昕
</div>
<a href="http://www.baidu.com">xxxxxxx</a>
css代码:
注意:a标签字体颜色设置,必须找到a标签才能设置
#d1 a,#d3 a{
background-color: pink;
color:yellow;
}
css样式引入方式
head标签中引入
<style>
/* 选择器{css属性名称:属性值;css属性名称:属性值;} */
div{ 用了基本选择器中的元素选择器
width: 200px;
height: 200px;
background-color: red;
}
</style>
给所有div标签加样式
外部文件引入
（工作中常用的）
创建一个css文件,stylesheet文件,比如test.css文件。里面写上以下代码
div{
/* css注释 */
width: 200px;
height: 200px;
background-color: red;
}
在想使用这些css样式的html文件的head标签中写上下面的内容
<link rel="stylesheet" href="test.css"> href对应的是文件路径
内联样式
<div style="background-color: red;height: 100px;width: 100px;"></div>
multiple="multiple"?
css样式相关
display属性
改变标签属性:
inline: 将块级标签变成了内联标签
block:将内联标签变成块级标签
inline-block: 同时具备内联标签和块级标签的属性,也就是不独占一行,但是可以设置高度宽度
none: 设置标签隐藏 （了解，后面用）
html代码
<span>
我是span标签
</span>
<div class="c1">
鹅鹅鹅,曲项向天歌!
</div>
<div class="c2">
白毛浮绿水
</div>
css写法
span{display: block;} 将内联标签变成块级标签
.c1{
background-color: red; 内容背景颜色
height: 100px; 内容背景高度
width: 100px; 内容背景宽度
display: inline; 将块级标签变成内联标签
/*display: inline-block;*/ 同时具备内联标签和块级标签的属性
}
颜色设置
英文单词:red;
十六进制: #ff746d;
rgb: rgb(155, 255, 236);
背景颜色透明度: rgba(255, 0, 0,0.3);
单纯的就是颜色透明度
标签透明度（例如背景图片透明度）: opacity: 0.3;
0到1的数字,这是整个标签的透明度
盒子模型
标签占空间总大小=margin+border+padding+content
html代码
<div>
窗前明月光
</div>
css写法
div{ width: 200px; 内容宽度
height: 100px; 内容高度
background-color: rgba(255, 0, 0,0.3); 内容背景颜色
background-image: url("fage.png"); 内容背景图片 url写图片路径,也可以是网络地址路径
margin: 10px 15px 外边距:上下 左右 距离无颜色
border: 4px solid red; 边框:大小 样式 颜色
padding: 4px 2px 6px 8px; 上4右2下6左8 内边距
}
margin 外边距
距离其他标签或者自己父级标签的距离
html代码
<div>
窗前明月光
</div>
<div class="c1">
<div class="c2">
</div>
</div>
css写法
.c1{
background-color: red;
height: 100px;
width: 100px;
/*margin: 10px 15px;*/ 上下10，左右15
margin-left: -10px;
}
.c2{
background-color: green;
height: 20px;
width: 20px;
/*margin: 10px 15px;*/
margin-left: 20px;
}
让外边距为零
body{
margin: 0;
}
border 边框
html代码
<div>
窗前明月光
</div>
css写法
边框简写方式,对四个边框进行设置
<div style="border:1px solid red; "> /*宽度/样式/颜色*/
窗前明月光
</div>
order-left: 1px solid green; 单对左边边框设置
border-top: 1px solid blue; 上边边框
细写
border-width: 5px; 边框宽度
border-style: dashed; 边框样式
border-color: aqua; 边框颜色
padding 内边距
内容和边框之间的距离
html写法
<div style="padding:1px solid red; "> /*宽度/样式/颜色*/
窗前明月光
</div>
padding: 6px 8px; 上下6左右8
padding: 4px 2px 6px 8px; 上4右2下6左8
padding-left: 20px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
content: 内容部分
背景
html代码
<div>
窗前明月光
</div>
css写法
background-color: #ff746d; 背景颜色
background-color: rgba(255, 0, 0,0.3);背景颜色
background-image: url("fage.png"); url写图片路径,也可以是网络地址路径
background-repeat: no-repeat; 不重复
background-repeat: repeat-y; y方向上
background-position: right top; 右上
（lift top,center top,right top,center bpttom）
background-position: 100px 50px; 离左边边多少,离右边多少 一般通过css设置
简写方式:
background: #ff0000 url("fage.png") no-repeat right bottom;
高度宽度
css写法:
div{
height: 100px;
width: 100px;
background-color: pink;
}
span{ ！！！行级标签不能设置高度宽度
height: 100px;
width: 100px;
background-color: green;
}
可以设置百分比，会按照父级标签的高度宽度来计算
<div class="c1"><div class="c2">234</div></div>
css写法:
.c1{
width: 200px;
height: 100px;
background: red;
}
.c2{
width: 50%;
height: 50%;
background: gold;
}
字体相关
html代码
<div>
窗前明月光
</div>
css写法
font-size: 50px; /* 默认字体大小是16px */
color:green; /* 字体颜色 */
font-family: '楷体', '宋体'; 浏览器如果不支持第一个选第二个。。。
font-weight: 400; /* 字体粗细 100-900,默认是400 */
字体对齐
字体对齐
html代码:
<div>
窗前明月光
</div>
css写法
div{ height: 100px;
width:200px;
background-color: yellow;
text-align: center; 水平居中
line-height: 100px; 和height高度相同,标签文本垂直居中
/*垂直居中*/
text-align: right;右对齐
浮动
浮动的元素,不独占一行,并且可以设置高度宽度
html代码
<div class="cc">
<div class="c1"></div>
<div class="c2"></div>
</div>
<div class="c3"></div>
scc写法
body{ margin: 0; } 要浮动,先让默认为8的外边距为0
c1{
background-color: red; height: 100px;
width: 200px; float: left;
}
.c2{
background-color: green; height: 100px;
width: 200px; float: right;
}
.c3{
background-color: pink;
height: 100px;
width: 100%;}
塌陷解决
父级标签没有高度了,子标签一浮动,会让下面的标签顶上来
方式1：给父级标签加高度 不常用
方式2：清除浮动(clear属性) 不常用
.c3{
background-color: pink; height: 100px;
width: 100%;
clear: both; （这个标签上面不允许有浮动的元素）
}
方式3：子标签底下加一个空白的带clear属性的div标签 常用
html代码:
<div class="cc clearfix">
<div class="c1"></div>
<div class="c2"></div>
<div style="clear: both;"></div>
</div>
<div class="c3"></div>
方式4:div标签后面用after拼一个内容为空的带clear属性的块
需要先用伪元素选择器
html代码:
<div class="cc clearfix">
<div class="c1"></div>
<div class="c2"></div>
</div>
<div class="c3"></div>
css代码:
.clearfix:after{
content:''; 设置内容
display:block; 设置块
clear:both; 设置clear属性
}
伪元素 after
html代码:
<div>
一段文字
<div>
css代码:
div{
background-color:pink;
height:100px;
width:200px;}
div:after{
content:'?';
color:white;}
伪类 hover
html代码:
<divclass="c1">
</div>
css写法:
.c1{
background-color:red;
height:300px;
width:300px;}
.c1:hover{ /*鼠标悬浮时设置效果*/
/*background-color:green;*/
background-image:url("a.png");
cursor:pointer;} pointer 手
default 箭头，crosshair 十字，progress 箭头和沙漏
悬浮显示其他标签效果
html代码:
<divclass="c1">
<divclass="c2"> </div>
</div>
css写法:
.c1{background:black;
height:400px;
width:400px;
}
.c2{background:aqua;
height:40px;
width:40px;
display:none; 改display为隐藏属性
}
.c1:hover.c2{
display:block; 鼠标悬浮时显示c2,改display为块属性
}
positon 定位
做一些小的范围布局
html代码:
<div class="cc ">
<div class="c1"></div>
<div class="c2"></div>
</div>
<div class="c3"></div>
static 静态定位
也就是标签默认
relative 相对定位
相对于父级标签移动,原来的位置还占着,不会造成下面的标签顶上去的情况
css代码:
position:relative;
left:100px; 离左边
top:-100px; 离上面
/*bottom:*/ 离下面
/*right:*/ 离右边
absolute 绝对定位
相对于父级标签移动,原来的位置不占着,会造成下面的标签顶上去的情况
css代码:
position:absolute;
top:20px;
left:80px;
fixed 固定定位
按照浏览器窗口的位置进行移动
html代码:
<spanclass="s1"><ahref="">返回顶部</a></span>
css代码:
.s1{
position:fixed;
left:40px;
bottom:20px;
}
优先级
!important>行内样式>ID选择器>类选择器>标签
越精准的定位优先级越高
继承
标签
类
id
!important
无敌
练习（下周一之前完成即可）：
通过html和css完成小米商城首页的开发,暂不需要完成动态效果,有页
面展示效果就可以（https://www.mi.com/）
注意：前端页面效果可以通过很多种方式实现，没有标准答案，大家
可以参考小米官网源码，也可以根据自己想法去实现
做一篇有温度的技术博客
给人奋斗的热意
和生活的暖意
