css学习笔记

1.字体样式

 <style>

        p {

            /* font-size :字体大小  字号 */

            font-size: 12px;

            /* font-family 字体 */

            font-family: "微软雅黑";

            /* 字体粗细  400:正常   700：加粗 */

            /* font-weight: bold; */

            font-weight: 700;

            /* 字体样式   font-style */

            /* font-style: normal; */

            /* style weight size family   字号和字体必须同时存在 */

            /* font: italic 700 20px '宋体';   不推荐 */

            /* css层叠性   属性名相同时，后边的样式会将前面的样式覆盖掉 */

        }

    </style>

2.文本缩进

            font-size: 20px;

            /* text-indent: 32px; */  一个字站16px

            text-indent: 2em;两个单位

3.文本对齐方式

/* 对齐方式：text-align   居中的是内容*/

            text-align: center;

4.文本修饰

 /* 清除a链接默认样式 */

            /* text-decoration: none; */  无

            /* text-decoration: line-through; */ 删除线

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

            text-decoration: overline; 上划线

5.大小写转换

 text-transform: uppercase; 大写

 text-transform: lowercase;小写

6.行高

/* 单行文本借助行高垂直居中 */

            line-height: 200px;

7.文本溢出

overflow: auto;   滚动

/* overflow: hidden; */  隐藏

    /* overflow: scroll;

8.背景相关

/* width: 3000px; */  设高

            height: 3000px;

            /* background-color: pink;   颜色

            background-image: url(./背景.jpg);    背景图片

            background-repeat: no-repeat;   重复

            background-attachment: fixed;   

            background-position: right bottom; */  位置

 

            background: pink url(./背景.jpg) no-repeat right bottom;

            /* background-size: ; */

9.列表样式

 /* 去除li默认样式的 */

            list-style: none;  无

            list-style: decimal;  数字

10.元素显示模式转换

display: inline-block;

转换为行内块元素

11.轮廓线

outline-style: none;  无

           

样式    ：outline-style: dashed;   

            /* outline-style: dotted;

            outline-style: double; */

颜色    outline-color: aqua;

  宽度 /* outline-width: thick; */

            /* outline-width: 40px; */

            outline: none;

12.边框

width: 300px;

            height: 300px;

            background-color: pink;

            border-width: 3px;

            border-color: rgb(33, 29, 29);    调颜色

            border-style: solid;   样式实线

弧度：

          左上角  border-top-left-radius: 50%;   

           右上角  border-top-right-radius: 50px;

              左下角border-bottom-left-radius: 30px;

           右下角  border-bottom-right-radius: 20px;

              聚焦

input:focus {

            border-color: aqua;

        }

13.颜色

 background-color: rgb(230, 24, 24);

            /* background-color: rgba(rgb(71, 15, 15), rgb(47, 118, 47), rgb(76, 76, 118), .3); */

            /* opacity   0-1   0时，只是视觉上看不到，原来位置还在保留

               设置透明度的 */

            opacity: 0;无

1 全透明

14.元素隐藏方式

 /* 1、设置透明度隐藏   0-1   保留原来位置*/

            /* opacity: 0; */

            /*2、 display :none     不保留原来位置*/

            /* display: none; */

            /* 3、visibility：hidden */

            visibility: hidden;

15.鼠标样式和防止拖拽

<style>

        textarea {

            /* 防止拖拽 */

            resize: none;

            /* 鼠标样式 */

            cursor: initial;

        }

    </style>

16.绝对定位，相对定位，固定定位，粘性定位

 position: absolute;绝对

 position: relative;相对

 /* 固定定位   相对于可视窗口进行定位   放弃原来位置 */

            position: fixed;

position: sticky;粘性定位