前端之CSS

最新推荐文章于 2024-07-12 16:27:40 发布

*派大星*

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量165

点赞数

分类专栏：前端CSS 文章标签：前端 css

本文链接：https://blog.csdn.net/weixin_42282235/article/details/95955855

版权

前端CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

css代码引入
css选择器
2.1 基本选择器
组合选择器
3.1 后代选择器
3.2 孩子选择器
3.3 毗邻选择器
3.4 弟弟选择器
3.5 属性选择器
3.6 分组
伪类选择器
伪元素选择器
选择器的优先级权重
css属性相关
字体属性
8.1字体
8.2 字体大小
8.3 字体颜色
8.4 字体,粗细
8.5 颜色表示方式
文字属性
9.1 文字对齐
9.2 文字装饰
9.3 首行缩进
9.4 背景颜色
边框
display属性
css盒子模型
z-index控制层级
opacity透明度

1. css代码引入

方式1
    head标签里面写
    <style>
        div{
            background-color: red;
            height: 100px;
            width: 100px;
        }
    </style>
方式2
    内敛样式:
    <div style="background-color: blue; height: 200px;width: 200px;"></div>
方式3 
    外部文件引入
    head标签里面写link标签
    <link rel="stylesheet" href="文件路径">

2.css选择器

2.1 基本选择器

//元素选择器:
    div{  //标签名字
         color:red;
    }
//id选择器:id值不能重复
    <div id="xuefei">
        雪飞大美女
    </div>
    
    #xuefei{  
        color:green;
    }
//类选择器: 类值可以重复
    <div id="dazhuang" class="c1">
        我是一条大咸鱼
    </div>
    <div id="xuefei" class="c1">
        喜洋洋灰太狼
    </div>
    
    .c1{
        color: green;
    }
    
    div.c1{ //div标签里面含有class值为c1的标签
        color: green;
    }
通用选择器
*{    //找到所有的标签
    color: green;
}

3. 组合选择器

3.1 后代选择器

div a{   //找到div标签后代里面的所有a标签
    color:red;
}

3.2 孩子选择器

div>a{ //找到div的孩子标签这一代的a标签
    color:red;
}

3.3 毗邻选择器

div+a{  //找到是紧挨着div标签的下一个标签(是兄弟标签)
     color: red;
}

3.4 弟弟选择器

div~a{  //找到的是同级的后面的所有兄弟标签
    color: red;
}

3.5 属性选择器

   //通过属性名来查找
    [title]{ //找到所有含有title属性的标签  
        color: red;
    }
    
    div[title]{  //含有title属性的div标签
        color: red;
    }
    //通过属性名对应的值来查找,当属性值的值为数字的时候,数字要加上引号[title='666']
    input[type=text]{ //含有type属性,并且type属性的值为text的input标签
        background-color: red;
    }

3.6 分组

多个选择器选择的标签设置相同css样式的时候,就可以用分组
div,p{  //div选择器和p选择器共同设置相同的样式,可以逗号分隔
    color:red;
}

4. 伪类选择器

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; #框里面的背景色
}

5. 伪元素选择器

       伪元素选择器
        div:first-letter{
            color: red;
            font-size: 20px;
        }
        在p标签内容的前面插入一些内容
        p:before{
            content: '?';
            color: green;
            font-size:100px;
        }
        在p标签内容的后面插入一些内容
        p:after{
            content: '哈哈!';
            color: pink;
        }

6. 选择器的优先级权重

      //优先级数字越大,越优先显示其效果,优先级相同的,显示后面定义的选择器对应的样式
       // id选择器优先级为100
        #d1{
            color:deepskyblue;
        }
       // 继承的优先级为0
        body{
            color:red;
        }
       // 类选择器的优先级是10
        .c1{
            color: blue;
        }
        .c2{
            color: orange;
        }
       / 元素选择器优先级是1
        div{
            color: green;
        }
       // 内敛样式优先级为1000
        <p class="cc3" style="color: red;">我是cc3的p标签</p>
        
        //important优先级最高,最牛逼,加它就表示不管在什么情况下 最优先展示
        .cc1 .cc3 {
            color: purple!important;
        }

7. css属性相关

高度宽度设置, 注意:只有块级标签能够设置高度宽度,内敛标签不能设置高度宽度,它的高度宽度是由内容决定的

  div{
            width: 100px;  宽度
            height: 100px; 高度
            background-color: pink; 背景颜色
        }

补充:a标签的字体颜色设置必须选中a标签才行，只选择里面元素的标签不选择a标签，是不是生效的

.c1 a{  
    color: red;
}

8. 字体属性

8.1字体

.c1{
    font-family: //'楷体','宋体','微软雅黑'; //在family 后面直接填写相应的字体就可以
}

8.2 字体大小

.c1{
     font-family://'楷体','宋体','微软雅黑';
     font-size:14px;  //设置字体大小为14px, 默认字体大小为16px.    
 }

8.3 字体颜色

.c1{
      color: red;  //设置字体颜色为红色
 }

8.4 字体,粗细

 .c1{
      font-weight: bold;
      font-weight: 100;
  }
  
  描述：
normal  默认值，标准粗细
bold    粗体  //通常建议使用700，以免有些浏览器不兼容
bolder  更粗
lighter 更细
100~900 设置具体粗细，400等同于normal，而700等同于bold

8.5 颜色表示方式

   p{
       color: red;
       color: #78FFC9;
       color: rgb(123,199,255);
       color: rgba(123,199,255,0.3);  //设置透明程度， 多了一个透明度的数字:0-1的一个数字
   }

9. 文字属性

9.1 文字对齐

   text-align
   
   div{
         width: 200px;
         height: 200px;
         background-color: yellow;
         text-align: center;
         text-align: right;
    }
        
    left    左边对齐 默认值
    right   右对齐
    center  居中对齐

9.2 文字装饰

    text-decoration
    
    div a{
            text-decoration: none;  //给a标签去除下划线
            text-decoration: line-through;
            text-decoration: overline;
     }
   描述:
    none    默认。定义标准的文本。
    underline   定义文本下的一条线。
    overline    定义文本上的一条线。
    line-through    定义穿过文本下的一条线。

9.3 首行缩进

p {
  text-indent: 2em; //首行缩进两个字符, em 单位 就是对应的汉字，1em就等于一个汉字的长度

9.4 背景颜色

背景颜色,使用 background-color: 语法
background-color: red;

  div{
         width: 600px; //宽
         height: 600px; //高
         background-color: red; //背景颜色
         background-image: url("yeye.jpg"); //背景图片地址
         background-repeat: no-repeat;  //是否平铺，否
         background-position: 100px 50px;  //相对于div标签的,距离左边100px,距离上面50px
         background:url("yeye.jpg") no-repeat left center;
         background-position: right top;
         background-attachment:fixed #guding  //固定在屏幕某个位置上
     }
简写方式,颜色  图片路径 是否平铺 图片位置
background:#ffffff url('1.png') no-repeat right top;

10. 边框

  div{
         width: 200px;
         height: 200px;
         border-style: solid;  //边框样式
         border-color: red;    //边框颜色
         border-width: 10px;   //边框宽度
         border:10px solid red; //简写方式

         border-left-style: solid;
         border-left-width: 10px;

         border-right-style: dashed;
         border-top-style: dashed;
         border-bottom-style: dashed;
         border-right-width: 5px;
         border-left:10px solid red;  //单独设置边框的简写方式
       }

控制圆角
    border-radius: 50%;   //这个数值可以修改的

11. display属性

        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline;  //将标签设置为行级标签 
            display: inline-block; // 将标签设置为同时具备行级和块级标签的一些特性,比如可以设置高度宽度,但是不独占一行 
            display: none;  //隐藏标签 ,并且不占用自己之前的空间

        }
        span{
            border: 2px solid blue;

        }

        .c1{
            width: 200px;
            height: 200px;
            display: inline-block;
            display: block; //将行内标签设置为块级标签 
        }
        
     意义：
     display:"none" HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
     display:"block"    默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
     display:"inline"   按行内元素显示，此时再设置元素的width、height、margin-top、margin-  bottom和float属性都不会有什么效果。
     display:"inline-block" 使元素同时具有行内元素和块级元素的特点。   
    
    
隐藏标签
    visibility: hidden;  //隐藏标签,但是标签还占用原来的空间 
    display: none; //隐藏标签 ,并且不占用自己之前的空间

12. css盒子模型

content //内容区域  
padding //内边距
margin //外边距
border //边框宽度
    div{
            width: 200px;
            height: 100px;
            border: 2px solid deeppink;
            padding-top: 10px;
            padding-left: 5px;
            padding-right: 2px;
            padding-bottom: 4px;
            padding: 10px 20px;  //10px上下内边距 ,20px左右内边距 
            padding: 10px 20px 5px 2px; //上边距、右边距、下边距、左边距。
        }

top 距离上面标签的距离
bottom 距离下面标签的距离
left 距离左边标签的距离
rigth 距离右边标签的距离

        .d1 {
            width: 200px;
            height: 100px;
            border: 2px solid deeppink;
            margin-bottom: 200px;  
        }
        .d2{
            margin-top: 100px;  
            border: 2px solid blue;

        }

    两个简写的方式
    margin: 10px 20px;
    margin: 10px 5px 6px 3px;

    两个情况:
        垂直方向如果上下两个标签都设置了margin外边距,那么取两者的最大的值
        水平方法,两个标签都设置外边距,取两者的边距之和

13. z-index控制层级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .shadow{
            position: fixed;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0,0,0,0.5);
            z-index: 99;
      }
        .mode{
            position: fixed;
            height: 400px;
            width: 300px;
            background-color: white;
            z-index: 100;  //数值越大越在上层显示 
            left: 50%;  //按照窗口宽度的50%来移动 
            top:50%; // 按照窗口高度的50%来移动 
            margin-left: -150px;
            margin-top: -200px;
      }
    </style>
</head>
<body>

<div>
    <h1>
        嘻嘻嘻哈哈哈
    </h1>
</div>

<div class="mode">

</div>
<div class="shadow">
</div>

</body>
</html>

14. opacity透明度

       .c1{
            background-color: rgba(255,0,0,0.3); //背景颜色或者字体颜色等单独的透明度,最后面的是透明的程度，可以可以修改
            height: 100px;
            width: 100px;
        }
        .c2{
            background-color: rgb(255,0,0);
            height: 100px;
            width: 100px;
            opacity: 0.3;  //整个标签透明度 
        }
<div class="c1">
    熊大
</div>
<div class="c2">
    熊二
</div>

*派大星*

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端之CSS

目录：css代码引入css选择器2.1 基本选择器组合选择器3.1 后代选择器3.2 孩子选择器3.3 毗邻选择器3.4 弟弟选择器3.5 属性选择器3.6 分组伪类选择器伪元素选择器选择器的优先级权重css属性相关字体属性8.1字体8.2 字体大小8.3 字体颜色8.4 字体,粗细8.5 颜色表示方式文字属性9.1 文字对齐9.2 文字装饰9....
复制链接

扫一扫