Day28,29,30 CSS

    科技2022-07-20  114

    HTML+CSS+JavaScript

    结构+表现+交互

    一、什么是CSS

    如何学习

    css是什么css怎么用(快速入门)CSS选择器(重点+难点)美化网页(文字,阴影,超链接,列表,渐变…)盒子模型浮动定位网页动画(特效)

    1.1、什么是CSS

    Cascading Style Sheet 层叠样式表

    CSS:表现(美化网页)

    字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…

    1.2、发展史

    CSS1.0

    CSS2.0 DIV(块)+CSS,HTML与CSS结构分离的思想,网页变得简单,SEO

    CSS2.1 浮动,定位

    CSS3.0 圆角,阴影,动画… 浏览器兼容性~

    1.3、快速入门

    style

    基本入门

    <head> <meta charset="UTF-8"> <title>Title</title> <!--规范,style可以写css代码,每一个声明,使用分号结尾。 语法: 选择器{ 声明1; 声明2; 声明3; } --> <style> h1{ color: #9932cc; } </style> </head> <body> <h1>我是标题</h1> </body>

    建议使用这种规范

    CSS的优势:

    内容和表现分离。网页结构表现统一,可以实现复用。样式十分的丰富。建议使用独立于html的css文件利用seo,容易被搜索引擎收录!Vue框架不易被搜索引擎收录!

    1.4、CSS的4种导入方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--内部样式--> <style> h1 { color: green; } </style> <!--外部样式--> <link rel="stylesheet" href="css/style.css"> </head> <body> <!--优先级:就近原则--> <!--行内样式:在标签元素中,编写一个style属性,编写样式即可--> <h1 style="color: red;xxx">我是标题</h1> </body> </html>

    拓展:外部样式的两种写法

    链接式:

    html

    <link rel="stylesheet" href="css/style.css"> 导入式:

    @import 是css2.1特有的

    <!--导入式--> <style> @import url("css/style.css"); </style>

    二、选择器

    作用:选着页面上的某一个或者某一类元素

    2.1、基本选择器

    标签选择器:选择一类标签 标签{}类选择器 class:选择所有class属性一致的标签,可以跨标签 .类名{}id 选择器:全局唯一! #id名{} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*id选择器:id必须保证全局唯一 #id名称{} 不遵循就近原则,固定的 id选择器>class选择器>标签选择器 */ #jyw1 { color: green; } .style1{ color: darkorchid; } h1{ color: aqua; } </style> </head> <body> <h1 id="jyw1" class="style1">标题1</h1> <h1 class="style1" >标题2</h1> <h1 class="style1">标题3</h1> <h1 id="jyw4">标题4</h1> <h1 id="jyw5">标题5</h1> </body> </html>

    2.2、层次选择器

    后代选择器:在某个元素的后面。祖爷爷 爷爷 爸爸 你,全包括。 /*后代选择器*/ body p { background: green; } 子选择器,一代,只管一代人。 /*子选择器*/ body>p{ background: green; } 相邻兄弟选择器 同辈 /*相邻兄弟选择器,目标class下面的1个!*/ .active +p{ background: green; } 通用选择器 /*通用兄弟选择器:当前选中元素和向下所有兄弟元素!*/ .active ~ p{ background: green; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器*/ p{ background: green; } /*后代选择器。例子:body下所有p标签*/ body p { background: green; } /*子选择器,只管一代人,第一代p。*/ body>p{ background: green; } /*相邻兄弟选择器:当前选中元素下面的1个,不包括当前选中!*/ .active + p{ background: green; } /*通用兄弟选择器:当前选中元素和向下所有兄弟元素!*/ .active ~ p{ background: green; } </style> </head> <body> <p>p0</p> <p class="active">p1</p> <p>p2</p> <p>p3</p> <ul> <li> <p></p> </li> <li> <p></p> </li> <li> <p></p> </li> </ul> </body> </html>

    2.3、结构伪类选择器

    伪类:带冒号的,是伪类。

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--避免使用类和id选择器--> <style> /*ul的第一个子元素*/ ul li:first-child { background: green; } /*ul的最后一个子元素*/ ul li:last-child { background: red; } /*选中p1,定位到父元素,选择当前第x个元素*/ /*nth-child:选中当前元素的父级元素,选择父级元素下的第x个元素, 并且是当前元素才生效(需要满足“第x个”和“p”两个条件)*/ p:nth-child(1) { background: darkorchid; } /*nth-of-type:选择父级元素下的第x个p元素*/ p:nth-of-type(2) { background: gold; } </style> </head> <body> <p>p1</p> <p>p2</p> <p>p3</p> <ul> <li>l1</li> <li>l2</li> <li>l3</li> </ul> </body> </html>

    2.4、属性选择器

    id+class的结合

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .demo a { float: left; display: block; height: 50px; width: 50px; border-radius: 10px; background: blue; text-align: center; color: gainsboro; text-decoration: none; /*去除下滑线*/ margin-right: 5px; font: bold 20px/50px Arial; } /*存在id属性的元素 a[]{}*/ /*属性名,属性名=属性值(正则) =:绝对等于 *=:包含 ^=:以什么开头 $=:以什么结尾 */ a[id] { background: yellow; } /*id=first的元素*/ a[id=first] { background: aliceblue;/*淡青色*/ } /*class中有links的元素*/ a[class*="links"] { background: yellow; } /*选中href中以http开头的元素*/ a[href^=http] { background: deeppink;/*粉红色*/ } a[href$=pdf] { background: yellowgreen;/*黄绿色*/ } </style> </head> <body> <p class="demo"> <a href="http://www.baidu.com" class="links item first" id="first">1</a> <a href="" class="links item active" target="_blank" title="test">2</a> <a href="images/123.html" class="links item active">3</a> <a href="images/123.png" class="links item">4</a> <a href="images/123.jpg" class="links item">5</a> <a href="abc">6</a> <a href="/a.pdf">7</a> <a href="/abc.pdf">8</a> <a href="abc.doc">9</a> <a href="abcd.doc" class="links item last">10</a> </p> </body> </html>

    =:绝对等于 *=:包含 ^=:以什么开头 $=:以什么结尾

    三、美化网页元素

    3.1、美化网页元素

    1、有效的传递页面信息。

    2、美化网页,页面漂亮、才能吸引用户。

    3、凸显页面的主题

    4、提高用户的体验

    span:标签:重点要突出的字,使用span标签套起来。

    <head> <meta charset="UTF-8"> <title>Title</title> <style> #jyw { font-size: 50px; } </style> </head> <body> 欢迎学习<span id="jyw">java</span> </body>

    3.2、字体样式

    <head> <meta charset="UTF-8"> <title>Title</title> <style> /*font-family:字体 font-size:字体大小 font-weight:字体粗细 color:字体颜色 */ body { font-family: 微软雅黑; } h1 { /*px是像素,em是缩进*/ font-size: 50px; } .p1 { /*bold是加组,bolder是最粗上限(900),lighter是变细*/ font-weight: bolder; color: yellowgreen; } .p1 + p { font: bolder oblique 100px "楷体"; } </style> </head> <body> <h1>故事介绍</h1> <p> 11111 </p> <p class="p1"> 222222 </p> <p> 33333333333333 </p> </body>

    3.3、文本样式

    颜色 color rgb rgba文本对齐方式 text-align: center;首行缩进 text-indent: 2em;行高 line-height: 200px;装饰 text-decoration: underline;文本图片水平对齐:vertical-align <head> <meta charset="UTF-8"> <title>Title</title> <style> /*颜色: 1.单词表示:red 2.RGB表示: O~F #ff97b1 3.RBGA:rgba(0,255,255,1),最后一位是透明度 text-align:排版,居中等。 text-indent:首行缩进。 height: 标签的高度 line-height:行高。这一行的高度,内容的高度。和height一致时候,可以实现上下居中。 text-decoration: underline:下划线;line-through:中划线;overline:上划线;none:去除下划线。 水平对齐~ 参照物,a,b */ h1 { color: rgba(0, 255, 255, 1); text-align: center; } .p1 { text-indent: 2em; } .p1 + p { background: yellowgreen; /*height: 300px;*/ line-height: 200px; } .l1 { text-decoration: underline; } .l2 { text-decoration: line-through; } .l3 { text-decoration: overline; } /*水平对齐~ 参照物,a,b;span参照图片对齐*/ img,span{ vertical-align: middle; } </style> </head> <body> <h1>故事介绍</h1> <p> 11111</p> <p class="p1">222222</p> <p>33333333333333</p> <p class="l1">123321</p> <p class="l2">123321</p> <p class="l3">123321</p> <p> <img src="images/timg.jpg" alt="2222222avasf"> <span>ssdasdfasd</span> </p> </body>

    3.4、阴影

    /*text-shadow参数:阴影颜色 水平偏移 垂直偏移 阴影半径 */ #price{ text-shadow: crimson 10px -10px 2px; }

    3.5 、超链接伪类

    /*鼠标悬停状态*/ a:hover { color: orange; font-size: 50px; } /*鼠标按住未释放的状态,被选择的链接*/ a:active { color: green; } /*未访问的链接*/ a:link { color: deeppink; } /*已访问的链接*/ a:visited { color: blue; }

    3.6、列表

    /*ul li list-style: none :去掉原点 circle:空心圆 decimal:数字 square:正方形 */ ul { background: darkgray; } ul li { height: 30px; list-style: none; text-indent: 1em; background-image: url("../images/r.png"); background-repeat: no-repeat; background-position: 100px, 0px; } .title { font-size: 18px; font-weight: bold; text-indent: 1em; line-height: 35px; /*background参数:颜色,图片,图片位置,平铺方式*/ background: red url("../images/d.png") 170px 0px no-repeat; }

    3.7、背景

    背景颜色

    背景图片

    <style> div{ width: 1000px; height: 700px; border: 1px solid red; background-image: url("images/timg.jpg"); /*默认是全部平铺的*/ } .div1{ /*行平铺*/ background-repeat: repeat-x; } .div2{ /*列平铺*/ background-repeat: repeat-y; } .div3{ /*不平铺*/ background-repeat: no-repeat; } </style>

    3.8、渐变

    /*径向渐变,圆形渐变*/ body{ background-color: #4158D0; background-image: linear-gradient(124deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%); }

    四、盒子模型

    4.1、什么是盒子

    margin:外边距

    padding:内边距

    border:边框

    4.2、边框

    边框的粗细边框的样式边框的颜色 <style> /*body有默认的外边距*/ h1,a,ul,li,body{ margin: 0px; padding: 0px; } /*border:粗细,样式,颜色*/ #box{ width: 300px; border:1px solid red; } h2{ font-size: 16px; background-color: #4158D0; line-height:30px; margin: 0; color: white; } form{ background: chartreuse; } div:nth-of-type(1) input{ border: 3px solid black; } div:nth-of-type(2) input{ border: 3px dashed #e8178a; } div:nth-of-type(3) input{ border: 2px dashed #e81717; } </style>

    4.3、内外边距

    margin: 0 auto 居中。居中时要求:块元素,块元素有固定的宽度 四个参数时候表示顺序:上右下左; 三个参数表示:上、左右、下; 两个参数时候表示:上下和左右; 1个参数表示:上下左右所有。 顺时针旋转 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*body有默认的外边距*/ h1, a, ul, li, body { margin: 0px; padding: 0px; } /*border:粗细,样式,颜色 外边距的妙用margin: 0 auto 居中. 四个参数时候表示上右下左; 三个参数表示:上、左右、下; 两个参数时候表示上下和左右; 1个参数表示上下左右。 */ #box { width: 300px; border: 1px solid red; margin: 0 auto ; } h2 { font-size: 16px; background-color: #4158D0; line-height: 30px; margin: 0; color: white; } form { background: chartreuse; } div:nth-of-type(1) input { border: 3px solid black; padding: 10px; } div:nth-of-type(2) input { border: 3px dashed #e8178a; } div:nth-of-type(3) input { border: 2px dashed #e81717; } input { border: 1px solid black; } </style> </head> <body> <div id="box"> <h2>会员登录</h2> <form action="#"> <div> <span>用户名:</span> <input type="text"> </div> <div> <span>密码:</span> <input type="text"> </div> <div> <span>邮箱:</span> <input type="text"> </div> </form> </div> </body> </html>

    盒子的计算方式:你这个元素到底多大?

    margin+border+padding+内容宽度

    4.4、圆角边框

    4个角

    <style> /* border-radius:左上 右上 右下 左下,顺时针。 圆圈:圆角=半径 */ div { width: 100px; height: 100px; background-color: #e81717; border-radius: 50px 50px 50px 50px; } </style>

    4.5、盒子阴影

    <head> <meta charset="UTF-8"> <title>Title</title> <style> img { width: 500px; height: 500px; box-shadow: 20px 20px 100px yellow; margin: 0 auto; } </style> </head> <body> <div style="width: 800px;text-align: center"> <img src="images/timg.jpg" alt=""> </div> </body>

    五、浮动

    5.1、标准文档流

    块级元素:独占一行

    h1~h6 p div 列表

    行内元素:不独占一行

    span a img strong

    行内元素可以被包含在块级元素中

    5.2、display

    这个也是一种实现行内元素排列的方式,但我们很情况下都是用float /* block 块元素 inline 行类元素 inline-block 是块元素,但是可以内联,在一行! none 隐藏 */ div{ width: 100px; height: 100px; border: 1px solid red; display: block; }

    5.3、浮动float

    左右浮动 fioat <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* block 块元素 inline 行类元素 inline-block 是块元素,但是可以内联,在一行! none 隐藏 */ div{ width: 100px; height: 100px; border: 1px solid red; display: block; } span{ width: 100px; height: 100px; border: 1px solid red; display: inline-block; float: right; clear: both;/*清除了前面div设置的float*/ } .layer01{ float: right; } .layer02{ float: right; } .layer03{ float: right; } .layer04{ float: right; } </style> </head> <body> <div class="layer01"> div块元素1 </div> <div class="layer02"> div块元素2 </div> <div class="layer03"> div块元素3 </div> <span>span行内元素</span> <div class="layer04"> div块元素4 </div> </body> </html>

    5.4、父类边框塌陷的问题

    clear

    /* clear:right;右侧不允许有浮动元素。 clear:left;左侧不允许有浮动元素。 clear:both;两侧不允许有浮动元素。 clear:none; */

    解决方案:

    增加父级元素的高度~ #father{ border: 1px red solid; height: 800px; } 增加一个空的div标签,用于清除浮动 <div class="clear"></div> .clear { clear: both; margin: 0px; padding: 0px; } overfiow

    在父级元素中增加一个overflow: hidden;

    #father { border: 1px red solid; overflow: hidden; } 父类添加一个伪类:after #father:after{ content: ''; display: block; clear: both; }

    小结:

    浮动元素后面增加空div

    简单,但是代码中尽量避免空div

    设置父元素的高度

    简单,元素有了固定的高度,就会被限制。

    overflow

    简单,下拉的一些场景避免使用。

    父类添加一个伪类:after(推荐使用)

    写法稍微复杂一点,但是没副作用,推荐使用。

    5.5 display和overfloat 对比

    display

    方向不可以控制

    float

    浮动起来会脱离标准文档流,所以要解决父级边框塌陷的问题。

    六、定位

    6.1、相对定位

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*相对定位 相对于自己原来的位置进行偏移 */ div{ margin: 10px; padding: 5px; font-size: 12px; line-height: 25px; } #father{ border: 1px solid #27bf78; padding: 0; } #first{ background-color: gainsboro; border: 1px dashed #1678e0; position: relative;/*相对定位:上下左右*/ top: -20px; left: 20px; } #second{ background-color: wheat; border: 1px dashed #dc6e1a; position: relative; bottom: -10px; right: 20px; } #third{ background-color: #efe1e1; border: 1px dashed #d90d5f; } </style> </head> <body> <div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div> </div> </body> </html>

    相对定位: position: relative;

    相对于原来位置,进行指定偏移。相对定位的话,它仍然在标准文档流中!原来的位置会被保留。

    top: -20px; left: 20px; bottom: -10px; right: 20px;

    6.2、绝对定位

    定位:基于xxx定位,上下左右。

    没有父类元素定位的前提下,相对于浏览器定位。

    假设父级元素存在定位,我们通常会相对于父级元素进行偏移。

    父级元素存在定位时,在父级元素范围内移动。

    相对于父级和浏览器位置,进行指定偏移,绝对定位的话,它不在标准文档流中,原来的位置不会被保留。

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ margin: 10px; padding: 5px; font-size: 12px; line-height: 25px; } #father{ border: 1px solid #27bf78; padding: 0; position: relative; } #first{ background-color: gainsboro; border: 1px dashed #1678e0; } #second{ background-color: wheat; border: 1px dashed #dc6e1a; position: absolute;/*绝对定位*/ left: 100px; } #third{ background-color: #efe1e1; border: 1px dashed #d90d5f; } </style> </head> <body> <div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div> </div> </body> </html>

    6.3、固定定位 fixed

    位置固定,移动滚动条时,固定定位的元素位置仍然不变。

    <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ height:1000px ; border: 1px solid red; } /*绝对定位:此案例相对于浏览器*/ div:nth-of-type(1){ width: 100px; height: 100px; background: #e81717; position: absolute; right: 0; bottom: 0; } /*fixed固定定位.坐标原点固定,始终相对于浏览器窗口定位。 */ div:nth-of-type(2){ width: 50px; height: 50px; background: yellow; position: fixed; right: 0; bottom: 0; } </style> </head> <body> <div>div1</div> <div>div2</div> </body>

    6.4、z-index

    图层

    z-index:默认是0,最高无限

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="content"> <ul> <li><img src="images/bg.png" alt=""></li> <li class="tiptext">学习微服务,找狂神</li> <li class="tipBg"></li> <li>时间:2099-01-01</li> <li>地点:月球一号基地</li> </ul> </div> </body> </html> #content { width: 240px; padding: 0px; margin: 0px; overflow: hidden; font-size: 12px; line-height: 25px; border: 1px #000 solid; } ul, li { padding: 0px; margin: 0px; list-style: none; } /*父级元素相对定位*/ #content ul{ position: relative; } /*父相子绝*/ .tiptext,.tipBg{ width: 240px; height: 25px; position: absolute; top:137px ; } .tiptext{ color: white; z-index: 999; } .tipBg{ background: black; opacity: 0.5;/*背景透明度*/ /*filter: alpha(opacity=50);*/ }

    七、动画

    八、总结

    Processed: 0.013, SQL: 8