CSS常用属性

 文本属性

        1.text-align: 文本水平方向对齐方式
        属性值:left(默认) center right

        2.vertical-align: 垂直方向对齐方式
        属性值:top(默认) middle bottom baseline基线

        3.line-height: (行高)每一行之间的距离
        属性值:数值+px   rem em vw vh %
                单行文本时,行高等于容器的高度时line-height=height,文字垂直方向居中
                line-height不设置单位时,默认是em
                line-height可以当做高度去使用

        4.text-index: 文本首行缩进
        属性值:数值+px    rem em vw vh %
                1em=16px

        5.text-decoration: 文本修饰---三条线
        属性值:underline 下划线    line-through 删除线    none 去除下划线(超链接去下划线)
                overline上划线

文字属性

        1. font-weight:文字粗细
        属性值:a.100-500(默认)-900
                b.bold bolder加粗   lighter变细    normal正常

        2. font-size:文字大小
        属性值:数值+px   rem em vw vh移动端单位
                1.一般设置偶数
                2.浏览器默认 16px
                3.浏览器支持最小文字大小 12px

        3. font-fimily:文字字体
        默认值:微软雅黑(windows系统)
                1.属性值是中文,需要用双引号包裹;
                2.由多个英文单词组合的,需要双引号包裹
                3.当有多个属性值的时候,逗号隔开,先声效第一个

        4. font-style:文字倾斜
        属性值:italic 倾斜    normal正常

        5. color:文字颜色
        属性值:a.英文单词
                b.RGB
                c.16进制 #


        复合属性:一个属性名有多个不同属性值,属性值之间用空格隔开(减少代码量)
        6.文字的复合属性
        font:粗细 倾斜 大小/行高 字体;
            大小和字体不能省略  顺序不能换

边框属性be

        1.边框线型:border-style        -----!!!!!!!!
            属性值:solid 实线  none 去掉边框
                    dashed 虚线    dotted 点线    double双实线

        2.边框粗细:border-width
            属性值:1-5px

        3.边框颜色:border-color
            默认是文字颜色(边框跟着文字走)


        复合属性
        border:线型 颜色 粗细
        线性不能省,顺序没要求


        4.单独设置某一方向上的边框
        border-方位词(left right top bottom):

背景属性 

        background-color: 背景颜色
        属性值: 颜色的三种表示方式

        background-image: 背景图片
        属性值: url(路径)

        background-repeat: 背景图片平铺
        属性值: no-repeat不平铺   repeat-x 水平平铺   repeat-y 垂直平铺   
                repeat 都平铺(默认) 
                
        background-position: 背景图片位置
        属性值: 值1 值2(值1代表水平方向;值2表示垂直方向)
                a.英文单词left right center top bottom 
                b.数值+px只有一个值的时候,只代表水平方向偏移量,垂直方向默认居中
                    可以为负值,反向移动

        background-size: 背景图片大小
        属性值: 值1 值2(值1代表背景图片的宽;值2表示背景图片高>
                1.数值+百分比
                2.数值+单位.
                3.conver:等比例放大这个图片,铺满这个盒子为止(容易出现裁剪效果)
                    contain:等比例放大这个图片,只要有图片撑满某一个方向就结束(容易出现留白区域)

        background-attachmentfixed: 背景图的固定
        属性值: scroll:滚动(默认)   fixed固定 永远固定在可视化敞口的某个位置

        背景复合属性: background:red url(img/imgo1.jpg) no-repeat left bottom;
        顺序不做要求,属性值个数不做要求

列表属性

        list-style-type:设置列表项目符号类型
        属性值:square方块  circle空心圆    disc实心圆  decimal有序列表的数字
                none去掉列表项目符号

        list-style-position:项目符号位置
        属性值:outside外侧(默认)    inside内测

        list-style-image: 图片作为项目符号类型
        属性值:url(路径)

        复合属性:list-style:类型 位置  图片
        没有顺序

  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CSS是一种用于网页设计的样式表语言,它可以控制网页的布局、字体、颜色、大小、背景、边框、动画等方面。下面是一些常用CSS属性和动画特效: 1. 属性 - background-color:设置元素的背景色。 - color:设置元素的文字颜色。 - font-size:设置元素的文字大小。 - border:设置元素的边框。 - padding:设置元素的内边距。 - margin:设置元素的外边距。 - display:设置元素的显示方式,如block、inline、inline-block等。 - position:设置元素的定位方式,如relative、absolute等。 - z-index:设置元素的堆叠顺序。 - transform:设置元素的变换效果,如旋转、缩放、平移等。 2. 动画特效 - transition:设置元素的过渡效果,如颜色、大小、位置等属性的变化过渡。 - animation:设置元素的动画效果,如旋转、移动、闪烁等。 - keyframes:定义动画的关键帧,即动画从哪个状态到哪个状态。 例如,实现旋转照片墙可以使用以下CSS代码: ```css .photo-wall { display: flex; flex-wrap: wrap; justify-content: center; } .photo { width: 200px; height: 200px; margin: 10px; border: 1px solid #ccc; transition: transform .5s ease-in-out; } .photo:hover { transform: rotateY(180deg); } ``` 其中,.photo-wall是照片墙的容器,.photo是每张照片的样式,当鼠标悬停在照片上时,会触发transform属性的变化,从而实现照片的旋转效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值