2019-04-04文本,尺寸,边框,颜色设置

1.选择器
1) 元素 p div
2) 类选择器
html


css
.box{样式}
3) id选择器
html


css
#box{样式}
4)后代
ul li
5)子代
ul>li
6)相邻兄弟
.list+li
7)通用兄弟
.list~li
8)结构伪类
ul
li
li
li
li
ul>li:first-child 选取父元素下的第一个孩子
ul>li:last-child 选取父元素下的最后一个孩子
ul>li:nth-child(n) 选取父元素下的第n个孩子

    2.css
        1)字体相关样式:
            font-family:"黑体"; 设置字体类型
            font-size:16px; 设置字体大小
            font-weight:bold/100/200/300/400/500/600/700/800/900;
            font-style:italic(倾斜)  normal(正常);

       2)display:改变元素的类型
            行内元素   
                 转换成行内块: display:inline-block;
                 转换成块元素: display:block;
            块元素
                 转换成行内元素:display:inline;
                 转换成行内块:  display:inline-block;
            行内块元素
                 转换成行内元素 display:inline;
                 转换成块元素   display:block;

     3)文本相关样式
           color:"red";设置文本的颜色
           text-align:center(居中) left(左) right(右)   文本对齐方式
           text-indent:12px;  首行缩进
           line-height:30px;  设置行高
           text-decoration:none(默认值) undeline(下划线) 

    
    4)边框与尺寸
        css单位:
             px  像素   屏幕上的一个点
             %   相对单位 根据父元素的大小来变化
             in  英寸    1 in=2.54cm
             cm  厘米     
             mm  毫米
             em/rem  
        
                  
       颜色单位:
            red blue     #F0F0F0
            红  (0-255)
            绿   (0-255)
            蓝  (0-255)

          rgb   
          r:red
          g:green
          b:blue

          rgb(0,0,0)  黑色
          rgb(255,255,255); 白色

          rgb(255,0,0);  红色
          rgb(0,255,0)  绿色
          rgb(0,0,255)  蓝色

          rgba()
             a:alpha 透明度
                范围:0-1
                 0:完全透明
                 1:完全不透明
    
         opacity:.5;透明度

         opacity与rgba()的区别:
            opacity:能把所包含的所有内容都变成透明
            rgba()只改变当前元素的透明度
    
    5)边框
        border:1px solid #000;
        border-top:上边框
        border-bottom: 下边框
        border-left:左边框
        border-right:右边框

        border-width:2px;  边框的宽度
        border-style:solid(实线)   dotted(虚线)
        border-color:red;  边框的颜色
        特殊:transparent(透明边框)

你可能感兴趣的:(2019-04-04文本,尺寸,边框,颜色设置)