百度前端实战训练营 css基础

辞初

已于 2023-01-06 15:47:13 修改

阅读量206

点赞数

分类专栏：百度前端实战训练营文章标签： css 前端 css3

于 2023-01-06 15:42:23 首次发布

本文链接：https://blog.csdn.net/cichu77/article/details/128578562

版权

百度前端实战训练营专栏收录该内容

7 篇文章 0 订阅

订阅专栏

css基础

在这里插入图片描述

css的class写法：

鉴于class的可复用性，当class选择器在css文件重新定义时，会覆盖前面已定义的class选择器，所以建议使用以下命名法：

用不同的字串命名class，同类型的标签建议加中划线加primary，success等加以区分

在这里插入图片描述

css盒模型

在这里插入图片描述

css引用方式及选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style1.css">
    <style>
        p{
            color:blue;
        }
    </style>
</head>
<body>
    <!--css全称层叠样式表，是为网页添加样式的代码-->


    <!--css引用方式：-->
    <!--1.外部引用：用link标签，css文件中添加样式-->
    <!--2.内联样式：在html元素中使用style标签-->
    <!--3.内部样式表：在html文档头部head区域使用style标签-->
    <p>helloworld</p>
    <p style="color:red;">helloworld1</p>


    <!--css选择器：-->
    <!--1.简单选择器-->
    <p>我是段落a</p>
    <p class="paragraph">我是段落b</p><!--类选择器-->
    <p class="paragraph extra-para">我是段落c</p><!--类名可以有多个-->
    <p id="para">我是段落d</p><!--id选择器-->
    <!--优先级：id > 类选择器 > 标签选择器-->
    <!--id选择器具有专一性，类选择器具有可复用性-->

    <!--2.属性选择器-->
    <!--这组选择器给了你根据一个元素上某个标签属性的存在与否以指定样式-->
    <img src="http://b.bdstatic.com/searchbox/icms/searchbox/img/san_logo.png" alt="san logo">

    <!--3.伪类选择器-->
    <!--只会在鼠标指针悬浮到一个元素上的时候选择这个元素-->
    <a href="">点我跳转</a>

    <!--4.后代选择器-->
    <!--指定父标签内的所有特定子标签的样式-->
    <div>
        <span>Span.1
            <span>Span.2</span>
        </span>
    </div>
    <span>Span.3</span>
</body>
</html>

p{
    color:brown;/*标签选择器*/
}
.paragraph{
    color:purple;/*类选择器*/
}
.extra-para{
    font-size:30px;
}
#para{
    color:grey;/*id选择器*/
}
img[src]{
    width:100px;/*属性选择器*/
}
a:hover{
    color:red;/*伪类选择器*/
}
div span{
    background-color: dodgerblue;/*后代选择器:指定div标签内的所有span标签样式*/
}

css样式

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style2.css">
</head>
<body>
    case 1:文本样式
    <p>this is a text</p>
    
    case 2:处理溢出文本
    <p class="ellipse">我要溢出啦啦啦啦啦啦啦</p>
    <br>
    
    case 3:简单动画
    <div class="trans">动画</div>
    case 3.1:旋转
    <div class="rotate">旋转</div>

    case 4:布局元素
    <div class="box">box</div>

    case 5:border属性的其他用法-->绘制圆
    <div class="circle"></div>

    case 6:实现导航栏
    <ul>
        <li><a href="xx">主页</a></li>
        <li><a href="xx">课程</a></li>
        <li><a href="xx">其他</a></li>
    </ul>

    case 7:loading动画
    <div class="loading"></div>
    <br>
    <br>
    <br>
    <br>
    <br>
</body>
</html>

p{
    width:200px;
    height:50px;
    border:1px solid #a8a8a8;/*文本框*/
    text-align:center;/*文本位置：left，center，right*/
    line-height:50px;/*设置行间距*/
    letter-spacing:4px;/*设置字母间距*/
    word-spacing:20px;/*设置单词间距*/
    color:red;/*设置颜色*/
    font-size:20px;/*设置字体大小*/
    font-family:serif;/*设置字体样式*/
}

.ellipse{
    width:100px;
    white-space:nowrap;/*和normal一样，连续的空白符被合并，但文本内的换行会被去掉*/
    overflow:hidden;/*将溢出部分隐藏*/
    text-overflow:ellipsis;/*把溢出文本用省略号替代*/
}
.trans{
    width:100px;
    height:100px;
    background:red;
    transition:width 2s;/*从100px过渡到300px，增加两秒的动画效果*/
    box-shadow:10px 10px 5px #888888;/*x轴偏移量 y轴偏移量 模糊半径 扩散半径 颜色*/
}
.trans{
    width:300px;/*伪类选择器，鼠标移动到该元素上面时显示*/
}
.rotate{
    width:200px;
    height:100px;
    background-color: yellow;
    transform:rotate(7deg);/*旋转7度*/
}
.box{
    width:100px;
    height:100px;
    border:5px solid green;/*设置整个文本框边界*/
    border-bottom: 3px dotted #ff0000;/*只设置文本框的底部 dotted是点，构成的边界就是虚线*/
    border-radius: 10px;/*将边框设置为圆角边框，有弧度，如果数值为50%则变成圆*/
    padding:25px;/*设置文本内容与边框的距离，四个参数顺序是上右下左*/
    margin:25px;/*设置文本边框与页面的距离，四个参数顺序是上右下左*/
}
.circle{
    width:100px;
    height:100px;
    border:2px solid green;
    border-radius:50%;/*边框彻底变成圆*/
}
ul{
    list-style-type:none;/*把前面的实心点，空心点等去掉*/
    display:flex;/*将摆放变为从左到右*/
}
li a{
    text-decoration:none;/*把超链接下面的横线去掉*/
    margin:10px;/*设置以下边距*/
}
.loading{
    width:35px;
    height:35px;
    border:5px solid rgba(189,189,189,0.25);
    border-left-color:rgba(3, 155, 229, 1);
    border-top-color: rgba(3,155,229,1);
    border-radius: 50%;
    animation:rotate/*名字*/ 500ms/*执行一次所需时间*/ infinite/*无限循环*/ linear/*线性动画播放*/;
}
@keyframes rotate/*这里是动画帧的名字*/{/*通过在动画序列中定义关键帧的样式来控制css动画序列中的*/
    form{
        transform: rotate(0);
    }
    to{
        transform: rotate(1turn);
    }
}