【web前端初级课程】第二章 CSS层叠样式表
目录
一、使用CSS的方法
二、CSS的选择器
三、CSS的常见样式
四、相关练习
一、使用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。
（五）面试题：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代码：
练习2：西瓜视频
练习2代码：
西瓜视频
登录
练习3：小米官网
练习3代码：
小米官网
保障服务
企业团购
F码通道
米粉卡
以旧换新
话费充值
米家分体露营灯
多彩氛围 分体式双灯设计
都看到这里了，创作不易，大家点个赞再走呗！！！- ̗̀(๑ᵔ⌔ᵔ๑)