CSS常用样式修饰、定位、选择器

最新推荐文章于 2024-07-24 20:42:50 发布

乐幼

最新推荐文章于 2024-07-24 20:42:50 发布

阅读量382

点赞数 7

文章标签： css 前端

本文链接：https://blog.csdn.net/leyou921/article/details/134988710

版权

CSS Cascading Style Sheets （层叠样式表）

css几种导入方式

行内样式：（不推荐使用）

   <h1 style="color: blue">好嘞~</h1>

内部样式：（不推荐使用）

   <head>
     <style>
         h1{
             color:yellow;
             font-size: 90px;
         }
     </style>
   </head>
   <body>
         <h1 style="color: blue">好嘞~</h1>
   </body>

外部样式（外链和导入,推荐使用外链link）：

   两种方式：
     1：<link rel="stylesheet" href="/css四种导入方式/css/index.css">
     2：<style>@import "/css四种导入方式/css/index.css";</style>
   
     但是不推荐使用导入import，元素较多会出现html结构先展示，后再css样式渲染，慢慢被淘汰使用
     link修饰是和网页一块渲染展现

优先级：就近原则！！谁离这个要修饰的元素最近，就用谁的样式

基本选择器修饰（不遵循就近原则 id选择器 > class选择器 > 标签选择器）


1：标签选择器
    <h1>嘿嘿</h1>
    <p>哈哈</p>
    修饰：
        h1{
            color: aqua;
        }
        p{
            color: red;
        }

2：类选择器（class定义名称，修饰时用   .名称调用）class名称可以重复
    <h1 class="hh1">嘿嘿</h1>
    <p class="hhp">哈哈</p>
    修饰：
        .hh1{
            color: aquamarine;
        }
        .hhp{
            color: burlywood;
        }

3：id选择器（id定义名称，修饰时用   #名称调用）id名称是唯一不可重复
    <h1 id="hh1">嘿嘿</h1>
    <p id="hhp">哈哈</p>
    修饰：
        #hh1{
            color: aquamarine;
        }
        #hhp{
            color: burlywood;
        }

层次选择器

        /*后代选择器*/
        body p{}

        /*子选择器*/
        body > p{}

        /*相邻兄弟选择器（同辈、同类型）  只会向下找相邻的一个元素，不包含自身*/
        .flag + p{}

        /*通用选择器  向下找，~后面相同类型的所有元素，不包含自身*/
        .flag ~ a{}

结构伪类选择器

        /*无序列表中的第一个子元素*/
        ul li:first-child{}

        /*无序列表中的最后一个子元素*/
        ul li:last-child{}

        /*选择当前元素的父级元素，括号是几就往下数几个元素，并且数到的元素必须是当前元素类型一致才会生效 （按照顺序和元素类型）*/
        p:nth-child(1){}

        /*选择当前元素的父级元素，根据类型去找括号中数字第几个元素*/
        p:nth-of-type(4){}

属性选择器

        /*选中a标签中有id属性的*/
        .as a[id]{}

        /*选中a标签中id等于具体值的*/
        .as a[id = id3]{}

        /*选中a标签中class包含link的*/
        .as a[class *= link]{}

        /*选中a标签中href值以../开头的*/
        .as a[href ^= "../"]{}

        /*选中a标签中href值以pdf结束的*/
        .as a[href $= "pdf"]{}

字体常用样式

        {
            /*字体大小*/
            font-size: 20px;

            /*字体颜色*/
            color: black;

            /*字体粗细*/
            font-weight: lighter;

            /*字体样式*/
            font-family: 新宋体;

            /*简写（字体粗细  字体大小  字体样式）*/
            font: bold 50px "华文楷体";
        }

文本常用样式

         {
            /*文本居中*/
            text-align: center;

            /*首行缩进*/
            text-indent: 2em;

            /*文字行高（单行文字行高 = 所在容器高度时，文字会上下居中）*/
            line-height: 50px;

            /*下划线*/
            text-decoration: underline;

            /*中划线*/
            text-decoration: line-through;

            /*上划线*/
            text-decoration: overline;

            /*图片和文字能够水平居中 （图片和文字座位参照物需要选中两个元素）*/
            #pic img,span{
                vertical-align: middle;
            }

            /*超链接去掉下划线*/
            text-decoration: none;
         }

浮动、解决父级塌陷

//ul 去掉实心圆
list-style-type: none;

//display
display：bolck（块元素）; inline(行内元素); inline-block（既是行内元素、又是块元素）;

//背景图片
background-image: url("images/mn.png");

//背景图片是否重复
background-repeat: no-repeat;

//背景图片偏移
background-position: 2px;

//圆角
border-radius: 50%;

//阴影
box-shadow: 1px 1px 1px 1px color;

//浮动
float:left;right;none;

//元素溢出滚动条
overflow: scroll;

//清除浮动
clear:left;right;both(两侧不允许有浮动元素)

//透明度
opacity:0.5;

//设置图层高度，不被覆盖，默认是0，最高无限制
z-index:999;

//解决父级元素塌陷
1：给父级元素足够高度（不推荐）
2：设置一个空的div，对div进行修饰{margin:0px; padding:0px;clear:both;}
3：父级元素中增加修饰overflow: hidden;
4：父级伪类 #father:after{content: ''; clear:both; display:block;}（极力推荐）

定位

//相对定位
position: relative;
bottom: 100px;
right: -100px;

//绝对定位
1：如果元素没有父级元素，默认是根据浏览器进行定位 position: absolute; left: 200px; 元素会距离浏览器向右偏移200px;
2：如果元素有父级元素，则相对于父级元素开始偏移 父级元素需要设置position: relative;将自身变为参照物。  子元素修饰position: absolute; left: 200px; 元素会距离父级元素向右偏移200px;


//固定定位
position: fixed;