02-css(一)-选择器

元素 id 类 通用*
组合选择器：
后代选择器 div a
儿子选择器 div>a
毗邻选择器 div+a
弟弟选择器 div~a
属性选择器：
[title]{color:red}
div[title=xx]{color：red}
input[type=text] {color:red}
分组:
多个选择器选择的标签设置相同的css样式的时候，就可以用分组.
div,p{color：red} div选择器和p选择器共同设置相同的样式，可以逗号分隔
伪类选择器:
a标签自带的效果:未访问过的时候是蓝色的字体颜色,访问过之后是紫色的,自带下划线

/* 未访问的链接 */
a:link {
color: #FF0000
}

/* 已访问的链接 */
a:visited {
color: #00FF00
}

/* 鼠标移动到链接上 */ 这个用的比较多,可以应用在其他标签上
a:hover {
color: #FF00FF
}

/* 选定的链接 */ 就是鼠标点下去还没有抬起来的那个瞬间，可以让它变颜色
a:active {
color: #0000FF
}

/input输入框获取焦点时样式/
input:focus { #input默认的有个样式，鼠标点进去的时候，input框会变浅蓝色的那么个感觉

outline: none;

background-color: #eee; #框里面的背景色
}

伪元素选择器：
div:first-letter{
color：red;
font-size:18px;
}
p:before{
content:'p标签内容前边添加?,且不能被选中'
color:orange;
font-size:100px;
}
p:after{
content:'哈哈'
color:blue
}

选择器优先级：
优先级数值越大，越优先显示其效果，优先级相同的，显示后面的选择器对应的样式
继承的优先级：0
id选择器优先级：100
类选择器优先级：10
元素选择器优先级：1
内联样式优先级:1000
important优先级最高
.c1 .c3{color：purple!important}

css属性相关：
height:100px;
width:100px
补充：a标签的字体颜色设置必须选中a标签才可设置 .c1 a{} 后代选择器
如：.c1 a{color：red;}
字体属性：
.c1{
font-family:'楷体'，'宋体'，'微软雅黑';
}
字体大小
.c1{
font-size:14px; #默认字体大小16px
}
文字对齐：text-align
div{
text-align:center;
text-align:right;
}
文字装饰：text-decoration 加上划线 下划线 不需要线 中划线
div{
text-decoration: overline|underline|line-through|none
none #常用于给a标签去除默认的下划线
}
首行缩进 text-inden
p{
text-indent:32px #一个字默认大小16像素，两个则为32px
}
背景属性：
背景颜色:background-color:purple;
背景图片：
div{
background-img:url('图片地址')
background-repeat:no-repeat; #不平铺
background-position:100px 50px; #相对于div,距离左边100px,距离上边50px
background-position:left center; #以九宫格方式理解
background:url('图片地址') no-repeat right center;
}
简写方式： 颜色 图片路径 是否平铺 图片位置 right center(九宫格中的右中)

    background:red url('图片地址') no-repeat right center;