web前端CSS2学习2017.6.17

CSS---表现层，修饰和表现html文档，为了解决结构层和表现层分离的问题。
通过CSS极大的提高了工作效率，方便工作人员维护和管理
CSS:层叠样式表，目前用的最广泛的css版本为css2，最新版本是css3

----------------------------------------------------------------
一 CSS的放置位置
1 嵌入式
css里面我们叫html标签为html元素
放置位置：直接将css代码嵌入到html元素中
语法：<tag style="css属性1:css属性值1;css属性2:css属性值2;..."></tag>
<tag style="css属性1:css属性值1;css属性2:css属性值2;..."/>

作用范围：只作用于当前标签

2 植入式
语法：
<style>
选择器{
css属性1:css属性值1;
css属性2:css属性值2;
...
}
</style>
放置位置:放在head标签里面,通过一对style标签引入
作用范围：作用于当前的html页面

3 外联式：
放置位置：通过一个link标签引入外部的层叠样式表,link标签必须放在head标签里面
语法：<link rel="stylesheet" type="text/css" href="相对路径"/>
作用范围：公共的，任何一个html页面都可以引入，一旦引入就可以影响当前页面的样式

CSS放置位置的优先级顺序
嵌入式的优先级最高
植入式于外联式近标签者优先

----------------------------------------------------------------

二 CSS的语法

语法：<tag style="css属性1:css属性值1;css属性2:css属性值2;..."></tag>
<tag style="css属性1:css属性值1;css属性2:css属性值2;..."/>

语法：
<style>
选择器{
css属性1:css属性值1;
css属性2:css属性值2;
...
}
</style>

选择器1{
css属性1:css属性值1;
css属性2:css属性值2;
...
}

选择器2{
css属性1:css属性值1;
css属性2:css属性值2;
...
}
每条css属性及属性值后面，都要以分号分割，表示该条css代码结束

----------------------------------------------------------------

三 CSS的选择器

选择器：通过选择可以找到相对应的html元素

选择器分类：简单选择器、关系选择器、属性选择器、伪类选择器、伪对象选择器、组合选择器
选择器也可以叫做选择符

1 简单选择器

a 标签选择器
标签名{ css代码 }--->div{ css代码 }

b class选择器(类选择器)
<p class="pTag"></p>
ps:body及body里面所有的元素都有class这个HTML属性，class的属性值我们叫它类名或者class名
.类名{ CSS代码 }--->.pTag{ CSS代码 }
通过一个类名定义了一套样式，只要html元素里面引用了该类名，那么这套样式都会对元素有影响

如何来取类名：类名只能由数字、字母、下划线构成，但是不能以数字开头
1tag--->错误
tag1 navTagName NavTagName nav_tag_name nav-tag-name nav-tag-name1...

推荐方式：一个单词 tag1 nav-tag-name,所取类名必须要知名见意

<div class="header-container"></div>

ps:类名可以重复

c id选择器
<p id="idName"></p>

#id名{ css代码 }---->#idName{ css代码 }

ps:body及body里面所有的元素都有id这个HTML属性，id的属性值我们叫它id名

id的特性：具有唯一性，也就是id名不能重复，相当于咱们身份证号

如何来取id名：类名只能由数字、字母、下划线构成，但是不能以数字开头
1tag--->错误
tag1 navTagName NavTagName nav_tag_name nav-tag-name nav-tag-name1...

推荐方式：一个单词 tag1 navTagName,所取id名必须要知名见意
尽量采用驼峰命名法：第一个单词全部小写，第二个单词及以上首字母大写
id选择器我们尽量不要使用在css里面

d 全局选择器(*)
*{ css代码 }--->可以让当前页面的所有元素都对全局选择器里面所定义的样式产生影响

------简单选择器的优先级顺序-------
id选择器>class选择器>标签选择器>全局选择器

2 组合选择器
a 标签名.类名
<div class="header-container"></div>
div.header-container{ css代码 }

b 标签名#id名
<div id="headerContainer"></div>
div#headerContainer{ css代码 }

c 逗号选择器(,)
<p></p>
<span></span>
p,span{ css代码 }
总结：选择器1,选择器2...{ css代码 } ---->让选择器1、选择器2等等共享这套样式

3 关系选择器
a 相邻选择器(E+F)----E、F分别泛指所有的css选择器，选择紧贴E元素后面的F元素

b 子代选择器(E>F)----选择E元素里所有的F子元素

c 后代选择器(E F)----选择E元素里面所有的F元素

----------------------------------------------------------------
--------
|CSS2属性|
--------
一 文本
1 水平对齐方式
text-align:left/right/center
也可以让img、input等有水平方向的对齐方式

2 垂直对齐方式
vertical-align:top(居顶部)/bottom(居底部)/middle(居中)
多用于table

3 设置行高
line-height:50px/10%;
如果让文本垂直居中与容器，将line-height的值设置跟容器的高度一样。只适用于单行文本

4 首行缩进
text-indent:50px;

5 内容自动换行(css3)
word-break:break-all;---允许在单词内部进行换行
word-break:keep-all;只在空格处或连字符（-）处换行

6 词间距
word-spacing:10px;单词与单词之间的间隙为10px,只要有空格出现就认为是一个词的开始

7 字间距
letter-spacing:5px;设置字(字符)之间的间隙5px

8 设置字体颜色
color:颜色;

9 设置大小字母的转换
text-transform:none/capitalize/uppercase/lowercase;
capitalize:将每个单词的第一个字母大写
uppercase：将单词所有的字母都转换成大写
lowercase：将单词所有的字母都转换成小写

10 文本修饰
text-decoration:none/underline/line-through/overline;
none:不添加或者去掉文本修饰
underline:添加下划线
line-through:添加删除线
overline:添加上划线

如果要去掉a标签默认的下划线，设置text-decoration:none;

二 字体的属性
1 设置字体大小
font-size:50px;

2 字体风格
font-style:italic(斜体)

3 字体加粗
font-weight:bold;

4 设置字体类型
font-family:"黑体"

5 设置小型的大写字母
font-variant:small-caps;

三 边框属性(border)
border-width:5px;设置边框的粗细
border-color:red;设置边框的颜色
border-style:solid(实线)/dotted(点状线)/dashed(块状线);设置边框样式

缩写：
border: 粗细 样式 颜色;

如果给某一边加边框：top right bottom left
border-top-width:5px;
border-top-color:red;
border-top-style:solid;
缩写：
border-top: 粗细 样式 颜色;

四 容器宽高属性(width/height)
width:300px/20%;
height:300px/20%;

-----补充----
常见的块级元素：div ul li ol dt dd hn p table form...
块级元素的特点：可以自动换行、可以直接设置宽高

常见的行内(内联)元素:span a b i s u select option...
内联元素的特点：对宽高没有直接作用、不会自动换行

常见的空元素：link meta br hr input img...
空元素的特点：没有内容 在开始标签中闭合,input、img、hr等可以直接设置宽高

max-width:500px/50%;设置容器的最大宽度
min-width:500px/50%;设置容器的最小宽度

max-height:100px/10%;设置容器的最大高度
min-height:100px/10%;设置容器的最小高度

五 显示（display）
display:none/block/inline/inline-block/line-table/table
none：设置元素隐藏
block:以块级元素显示，设置行内元素以块级元素显示
inline:以行内元素显示，设置块级元素以行内元素显示
inline-block:行内元素的宽高都起作用，但是不会换行显示
table:以表格的方式来显示
inline-table:将行内元素作为表格的方式来显示，而且不会换行---多用于表格(table)同行显示

六 CSS的注释
/* 注释内容 */

七 背景(background)
background-color:颜色;设置容器的背景色
background-image:url("相对路径");设置容器的背景图
background-repeat:repeat/no-repeat/repeat-x/repeat-y;设置背景以那冲方式重复显示
repeat:重复显示,默认值
no-repeat:不重复显示
repeat-x:横向重复显示
repeat-y:纵向重复显示
background-position:水平方向的值 垂直方向的值;如果只写一个方向，另外一个方向默认为center
水平方向的值：left right center 50px 10%
垂直方向的值：top bottom center 50px 10%
默认的为background-position: left top;起始位置为容器的左上角。

background-attachment:设置图片是否随着滚动条滚动,一般都用于body
scroll:滚动
fixed:固定
默认为scroll

缩写:
background: color url("") repeat attachment postion;

八 盒模型（框模型）

页面上任何一个元素我们都可以看成是一个盒子，盒子会占用一定的空间和位置他们之间相互制约，就形成了网页的布局

w3c的盒模型的构成：content border padding margin

1 padding:内边距（内部填充距）
padding-right:50px/10%;
padding-left:50px/10%;
padding-top:50px/10%;
padding-bottom:50px/10%;

缩写：
padding: 上 右 下 左;----从十二点钟方向开始，顺时针

padding: 50px;表示四个方向的值都设置成50px

padding: (上下) (左右);表示上下的值一样，左右的值一样

padding: 上 (左右) 下;

2 margin:外边距，元素与元素之间的距离
margin-right:50px/10%;
margin-left:50px/10%;
margin-top:50px/10%;
margin-bottom:50px/10%;

缩写：
margin: 上 右 下 左;----从十二点钟方向开始，顺时针

margin: 50px;表示四个方向的值都设置成50px

margin: (上下) (左右);表示上下的值一样，左右的值一样

margin: 上 (左右) 下;

如果让一个容器水平方向居中：margin: px/% auto;

margin值在垂直方向会有重叠的现象，在取值的时候取较大值

九 浮动
文档流：正常的文档流是块级元素从上到下，行内元素从左到右的顺序展示
给一个元素赋值浮动后，该元素就会脱离正常的文档流进行左右浮动，直到它本身的外边缘碰到包含框或另一个浮动框的左右
float:left/right;
left---向左浮动
right---向右浮动

加了浮动过后的元素会导致父元素高度陷塌，由加了浮动过后的元素导致的，脱离了正常文档流

如果将多个同辈元素设置成向右浮动过后，会让这些元素倒着排序

解决父元素高度陷塌的方法：
1 设置父元素的高度
2 清除浮动

浮动的作用：可以让块级元素同行显示

十 列表属性（li）
列表的项目符号
list-style-type:disc(实心)/circle(空心圆)/square(方块)/none(不设置或者去掉)
list-style-image:url("图片路径");可以用背景图来设置项目符号
list-style-postion:outside(外面)/inside(里面);设置项目符号的位置

缩写：
list-style: type/image positon;
list-style:none;去掉项目符号

十一 表格属性(table)
border-collapse:separate(表格独立)/collapse(相邻边合并)
border-spacing:px/%;设置td与td之间的距离；

布局总结：
分类导航、菜单栏：div>>>>ul（ol）>>>>li
显示数据：table>>>>>tr>>>>td
表单布局：form(div)>>>>input