CSS基础（上）

CSS基础（上）

1.个性表格：http://www.runoob.com/try/try.php?filename=trycss_table_fancy
2.没有表格的网页：http://www.runoob.com/try/try.php?filename=trycss_float6

CSS全称为“层叠样式表”，它主要用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
1.CSS样式：由选择符和声明组成，声明又由属性和值组成

2.在CSS中，用/*注释语句*/来标明
3.CSS样式代码插入的形式有3种：内联式、嵌入式、外部式
内联式：<p style="color:red" ;(分号) font-size:12px >这里文字是红色</p>
嵌入式：（适用于多个地方的设置）
外部式：（简化繁杂代码）

4.选择器：指部分中在{}之前的部分，选择器指明了{}中的样式的作用对象，也就是样式作用于网页中的哪些元素。

选择器{
      样式；
      }

5.类选择器：（语法为） .类选择器名称{css样式代码；}

6.ID选择器：很多方面，ID选择器都类似于选择符，但也有一些重要的区别：
为标签设置id=“ID名称”，而不是class=“类名称”
ID选择符的前面是井号（#）号，而不是英文圆点（.）。
一个元素的id应该是唯一的。另一个元素不应该重复使用

7.类选择器和ID选择器的区别（但均可用于任何元素）：
ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次
可以使用类选择器词列表方法为一个元素同时设置多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的

<span id="stress bigsize">....</span>这是不正确的
8. 子选择器，即大于符号（>）,用于选择指定标签元素

9.包含（后代）选择器：
.first span{color : red;}

10.通用选择器：

11. 伪类选择器：给不存在的标签设置样式，比如说给html中的一个标签元素的鼠标滑过的状态来设置字体颜色

12. 分组选择符：为html中多个标签元素设置同一个样式时，可使用分组选择符（，）如：

.first,#second span{color:green;}

13.继承（若某种颜色应用于p标签，即该设置仍可应用于p标签中的所有子元素文本）
特殊性：若为同一个元素设置了不同的CSS样式，则根据权值来判断使用哪种CSS样式【标签p的权值为1，类选择符的权值为10，ID选择符的权值为100】

层叠：（CSS样式具有相同权重值时）根据样式的前后顺序来决定，取决于最后面的CSS样式

重要性：使用!important设置具有最高权值（p{color:red!important ;）

14.1 背景
背景颜色：background_color p.gray {background-color: gray;}
图片做背景：

div#test
  {
    background-image:url(/study/background.jpg);
    width:200px;
    height:100px;
  }

背景重复：
background-repeat属性值可以选
repeat; 水平垂直方向都重复
repeat-x; 只有水平方向重复
repeat-y; 只有垂直方向重复
no-repeat; 无重复
背景平铺：

<style>
div#contain
  {
    background-image:url(/study/background_small.jpg);
    width:200px;
    height:100px;
    background-size: contain;
  }
</style>
  
<div id="contain">
   背景平铺，通过拉伸实现，会有失真
</div>

14.2 文字排版
字体：body{font-family:“微软雅黑”;}
字号、颜色：body{font-size:12px;color:#666}
粗体：p span{font-weight:bold;}
斜体：p a{font-style:italic;}
下划线：p a{text-decoration:underline;}
删除线： .oldPrice{text-decoration:line-through;}
缩进：p{text-indent:2em;}
行高：p{line-height:1.5em;}
中文字间距、字母间距：h1{letter-spacing:50px;}
单词间距：h1{word-spacing:50px;}
对齐：（居中）h1{text-align:center;} （居左）h1{text-align:left;} （居右）h1{text-align:right;}
文本修饰：属性：text-decoration

<style type="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration:blink}
.a {text-decoration: none}
</style>
 
<h1>上划线</h1>
<h2>删除效果</h2>
<h3>下划线</h3>
<h4>闪烁效果，大部分浏览器已经取消该效果</h4>
<a href="http://how2j.cn/">默认的超链</a>
<a class="a" href="http://how2j.cn/">去掉了下划线的超链</a>

大小写：属性：text-transform
值：
uppercase 全部大写
capitalize 首字母大写
lowercase 全部小写
空白格：属性：white-place
值：
normal—默认。多个空白格或者换行符会被合并成一个空白格
pre—有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器也不会换行。
pre-wrap ----有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器，会换行。
nowrap ----一直不换行，直到使用br
鼠标样式：

<style>
  span{
    cursor:crosshair;
  }
</style>
  
<span>鼠标移动到这段文字上，就看到鼠标样式变成了十字架</span>

14.3表格
表格布局：属性:table-layout
automatic–单元格的大小由td的内容宽度决定
fixed–单元格的大小由td上设置的宽度决定
注：只对连续的英文字母起作用，如果使用中文就看不到效果

表格边框：属性：border-collapse
separate–边框分隔
collapse–边框合并

边框风格：属性： border-style
solid: 实线
dotted:点状
dashed:虚线
double:双线
边框颜色：属性：border-color
边框厚度：属性：border-width
只有一个方向有边框：
eg:border-top-style:solid;
border-top-color:red;
border-top-width: 50px;
有交界的边都有边框: 当有交界的边同时出现边框的时候，就会以倾斜的形式表现交界线。

14.4 链接
超链状态有4种
link - 初始状态，从未被访问过
visited - 已访问过
hover - 鼠标悬停于超链的上方
active - 鼠标左键点击下去，但是尚未弹起的时候

14.5隐藏
使用display:none; 隐藏一个元素，这个元素将不再占有原空间 “坑” 让出来了
使用 visibility:hidden;隐藏一个元素，这个元素继续占有原空间，只是“看不见”

15.元素分类
块级元素：（有<div><p><h1><form><ul><li>;可通过设置p{display:block;}将其显示为块级元素）

内联元素：（有<span><a><label><strong><em>；可通过设置p{disaplay:inline;}将元素设置为内联元素）

内联块状元素（有<img><input>；可通过设置p{display:inline-block;}来显示为内联块状元素）

元素内边距
指的是元素里的内容与边框之间的距离
属性：
padding-left: 左内边距
padding-right: 右内边距
padding-top: 上内边距
padding-bottom: 下内边距
padding: 上 右 下 左

元素外边距
指的是元素边框和元素边框之间的距离
属性：
margin-left: 左外边距
margin-right: 右外边距
margin-top: 上外边距
margin-bottom: 下外边距

16.盒子模型（块状元素）
边框：div{border:2px solid red;}也可只设置任一边框，其他三边都不设置（p{border-bottom/top/left/right:1px solid red;}）

宽度和高度：指盒子填充以里的内容范围（width:200px; height:30px;）

填充：元素内容和边框之间的距离（上、右、下、左：div{padding:20px 10px 15px 30px;}
若上右左下均为10px，则为div{padding:10px;}
若上下填充一样为10px，左右一样为20px，则为div{padding:10px 20px;}）

边界：元素与其他元素之间的距离（上、右、下、左：div{margin:20px 10px 15px 30px;}
若上右左下均为10px，则为div{margin:10px;}
若上下填充一样为10px，左右一样为20px，则为div{margin:10px 20px;}）
注：padding和margin的区别：padding在边框里，margin在边框外

17.CSS布局模型（在网页中，元素有三种布局模型：1.流动模型 2. 浮动模型 3. 层模型）

• 流动模型（默认网页布局模型：从上而下）
  【1.块状元素都会在所处的包含元素内自上而下顺序分布 2. 内联元素都会在所处的包含元素从左往右水平分布显示】
• 浮动模型（如div、p、table、img等元素都可以被定义为浮动，实现让两个块状元素一行显示）
  【例子：div{float:left（左对齐）/right（右对齐）;} 两个元素一左一右在一行显示：#div{float:left;} #div{float:right;}】
• 层模型
  【1.绝对定位（相对于浏览器窗口）：向右移动100px，向下移动50px，div{position:absolute; left:100px; top:50px;} 2. 相对定位（相对于以前的位置移动,且偏移前内容的位置不变）：向右移动100px，向下移动50px，div{position:relative; left:100px; top:50px;} 3.固定定位（fixed，相对于屏幕内的网页窗口）】

18.颜色值：
英文：p{color:red;}
RGB颜色：p{color:rgb(133,45,200);}
十六进制：p{color:#00ffff;}

19.长度值：
像素：px（90像素=1英寸）
em：

20.水平居中
行内元素：text-align:center;
定宽块状元素：

不定宽块状元素：

21. 垂直居中：
（单行文本）通过设置父元素的height和line-height高度一致来实现
（多行文本）使用插入table标签，同时设置vertical-align：middle