选择器，块元素，文本样式

一、选择器

<style>

    #a1{color: #f5860f;} /*id选择器*/

    .a2{color: #ff0026;} /*类选择器*/

    h3,#a1,.a2{background: #b6eeff}/*分组选择器*/

    input[type="text"]{background: darkcyan}/*属性选择器*/
       
    body div div div div{color: #689797} /*子孙后代选择器，包含后代只要在div里都会改颜色*/
       
    body >div >p{color: #689797} /*子元素选择器,不包含后代*/

    /*伪类选择器*/
    a:link{color:red }/*未访问*/
    a:visited{color:rebeccapurple }/*访问过*/
    a:hover{color: yellowgreen}/*悬停*/
    a:active{color: dimgrey}/*点击/激活*/
  </style>

重复样式时，选择器范围越小优先级越高。内联低于css

! important 设置优先级最高。

二、块元素

   #d1{
      width: 200px;
      height: 200px;
      background-color: lightpink;
      background-image: url("b.jpg");
      background-size:100px 100px;/*设置！！！背景图片大小*/
      background-repeat: no-repeat;/*禁止重复，如果图片小于块大小，会铺满块*/
      background-position: 50px 50px ;/*横向 纵向移动*/
      background-position: 100% 100% ;/*横向 纵向移动*/
    }

background-image和background 可以同时设置不冲突

background-image: url("b.jpg"); /*设置背景图片*/
background-size:100px 100px; /*设置！！！背景图片大小*/
background-repeat: no-repeat; /*禁止重复，如果图片小于块大小，会铺满块*/
background-position: 50px 50px ; /*横向纵向移动*/
background-position: 100% 100% ; /*横向纵向百分比移动*/

三、文本与字体

谷歌浏览器字体最小为12px,不能再小了。

text-align: center	文本水平对齐
text-decoration：underline	下划线
text-decoration：line-through	删除线
text-decoration：none	主要去掉a超链接的下划线
text-shadow	文本阴影：颜色 x偏移 y偏移模糊度
font-weight: normal;	去掉加粗
font-weight: bold;	加粗
font-style: italic;	斜体
font-family:cursive ;	设置字体
font-size: 30px;	字体大小
background-size:250px 250px;	设置背景图片大小
background-position: 300px 50px ;	设置图片起始位置
background-repeat: no-repeat;	不允许照片铺满屏幕
background-color:rgba(66, 66, 66 ,0.3);	设置透明度
border-radius: 5px;	设置圆角
color: rgba(217, 204, 204, 0.9)	设置颜色和透明度
Box-sizing: border-Box;	元素添加边框和内边距则不再影响元素的宽高
overflow: hidden;	解决粘连问题

四、行元素设置为块元素

/*设置行标签设置为块标签，就可以对齐设置宽高*/

display: inline-block; /*inline-block 行显示 block 块显示*/

选择器，块元素，文本样式

相关推荐