一、使用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="微信图片_20230311191220.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('屏幕截图 2023-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('屏幕截图 2023-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('屏幕截图 2023-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('屏幕截图 2023-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('屏幕截图 2023-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('屏幕截图 2023-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>

都看到这里了，创作不易，大家点个赞再走呗！！！- ̗̀(๑ᵔ⌔ᵔ๑)

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

Web前端开发笔记——第二章 HTML语言第四节超链接标签
目录前言一.超链接标签 (一)链接其它子网页 (二)链接其它站点 (三)虚拟超链接二.从当前页面链接到指定位置三.链接的访问情况四.在新窗口中打开链接例题结语前言本节介绍超链接标签即 ...
Web前端开发笔记——第二章 HTML语言第六节区域标签、列表标签
目录一.区域标签 (一)div标签的定义 (二)div标签的属性二.列表标签 (一)列表标签的定义 (二)列表标签的类型 1.有序列表 (1)有序列表的定义 (2)有序列表的属性 2.无序列表 ( ...
【web前端初级课程】第三章 CSS的特殊样式
目录一.@media查询二.@font-face字体三.动画四.3D旋转效果五.网页布局六.相关练习:校园官网一.@media查询作用:主要用于在不同设备显示不同的页面. (电视:TV ...
Web前端开发笔记——第二章 HTML语言第二节基本标签
目录前言一.标题标签二.段落标签和段内换行三.预留格式标签四.行内组合标签五.水平线标签六.注释标签七.空格字符例题(创建一个网页) 结语前言本节主要讲解HTML的一些基本标签. ...
Web前端开发笔记——第二章 HTML语言第三节文本格式化标签
目录前言一.文本加粗.斜体标签二.文本字体缩小.放大标签三.文本下标.上标标签四.文本下划线.删除线标签五.双引号字符结语前言这里主要介绍对html语言中对文本的处理. 一.文本加粗 ...
【web前端初级课程】第八章什么是事件？
目录一.事件情况汇总二.标签绑定三.使用DOM0事件模型四.使用DOM2事件模型五.相关练习:图片切换一.事件情况汇总事件分为三部分:事件源:绑定事件的标签.事件对象:就是事件产生的相关 ...
Web前端开发笔记——第二章 HTML语言第十一节语义标签
目录一.语义标签的定义二.头部标签.底部标签三.导航栏标签四.内容栏标签.区段标签五.其它内容标签六.< figure > 和 < figcaption >标结语 ...
Web前端开发笔记——第二章 HTML语言第十节画布标签、音视频标签
目录一.画布标签二.音视频标签 (一)音频标签 (二)视频标签 (三)资源标签结语一.画布标签 <canvas> </canvas> 画布标签用于图形.字符等的绘制,它 ...
Web前端开发笔记——第二章 HTML语言第九节框架标签、脚本标签
目录一.框架标签 (一)显示目标页面 (二)规定大小的框架 (三)规定边框的框架二.脚本标签结语一.框架标签 (一)显示目标页面 <iframe></iframe>标签 ...

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

目录