1.Css的简介：
*css: 层叠样式表
**层叠：一层一层
样式表：很多的属性和属性值
*是页面显示效果更加好
*Css将网页的内容和和显示样式进行分离，提高了显示功能。
2.Css和html的结合方式（四种）：
1.在每个html标签上面都有一个属性style
<div style="background-color : red ;color : green;">求职之路复习篇-Css样式</div>
2.使用html的一个标签实现<style>标签，写在head里面
<style type="text/css">
div{
background-color : red ;
color : green;
}
..........
<div>求职之路复习篇-Css样式</div>
3.在style标签里面，使用语句。
@import url(jianshu.css)；
缺点：某些浏览器下不起作用。
4.推荐：使用头标签link，引入外部css文件
<link rel="stylesheet" type="text/css" href="jianshu.css">
3.Css的优先级
1.从上到下，由内而外。优先级由低到高。
2.后加载的优先级高
编码规范:
1.选择器名称{属性名：属性值 ;属性名：属性值1 属性值2......}
- 属性和属性之间用分号
- 属性和属性值之间用冒号
- 属性值和属性值之间用空格
4.Css选择器:需要对哪个标签里面的数据进行操作
1.标签选择器
<style type="text/css">
div{
background-color : red ;
color : green;
}
p{
background-color : white ;
}
..........
<div>求职之路复习篇-Css样式</div>
<p>求职之路复习篇-Css选择器</p>
2.class选择器:每个html标签都有一个属性class
<style type="text/css">
p.jianshu{
background-color : white ;
}
..........
<p class="jianshu">求职之路复习篇-Css选择器</p>
3.id选择器：每个html标签上面都有一个属性id
<style type="text/css">
p#jianshu{
background-color : white ;
}
..........
<p id="jianshu">求职之路复习篇-Css选择器</p>
5.Css选择器的优先级:style>id选择器>class选择器>标签选择器
6.Css的扩展选择器
1.关联选择器:div空格p
注：需求：设置div标签里面p标签的样式，嵌套标签里面的样式
<style type="text/css">
div p{
background-color : white ;
}
..........
<div><p>求职之路复习篇-Css选择器1</p></div>
<p>求职之路复习篇-Css选择器2</p>
2.组合选择器
注：需求：把div和p标签设置成相同的样式，把不同的标签设置相同的样式
div,p{
background-color : orange ;
}
..........
<div>求职之路复习篇-Css选择器1</div>
<p>求职之路复习篇-Css选择器2</p>
3.伪元素选择器：css里面提供了一些定义好的样式，可以拿来使用
注：超链接
原始状态 鼠标放上状态 点击状态 点击后状态
:link :hover :active :visited
<style type="text/css">
a:link{
background-color : white ;
}
a:hover{
background-color : red ;
}
.......
<a href=“www.tj-kingdee.com”>求职之路复习篇-Css选择器1<a>
后续持续更新......
网友评论