小白入门之前端网页技术CSS 待我称王封你为后i 2021-07-16 22:00 372阅读 0赞 ### 文章目录 ### * * CSS技术 * * 什么是CSS * CSS的用法 * 选择器 * * 标签名选择器 * class选择器 * id选择器 * 分组选择器 * 属性选择器 * 盒子模型 * * margin(外边距) * border(边框) * padding(内边距) * 元素类型的补充 * * 块级元素 * 行内元素 * 行内块元素 * 永和门店系统 * 用户注册练习 ## CSS技术 ## ### 什么是CSS ### CSS全称叫做层叠样式表stylesheet,是用来修饰HTML网页的一门技术,增强网页的展示能力。 主要是使用CSS属性来实现,最终可以将css代码和HTML网页代码进行分离,也可以提高css代码的复用性。 ### CSS的用法 ### 需求::将单元格内文字居中显示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css的使用</title> <!-- css方式4 实现css与HTML代码的分离,提高css代码的复用性--> <link href="demo.css" rel="stylesheet"/> <!-- css方式3 --> <style> td{ text-align: center; } </style> </head> <body> <table border="1" cellspacing="0" width="30%"> <tr align="center"><!-- css方式1 --> <td >你好1</td> <td >你好2</td> </tr> <tr style="text-align:center;"><!-- css方式2 --> <td >你好3</td> <td >你好4</td> </tr> </table> </body> </html> ## 选择器 ## 所谓的选择器就是在HTML中帮助我们选中想要修饰的标签。 ### 标签名选择器 ### 选中网页中的所有元素 <style> /* 在HTML中加入css*/ span{ /* 标签名选择器,选中所有span */ background-color: chartreuse; /* 背景颜色*/ font-size: 24px; /*字号*/ font-family: 黑体;/* 字体 */ } </style> ### class选择器 ### 给需要修饰的元素,加class属性,可以同时使用多个属性,之间用空格隔开。 <p class="a b">123</p> <!-- b覆盖a--> <style> /* 在HTML中加入css*/ /* 选择class=a的元素 */ .a{ background-color: cornflowerblue; /*背景颜色*/ color:red; /*字体颜色*/ } .b{ background-color: lightsalmon; color: black; } </style> ### id选择器 ### id属性的值在整个HTML中作为唯一标识的存在。 可以通过ID值选中指定的元素(\#id值) <p id="p1">123</p> /* 使用id选中元素 */ #p1{ text-indent: 200px; /* 首行缩进*/ } ### 分组选择器 ### /* 分组选择器,将多个选择器选中的元素组合在一起,统一设置样式 */ .a,.b,#p1{ background-color: #000000; } ### 属性选择器 ### 根据属性条件选中符合条件的元素来设置样式(逗号隔开) <style type="text/css"> /* 选中指定的元素 */ input[type='text']{ background-color: #6495ED; } </style> ## 盒子模型 ## 指的是将HTML中所有元素都看成一个盒子,盒子与盒子之间的距离,包括盒子的边框以及盒子边框和盒子内容的距离都可以设置。 ![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vLAwyuck-1622525806196)(RackMultipart20210601-4-1w5z70a\_html\_8bf03415a97315e5.png)\]][img-vLAwyuck-1622525806196_RackMultipart20210601-4-1w5z70a_html_8bf03415a97315e5.png] ### margin(外边距) ### <input type="radio" name="sex" value="1" style="margin: 20px;"/>男 ### border(边框) ### #div2{ border:10px solid yellow;/*实线*/ border:10px dashed yellow;/*点状*/ border:10px dotted yellow;/*虚线*/ } ### padding(内边距) ### <td style="padding: 20px;">用户名:</td> ## 元素类型的补充 ## ### 块级元素 ### 默认情况下,块级元素独占一行(div , p,h1~h6) 可以设置宽和高。如果不设置宽和高,其中宽是默认填满父元素,而高是由内容 外边距、边框、内边距都可以设置 ### 行内元素 ### 默认情况下,多个行内元素处在同一行 不能设置宽和高 左右外边距、边框、内边距都可以设置,上下外边距设置无效 ### 行内块元素 ### 既具备行内元素的特征,还具备块级元素的特征 ## 永和门店系统 ## <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>永和大王门店系统</title> <!—引入外部的css文件 <link rel="stylesheet" href="css/base.css"/> --> <!--通过style标签插入 css代码用来修饰html网页效果 --> <style> body{ font-size:8px; width:280px; margin:5px; } .please{ font-size:22px; } .me{ padding-left:60px; } .doorName{ font-size:10px; } .note{ text-indent:20px; padding-top:5px; padding-bottom:5px; } </style> </head> <body> <div>顾客联</div> <div class="please">请您留意取餐账单号</div> <div class="me">自取顾客联</div> <div class="doorName">永和大王(北三环西路店)</div> <div class="doorName">010-62112313</div> <div class="me">--结账单--</div> <div class="please">账单号:P000010</div> <div>账单类型:堂食</div> <div>人数:1</div> <div>收银员:张静</div> <div>开单时间:2018-04-17 07:24:29</div> <div>结账时间:2018-04-17 07:24:38</div> <hr style="border:1px dashed;"></hr> <table border="1" cellspacing="0"> <tr> <td>数量</td> <td>品项</td> <td>金额</td> </tr> <tr> <td>1</td> <td>玉米肉松蛋饼2P <br> 1X --玉米肉松蛋饼<br /> 1X --现磨豆浆(热/甜) </td> <td>8.00</td> </tr> </table> <hr style="border:1px dashed;"></hr> <table border="1" cellspacing="0"> <tr> <td>合计</td> <td>8.00</td> </tr> <tr> <td>微支付</td> <td>8.00</td> </tr> </table> <hr style="border:1px dashed;"></hr> <div>打印时间:2018-04-17 07:24:38</div> <hr style="border:1px dashed;"></hr> <div class="note">根据相关税法规定,电子发票的开票日期同网上申请电子发票的日期,如您需要当日的电子发票请务必在消费当日通过扫描下方二维码,根据指引步骤开具您的增值税电子普通发票。此二维码30天有效,扫描时请保持小票平整。</div> <div>官网:www.yonghe.com.cn</div> <div>加盟热线:86-21-60769397 或 86-21-60769002</div> </body> </html> ## 用户注册练习 ## ![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2GSUWOcu-1622525806218)(RackMultipart20210601-4-1w5z70a\_html\_ec76402a136d8bb6.png)\]][img-2GSUWOcu-1622525806218_RackMultipart20210601-4-1w5z70a_html_ec76402a136d8bb6.png] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>用户注册</title> <style> /* 语法:选择器{样式1;样式2;样式3;} */ /* 统一网页风格 */ body{ font-family: "宋体";/* 统一字体 */ font-size: 15px;/* 统一字号 */ width: 500px;/* 统一宽度 */ padding-left: 100px;/* 设置左边距 */ } /*修饰所有input的样式 */ .a{ height: 20px;/* 高度 */ width: 300px;/* 宽度 */ padding: 15px;/* 调整内容和边框的距离,内边距 */ font-size:20px ;/* 字号变大 */ margin: 10px;/* 调整盒子间的距离,外边距 */ } /* 修饰所有的提示信息 */ .xiao{ font-size: 8px;/* 字体变小 */ color: grey;/* 字的颜色 */ padding-left: 30px;/* 左边距 */ } /* 修饰同意 */ #note{ height: 60px;/* 高度 */ text-indent: 40px;/* 首行缩进 */ font-size: 12px;/* 字号变大 */ } /* 修饰立即注册按钮 */ #btn{ background-color: #E64346;/* 背景色 */ font-size: 25px;/* 字号变大 */ color: white;/* 字的颜色 */ width: 360px;/* 设置宽度 */ height: 50px;/* 设置高度 */ border: #E64346;/* 设置边框 */ } </style> </head> <body> <!-- 用户注册的数据需要提交给服务器入库,所以需要form --> <form method="get" action="#"> <!-- 指定提交数据的方式--> <table> <h2 style="padding-left: 130px;font-size:30px;">用户注册</h2> <tr> <td> <input type="text" placeholder="用户名" class="a"/> </td> </tr> <tr> <td class="xiao"> 支持中文、字母、数字、“-”、“_”的组合,4-20个字符 </td> </tr> <tr> <td> <input type="password" placeholder="设置密码" class="a" /> </td> </tr> <tr> <td class="xiao"> 建议使用数字、字母和符号两种以上的组合,6-20个字符 </td> </tr> <tr> <td> <input type="password" placeholder="确认密码" class="a" /> </td> </tr> <tr> <td class="xiao"> 两次密码输入不一致 </td> </tr> <tr> <td> <input type="password" placeholder="验证手机" class="a"/> 或 <a href="#"> 验证邮箱</a> </td> </tr> <tr> <td id="note"> <input type="checkbox" /> 我已阅读并同意 <a href="#">《京淘用户注册协议》</a> </td> </tr> <tr> <td> <!-- type类型必须是submit才能提交数据 --> <input id="btn" type="submit" value="立即注册" /> </td> </tr> </table> </body> </html> [img-vLAwyuck-1622525806196_RackMultipart20210601-4-1w5z70a_html_8bf03415a97315e5.png]: /images/20210716/38efc98db1c1476280d6f85b494e3ff7.png [img-2GSUWOcu-1622525806218_RackMultipart20210601-4-1w5z70a_html_ec76402a136d8bb6.png]: /images/20210716/a37d97ca0aa74cde90ed05611d6fb842.png
相关 CSS前端经典面试题及解析——小白入门必备 1.CSS 选择器的优先级是如何计算的? 浏览器通过优先级规则,判断元素展示哪些样式。优先级通过 4 个维度指标确定,我们假定以`a、b、c、d`命名,分别代表以下含义: 约定不等于承诺〃/ 2022年12月24日 10:58/ 0 赞/ 87 阅读
相关 零基础小白前端学习之初始CSS 现在的互联网前端分为三层: HTML:超文本标记语言。从语义的角度描述页面结构 CSS:层叠样式表。从审美的角度负责页面样式 JS:Javascript。从交互的角度 ╰+哭是因爲堅強的太久メ/ 2022年12月15日 11:24/ 0 赞/ 127 阅读
相关 小白入门之前端网页技术 Vue进阶 文章目录 自定义组件 概述 项目结构 创建组件Car.vue 修改App 阳光穿透心脏的1/2处/ 2021年09月11日 03:22/ 0 赞/ 375 阅读
还没有评论,来说两句吧...