前端之css

CSS层叠样式表

# 1. css主要用来调节html标签的各种样式
   """
   如何区分标签？
        标签的两大重要属性
            1.class属性  ： 进行分类，主要用于批量查找
            2.id属性      ：  精确查找，主要用于单对单  
   css学习流程：
            1.学习如何查找标签
            2.学习如何调整样式
   """

# 2.css语法结构
       选择器 {
             样式名1:样式值1;
             样式名2:样式值2;
             
       }
# 3.css注释语法
      /*注释内容*/

# 4.引入css的方式(三种)
     1.head内style标签内部编写
     2.head内link标签引入(标准)
     3.标签内部通过style属性直接编写(不推荐)

 

CSS选择器

# 1.css基本选择器
      -1.标签选择器(直接按照标签名查找标签)
            div {
                  color:red;
            }
      -2.类选择器(按照标签的class值查找标签)
            .c1 {
                  color:green;
            }
      -3.id选择器(根据标签的id精准查找标签)
            #d1 {
                  color:pink
            }
      -4.通用选择器(直接选择页面所有的标签)
            * {
                  color:orange
            }
        例： """juejin.cn/post/7135060591453929485"""
# 2.CSS组合选择器
      -1.后代选择器(查找div标签内部所有的后代span)
            # new1 span {
                  color：aqua；
            }
      -2.儿子选择器(查找div标签内部的所有儿子span)
            # new1>span {
                  color:aqua;     
            }
      -3.毗邻选择器(查找div标签同级别下面紧挨着的一个span标签)
            # new1+span {
                  color:aqua;
            }
      -4.弟弟选择器(查找div标签同级别下面所有的span标签们)
            # new~span {
                  color:aqua;
            }

# 3.属性选择器
      -1.查找属性名含有name的标签
            [name] {
                 background-color: red;               
            }
      -2.查找属性名含有name并且值是username的标签
            [name=''username] {
                 background-color:orange;
            }
      -3.查找input标签并且属性名含有name值是username的
            input[name='username'] {
                 background-color:aqua;
            }
      """
      -1.所有的标签除了自己默认的属性外，还能自定义的任意属性
              默认属性     id class
              自定义属性  x=1 y=2
      -2.前面的选择器可以是任意类型的 标签、id、class
      """
# 4.伪类选择器
      """
      a标签默认的颜色有两种紫色和蓝色
            紫色：链接地址已经被点击过
            蓝色:  链接地址从来没被点击过
      """
      -1.a标签内的文本，鼠标悬浮上去后，颜色发生变化
                /*重要的(鼠标放置上去变色)*/ 
           a:hover {
              color: blue;
           }          
      
               /*不重要的*/
           a:link {      /*未访问的链接颜色*/
              color: red;
           }
          
           a:active {    /*标签被点击的一刻变色*/
              color: green;
           }
          
           a:visited {   /*标签被访问过颜色改变*/
              color: yellow;   
           }

# 5.伪元素选择器(通过css代码来操作标签文本内容)
           """
           伪元素选择器可以用在解决标签浮动所带来的的负面影响,也可以用来做数据的防爬
           """
           -1.first-letter
                 /* 常用的给首字母设置特殊样式：*/
               p:first-letter {
                    font-size: 48px;
                    color: red;
               }
           -2.before
               p:before {
                    content:"*";
                    color:red;
               }

           -3.after
               p:after {
                    content:"[?]";
                    color:blue;
               } 

 

CSS样式调节

# 1.字体样式
"""块级标签才能设置宽度，行内标签的宽度是由内容决定的"""
 -1.宽和高
     width属性可以为元素设置宽度。
     height属性可以为元素设置高度
 -2.文字字体
     body {
        font-family: "微软雅黑"
      }
 -3.字体大小
     p {
        font-size:14px  
     }
 -4.字的粗细
     p {
        font-weight:lighter;
     }
 -5.文本颜色
     p {
        color:red;            # 颜色名   
        color:rgb(255,0,0);   # RGB
        color:#3e3e3e;        # 16进制
        color:rgba(1,1,1,0.5) # 最后一个数时0-1之间的小数，表示透明度
     }
 -6.文字对齐(设置文字的对齐方式)
     p {
        text-align:center;    # 居中
     }

 -7.文字装饰(添加后文字有特殊效果)
     a {
        text-decoration: none;  # 标准的文本格式
     }  

 -8.首行缩进(将段落的第一行缩进 32像素)
     p {
        text-indent: 32px;
     }

# 2.背景属性
 -1.页面的背景色
    body {
      background-color: lightblue;      # 背景颜色     
      background-image: url('1.jpg');   # 背景图片
      background-repeat: no-repeat;     # 背景展开方式
       /*背景的位置*/
      background-position: left top;   
      background-position: 200px 200px; 
    }

 -2.背景的展开方式有四种：
    repeat(默认):背景图片平铺排满整个网页
    repeat-x：背景图片只在水平方向上平铺
    repeat-y：背景图片只在垂直方向上平铺
    no-repeat：背景图片不平铺

 -3.背景的属性可以简写
    body {
      background:#336699 url('1.png') no-repeat left top;
    }