JavaCSS3

CSS 层叠级联样式表

快速入门

CSS可以在html文件中写，写在< style>中，一般style写在head中（HTML,CSS没有分离）

<style>
    h1（选择器）{
		可以设置h1的属性（声明，分号结尾）
    }
</style>

分离：在html中使用< link>，其中的href指向css文件所在位置。分离可以实现复用

CSS3种导入方式

1. 行内样式，在标签元素中编写一个style属性
2. 内部样式，在style中写css
3. 外部样式
   1. 链接式（属于html），使用link导入css文件位置
   2. 导入式（属于CSS2.1特有的）：在style中使用@import url导入css文件位置（一般不用）

优先级采用就近原则，谁离元素更近就采用哪个，行内是最近的

选择器

作用：选择页面上的某一个或者某一类元素

基本选择器

1. 标签选择器：元素+代码块。会选择到页面中的所有这个标签
2. 类选择器：先给元素赋class属性名，使用 .类名+代码块。可以归类
3. id选择器：先给元素赋id名，使用 #id号+代码块。id全局唯一

优先级：id选择器>class选择器>标签选择器

层次选择器

1. 后代选择器：在某个元素后面 body（空格）p：body下面的p选择器
2. 子选择器 一代 body>p: body的子类p，不包括p的子代
3. 相邻（对下不对上，且只有一个）兄弟选择器：同辈 .active + p：active类这个元素周围的所有p标签
4. 通用选择器，类似于相邻选择器，但是可以选中下面的所有。 .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：字体风格（斜体等），粗细，大小，字体样式

文本

1. 颜色color
2. 对齐方式text-align，居中是center
3. 首行缩进text-indent
4. 背景background与height
5. 行高line-height
6. 装饰text-decoration
7. 阴影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会

解决方法

1. 增加父级元素的高度
2. 增加一个空的div
3. overflow可以生成一个滚动条，如果规定的文本超出了边界，就可以出现滚动条。设置为hidden会隐藏滚动条
4. （推荐）在父类中添加一个伪类 :after。里面content设一个空字符，display设置为block，clear设置为both

定位

相对定位

相对于自己原来的位置进行偏移

position:relative

使用top，left，right，bottom他们代表的是相对于某个方向的距离

他的原来位置仍然保留在边框中

绝对定位

基于xxx定位

原来位置不保留，可能会引起父类边框塌陷

position:absolute

如果没有父级元素定位：相对于浏览器定位

如果父级元素有定位属性，则会相对于父级元素定位。一般给父级一个空的relative定位

只能在父级元素范围内移动，虽然不在标准文档流中，偏移也是相对于原来位置，滚动浏览器位置会移动

固定定位

滚动浏览器位置不会移动，是相对于浏览器边框定位的

z-index

可以设置元素的层级，类似于ps中的图层