JAVA040
为什么学习css？
1）HTML虽然可以一定程度上修饰页面，但是页面的整体还是不够美观。
2）HTML进行页面的书写重复的代码比较多，后期的维护性不好。
什么是CSS？
CSS称为层叠样式表,CSS依附于HTML使用。
CSS的引入方式
CSS样式在HTML文件中的引入方式分为四种,行内式、内嵌式、外部式、导入式。
1） 行内式：该方式在body中通过在标签使用style属性来进行样式的添加。
2） 内嵌式：该方式在head中通过style标签来进行样式的添加。
3）外部式：该方式通过在head中使用link标签来外部的css文件引入,通过href属性来指定外部css文件的位置,通过type属性指定引入的文本类型为css文件类型。
4）导入样式：该方式在head中在style标签通过@import来进入css文件的导入操作。
示例：
<!CSS选择器
基础选择器
1) 通用选择器
通用选择器作用于文档中的所有样式。
格式为: *{}
2) 标签选择器
标签选择器作用于标签级别内容的样式。
格式为: 标签名{}
3) ID选择器
ID选择器作用于id级别内容的样式,id最好需要保证唯一性且id的命名可由字母、数字、下划线和中华线组成,不能以数字开头.
格式为: #id名称{}
1) class类选择器
class类选择器作用于class级别内容的样式,class可重名使用,且可使用例如class=”style01 style02”,这样代表了此时应用了两个样式为style01和style02且两个样式的关系为叠加关系.
格式为: .class名称{}
关系选择器
关系选择器分为后代选择器、子选择器和兄弟选择器三种。
1) 后代选择器
后代选择器作用于一个父节点下所有指定的子节点,包含直系子节点和孙子节点
格式例如: div span{}
2）子选择器
子选择器作用于一个父节点下的所有直系子节点,不包含孙子节点
格式例如: #div>span{}
3) 兄弟选择器
a）只会改变下面相邻的元素对象
兄弟选择器作用于A节点的下一个紧凑相邻的B节点
紧凑相邻的意思就是span标签必须紧挨着div标签,如果在两个标签之间有其他标签则所写样式不生效
格式例如: A+B{}
<head> <style> #p_1+p{
color: red;
} </style> </head>
<body>
<p id="p_1">我们不一样</p>
<p>我们不一样</p> <body/>
打印结果：
b） 后面所有兄弟对象都会改变
CSS3中的兄弟选择器作用于A节点相邻的所有B节点(A节点必须和B节点是同级的)
格式例如: A~B{}
<style>
<head>
#p_1~p{
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<p id="p_1">我们不一样</p>
<p>我们不一样</p>
<p>我们不一样</p>
<body/>
打印结果：
伪类选择器
伪类选择器作用于父节点下的子节点,例如操作父节点下的最后一个子节点,父节点下的第n个子节点。
/*伪类选择器*/
<head> <style>
a:hover{
color: red;
}
</style> </head>
<body>
<a href="">京东网站</a>
</body>
打印结果：
代码示例：
<!css常用属性
字体相关font
font-size样式用来设置字体的大小。
font-weight样式用来设置字体加粗。
font-style样式可设置字体倾斜。italic;
font-family样式用来设置字体的风格。
文本（text）
text-decoration样式可用来设置下划线的去除和添加,可设置的值有none,underline等。
border用来设置盒子的边框
border-color
border-width
border-style
CSS常用属性2
行高 line-height
设置背景图片 background-image:
设置背景图片不重复 background-repeat: no-repeat;
调整背景图片的位置 background-position: center;（居中）
调整背景图片的大小 宽 高 background-size: 300px 500px;
CSS常用属性3
行内元素：span font 小标签 img a 等。
块元素：（标签可以自动换行的元素是块元素）div h1-h6 ul p 等 。
调整透明度的属性opacity:
行内元素转块级元素 inline block none(隐藏)
CSS中的定位
CSS的定位方式分为绝对定位absolute、相对定位relative和固定定位fixed,所有定位设置都是在样式中通过position样式来进行设置;当盒子定位发生改变之后盒子具有了层级关系,上层会覆盖下层,此时可使用z-index: -1;来将上层的盒子置于底层。
1) 绝对定位
绝对定位absolute是基于外层父级标签来说的,在位置变换之后会释放之前的位置。
使用方式为position: absolute;接着可以依据外层标签为参照点进行上下左右的移动;
top:参考点为父级标签的顶部,默认向下,负数表示向上
bottom:参考点为父级标签的底部,默认为向上,负数表示向下
left:参考点为父级标签的左测,默认向右,负数表示向左
right:参考点为父级标签的右侧,默认向左,负数表示向右
2) 相对定位
相对定位relative是基于自身来说的,在位置变化之后不会释放之前的位置。
使用方式为position: relative;接着可依据自身的位置为参考点进行上下左右的移动;
top:参考点为自身位置的顶部,默认向下,负数代表向上
bottom:参考点为自身位置的底部,默认向上,负数代表向下
left:参考点为自身位置的左侧,默认向右,负数代表向左
right:参考点为自身位置的右侧,默认向左,负数代表向右
3) 固定定位
固定定位fixed是基于浏览器的,该方式位置变化之后会释放之前的位置
使用方式为position: fixed;接着可依据浏览器作为参数点来进行上下左右的移动
top:参考点为浏览器的顶部,默认向下,负数代表向上
bottom:参考点为浏览器的底部,默认向上,负数代表向下
left:参考点为浏览器的左侧,默认向右,负数代表向左
right:参考点为浏览器的右侧,默认向左,负数代表向右
盒子模型
首先在浏览器这个大盒子中,有一个div标签并且div标签中有一个文本,内容为helloworld。
1) padding则表示为文本到div盒子的内边距离,padding样式可针对上下左右四个方向进行设置,padding-top,padding-right,padding-bottom,padding-left;
padding样式还有三种设置方式分别为:
padding: 40px; 这样设置为上下左右的内边距都为40px
padding: 40px 20px; 这样设置为上下40px,左右20px
padding: 10px 20px 30px 40px;
2) margin则表示为div盒子与浏览器之间距离,margin样式可针对上下左右四个方向进行设置,例如margin-top,margin-right,margin-bottom,margin-left;
margin样式还有三种设置方式分别为:
margin: 40px; 这样设置为上下左右的外边距都为40px
margin: 40px 20px; 这样设置为上下40px,左右20px
margin: 10px 20px 30px 40px;
900
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
