css深入

CSS深入

分组与嵌套

 在css中选择器可以使用逗号表示并列的关系

#d1, .c1, div {color:red}

伪类选择器：同一个标签，根据其不同种状态，有不同的样式。

1.静态伪类：只能用于超链接的样式
	link:超链接点击之前
    visited:链接访问之后
        
2.动态伪类：针对所有的标签都适用的样式
	hover:鼠标悬停在标签之上
    active:鼠标点击但是不松手
    focus:某个标签获得焦点时的样式

针对于a标签来说
a:link {coloe:red;}
a:hover {color:white;}
a:active {color:black;}
a:visited {color:gray;}

伪元素选择器：改变文档结构，在结构之外另加一个不是实际存在的元素。

1、首字母进行更改
p:first-letter {font-size:36px;color:blue;}

2、after和before
p:after {content:'会显示在p内容之后';}
p:before {content:'显示在p内容之前'}

选择器优先级

以基本选择器进行优先级的划分
1.选择器相同，书写顺序不同：就近原则，谁离得近听谁的
2.选择器不同：精确度越高，越有效果
	行内 > id选择器 > 类选择器 > 标签选择器
	

css属性相关

css简单属性
	宽度
	height:高度
	color:颜色
	background-color:背景色

字体属性

font-family:字体格式
font-size:字体大小
font-weight:bold(粗体) 字体粗细
font-style: italic(斜体) 字体风格
color:字体颜色

字体颜色有四种方式：
	1.直接写颜色英文：color:red;
	2.写颜色编号：color:#XXXXXX; 六位十六进制数字
	3.三基色：color:rgb(111,111,111) 三个0到255的数字
	4.三基色加透明度：color:rgba(111,111,111,0.9) 最后一个参数是透明度

文字属性

1.text-align:center;right;left;justify
			居中	 右对齐 左对齐  两端对齐

2.text-decoration:underline;overline;line-through;none
				 下划线      上划线      删除线    不要线

最后一个None可以用于a标签去除下划线

3.text-indent:2em

背景图片

1.图片插入：background-image:url(地址)
2.平铺方式：background-repead:no-repead  不平铺
3.背景位置：background-position
4.背景显示方式：background-attachment:
	scroll:随屏幕滚动
	fixed：固定在可视区域
	

边框属性

border-边框宽
border-style:边框风格
border-color:边框颜色

可以合并为：border:3px solid red

border-radius:50% 圆

display属性

display:none 隐藏标签不展示到前端页面上，只有在鼠标移动或者点击二级菜单的时候会显示属性
display:block 使元素变为块级元素
display:inline 把元素变为行内元素：指元素不会单独占据一行，可以规定自己的高和宽
display:inline-block 同时具有块级元素和行内元素的属性

盒子模型

margin:标签与标签的距离，外边距
border:标签的边框
padding:内容到边框的距离
content:内容

一般情况下body会自带8px的margin。

margin:0;   上下左右全是0

margin:10px 20px;   第一个上下，第二个是左右

margin:10px 20px 30px; 第一个上，第二个左右，第三个下

margin:10px 20px 30px 40px; 顺时针

浮动

浮动的元素没有块级一说，看本身浮起来多大

float:right; 浮到空中向右飘
float:left; 浮到空中向左飘