Java CSS3
CSS 层叠级联样式表
快速入门
CSS可以在html文件中写,写在< style>中,一般style写在head中(HTML,CSS没有分离)
<style>
h1(选择器){
可以设置h1的属性(声明,分号结尾)
}
</style>
分离:在html中使用< link>,其中的href指向css文件所在位置。分离可以实现复用
CSS3种导入方式
- 行内样式,在标签元素中编写一个style属性
- 内部样式,在style中写css
- 外部样式
- 链接式(属于html),使用link导入css文件位置
- 导入式(属于CSS2.1特有的):在style中使用@import url导入css文件位置(一般不用)
优先级采用就近原则,谁离元素更近就采用哪个,行内是最近的
选择器
作用:选择页面上的某一个或者某一类元素
基本选择器
- 标签选择器:元素+代码块。会选择到页面中的所有这个标签
- 类选择器:先给元素赋class属性名,使用 .类名+代码块。可以归类
- id选择器:先给元素赋id名,使用 #id号+代码块。id全局唯一
优先级:id选择器>class选择器>标签选择器
层次选择器
- 后代选择器:在某个元素后面 body(空格)p:body下面的p选择器
- 子选择器 一代 body>p: body的子类p,不包括p的子代
- 相邻(对下不对上,且只有一个)兄弟选择器:同辈 .active + p:active类这个元素周围的所有p标签
- 通用选择器,类似于相邻选择器,但是可以选中下面的所有。 .active~p
结构伪类选择器
ul li : 可以形成一个伪类,是ul的所有li元素。使用first-child等可以选其中的元素
first-child第一个元素
last-child最后一个元素
nth-child()如果只写li,使用这个会定位到li的父级元素ul,选择他的第x个元素,而且需要是当前元素类型才能生效
nth-of-child()上面的方法存在无法选中的情况,而这个方法是选中第x个指定类型的元素
属性选择器(常用)
.demo a+代码块:可以选中demo类下面的所有a属性的元素
a[id]+代码块:选中所有带有id属性的a标签,也可以指定属性的值;=为绝对等于,*=为包含,^=为以,,,开头,$=为以...结尾,后面的几个都是正则表达式
美化网页元素
字体
span标签用于突出文字,需要在style中写具体的内容。span只是约定俗成的规定
style中用font改字体,可以改字体样式,大小,粗细
省略的写法:font:字体风格(斜体等),粗细,大小,字体样式
文本
- 颜色color
- 对齐方式text-align,居中是center
- 首行缩进text-indent
- 背景background与height
- 行高line-height
- 装饰text-decoration
- 阴影text-shawdow
超链接伪类
在标签中加属性href="#"
在style中a:hover可以修改鼠标悬浮到a标签的超链接后的样式
在style中a:active可以修改鼠标按住a标签的超链接后的样式
背景
background-color/image
默认图片是平铺
快速方法:background:颜色 图片 图片位置 平铺方式
渐变www.grabient.com
盒子模型
margin外边框,跟padding一样
padding内边框,只输入一个数值就默认是全部,或者输入四个,代表上下左右。写两个,前面代表上下,后面代表左右。使用auto可以实现居中等样式
border边框 border:粗细 样式 颜色
总有一个默认的外边距0
圆角边框
border-radius。输入一个是全部角。输入两个分别是左上右下和右上左下
圆圈:圆角=半径
阴影
border-shadow
display与浮动
display可以将行内元素变为块元素等
block块元素
inline行内元素
inline-block是块元素,但是可以内联(在一行)
none消失
float浮动
clear可以使一个元素浮动的同时作为块元素(另起一行,不与其他元素浮动在一行)right:不允许右侧有浮动,both不允许两侧有浮动
父级边框塌陷的问题
由于内部元素设置为浮动(不算为边框内的内容),导致边框不能包含住那些浮动的元素。display不会导致(仍是边框内的内容),float会
解决方法
- 增加父级元素的高度
- 增加一个空的div
- overflow可以生成一个滚动条,如果规定的文本超出了边界,就可以出现滚动条。设置为hidden会隐藏滚动条
- (推荐)在父类中添加一个伪类 :after。里面content设一个空字符,display设置为block,clear设置为both
定位
相对定位
相对于自己原来的位置进行偏移
position:relative
使用top,left,right,bottom他们代表的是相对于某个方向的距离
他的原来位置仍然保留在边框中
绝对定位
基于xxx定位
原来位置不保留,可能会引起父类边框塌陷
position:absolute
如果没有父级元素定位:相对于浏览器定位
如果父级元素有定位属性,则会相对于父级元素定位。一般给父级一个空的relative定位
只能在父级元素范围内移动,虽然不在标准文档流中,偏移也是相对于原来位置,滚动浏览器位置会移动
固定定位
滚动浏览器位置不会移动,是相对于浏览器边框定位的
z-index
可以设置元素的层级,类似于ps中的图层