干货很多,请耐心阅读😉
一、css
1.简介
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
2.基础性质
(1)层叠性
当对同一标签设置相同样式时,效果采取就近原则
<style>/* 样式冲突,采取的是就近原则 *//* 样式不冲突,不会层叠 */div {color: red;font-size: 12px;}div {color: pink;}</style>body部分:<div>长江后浪推前浪,前浪死在沙滩上</div>
根据就近原则,最后显示的为粉色,效果如下:
(2)继承性
子标签会继承父便签的某些样式,如文本颜色和字号
子元素会继承父元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性)
<style>div {color: purple;font-size: 14px;}</style>body部分:<div><p>龙生龙,凤生凤,老鼠的儿子会打洞</p></div>
效果如下:
二、选择器
1.标签选择器
标签选择器,顾名思义,在css样式中写标签,后面加花括号,里面写要修改的样式
代码如下:
<style>p {color: green;}div {color: pink;}</style>body部分:<p>男生</p><p>男生</p><p>男生</p><div>女生</div><div>女生</div><div>女生</div>
效果如下:
2.类选择器
你会发现,如果使用标签选择器,会使整个页面的这一标签全部改成某一样式,不能专一修改某一个标签,这时可以使用类选择器
使用方法:在css定义时使用点(英文状态)+样式名,调用时使用class=“样式名”
css部分:<style>.red {color: red;}.star-sing {color: green;}</style>body部分:<ul><li class="red">疯人院</li><li>斗牛</li><li>好想爱这个世界啊</li><li>与火星孩子的对话</li><li class="star-sing">七重人格</li></ul><div class="red">我也想变红色</div>
效果如下:
3.id选择器
与类选择不同的是定义时使用井号+样式名,调用时使用id=“样式名”,
注意:id选择器一个页面中只能调用一次!!!!
代码如下:
css部分;#pink {color: pink;}body部分:<div id="pink">迈克尔杰克逊</div>
效果如下:
4.通配符选择器(*)
可以将所有的标签都修改成设定的样式
代码如下
css部分:<style>* {color: red;}/* *这里把 span div body html li 等等的标签都改成了红色 */</style>body部分:<div>我的</div><span>我的</span><ul><li>还是我的</li></ul>
效果如下:
5.后代选择器
语法规范:
1.元素一 元素二 {样式说明} 表示:选择元素一里面的所有元素二
2.元素一和元素二中间用空格隔开
3.元素二可以是儿子,也可以是孙子
代码如下:
css部分:<style>/* 我想把ol里的小li选出来改为pink色 */ol li {color: deeppink;}ol li a {color: yellow;}.nav li a {color: skyblue;}</style>body部分:<ol>变态<li>我是ol 的孩子</li><li>我是ol 的孩子</li><li>我是ol 的孩子</li><li><a href="#">我是孙子</a></li></ol><ul><li>我是ul 的孩子</li><li>我是ul 的孩子</li><li>我是ul 的孩子</li><li><a href="#">不会变化的</a></li></ul><!-- 若想单独修改底下这个ul 的li 可在下面的ul加类名,再用后代选择器 --><ul class="nav"><li>我是ul 的孩子</li><li>我是ul 的孩子</li><li>我是ul 的孩子</li><li><a href="#">不会变化的</a></li><li><a href="#">不会变化的</a></li><li><a href="#">不会变化的</a></li></ul>
效果如下:
6.子元素选择器
语法规范:
1.元素一>元素二{样式说明}
2.最终选择的是元素二
下面片段修改的是我是儿子的样式(a为nav的子元素)
代码如下:
css部分:<style>.nav>a {color: red;}</style>body部分:<div class="nav"><a href="#">我是儿子</a><p><a href="#">我是孙子</a></p></div>
效果如下:
7.并集选择器
语法规范:
元素一元素二之间用逗号隔开,(多个标签并集一般一行一个,后面跟逗号)
任何形式的选择器都可作为并集选择器的一部分
代码如下:
css部分:<style>/*把熊大熊二改为粉色*/div,p {color: pink;}</style>body部分:<div>熊大</div><p>熊二</p><span>光头强</span><ul class="pig"><li>小猪佩奇</li><li>猪爸爸</li><li>猪妈妈</li></ul>
效果如下:
8.链接伪类选择器
css部分:<style>/* 1.未访问的链接 a:link 把没有点击过的(访问过的)链接选出来 */a:link {color: #333333; //灰色text-decoration: none;}/* 2. a:visited 选择点击过的(访问过的)链接 */a:visited {color: orange; }/* 3. a:hover 选择鼠标经过的那个链接 */a:hover {color: skyblue; }/* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */a:active {color: green; }</style>bpdy部分:<a href="#">小猪佩奇</a>
效果如下:
点击之前(未访问的链接):
点击之后:
鼠标经过:
按下未弹起(截图时无法显示鼠标的手,实际上是按下未松开状态):
三、盒子模型
1.第一类盒子模型
(1)组成
a.外边距(margin)
b.边框(border)
c.内边距(padding)
d.内容(width+height)
(2)外边距(margin)设置方法,(padding和border设置方法与margin设置方法相同)
外边距会有四个值,分别为margin-top/right/bottom/left
①当只给margin设置一个值(20px)的时候:
上下左右各有20px的外边距
css代码如下:
div {width: 200px;height: 200px;background-color: skyblue;margin: 20px;}
效果如图:
②当给margin设置两个值(10px,20px)的时候:
上下有10px的外边距,左右有20px的外边距
css代码如下:
div {width: 200px;height: 200px;background-color: skyblue;margin: 10px 20px;}
效果如图:
③当给margin设置三个值(5px,10px,20px)的时候:
上有5px的外边距,左右有10px外边距,下有20px外边距
css代码如下:
div {width: 200px;height: 200px;background-color: skyblue;margin: 5px 10px 20px;}
效果如图:
④当给margin设置四个值(5px,10px,15px,20px)的时候:
上有5px的外边距,右有10px外边距,下有15px外边距,左有20px外边距
简单来记就是:顺时针设置
css代码如下:
div {width: 200px;height: 200px;background-color: skyblue;margin: 5px 10px 15px 20px;}
效果如下:
通过上述设置你会发现,无论设置margin,padding还是border,都会撑大盒子的大小
拿当只给margin设置一个值(20px),width=200px,height=200px的时候为例子,你会发现盒子的实际大小被撑到了240*240,这时会影响布局时设置一行内多个盒子所占位置,不容易计算。
这时,可以利用第二类盒子模型
2.第二类盒子模型
其实就是在上方代码的基础上,添加一条css样式: box-sizing:border-box;
使得盒子大小不会受border,margin,padding影响
添加之前:
代码如下
* {box-sizing: border-box;}div {width: 200px;height: 200px;background-color: skyblue;border: 20px solid red;}
添加后:
3.应用及拓展
(1)内边距(padding)应用—撑开盒子
可用于导航栏字数不一样时撑开盒子,下面的代码设置到了.nav a中的padding
css部分:<style>.nav {height: 41px;background-color: #fcfcfc;border-top: 3px solid #ff8500;border-bottom: 1px solid #edeef0;line-height: 41px;}.nav a {display: inline-block;height: 41px;padding: 0px 20px;font-size: 12px;color: #4c4c4c;text-decoration: none;}.nav a:hover {background-color: #eee;color: #ff8500;}</style>body部分:<div class="nav"><a href="#">新浪导航</a><a href="#">手机新浪网</a><a href="#">移动客户端</a><a href="#">微博</a><a href="#">三个字</a></div>
效果如下:
(2)外边距(margin)应用
① 块级盒子水平居中对齐
当给块级盒子设置margin: 0 auto时,可实现水平居中对齐
css部分:<style>.header {width: 900px;height: 200px;background-color: pink;margin: 0 auto;}</style>body部分:<div class="header"></div>
效果如下:
② margin负值的巧妙运用
当布局网页页面的盒子设置border时会发现两个盒子中间的border会重叠加粗,影响效果
这时可以通过设置margin-left:一个负值实现不重叠
css部分:<style>ul li {position: relative; //相对定位float: left; //向左浮动list-style: none;width: 150px;height: 200px;border: 2px solid skyblue;margin-left: -2px;}</style>body部分:<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
添加后效果如下:
(3)边框(border)拓展
a.三角元素制作
①正方形中四个三角形
通过设置border的四个值,width: 0,height: 0来显示三角形,10px为想看到的三角元素的大小
<style>.box1 {width: 0;height: 0;border-top: 10px solid pink;border-right: 10px solid red;border-bottom: 10px solid blue;border-left: 10px solid green;}</style>body部分:<div class="box1"></div>
效果如下:
②一个三角形
通过设置整体的border。注意要将颜色改为transparent,然后根据想要的三角形朝向方向设置属性,如果想要朝下的三角,可以通过设置border-top颜色,如果想要朝上的三角,设置border-bottom颜色
css部分:<style>.box2 {width: 0;height: 0;border: 10px solid transparent;border-top-color: violet;margin: 100px auto;}</style>body部分:<div class="box2"></div>
效果如下:
③购物页面的价格栏的制作
通过定位和矩形红色部分相连,做出效果
代码如下:
css部分:.box1 {// 三角样例width: 0;height: 0;/* 1.只保留右边的边框有颜色 */border-color: transparent red transparent transparent;/* 2.样式都是solid */border-style: solid;/* 3.上边框宽度要大,右边框 宽度稍小, 其余的边框改为0 */border-width: 100px 50px 0 0 ;}.price {width: 160px;height: 24px;border: 1px solid red;margin: 0 auto;line-height: 24px;text-align: center;}.miaosha {// 左侧红色矩形部分position: relative;float: left;width: 90px;height: 100%;background-color: red;font-weight: 700;color: white;margin-right: 8px;}.miaosha i {//三角元素position: absolute;right: 0;top: 0;width: 0;height: 0;border-color: transparent #fff transparent transparent;border-style: solid;border-width: 24px 10px 0 0;}.orign {//右侧灰色部分font-size: 12px;color: gray;text-decoration: line-through;}</style>body部分:<div class="box1"></div><div class="price"><span class="miaosha">¥3620<i></i></span><span class="orign">¥5650</span></div>
效果如下(左侧为三角样例,右侧为购物价格栏):
b.圆角边框
通过设置border-radius这一属性,可以将边框边缘圆角化
代码如下
css部分:<style>.yuanxing {width: 200px;height: 200px;background-color: pink;/* border-radius: 100px; *//* 50%就是高度和宽度的一半 */border-radius: 50%;}.juxing {width: 300px;height: 100px;background-color: pink;/* 圆角矩形设置为高度的一半 */border-radius: 50px;}/* border-radius是一个简写属性,可以跟四个值,分别代表左上角,右上角,右下角,左下角 顺时针 *//* 跟两个值 对角线两个角相同 */.radius {width: 200px;height: 200px;/* border-radius: 10px 20px 30px 40px; */border-radius: 10px 40px;background-color: pink;}</style>body部分:1.圆形的做法:<div class="yuanxing"></div>2.圆角矩形的做法<div class="juxing"></div>3.可以设置不同的圆角<div class="radius"></div>
效果如下:
4.注意点
(1)外边距合并问题
当上下相邻的两个块元素相遇时,如果上面的元素有下外边距(margin-bottom),下面的元素有上外边距(margin-top),则他们之间的垂直边距为取两个值中的较大者
代码如下:
css部分:<style>.damao,.ermao {width: 200px;height: 200px;background-color: pink;}.damao {margin-bottom: 100px;}.ermao {margin-top: 200px;}</style>body部分:<div class="damao">大毛</div><div class="ermao">二毛</div>
则取两者最大的那个距离,即200px
效果如下:
(2)清除内外边距
实际开发中,你会发现当你在一个空白页面中写上123时,你并没有给他加内外边距,但是他会和浏览器页面最左上角(前提你没给他加浮动定位)有距离(红点标注位置),这个为默认的浏览器边距,通常会使用通配符选择器进行清除内外边距
未清除时如图:
清除代码:
<style>* {margin: 0;padding: 0;}</style>
效果如下: