JavaWeb基础（二）CSS

1、层叠样式表----目的：给html加各种样式，便于维护更新；语法：选择器：{属性名：属性值；属性名：属性值；}

2、四种引入CSS样式的方法：

行内样式表（临时做测试）：

<标签名 style="属性：属性值"> </标签名>

内嵌样式表

<style type="text/css">

</style>

外部样式表

<link rel="stylesheet" href="xxx.css" />【与页面同时加载，兼容好】

导入样式表

@import url(xx.css); /*在.css文件中放入或者在内嵌表中加入；【会等到页面全部被下载完再被加载，兼容差】*/

注：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的

3、文本属性：

font-size:文本大小

font-weight:bold/normal    /*字体是否粗细*/

font-style:italic/normal    /*字体是否倾斜*/

font-family:隶书... /*默认宋体*/

text-decoration: underline;下划线、overline;上划线、line-through;删除线、none;去掉所以线条

text-indent: 2em;   /*文本首行缩进*/

coolor:文本颜色

letter-spacing:2px;/*字母与字母之间的距离*/

word-spacing:2px;   /*单词与单词之间的距离*/

text-align:left/center/righr;   /*文本行内位置*/

text-shadow:水平 垂直 模糊强调 颜色;【可以有多组值用逗号隔开】/*设置文本阴影*/

4、背景属性：

background-color、background-image:url、background-repeat:no-repeat/repeat-x/repeat-y/repeat（默认平铺）、background-position:水平【left center right】 垂直【top center bottom】数值【正 负】

简写：background:背景颜色 背景图片 是否平铺  【附件】水平 垂直

background-attachment:背景附件，背景是否随上方的内容一起滚动【fixed固定、scroll滚动（默认）】

背景缩放background-size:宽 高 cover【覆盖上盒子,使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在背景定位区域中】/contain【把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。】

5、列表属性：

去掉列表符号 list-style:none;

小图代替列表前的符号ul,ol{list-style-image:url(路径);}

6、合并表格边框线：

table{border-collapse:collapse;}

7、边框线属性：

border-top/bottom/right/left-color/style【solid实线 dashed虚线 dotted点状线】/width

简写：border-top:粗细 线型 颜色

8、盒模型【纵向】：

内容区：width/height

边框：border

内边距：padding上右下左

外边距：margin上右下左

盒子阴影box-shadow:2px 2px 2px 2px gray inset;【水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 将外部阴影改为内部】

盒子圆角box-radis:2px 2px 2px 2px【左上 右上 右下 左下】【圆box-radis:50%;】

9、浮动【横向】：

float:left/right;/*浮动不占空间*/

clear:left/right/both;/*清除浮动*/

10、定位

position:

static默认 fixed固定 不占空间，层级比普通标签高

relative相对定位 占空间相对自身位置

absolute绝对定位 不占空间，层级高于普通元素（祖先无定位，往上找，相对于body）

坐标的属性：【偏离目标元素的位置】

left/right/top/bottom:数值

11、行内元素【输入标签以后，不是自己占一行】强转块元素display:inline;

12、块元素【独占一行，可设宽高】强转行内元素display:block;

13、内容溢出处理overflow:hidden【溢出隐藏】/auto【溢出有滚动条】/scroll【无论是否溢出都有滚动条】

14、继承：外层元素的样式，会被里面的元素所继承

文本的属性可继承，不被继承的有a标签

15、优先级：标签选择器【权重1】、类选择器【10、主要用于css】、id选择器【100、主要用于javascript】

16、缩放旋转：

-webkit-transform:scale(1.5) rotate(10deg);/*放大到1.5，顺时针旋转10度【负则逆时针】*/
-moz-transform:scale(1.5) rotate(10deg);
-o-transform:scale(1.5) rotate(10deg);

17、伪元素：

a标签：a:link【未访问时样式】a:visited【访问过的链接样式，:visited 要放在 :link 的后面】a:hover【鼠标移动到链接上时样式，尽量放在最后，防止具备其他状态时，被其他状态的设置覆盖掉】a:active【点击一瞬间的样式，应该放在 :link :hover的后面】

E:first-letter设置第一个文字

E:first-line设置第一行文字

E::after盒子【里面】后面插入内容

E::before盒子【里面】前面插入内容

18、伪类结构：

E:only-child

E:nth-child(n)

E:nth-child(2n+1/odd)

E:nth-child(zn/even)

19、属性选择器：

E---元素，data---属性

E[data]：选择器带有data属性的元素对象加样式

E[data="one"]：选择带有data属性且属性值为one的元素对象加样式

E[data^="p"]:选择带有data属性且属性值以p开头的元素对象加样式

E[data$="e"]:选择带有data属性且属性值以e结尾的元素对象加样式

E[data*=''n"]:选择带有data属性且属性值中包含n的元素对象加样式