100字范文 > web前端(2)：了解CSS和常见的属性(常用选择器+盒子模型+浮动和定位)

web前端(2)：了解CSS和常见的属性(常用选择器+盒子模型+浮动和定位)

时间：2023-11-05 21:43:06

文章目录

一、什么是CSS二、CSS的三种样式及其优先级三、CSS基本选择器及其优先级四、其他常见的选择器五、选择器优先进阶六、css的常见属性(颜色、背景、字体、边框）七、内间距和外间距八、盒子模型九、文本属性十、布局属性1.display2.visibility和display区别十一、overflow十二、相对定位、绝对定位、固定定位及其层级关系1.相对定位2.绝对定位3.固定定位4.层级关系十三、简单的百度界面十四、小米商城

一、什么是CSS

CSS(Cascading Style Sheets)指层叠样式表;CSS是用来布局和美化网页的;CSS定义如何显示HTML元素;

二、CSS的三种样式及其优先级

<!DOCTYPE html><html><head><meta charset="utf-8"><title>css的三种写法样式</title><style type="text/css">div{width: 100px;height: 100px;background-color: red;}</style><link rel="stylesheet" type="text/css" href="./css/1.css"></head><body><div style="width: 100px;height: 100px;background-color: green"></div></body></html>

1.css

div{width: 500px;height: 300px;background: yellow;}

注意优先级：对于三种样式的css，我们采用就近原则，相同属性使用离标签最近的css，不同属性的也使用最近的css

三、CSS基本选择器及其优先级

①css三种基本选择器：标签选择器、ID选择器、类选择器

<!DOCTYPE html><html><head><meta charset="utf-8"><title>css基本的三种选择器</title><style type="text/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;}</style></head><body><div>标签选择器</div><div id="item1">id选择器</div><div class="box box1">类选择器</div></body></html>

②三种选择器的优先级

标签选择器<类选择器<id选择器谁的影响范围大谁的优先级小相同属性按照优先级使用，不同属性也按照优先级

<!DOCTYPE html><html><head><meta charset="utf-8"><title>选择器优先级</title><style type="text/css">.box{width: 200px;background-color: blue;}#item{background-color: yellow;}div{width: 100px;height: 200px;background-color: red;}</styl</style></head><body><div id="item" class="box"></div></body></html>

四、其他常见的选择器

<!DOCTYPE html><html><head><meta charset="utf-8"><title>关系选择器</title><style type="text/css">/*------后代选择器设置.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: '呀';}</style></head><body><div class="wrap"><div class="inner"><p>我是inner里的p</p></div><p>我是wrap里的p</p><span>我是wrap内部的span</span></div><p>我是最外层的p</p><span>我是最外边的span</span><div class="box">鼠标上来试试</div></body></html>

伪类选择器鼠标移上后：

五、选择器优先进阶

实际上，每个选择器对应的权值都不相同：

行间式：权值1000id选择器：权值100类选择器：权值10标签选择器：权值1

对于多个选择器并存，我们将每个样式对应的权值相加，谁的权值大，使用谁的效果

<!DOCTYPE html><html><head><meta charset="utf-8"><title>选择器优先级进阶</title><style type="text/css">#idd p{/*权值100+1*/color: red}.cla p{/*权值10+1*/color: green}</style></head><body><div id='idd' class="cla"><p>哈啊哈</p></div></body></html>

六、css的常见属性(颜色、背景、字体、边框）

1.颜色属性

<!DOCTYPE html><html><head><meta charset="utf-8"><title>CSS的常用属性</title><style type="text/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);}</style></head><body><div class="box"></div></body></html>

2.背景属性

<!DOCTYPE html><html><head><meta charset="utf-8"><title>背景属性</title><style type="text/css">/*----------背景图片------------*/.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;}</style></head><body><div class="box"></div><div class="box1"></div><div class="item"></div></body></html>

3.字体属性

<!DOCTYPE html><html><head><meta charset="utf-8"><title>字体属性</title><style type="text/css">/*默认字体大小 16px*/.box{/*大小*/font-size: 50px;/*加粗*/font-weight: bold;/*字体①所使用的电脑如果没此字体，则使用默认字体②如果第一个没有，则使用第二个字体③如果字体由多个单词组成，需要加引号*/font-family: 楷体,宋体;/*颜色*/color: blue;/*字体样式 italic倾斜，normal不倾斜*/font-style: italic;}</style></head><body><div class="box">蔡徐坤，打篮球真棒！</div></body></html>

4.边框属性

<!DOCTYPE html><html><head><meta charset="utf-8"><title>边框属性</title><style type="text/css">.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;}</style></head><body><div class="item"></div></body></html>

七、内间距和外间距

1.内间距

<!DOCTYPE html><html><head><meta charset="utf-8"><title>内间距</title><style type="text/css">/*设置元素*/.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;*/}</style></head><body><div class="box">1</div></body></html>

2.外间距

<!DOCTYPE html><html><head><meta charset="utf-8"><title>外间距</title><style type="text/css">.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;}}</style></head><body><div class="item1"></div><div class="item2"></div></body></html>

八、盒子模型

<!DOCTYPE html><html><head><meta charset="utf-8"><title>盒子模型</title><style type="text/css">*{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;}</style></head><body><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div></body></html>

九、文本属性

<!DOCTYPE html><html><head><meta charset="utf-8"><title>文本属性</title><style type="text/css">.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;}</style></head><body><div class="item">床前明月光，疑是地上霜。举头望明月，低头思故乡。</div><br><br><div class="item2">新闻列表</div></body></html>

十、布局属性

1.display

<!DOCTYPE html><html><head><title>布局属性</title></head><body><style type="text/css">*{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;}</style></body><ul><li><a href="">国产</a><div class="inner"></div></li><li class="item"><a href="">欧美</a><div class="inner"></div></li><li class="item"><a href="">日韩</a><div class="inner"></div></li><li class="item"><a href="">动漫</a><div class="inner"></div></li></ul></html>

2.visibility和display区别

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>div{width: 200px;height: 200px;}.item1{background: yellow;/*隐藏后不再占据位置*//*display: none;*//*隐藏后还会占据位置*/visibility: hidden;}.item2{background: red}</style></head><body><div class="item1">1</div><div class="item2">2</div></body></html>

十一、overflow

<!DOCTYPE html><html><head><meta charset="utf-8"><title>overflow</title><style type="text/css">/*overflow:超出部分visable：不隐藏auto：多出的部分自动加滚动条hidden：超出部分隐藏scroll：加个滚动条，无论元素有没有*/div{height: 200px;width: 200px;overflow: auto;}</style></head><body><div><img src="../day02_css/课堂回顾练习/摩洛哥.png"></div></body></html>

十二、相对定位、绝对定位、固定定位及其层级关系

1.相对定位

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>相对定位</title><style type="text/css">*{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;}</style></head><body><div class="wrap"><div class="item1"></div><div class="item2"></div></div></body></html>

2.绝对定位

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>绝对定位</title><style type="text/css">*{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;}</style></head><body><div class="wrap"><div class="item1">1</div><div class="item2">2</div></div></body></html>

3.固定定位

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>固定定位</title><style>body{height: 2000px;}.item1{width: 100px;height: 50px;text-align: center;line-height: 50px;background-color: green;/*固定定位/绑定定位*/position: fixed;left: : 20px;top: 200px;}</style></head><body><div class="item1">回到顶部</div></body></html>

4.层级关系

多种定位，越往后层级越高

如果想改变，在该层级元素加z-index：1

谁想在谁上边，谁的z-index:2值越大即可

十三、简单的百度界面

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">.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);}</style></head><body><div style="margin-left: 70px;margin-top: 20px"><input type="image" style="margin-left: 200px" name="photo" src="baidu.png" class="pic"><div class="box" ><select class="opt" name="info"><option>网页</option><option>音乐</option><option>视频</option><option>图片</option><option>小说</option><option>贴吧</option></select><input type="text" class="tex" name="sel" placeholder="请输入搜索信息"><button class="but"style="background: blue">百度一下</button></div><div style="margin-left: 350px;"><a href="">老干妈失火</a><a href="">人民币破7</a><a href="">母猪护理</a><a href="">乔萝莉全网被禁</a><a href="">七彩祥云</a><a href="">人类为文字献血</a><a href="">末日</a></div></div><hr><div class="div0"><div class="div1" style="margin-bottom: 13px;"><p>     hao123新闻     人民网     搜狐网     新浪网     网易     中国日报     人民日报     影视快报     人人网     百度网</p></div><div class="div1" style="height:190px;margin-bottom: 13px;"><p>     国产经典     新浪微博     欧美快播     腾讯游戏     凤凰资讯     产后护理     人民日报     澳门赌场     人人</p><p>     草船借箭     三顾茅庐     三气周瑜     人人自危     辕门射戟     三英吕布     一个顶两     北伐十年     黄盖挨打</p><hr style="color: rgba(100,150,100,0.2)"><p>     百度贴吧     新浪微博     搜狐热点     腾讯游戏     凤凰资讯     产后护理     人民日报     澳门赌场     人人</p><p>     草船借箭     三顾茅庐     三气周瑜     人人自危     辕门射戟     三英吕布     一个顶两     北伐十年     黄盖挨打</p></div><div class="div1" style="height:390px;"><p>     <a href="">视频</a>     新浪微博     搜狐热点     腾讯·游戏     凤凰资讯     产后护理     人民日报     澳门赌场     人人</p><p>     <a href="">新闻</a>     三顾茅庐     三气周瑜     人人自危     辕门射戟     三英吕布     一个顶两     北伐十年     黄盖挨打</p><p>     <a href="">小说</a>     新浪微博     搜狐热点     腾讯游戏     凤凰资讯     产后·护理     人民日报     澳门赌场     人人</p><p>    &nbsp<a href="">音乐</a>     三顾茅庐     三气周瑜     人人自危     辕门射戟     三英吕布     一个顶两     北伐十年     黄盖挨打</p><p>     <a href="">旅游</a>     新浪·微博     搜狐热点     腾讯游戏     凤凰资讯     产后护理     人民日报     澳门·赌场     人人</p><p>     <a href="">购物</a>     三顾茅庐     三气周瑜     人人自危     辕门射戟     三英吕布     一个顶两     北伐十年     黄盖挨打</p><p>     <a href="">体育</a>     新浪·微博     搜狐热点     腾讯游戏     凤凰资讯     产后护理     人民日报     澳门赌场     人人</p><p>     <a href="">医药</a>     三顾茅庐     三气周瑜     人人自危     辕门射戟     三英吕布     一个顶两     北伐十年     黄盖挨打</p></div></div></body></html>

十四、小米商城

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>小米商城</title><style type="text/css">*{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;}</style></head><body><div class="box1"><img src="小米.png" class="imga"><ul class="ul1"><li class="li1">小米手机<div class="inner1">小米5<br>小米6<br>小米7</div></li><li class="li1">红米手机<div class="inner1">小米5<br>小米6<br>小米7</div></li><li class="li1">电视<div class="inner1">小米5<br>小米6<br>小米7</div></li><li class="li1">笔记本<div class="inner1">小米5<br>小米6<br>小米7</div></li><li class="li1">家电<div class="inner1">小米5<br>小米6<br>小米7</div></li><li class="li1">路由器<div class="inner1">小米5<br>小米6<br>小米7</div></li></ul></div><hr style="color: black;font-weight: bold;"><div class="box2"><ul class="ul2"><li class="li2">    手机 电话卡     ><div class="inner2">这是手机和电话卡</div></li><li class="li2">    电视 大盒子     ><div class="inner2">这是电视和大盒子</div></li><li class="li2">   &nbsp平板 笔记本     ><div class="inner2">这是平板和笔记本</div></li><li class="li2">   &nbsp出行 穿和戴     ><div class="inner2">这里是出行和穿戴</div></li><li class="li2">   &nbsp智能 路由器     ><div class="inner2">这里是智能和路由器</div></li></ul><img src="电视.png" class="im"></div></body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。