前端新手入门2 css基础

后代选择器：选择器1 选择器2 { css样式 }（将祖先元素和后代元素用空格隔开）；后代元素可以是子元素，也可以是孙子级别的元素，只要有嵌套关系就可以查找到
子代选择器：选择器1>选择器2 { css样式 }（用>将父级和子级相连接）；后代元素必须是子元素（亲儿子），不可以是孙子级别的元素
交集选择器：选择器1选择器2 { css样式 }（将两个基础选择器连着书写，推荐标签选择器和类选择器的搭配使用）；交集选择器可以更加精准的选择某一个元素，相当于既又关系，也就是两个需求都要满足
并集选择器：选择器1，选择器2 { css样式 }（将两个选择器用英文逗号隔开）；如果一些元素样式完全一致，我们可以通过并集选择器合并起来书写，经常用来集体声明某一些标签的共有样式，节约代码
伪类选择器：选择器:伪类状态 { css样式 }（英文状态的冒号将选择器和伪类状态连接）

background背景属性：

bgc背景颜色 background-color: ；
bgi 背景图片 background-image: url(背景图片的路径);
bgr背景是否平铺 background-repeat: no-repeat;水平方向平铺 background-repeat: repeat-x;
垂直方向平铺 background-repeat: repeat-y;
bgp背景位置设置 background-position
bga背景固定background-attachment；默认取值scroll滚动 background-attachment: scroll；不滚动 background-attachment: fixed；
背景属性综合写法：背景颜色背景图片图像滚动平铺方式图片位置；属性值没有书写顺序，没有的属性可以省略不写；属性值和属性值之间用空格隔开；
bgs background-size背景尺寸
透明 rgba写法alpha取值为0-1之间，0表示完全透明，1表示不透明，之间的数字表示透明的程度，只颜色透明不会影响内容； opacity属性：opacity 设置盒子的透明，取值为0-1之间，0表示完全透明，1表示不透明，之间的小数表示透明的程度：不仅背景颜色透明，里面的内容也透明

transition css过渡动画

transition: 属性时间运动曲线延时

同时修改多个属性，需要用英文逗号隔开，用逗号隔开书写多个属性过渡太麻烦，我们只需要用一个all表示所有的属性即可，transition: all 1s ，过渡加在本身上，谁做动画给谁加

 <style>
        .box {
            width: 400px;
            height: 40px;
            background-color: #333;

        }
        .bar {
            width: 20%;
            height: 40px;
            background-color: red;
 /* 设置进度条过渡后的动画，过渡时间为3S */
            transition: all 3s;
        }
 /* 设置鼠标悬停时的进度条的变化样式 */
        .box:hover .bar {
            width: 100%;
            background-color: gold;
            border-radius: 20%;

        }
    </style>

<body>
    <div class="box">
        <div class="bar"></div>
    </div>
</body>

这里是实现的一个进度条的过渡动画仅供参考帮助理解~

border-radius圆角边框

可以取值为实际像素，也可以取值为百分比，以下是常见的几个特例

<style>
        .yuanjiao {
            width: 200px;
            height: 100px;
            background-color: rgb(17, 164, 115);
            border-radius: 20px;
        }
        .yuan {
            width: 100px;
            height: 100px;
            background-color: rgb(207, 207, 10);
            border-radius: 50%;
        }
        .jn {
            width: 200px;
            height: 100px;
            background-color: brown;
            border-radius: 60px;
        }
        .ty {
            width: 200px;
            height: 100px;
            background-color: brown;
            border-radius: 50%;
        }
        .zby{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            border-radius: 60px 0 0 60px;
        }
        .yby{
            width: 100px;
            height: 100px;
            background-color: cadetblue;
            border-radius: 0 60px 60px 0 ;
        }
    </style>
<body>
    <!-- 圆角border-radius -->
    <h4>圆角矩形：设置border-radius取值为实际像素值</h4>
    <div class="yuanjiao"></div>
    <h4>正圆：盒子必须是正方形，border-radius取值为高度的一半或者50%</h4>
    <div class="yuan"></div>
    <h4>胶囊形状:盒子必须是长方形，border-radius取值大于等于高度的一半</h4>
     <div class="jn"></div>
     <h4>椭圆：盒子是长方形，border-radius取值为50%</h4>
     <div class="ty"></div>
     <h4>半圆：border-radius：左上角  右上角  右下角 左下角；</h4>
     <div class="zby"></div>
     <br><br>
     <div class="yby"></div>
</body>

以上代码方便理解~

阴影 shadow

盒子阴影box-shadow：box-shadow:水平阴影垂直阴影模糊距离阴影大小阴影颜色内/外阴影；
文字阴影text-shadow：text-shadow:水平阴影垂直阴影模糊距离阴影颜色；

好了今天就到这里了，明天继续介绍css其他属性及注意事项~,关注继续学习哦~

前端新手入门2 css基础

常见的文本样式属性：

元素的显示模式：

选择器：

background背景属性：

transition css过渡动画

border-radius圆角边框

阴影 shadow

猜你喜欢