2. 技术
    3. Web前端-02

    Web前端-02

    技术2022-07-11  80

    CSS

    CSS概述选择器颜色赋值背景图片文本和字体相关样式元素显示方式display盒子模型

    CSS

    概述

    Cascading Style Sheet: 层叠样式表 , 作用: 美化页面

    如何在html页面中添加样式代码(引入方式) , 总共有三种方式:

    内联样式: 在标签的style属性中添加样式代码,不能复用内部样式: 在head标签里面添加style标签,在标签体内写样式代码,仅可以在当前页面复用,不可以多页面复用外部样式: 在单独的css样式文件中写样式代码, 在html页面通过link标签引入,可以实现多页面复用,并且可以将html代码和css样式代码分离开 三种引入方式的优先级: 内联优先级最高,内部和外部优先级一样,后执行的覆盖先执行的

    选择器

    用来选取页面中的元素 标签名选择器 格式: 标签名{样式代码}选取页面中所有同名的标签 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> /*通过标签名选择器给元素添加样式 */ h2{ color:blue; } </style> <!-- 引入css样式文件 --> <link rel="stylesheet" href="first.css"> </head> <body> <h3 style="color:red">内联样式测试</h3> <h2>内部样式测试1</h2> <h2>内部样式测试2</h2> <h1>外部样式测试</h1> </body> </html>

    id选择器

    格式: #id{样式代码}选取页面中对应id的元素页面当中的元素要保证id是唯一的当需要选择页面中的某一个元素时使用

    类选择器

    格式: .class{样式代码}选取页面中某一类元素给需要选取的元素添加相同的class属性

    分组选择器

    将多个选择器合并成一个选择器格式: #id,.class,div{样式代码}

    任意元素选择器

    格式: *{样式代码}选取页面中所有的元素

    以上选择器的代码：

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> <!--id选择器 --> #d2{ color:red; } <!--类选择器 --> .c1{ color:yellow; } /*分组选择器 */ #d2,.c1{ background-color:green; } /*任意元素选择器 */ *{ /*边框:1px粗细solid实线样式red颜色 */ border:1px solid red; } </style> </head> <body> <div>div1</div> <div id="d2">div2</div> <div class="c1">div3</div> <span>s1</span> <span>s2</span> <span class="c1">s3</span> <h3 class="c1">h3</h3> </body> </html>

    属性选择器

    格式: 标签名[属性名=‘值’]{样式代码}通过元素的属性去选择元素

    子孙后代选择器

    格式: body div span{样式代码}匹配body里面的div里面的所有span(包括后代)

    子元素选择器

    格式: body>div>span{样式代码}匹配body里面的div里面的span子元素

    伪类选择器

    该选择器选中的是元素的状态(未访问/访问过/悬停/点击)格式: a:visited/link/hover/active{样式代码} 以上四种选择器代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> /*属性选择器*/ input[type='text']{ background-color:green; } /*子孙后代选择器 */ /*body div div div span{ color:red;' }*/ /*子元素选择器*/ body>div>span{ color:red; } body>span{ background-color:green; } /*访问过 */ a:visited{ color:red; } /*未访问过*/ a:link{ color:green; } /* 悬停 */ a:hover{ color:purple; } /* 点击 */ a:active{ color:yellow; } </style> </head> <body> <a href="../imges/a.jpg">超链接1</a> <a href="../imges/b.jpg">超链接2</a> <a href="../imges/c.jpg">超链接3</a> <a href="../imges/d.jpg">超链接4</a><br> <span>s1</span> <div> <span>s2</span> <div> <span>s3</span> </div> <div> <span>s4</span> <div> <span>s5</span> </div> </div> </div> <input type="text"> <input type="password"> </body> </html>

    颜色赋值

    三原色: 红 绿 蓝 red green blue rgb 每个颜色的取值范围0-255 颜色单词 red6位16进制 #ff0000 每两位表示一个颜色 ff=2553位16进制 #f00 每一位表示一个颜色 f00=ff00003位10进制 rgb(255,0,0)4位10进制 rgba(255,0,0,0-1) a=alpha 透明度 值越小越透明 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> h2{ /* color:red; */ /* color:#00ff00; */ /* color:#00f; */ /* color:rgb(0,255,0); */ color:rgba(255,0,0,0.1); } </style> </head> <body> <h2>颜色测试</h2> </body> </html>

    背景图片

    设置背景图片 background-image:url(路径)设置背景图片尺寸 background-size: 200px 300px;禁止重复 background-repeat: no-repeat;设置背景图片位置 background-position: 50% 100%; <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> #d1{ width:200px; height:200px; background-color:green; /*设置背景图片*/ background-image:url("../imges/e.jpg"); background-size:100px 100px;/*宽高 */ /*禁止重复*/ background-repeat:no-repeat; /*位置：横向百分比，纵向百分比*/ background-position:0% 0%; } #d2{ width:611px; height:376px; background-color:#E8E8E8; background-image:url("https://fz.fp.ps.netease.com/file/5ee9e33b8b7427b5575abfb9LLowN8DZ02"); background-size:318px 319px; background-repeat:no-repeat; background-position:90% 70%; } </style> </head> <body> <div id="d1"></div> <div id="d2"></div> </body> </html>

    文本和字体相关样式

    文本修饰 text-decoration: overline上划线/underline下划线/line-through删除线/none去掉下划线

    对齐方式 text-align:left/right/center

    文本颜色 color:red;

    行高 可以实现垂直居中 line-height:20px;

    文本阴影 text-shadow: 颜色 x偏移值 y偏移值 浓度(值越大越模糊)

    字体大小 默认大小16px font-size:20px;

    字体设置 font-family: xxxx,xxx,xxx,xxx; font: 20px xxx,xxx,xxx;

    斜体 font-style:italic;

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> div{ widrh:150px; height:50px; border:1px solid red; <!--文本修饰overline上划线，underline下划线，line-through删除线 --> text-decoration:overline; /*水平对齐方式 left,center,right*/ text-align:center; line-height:50px;/*可以实现垂直居中 */ /*文本阴影 x偏移值 y偏移值 浓度 */ text-shadow:green -10px 10px 1px; /*字体大小，默认为16*/ font-size:30px; /*字体加粗*/ font-weight:bold; color:red; } a{ text-decoration:none;/*none去掉下划线*/ } h1{ font-weight:normal;/*去掉加粗 */ /*字体设置*/ /* font-family: cursive; */ /*字体大小和字体设置 */ font:10px cursive; /*斜体 */ font-style:italic; } </style> </head> <body> <h1>这是h1</h1> <a href="#">超链接</a> <div>文本测试</div> </body> </html>

    元素显示方式display

    block: 块级元素, 独占一行,可以修改元素宽高 , 包括:h1-h6,p , div等inline: 行内元素, 共占一行,不能修改元素宽高, 包括:span,b,i,small,超链接等inline-block:行内块元素, 共占一行并且可以修改元素宽高, 包括:input, img等 元素默认的显示方式可以修改,常见的修改就是将行内元素的显示方式改成块级或行内块,因为行内元素不能改宽高 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> img{ width:500px; } span{ border:1px solid red; /*行内元素不能改宽高*/ width:100px; height:100px; display:inline-block; } div{ border:1px solid red; width:100px; height:100px; } a{ width:132px; height:40px; display:block; color:white; background-color:#0aa1ed; text-decoration: none; text-align:center; line-height:40px; font-size:20px; border-radius: 3px; } </style> </head> <body> <a href="#">查看详情</a> <div>div1</div> <div>div2</div> <div>div3</div> <hr> <span>span1</span> <span>span2</span> <span>span3</span> <hr> <img src="../imges/a.jpg"> <img src="../imges/b.jpg"> <img src="../imges/c.jpg"> </body> </html>

    盒子模型

    盒子模型=宽高+外边距+内边距+边框 , 作用:控制元素的显示效果 宽高: 控制元素的显示大小外边距: 控制元素的显示位置内边距: 控制元素内容的位置边框: 控制元素边框效果

    盒子模型之宽高width/height

    赋值方式:1. 像素 2. 上级元素百分比行内元素不能修改宽高.

    盒子模型之外边距margin

    什么是外边距: 元素距上级元素或相邻兄弟元素的距离称为外边距. 赋值方式: /* 单独某个方向添加外边距 */ /* margin-left: 50px; margin-bottom: 50px; margin-top: 50px; margin-right: 20px; */ /* 给四个方向添加外边距 */ /* margin: 20px; */ /* 上下和左右赋值 */ /* margin: 20px 40px; */ /* 元素居中 */ /* margin: 0 auto; */ /* 上右下左赋值 顺时针*/ margin: 10px 20px 30px 40px; ``` ## 查看页面元素样式 1. 在元素上面右键检查 2. 在页面中按f12出现和右键检查一样的工具, 点击拾取箭头 然后将鼠标放在元素上面点击
    Processed: 0.013, SQL: 9