CSS（二）

CSS（二）

  至于CSS（一）里面所说四种引入方式及三种选择符（选择器）的优先级比较分别为：（1）引入方式实际情况中是采用“就近原则”的方式来判断优先级的，谁离所修饰的目标越近则谁的优先级越高，一般行内样式的优先级最高，因为行内样式本来就在所修饰目标的标签内使用所以一般它的优先级都比其他几个的优先级高；（2）选择符（选择器）的优先级比较则是：id>class>标签。

字体样式

功能	语法
设置字号	font-size:12px
设置字色	color:#000000
设置字体	font-family:Arial,‘宋体’
设置行高	line-height：150% line-height：1.5em
设置字体的粗细	font-weight：normal[正常]bold[粗体]

<font size=1-7>
浏览器默认字体大小为16px
常用单位：px 像素 em 当前字体尺寸 百分比单位用的比较多
百分比单位用的比较多的原因： 屏幕适配的

CSS样式的特点

继承--------层叠
1、继承：
网页中子元素，将继承父元素的样式
例如：要控制段落p中的文字大小，可以直接给body标记加样式。
2、层叠：
网页中子元素定义了与父元素相同的样式，则子元素的样式将覆盖掉父元素的样式，后面定义的样式，会覆盖前面定义的样式

文本控制

功能	语法
设置对象中文本缩进	text-indent：2em 可以为负值
文本水平对齐方式	text-align：left[左]center[中]right[右]
对象中空白处理	white-space：normal[自动换行] pre[换行和空白受保护]nowrap[强制在同一行显示]
本文大小写控制	text-transform：none[正常大小] capitalize[每个单词的第一个字母转换成大写]uppercase[转换成大写]lowercase[转换成小写]
元素的垂直对齐方式	vertical-align：sub[设置文字为下标] super[设置文字为上标]top[把元素的顶端与行中最高元素的顶端对齐]text-botton[把元素的底端对齐

<sub> <sup>通常用于描述数学公式

缩进效果：

1. 文章空2格 text-indent：2em;
2. 隐藏标题 text-indent:-9999;

伪类

Body 标签 link alink vlink
在css有相应的伪类去替代他们
标签:伪类{ 样式 }

状态	语法
未访问链接	a:link{color:#ff0000}
已访问链接	a:visited{color:#00ff00}
鼠标移动到链接上	a:hover{color:#ff00ff}
鼠标按下到链接上	a:active{color:#0000ff}

以上4个伪类中hover 最常用 经常针对a标签使用居多，在使用上面伪类时代码有一个顺序排列BUG最少的是link---->visited ---->hover ---->active

常使用的几种线的表现形式：
text-decoration: none; 没有下划线
underline 下划线
overline 上划线
line-througn 贯穿线

CSS核心内容

css命名

关于css命名法，和其他的程序命名差不多，主要有三种：驼峰，帕斯卡，匈牙利法

驼峰 命名法：除第一个单词首字母小写外，其余所有单词首字母都大写#headerBlock
帕斯卡命名法：与驼峰相似，区别都是所有单词首字母都大写#HeaderBlock
匈牙利命名法：是需要在名称前面加上一个或多个小写字母作为前缀#head_block

选择符（选择器）

在CSS（一）说到了三种分别是：id、class(类)、标签选择符（选择器），另外还有以下几种：
4. 通配符选择器
*{ color:red;}
  对页面中所有的标签都起作用
  什么时候使用通配符选择器
  一般情况下 在css页面刚开始的时候 描述通用属性

*{
        	pading:0;
        	margin:0;
        	list-style: none;
     }

5.包含选择符
语法e1 e2{属性：值} e1 是e2的父节点标签
标识：空格
包含关系

ul #header{
        	pading:0;
        	margin:0;
        	list-style: none;
        }

6.选择符分组
标识： , 逗号
用它可以替代 通配符选择符

body,h1,div,ul,li{
	    	pading:0;
        	margin:0;
        	list-style: none;
	    }

7.标签指定式选择符
标签指定式选择符：如果既想使用id或class，也想同时使用标签选择符

h1#content{}

8．组合选择选择符 前面的1-7种组合性使用

h1.p1,h1#content{}

盒子模型（重点）

Div 分区
Div+css
4个属性
Content 内容
Padding 内边距
Border 边框
Margin 外边距

Padding和margin的用法相似

一个参数时 表示 上下左右
二个参数时 表示 上下 和 左右
padding:100px 200px 300px; 表示 上，左右，下
padding:100px 200px 300px 400px; 表示 上 右 下 左
padding -top
top bottom left right
padding-top: 100px;
自动化居中 auto