1500字范文 > 【web前端初级课程】第二章 CSS层叠样式表

【web前端初级课程】第二章 CSS层叠样式表

时间：2022-06-19 08:37:05

一、使用CSS的方法

（一）行内样式

在标签的style属性中写CSS代码。

（二）页面样式

在head标签中添加style标签，在style中书写css对代码。

#first_div{border-width: 1px;border-style: dashed;border-color: rebeccapurple;width: 100px;height: 100px;}

（三）外联样式

通过引用css文件使用其内部的样式代码。

（四）@import

通过css的import方法导入css。

<style>

@import url("CSS/test.css");

</style>

（五）面试题：import和link有什么区别？

1、import是css的自带 link是html的功能，并且link不仅仅可以引用css 还可以定义rss rel；

2、加载顺序的区别，link会等css加载完毕在显示，import会先加载完html，在加载css，所以当网速不太优良情况下会显示一个比较简单页面之后再慢慢补充细节；

3、import引入css的代码 dom编程无法获取到css的内容；

4、兼容性区别。ie 5（即CSS2.1）版本以后的浏览器才支持import；

二、CSS的选择器

（一）基本选择器

基本选择器包括：id选择器，类选择器，通配符选择器，标签选择器

选择器的优先级：一般情况下，作用范围越小的他的优先级高当选择器的表达式越复杂，它的优先级就越高

1、id选择器：#first_div{...}

2、标签选择器：div{.....}

3、类选择器：.div_class{......}

4、通配符选择器：*{.......}

（二）符合选择器

子代选择器：修饰当前标签的子代标签，不修饰子代的子代。

后代选择器：修饰当前标签后代，包括子代孙代曾孙代。

分组选择器：分组选择器又名都好选择器，通过逗号隔开的选择器共享同一套样式代码,都好选择器两侧只要是符合语法规范的选择器即可，无特殊要求。

（三）属性选择器

语法结构：[ ]中写入筛选条件。

$=表示以什么结尾

^= 表示以什么开头

*=包含什么字符

+ 当前标签的下一个

（四）伪类选择器

即一个标签在不同状态下拥有不同的样式。

PS：在书写伪类选择器的时候一定要注意保持link visited hover active的顺序进行编写，否则有可能伪类选择器不生效。

a:link

a:visited

a:hover

a:active

（五）伪元素选择器

通过伪元素选择器可以设置元素的指定部分的样式，主要用来设置元素内部的文本对的首字母，首行样式，或者实在元素内容前后插入其他元素。

::before

::after

::first-letter

::first-line

::section

PS：伪元素选择器是js代码无法获取的内容，意味着我们无法使用js对我们的当前进行伪元素方面的修改。

三、CSS的常见样式

（一）text相关样式

1、text-align:用于对齐内容,并且具有传递给后代效果。

（left：左对齐 right：右对齐 center：居中）

2、text-decoration:用于设置文本样式。

（overline：上划线 line-through：中划线 underline：下划线）

3、text-transform：用于设置文本的大小写。

（capitalize：首字母大写 uppercase：全大写 lowercase：全小写）

4、text-overflow: ellipsis;

overflow: hidden ：用于设置溢出的文本以省略号的形式显示，需配合overflow属性。

5、word-wrap: break-word;

overflow: scroll; ：用于设置自动换行的属性，如果自动换行后仍有文字溢出，可以结合使用overflow：scroll添加滑动。

（二）font相关样式

font-size：用于设置字体的大小

font-family：用于设置字体

font-weight：666用于设置文字的粗细程度，取值范围100-900

font-style: italic ：用于设置字体的风格（斜体）

（三）border相关样式

设置标签的宽度：width: 100px;

设置标签的高度：height: 100px;

用于设置线条的宽度：border-width: 1px; */

用于设置细条的风格：border-style: dashed; */

用于设置边框的颜色：border-color: rebeccapurple; */

设置变得弧度：border-radius: 100% */

局部设置边框角弧度：border-top-left-radius: 10px;（左上角）

border-bottom-right-radius: 10px;（右下角）

局部设置边框颜色粗细样式：border-left: 1px solid red;

border-top: 10px solid rebeccapurple;

（四）padding相关样式

用于设置标签的内边距：padding: 20px;

用于设置某条边边距：padding-left: 20px;

padding-top: 20px;

（五）margin相关样式

用于设置标签与父标签的间距：margin: auto;

PS：当标签对的margin为auto时，标签将居中（必须有宽度）。

设置单边：margin-left: 20px;

margin-top:20px

（六）display相关样式

设置标签的透明度：opacity: 0（1显形，0隐形）

设置标签属性：display: block

（block：块标签 inline：行内标签 inline-block：行内块标签）

（七）background相关样式

设置背景颜色：background-color:red；

设图片为背景：background-image: url('pic/taobao.png');

设置背景尺寸：background-size: 170px 55px;

设置图片循环：background-repeat:repeat;（可使用专用循环图）

固定背景：background-attachment: fixed;

设置精灵图：background-position: 0px -75px；

（八）position相关样式

PS：当前标签如果是绝对定位，那么它的父标签必须为相对定位。（子绝父相）

postion：absolute

四、相关练习

练习1：淘宝页面

练习1代码：

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>.goods{width: 220px;height: 360px;border: 1px solid #f40;}img{width: 220px;}.jiage{width: 220px;}.jiage > span:first-child{color: #f40;font-size: 20px;font-weight: bold;}.jiage > span:nth-child(2){font-size: 12px;background-color: #f40;color: white;padding: 1px;}.jiage > span:last-child{float: right;font-size: 12px;color: #888;margin-top: 8px;}#one{margin-left: 8px;margin-right: 5px;margin-top: 5px;}#one > a{color: #444;font-size: 12px;text-decoration: none;}#one > a > span{color: #f40;}#one > a:hover{text-decoration: underline;color: #f40;}#two{width: 220px;color: #888;font-size: 7px;margin-top: 10px;}#two > span:first-child{text-decoration: underline;margin-left: 13px;}#two > span:nth-child(2){float: right;margin-right: 8px;}.tu_one{width: 18px;height: 18px;background-image: url('TB1bh5IMpXXXXacaXXXrG06ZpXX-316-272.png');background-repeat: no-repeat;background-position: -214px -199px;margin-top: 10px;margin-left: 10px;}.tu_two{width: 18px;height: 18px;background-image: url('TB1bh5IMpXXXXacaXXXrG06ZpXX-316-272.png');background-repeat: no-repeat;background-position: -295px -161px;margin-top: 10px;margin-left: 10px;}.tu_three{width: 18px;height: 18px;background-image: url('TB1Z4WGMpXXXXbyaXXX6sGuHVXX-458-458.png');background-repeat: no-repeat;background-position: -435px -87px;margin-top: 10px;margin-left: 10px;}.biaoqian{position: absolute;top: 200px;}.biaoqian>div{width: 110px;height: 30px;background-color: #f40;list-style: none;float: left;color: white;text-decoration: none;text-align: center;border-right: 0.5px solid white;}.goods>.head:hover>.biaoqian{display: block;}.biaoqian{display: none;}.tu{position: relative;}</style></head><body><div class="goods"><div class="head"><img class="tu" src="fb642803c98478a8975663226647cdbb.jpeg"/><div class="biaoqian"><div class="bian">找同款</div><div>找相似</div></div></div><div class="jiage"><span>￥34.56</span><span>包邮</span><span>1亿人+付款</span></div><div id="one" ><a href="#">欧莱雅黄色童装，<span>成熟男人的标配</span>，高端，大气，上档次！</a></div><div id="two"><span>欧莱雅旗舰店</span><span>广州</span></div><table cellpadding=0 cellspacing=0><tr><td><div class="tu_one"></div></td><td width=150px><div class="tu_two"></div></td><td><div class="tu_three"></div></td></tr></table></div></body></html>

练习2：西瓜视频

练习2代码：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>西瓜视频</title><style>table{padding: 0;margin: 0;width: 400px;margin: auto}input{height: 28px;background-color: #e3e3e3;border: 0px;}select{height: 28px;background-color: #e3e3e3;border:0px;}.mima{background-color: #e3e3e3;}.duoxuan{background-color: #e3e3e3;}.zhongzi{font-size: 13px;}.xiaozi{font-size: 5px;text-align: left;}button{width: 240px;height: 28px;background-color: #fe3355;border: 0px}tr{height: 30px;}.santu > span:first-child{font-size: 5px;text-align: left;margin-bottom: 0px;}.santu > span:nth-child(2){font-size: 5px;text-align: left;margin-bottom: 0px;}.santu > span:last-child{font-size: 5px;float: right;margin-bottom: 0px;margin-top: 5px;}#jizhumima{font-size: 5px;text-align: left;margin-top: 20px;margin-left: 8px;}.app{font-size: 5px;text-align: left;width: 150px;height: 30px;margin-left: 10px;}.app > span{color: red;}.one_tu{margin-left: 15px;}.last_zi{text-align: center;}.xiaozi > .last_zi >input{height: 10px;}</style></head><body><h2>登录</h2><hr/><form><table><tr class="zhongzi"><td>密码登录</td><td>&nbsp扫码登录</td></tr><tr><td align="left" class="duoxuan"><select name="shouji" id=""><option>+86</option><option>+25</option><option>+68</option></select><input type="text" name="namber" placeholder="请输入手机号码"><td rowspan="3"><div class="one_tu"><img src="微信图片_0311191220.jpg" width="70%"></div></td></tr><tr><td class="mima"><input type="password" name="password" placeholder="请输入密码"><span class="xiaozi">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp忘记密码</span></td></tr><tr><td><div id="jizhumima">记住密码</div></td></tr><tr><td><button >登录</button></td><td><div class="app">打开<span>西瓜视频手机APP</span><br />我的-扫一扫登录</div></td></tr><tr><td><div class="santu"><span>其他方式:</span><span><img src="2.png" width=4%/><img src="1.png" width=4%/><img src="3.png" width=4%/></span><span>手机验证码登录</span></div></td><td></td></tr><tr><td colspan="2" class="xiaozi"><div class="last_zi"><input type="radio" name="xieyi" required/>登录即代表你同意用户协议和隐私政策</div></td></tr></table></form></body></html>

练习3：小米官网

练习3代码：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>小米官网</title><style>div{padding: 0;margin: 0;}img{width: 300px;height: 200px;}.div_one{width:99px;height: 99px;background-color: #5f5750;border-left: 1px solid white;border-top:1px solid white;float: left;}.zi_one{font-size: 5px;color: white;text-align: center;margin-top: 6px;}.kuang_one{width: 300px;height:200px;float: left;}#tu_one{width:37px;height:37px;background-image: url('屏幕截图 -03-17 084542.png');background-repeat: no-repeat;background-position: -45px -31px;margin: auto;margin-top: 20px;}#tu_two{width:37px;height:37px;background-image: url('屏幕截图 -03-17 084542.png');background-repeat: no-repeat;background-position: -161px -31px;margin: auto;margin-top: 20px;}#tu_three{width:37px;height:37px;background-image: url('屏幕截图 -03-17 084542.png');background-repeat: no-repeat;background-position: -270px -31px;margin: auto;margin-top: 20px;}#tu_four{width:27px;height:37px;background-image: url('屏幕截图 -03-17 084542.png');background-repeat: no-repeat;background-position: -50px -154px;margin: auto;margin-top: 20px;}#tu_five{width:32px;height:36px;background-image: url('屏幕截图 -03-17 084542.png');background-repeat: no-repeat;background-position: -161px -154px;margin: auto;margin-top: 20px;}#tu_six{width:23px;height:35px;background-image: url('屏幕截图 -03-17 084542.png');background-repeat: no-repeat;background-position: -278px -153px;margin: auto;margin-top: 20px;}.kuang_two{width: 100%;height: 150px;background-color: #f9d392;float: left;}.div_two{width: 300px;height: 100px;padding-top: 15px;margin: auto;}.zi_two{font-size: 30px;font-weight: 900px;margin-top: 20px;}.zi_three{font-size: 17px;margin-top: 8px;}.div_three{width: 300px;height: 150px;text-align: center;}.div_three > img{width:80px;height: 140px;}table{text-align: center;padding-left: 400px;}</style></head><body><div><div class="kuang_one"><div class="div_one"><div id="tu_one"></div><div class="zi_one">保障服务</div></div><div class="div_one"><div id="tu_two"></div><div class="zi_one">企业团购</div></div><div class="div_one"><div id="tu_three"></div><div class="zi_one">F码通道</div></div><div class="div_one"><div id="tu_four"></div><div class="zi_one">米粉卡</div></div><div class="div_one"><div id="tu_five"></div><div class="zi_one">以旧换新</div></div><div class="div_one"><div id="tu_six"></div><div class="zi_one">话费充值</div></div></div><div class="kuang_one"><img src="11.jpg"/></div><div class="kuang_one"><img src="22.jpg"/></div><div class="kuang_one"><img src="33.jpg"/></div><div class="kuang_two" style="clear: both;"><table><tr><td><div class="div_two"><div class="zi_two">米家分体露营灯</div><div class="zi_three">多彩氛围 &nbsp分体式双灯设计</div></div></td><td><div class="div_three"><img src="44.jpg"/></div></td></tr></table></div></body></html>