文章目录
一、什么是CSS
- 一、什么是CSS
- 二、CSS的三种样式及其优先级
- 三、CSS基本选择器及其优先级
- 四、其他常见的选择器
- 五、选择器优先进阶
- 六、css的常见属性(颜色、背景、字体、边框）
- 七、内间距和外间距
- 八、盒子模型
- 九、文本属性
- 十、布局属性
- 1.display
- 2.visibility和display区别
- 十一、overflow
- 十二、相对定位、绝对定位、固定定位及其层级关系
- 1.相对定位
- 2.绝对定位
- 3.固定定位
- 4.层级关系
- 十三、简单的百度界面
- 十四、小米商城
- CSS(Cascading Style Sheets)指层叠样式表;
- CSS是用来布局和美化网页的;
- CSS定义如何显示HTML元素;
css的三种写法样式
div{
width: 100px;
height: 100px;
background-color: red;
}
1.css
div{
width: 500px;
height: 300px;
background: yellow;
}
注意优先级：对于三种样式的css，我们采用就近原则，相同属性使用离标签最近的css，不同属性的也使用最近的css
①css三种基本选择器：标签选择器、ID选择器、类选择器
选择器举例备注标签选择器标签名通过标签名来查找元素，影响范围最大，很少单独使用ID选择器# ID通过元素标签的id属性值来获取元素,id属性值不能重复，一个id值在一个html文件只出现一次，因此影响范围较小类选择器.类名一个标签的class值属性可以有多个值，一个class属性的值可以被多个标签使用，影响范围在标签选择器和id选择器之间
css基本的三种选择器
/*标签选择器*/
div{
width: 200px;
height: 200px;
background: pink;
}
/*id选择器*/
#item1{
width: 400px;
height: 100px;
background: blue;
}
/*类选择器*/
.box{
width: 333px;
height: 333px;
background: yellow;
}
.box1{
border: 3px solid red;
}
标签选择器
id选择器
类选择器
②三种选择器的优先级
- 标签选择器
选择器优先级
.box{
width: 200px;
background-color: blue;
}
#item{
background-color: yellow;
}
div{
width: 100px;
height: 200px;
background-color: red;
}
四、其他常见的选择器
关系选择器 /*------后代选择器 设置.wrap内的所有p标签的样式*/ .wrap p{ color: red; } /*----子选择器 设置.wrap的子元素的p的标签-----*/ .wrap>p{ color: blue; } /*--------并集选择器-----*/ .wrap>span,span{ color:pink; } /*------------伪元素选择器 hover-------*/ .box{ width: 100px; height: 100px; background-color: red } .box:hover{ width: 300px; height: 300px; background-color: green } /*-------------伪元素选择器----------*/ /*在box内部的前边插入一个字符*/ .box:before{ content: '你'; } /*在box内部的后边插入一个字符*/ .box:after{ content: '呀'; } 我是inner里的p 我是wrap里的p 我是wrap内部的span 我是最外层的p 我是最外边的span 鼠标上来试试
五、选择器优先进阶
伪类选择器鼠标移上后： 
实际上，每个选择器对应的权值都不相同：
- 行间式 ：权值1000
- id选择器 ：权值100
- 类选择器 ：权值10
- 标签选择器：权值1
对于多个选择器并存，我们将每个样式对应的权值相加，谁的权值大，使用谁的效果
选择器优先级进阶 #idd p{ /*权值100+1*/ color: red } .cla p{ /*权值10+1*/ color: green } 哈啊哈
六、css的常见属性(颜色、背景、字体、边框）
1.颜色属性
CSS的常用属性 .box{ width: 300px; height: 300px; /*十六进制颜色*/ /*background-color:#ff0000;红色*/ /*简写*/ /*background-color: #00f;*/ /*十进制颜色*/ /*background-color: rgb(255,0,0);*/ /*带透明度的颜色*/ background-color: rgba(100,100,100,0.1); }2.背景属性
背景属性 /*----------背景图片------------*/ .box{ width: 400px; height: 400px; border: 1px solid red; background-image: url(./img/徐坤篮球图.jpg); /*图片不会重复*/ background-repeat: no-repeat; /*图片坐标*/ background-position: 5px 5px; /*百分百在框里*/ background-size: 100% 100% } /*简写*/ .box1{ width: 400px; height: 400px; border: 1px solid red; /*最后是向右，向下偏移的量,注意是图片移动，不是框移动*/ background: url(./img/徐坤篮球图.jpg) no-repeat 10px 10px; } /*注意：简写不可和分开写混用，但是background-size是单独设置*/ /* 练习 */ .item{ width: 50px; height: 50px; border: 1px solid red; background: url(./img/0.jpg) no-repeat -4px -104px; } .item:hover{ background: url(./img/0.jpg) no-repeat -345px -270px; }
3.字体属性
字体属性 /*默认字体大小 16px*/ .box{ /*大小*/ font-size: 50px; /*加粗*/ font-weight: bold; /*字体 ①所使用的电脑如果没此字体，则使用默认字体②如果第一个没有，则使用第二个字体③如果字体由多个单词组成，需要加引号*/ font-family: 楷体,宋体; /*颜色*/ color: blue; /*字体样式 italic倾斜，normal不倾斜*/ font-style: italic; } 蔡徐坤，打篮球真棒！
4.边框属性
边框属性 .item{ width: 200px; height: 200px; /*简写，设置四个边框粗细，样式，颜色*/ /*border: 1px solid red;*/ /*单独设置*/ /*solid 实线 dotted 点状线 dashed虚线*/ border-top: 1px solid red; border-bottom: 2px dotted black; border-left: 3px groove green; border-right: 4px dashed yellow; }
七、内间距和外间距
1.内间距
内间距 /*设置元素*/ .box{ width: 200px; height: 200px; background: #e91e7a; /*非简写*/ /*padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px;*/ /*简写,四个值-遵循上右下左*/ /*padding:20px 10px 30px 40px;*/ /*简写，三个值-遵循上，(左右），下*/ /*padding: 20px 30px 40px*/ /*简写，两个值-遵循（上下），（左右）*/ padding:20px 30px; /*简写，一个值-四个值一样*/ /*padding: 30px;*/ } 1
2.外间距
外间距 .box{ width:200px; height: 300px; background: red; } /* .item{ width:200px; height: 300px; background: blue; border: 1px solid red; margin-top: 10px; margin-bottom: 10px; margin-right: 20px; margin-left: 30px;*/ /*水平自适应居中*/ /*margin: 20px auto;*/ /*margin为负值，可以应用于边框的合并*/ .item1,.item2{ width: 200px; height: 200px; border: 10px solid red; } .item2{ margin-top: -10px; } }
八、盒子模型
盒子模型 *{ margin:0px; padding: 0px; } .box1{ width: 100px; height: 100px; background: yellow; } /*但是会改变原来定义的大小*/ .box2{ width: 100px; height: 100px; background: yellow; border: 20px solid green; /*自动按原来的大小计算*/ box-sizing: border-box; } /*但是会改变原来定义的大小*/ .box3{ width: 100px; height: 100px; background: yellow; border: 20px solid green; padding: 20px; /*自动按原来的大小计算*/ box-sizing: border-box; } 1 2 3
九、文本属性
文本属性 .item{ width: 200px; height: 200px; border: 1px solid red; /*设置首行缩进*/ text-indent: 32px; /*文本水平对齐方式，一般用于单行文本*/ text-align: center; /*添加下划线*/ text-decoration: underline; /*添加上划线*/ text-decoration: overline; /*添加删除线*/ text-decoration: line-through; /*去除文本的划线*/ text-decoration: none; /*设置行高，设置于行与行之间的间距*/ line-height: 30px; } /*练习题*/ .item2{ width: 400px; height: 54px; border-top:1px solid red; border-bottom: 3px solid #666; font-size: 20px; font-weight: bold; font-family: 雅黑; line-height: 50px; text-indent: 30px; box-sizing: border-box; } 床前明月光， 疑是地上霜。 举头望明月， 低头思故乡。 新闻列表
十、布局属性 1.display
布局属性 *{margin:0;padding:0;list-style:none;} /* ul{ width:400px; border:1px solid red; }*/ ul li{ margin-top: 10px; width:100px; height:50px; border:1px solid pink; text-align:center; line-height: 50px; display:inline-block; box-sizing: border-box; background:#c4c4c4; } .item{ /*margin-left:-6px;*/ } ul li:hover{ background-color:pink; } .inner{ height:300px; background-color:green; display:none; } a{ text-decoration: none; } /* 注意： inner 必须是li直接子元素 */ ul li:hover .inner{ display:block; } 国产 欧美 日韩 动漫
2.visibility和display区别
Document div{width: 200px;height: 200px;} .item1{ background: yellow; /*隐藏后不再占据位置*/ /*display: none;*/ /*隐藏后还会占据位置*/ visibility: hidden; } .item2{background: red}12
十一、overflow
overflow /* overflow:超出部分 visable：不隐藏 auto：多出的部分自动加滚动条 hidden：超出部分隐藏 scroll：加个滚动条，无论元素有没有 */ div{ height: 200px; width: 200px; overflow: auto; }
十二、相对定位、绝对定位、固定定位及其层级关系 1.相对定位
相对定位 *{margin: 0;padding: 0;} .wrap{ width: 600px; height: 600px; border: 3px solid green; } .item1{ width: 200px; height: 200px; background: #f33; /*相对定位*/ position: relative; top: 200px; left: 400px; } .item2{ width: 200px; height: 200px; background: #00f; }
2.绝对定位
绝对定位 *{margin:0;padding:0;} .wrap{ width: 400px; height: 400px; border: 1px solid red; margin-left: 100px; /*position: relative;*/ } .item1,.item2{ width: 100px; height: 100px; } .item1{ background: yellow; /*绝对定位*/ position: absolute; top: 200px; left: 200px; } .item2{ background: blue; } 1 2
3.固定定位
固定定位 body{ height: 2000px; } .item1{ width: 100px; height: 50px; text-align: center; line-height: 50px; background-color: green; /*固定定位/绑定定位*/ position: fixed; left: : 20px; top: 200px; }回到顶部
4.层级关系
多种定位，越往后层级越高 如果想改变，在该层级元素加z-index：1 谁想在谁上边，谁的z-index:2值越大即可
十三、简单的百度界面.box{ width: 600px; height: 50px; /*padding: 1px;*/ border: 1px solid blue; display: inline-block; } a{ color: green; } .but,.opt,.tex{ height: 50px; box-sizing: border-box; border: 0px; } .but{ height: 50px; width: 100px; margin-left: -5px; color: white; } .opt{ width: 60px; } .tex{ height: 48px; margin-left: -5px; width: 440px; font-size: 18px; } .pic{ width: 148px; height: 48px; display: inline-block; } .div0{ width: 1350px;height: 800px; background: rgba(100,100,100,0.1);margin-top: -8px; } .div1{ background: white; margin-left: 300px; margin-right: 250px; width: 800px; height: 50px; border: 1px solid rgba(100,150,100,0.2); } 网页 音乐 视频 图片 小说 贴吧 百度一下 老干妈失火 人民币破7 母猪护理 乔萝莉全网被禁 七彩祥云 人类为文字献血 2020末日 hao123新闻 人民网 搜狐网 新浪网 网易 中国日报 人民日报 影视快报 人人网 百度网 国产经典 新浪微博 欧美快播 腾讯游戏 凤凰资讯 产后护理 人民日报 澳门赌场 人人 草船借箭 三顾茅庐 三气周瑜 人人自危 辕门射戟 三英吕布 一个顶两 北伐十年 黄盖挨打 百度贴吧 新浪微博 搜狐热点 腾讯游戏 凤凰资讯 产后护理 人民日报 澳门赌场 人人 草船借箭 三顾茅庐 三气周瑜 人人自危 辕门射戟 三英吕布 一个顶两 北伐十年 黄盖挨打 视频 新浪微博 搜狐热点 腾讯·游戏 凤凰资讯 产后护理 人民日报 澳门赌场 人人 新闻 三顾茅庐 三气周瑜 人人自危 辕门射戟 三英吕布 一个顶两 北伐十年 黄盖挨打 小说 新浪微博 搜狐热点 腾讯游戏 凤凰资讯 产后·护理 人民日报 澳门赌场 人人 音乐 三顾茅庐 三气周瑜 人人自危 辕门射戟 三英吕布 一个顶两 北伐十年 黄盖挨打 旅游 新浪·微博 搜狐热点 腾讯游戏 凤凰资讯 产后护理 人民日报 澳门·赌场 人人 购物 三顾茅庐 三气周瑜 人人自危 辕门射戟 三英吕布 一个顶两 北伐十年 黄盖挨打 体育 新浪·微博 搜狐热点 腾讯游戏 凤凰资讯 产后护理 人民日报 澳门赌场 人人 医药 三顾茅庐 三气周瑜 人人自危 辕门射戟 三英吕布 一个顶两 北伐十年 黄盖挨打
十四、小米商城
小米商城 *{margin:0;padding: 0;list-style: none;} /*侧边导航栏*/ .box2{ margin-top: 10px; margin-left: 30px; width: 200px; background: rgba(0,0,0,0.3); position: relative; } .ul2 .li2{ width: 200px; height: 30px; color: white; font-weight: 600px; padding-top: 20px; padding-bottom: 20px; } .ul2 .li2:hover{ background: #ff5722; } .inner2{ width: 990px; height: 350px; background: rgba(100,200,200,1); font-size: 60px; text-align: center; position: absolute; top:0; left: 200px; display: none; } .ul2 .li2:hover .inner2{ display:block; position: absolute; z-index: 1; } .im{ position: absolute; top: 0px; left: 200px; } /*上部导航栏*/ .box1{ width: 800px; margin-top: 120px; margin-left: 100px; margin-bottom: 10px; } .ul1 .li1{ width:100px; height:55px; border:1px solid pink; text-align:center; line-height: 50px; display:inline-block; box-sizing: border-box; background:#c4c4c4; } .li1{ margin-left:-6px; } .ul1 .li1:hover{ background-color:pink; } .inner1{ width: 99px; height:300px; background-color:green; display:none; position: absolute; z-index: 1; } /* 注意： inner 必须是li直接子元素 */ .ul1 .li1:hover .inner1{ display:block; float: left; } .imge{ float: left; } .ul1{ float: right; } .item1{ width: 203px; height: 53px; } 小米手机 小米5小米6小米7 红米手机 小米5小米6小米7 电视 小米5小米6小米7 笔记本 小米5小米6小米7 家电 小米5小米6小米7 路由器 小米5小米6小米7 手机 电话卡 > 这是手机和电话卡 电视 大盒子 >这是电视和大盒子 平板 笔记本 >这是平板和笔记本 出行 穿和戴 >这里是出行和穿戴 智能 路由器 >这里是智能和路由器
