CSS总复习1

先HTML后CSS

用HTML进行结构划分，用CSS美化

字体相关

font-size：字号大小

font-family:字体

当字体的名字不是单个单词时，要对字体加引号
以下为UNICODE字体，不需要背，以后尽量写UNICODE的宋体和微软雅黑

font-size:字号
p {
font-size=14px(尽量使用偶数的字号)
}

font-weight:字体粗细
与HTML的B和STRONG不同，FONT-WEIGHT的值有：normal,bold,bolder,lighter,100-900，400=normal 700=bold

font-style字体风格：斜体或者黑体之类的
属性值有：正常 normal 斜体italic 让人为斜体变的正常oblique
h4 {
font-style:italic
}
em {
font-style:normal
color:green
}

FONT综合设置字体样式

h2 {
font:italic bold 14px “宋体”
}
不能改顺序，必须保存大小和字体属性

选择器相关

标签选择器
标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某-类标签指定统的CSS样式。 其基本语法格式如下:
标签名{ 属性1:属性值1;属性2:属性值2;属性3:属性值3; }或者
元素名{属性1:属性值1;属性2:属性值2;属性3:属性值3; }
标签选择器最大的优点是能快速为页面中同类型的标签统样式，同时这也是他的缺点，不能设计差异化样式。
p {
color:pink
}

类选择器
类选择器使用”.”(英文点号)进行标识，后面紧跟类名，其基本语法格式如下，
.类名(属性1:属性值1;属性2:属性值2;属性3:属性值3; }
标签调用的时候用class-"类名”即呵。
类选择器最大的优势是可以为元素对象定义单独或相同的样式。
小技巧:
1.长名称或词组可以使用中構线来为选择器命名。不要用纯数字和中文命名
2.不建议使用“"下划线来命名CSS选择器。

.red{ 声明类样式
color:red
}

AAA

引用类样式

多类名选择器
.font20{
font-size=20px;
]
.pink{
color:pink;
]

亚索

注意: 1.样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS3样式书写的上下顺序有关。 2.各个类名中间用空格隔开。 多类名选择器在后期布局比较复杂的情况下，还是较多使用的。

ID选择器
#pink{
color:pink;
}

我喜欢粉色

类选择器是。开头，ID选择器是#开头
W3C标准规定，在同-一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class.
类选择器(lass)好比人的名字，是可以多次重复使用的， 比如张伟王伟李伟李娜
id选择器好比人的身份证号码， 全中国是唯- -的，不得重复。只能使用- -次。

通配符选择器
*{

*代表所有的选择器，写出这个在STYLE里面时，不同调用自己就会变成粉色
color：pink;

}
通配符选择器用“*“号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下，

*{属性1:属性值1;属性2:属性值2;属性3:属性值3; }
例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。

伪类选择器
首先，这也是一个选择器， 伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择 第1个，第n个元素。
为了和我们刚才学的类选择器相区别，类选择器是 一个点比如.demo (}而我们的伪类 用2个点就是冒号比如:link{}

链接伪类选择器
●:link /未访问的链接/
●:visited /已访问的链接/
●:hover /鼠标移动到链接上/
●:active /选定的链接/
注意写的时候，他们的顺序尽量不要颠倒按照Ivha的顺序。love hate 记忆法或者 Iv 包包非常hao
结构(位置)伪类选择器(CSS3)
●:first-child :选取属于其父元素的首个子元素的指定选择器
●:last-child :选取属于其父元素的最后一个子元素的指定选择器
●:nth.child(n) ，匹配属于其父元素的第N个子元素，不论元素的类型
●:nth-last-child(n) ;选择器匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
n可以是数字、关键词或公式

a:link{  未访问
	font-size:16px;
	color:gray;
	font-weight:700;
}
a:visited{     已经访问的链接，已经点击过一次的状态
font-size:16px;
	color:red;
	font-weight:700;
}
a:hover{  鼠标放上去的状态
font-size:16px;
	color:blue;
	font-weight:700;
}
a:active{  选定的时候的状态
font-size:16px;
	color:green;
	font-weight:700;
}
<div><a href="#">闪购</a></div>
<div><a href="#">秒杀</a></div>

链接伪类的简写
a { a是标签选择器 所有的链接

font-weight:700;
font-size:16px;
color:gray;
}
a:hover{
	color:red; 鼠标经过的时候由灰色变成红色
}
<div><a href="#">闪购</a></div>

结构伪类选择器 CSS3

结构(位置)伪类选择器(CSS3)
●：firs-child :远取属于其父元素的首个子元素的指定选择器
●:last-child :选取属于其父元素的最后- -个子元素的指定选择器
● :nth-chld(n); 匹配属于其父元素的第N个子元素，不论元素的类型even偶数odd奇数n从0开始
●:nth-last-child(n) :选择器匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
n可以是数字、关键词或公式

li:nth-child(even){ 选则所有的偶数孩子
color:pink;
}

• 1
• 2
• 3
• 4
• 5

最终 2 4孩子会被选中，颜色变成粉色

目标伪类选择器
:target目标伪类选择器选择器可用于选取当前活动的目标元素

：target{
	color:red;
}

CSS外观

CSS颜色
color属性用于定义文本的颜色，其取值方式有如下3种:
1.预定义的颜色值.如red。green. blue等。
2.十六进制,如#F0000。#FF6600。#29D794等。十六进制是最常用的定义颜色的方式
3. RGB代码。如红色可以表示为rgb255,0.0)或rgb(100%.0%6.0%).

.red{
color:pink;
}
.color0f0{
color:#0f0         0f0就等价于00ff00,这种是重点
}
#rgb{
color:rgb(255,0,0);
}
<div id="rgb">红色</div>

文字设置
line-height:行间距
line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距， 一般称为行高。

line-height常用的属性值单位有三种，分别为像素px.相对值em和百分比%。实际工作中使用最多的是像素px
一般情况下，行距比字号大7.8像素左右就可以了。

text-align:水平对齐方式
text-align属性用于设置文本内容的水平对齐，相当于htm1中的1gn对齐属性。其可用属性值如下:

1. left. 左对齐(默认值)
2. right: 右对齐
3. center. 居中对齐

text-indent:首行缩进

text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览装窗口宽度的百分比%，允许使用
1em就是一个字的宽度，如果是汉字段落。1em就是一个汉字的宽度
如何使用？

<style>
div {
Letter-spacing: 2px; /* 字间距*/
}
p {
word-spacing: 10px; /* 单词间距针对于英文中文*/
}
</style>

用在标签选择器，像color一样去使用即可。

颜色半透明(Css3)
文字颜色到了CSS3我们可以采取半透明的格式了语法格式如下，
color: rpba(r.g,b,a) a 是alpha透明的意思 取值范围 0~1之间| color: rgba(0,0,0,0.3)

文字阴影
以后我们可以给我们的文字添加阴影效果了Shadow 影子|
text-shadow:水平位置垂直位置模糊距离阴影颜色;
h-shadow
必需。水平阴影的位置。允许负值。
V-shadow
必需。垂直阴影的位置。允许负值。
blur
可选。模糊的距离。
color
可选。阴影的颜色。参阅CSS颜色值。

h1 {
font-size:100px;
text-shadow:5px 11px 3px rgba(0,0,0,0.5)
}
/*对应于水平位置 垂直位置 模糊距离 阴影颜色
前两个参数必须写，后面两个参数可以省略
*/