CSS笔记1

最新推荐文章于 2024-12-27 14:36:24 发布

渡清沙

最新推荐文章于 2024-12-27 14:36:24 发布

阅读量81

点赞数

本文链接：https://blog.youkuaiyun.com/qq_45790967/article/details/118055019

版权

美化网页笔记
span标签：终点要突出的字，使用span标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #title1{
            font-size: 50px;
        }
    </style>
</head>
<body>
正在学习 <span id="title1">Java</span>
</body>
</html>

字体样式：
font-family: 字体，可放多个
font-size: 字体大小
font-weight: 字体粗细
color: 字体颜色

    <!--
    font-family: 字体;可放多个
    font-size: 字体大小;
    font-weight: 字体粗细
    color: 字体颜色

    汇总font:字体风格 粗细 字体大小/行高 字体
    -->

    <style>
        body{
            font-family: 宋体;
        }
        h1{
            font-size: 50px;
        }

        .p1{
            font-weight: bolder  ;
        }
    </style>

文本样式：

颜色 color rgb rgba
文本对齐方式 text-align= center
首行缩进 text-indent: 2em
行高 line-height: 单行文字上下居中line-height = heigt
装饰 text-decoration:
文本图片水平对齐：vertical-align: middle;

<!--
    颜色：
    单词
    RGB 0~F 红绿蓝
    RGBA A：0~1 透明度

    排版：
     text-align: center;居中
     text-indent: 2em; 段落首行缩进
     height: 300px;
     line-height: 300px;
        行高和块的高度一致，就可上下居中
-->

    <style>
        h1{
            color: rgba(0,255,255,0.9);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: blue;
            height: 300px;
            line-height: 300px;
        }
        /*下划线*/
        .l1{
            text-decoration: underline;
        }
        /*中划线*/
        .l2{
            text-decoration: line-through;
        }
        /*上划线*/
        .l3{
            text-decoration: overline;
        }
        /*图片与文字上下对齐*/
        img,span{
            vertical-align: middle;
        }
        /*超链接去下划线*/
        a{
            text-decoration: none;
        }
    </style>

阴影：

		/*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/
        #price{
            text-shadow: blueviolet 10px 0px 2px;
        }

超链接伪类：

<style>
        /*默认颜色*/
        a{
            text-decoration: none;
            color: #000000;
        }
        /*鼠标悬浮状态 只需记住hover*/
        a:hover{
            color: orange;
            font-size: 50px;
        }
        /*鼠标按住未释放的状态*/
        a:active{
            color: red;
        }
        a:link{
            color: blue;
        }
        a:visited{
            color: aqua;
        }
        
    </style>

列表：

/*ul li*/
/*
list-style:
    none 去掉圆点
    circle 空心圆
    decimal 数字
    square 正方形
*/
/*ul{*/
/*    background: gray;*/
/*}*/

ul li{
    height: 30px;
    list-style: none;

}

背景
背景颜色
背景图片
/颜色，图片，图片位置，平铺方式/
background: red url("…/images/ad.png") 270px 15px no-repeat ;
background-image: url("…/images/as.png");
大小
background-size: 10px 10px;
平铺方式
background-repeat: no-repeat;
位置
background-position: 200px 5px;

    <style>
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            background-image: url("images/a.jpg");
        /*    默认是全部平铺的*/

        }

        .div1{
            /*水平平铺*/
            background-repeat: repeat-x;
        }

        .div2{
            /*垂直平铺*/
            background-repeat: repeat-y;
        }

        .div3{
            /*不平铺*/
            background-repeat: no-repeat;
        }


    </style>

渐变：
https://www.grabient.com/

background: linear-gradient(76deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);