CSS学习日志

最新推荐文章于 2024-07-14 10:25:44 发布

Faith.777

最新推荐文章于 2024-07-14 10:25:44 发布

阅读量577

点赞数 8

文章标签： css 学习 tensorflow

本文链接：https://blog.csdn.net/2303_80224736/article/details/135158511

版权

12.22回顾复习了CSS部分内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <!--CSS外部引用,语法：<link rel="stylesheet" type="text/css" href="文件路径" />-->
        <!--内部样式,HTML和CSS在同一个HTML文件中-->
        <style type="text/css">
            /*CSS选择器:*/
            span{color:red;}/*元素选择器*/
            #ice{color:rgb(231, 135, 184);}/*id选择器*/
            .cream{color: rgb(170, 229, 229);}/*class选择器*/
            #father p{color:rgb(153, 99, 119);}/*后代选择器*/
           /*群组选择器,指的是同时对几个选择器进行相同的操作,两个选择器之间必须要用英文逗号（,）隔开*/
           /*字体样式*/
           #div1{font-family: Arial;}
           #div2{font-family: "Times New Roman";}
           /*如果字体类型只有一个英文单词，则不需要加上双引号；如果字体类型是多个英文单词或者中文的，则需要加上双引号。*/
           #div3{font-family: "微软雅黑";} 
           /*设置多种字体中间用逗号隔开*/
           /*字体大小：font-size*/
           #p3 {font-size: 20px;}
           /* 字体粗细：font-weight*/
           #p1 {font-weight: 100;}
           #p2 {font-weight: 400;}
           #p3 {font-weight: 700;}
           #p4 {font-weight: 900;}
           /* 字体风格：font-style*/
           #p1{font-style:normal;}
           #p2{font-style:italic;}
           #p3{font-style:oblique;}
           /*首行缩进：text-indent*/
           /*水平对齐：text-align*/
           #n{text-align:left;}
           #m{text-align:center;}
           #q{text-align:right;}
           /*文本修饰：text-decoration:none	去除所有的划线效果（默认值）underline	下划线line-through	中划线overline	顶划线*/
           /*大小写：text-transform uppercase	转换为大写 lowercase	转换为小写 capitalize	只将每个英文单词首字母转换为大写*/
           /*行高：line-height*/
           /*间距：letter-spacing 两个字之间的距离、word-spacing两个单词之间的距离*/
           /*边框的整体样式border-width、border-style:none无样式 dashed虚线 solid实线以及border-color*/
           #ice{ border: 1px solid rgb(172, 117, 117); }/*边框的简写形式*/
           /*边框的局部样式*/
           #ice{border-right-width: 1px;
            border-right-style: solid;
            border-right-color: rgb(43, 39, 39);}
            /*列表项图片:list-style-image: url(图片路径);*/
            /*表格*/
            /*表格标题位置caption-side:top/bottom*/
            /*表格边框合并：border-collapse:separate边框分开，有空隙（默认值）/collapse边框合并，无空隙*/
            /*图片的文字环绕:float:left/right*/
            img{float:right;width:60px;height: 60px;}
            /*背景样式*/
            /*背景颜色：background-color*/
            /*背景图片样式：background-image*/
            /*背景图片重复：background-repeat:repeat在水平方向和垂直方向上同时平铺（默认值/repeat-x	只在水平方向（x轴)上平铺/repeat-y只在垂直方向（y轴）上平铺/no-repeat	不平铺*/
            /*背景图片位置：background-position:像素值:水平距离 垂直距离;/关键字top left左上/top center靠上居中;*/
            /*背景图片固定：background-attachment:scroll随元素一起滚动（默认值）/fixed固定不动*/
            /*超链接伪类a:link定义a元素未访问时的样式/a:visited定义a元素访问后的样式/a:hover鼠标经过a元素时的样式/a:active鼠标点击激活时的样式*/
            /*hover可以表示鼠标经过时变色,元素:hover{…}*/
            /*cursor可表示鼠标样式,自定义鼠标样式为cursor: url(图片地址), 属性值;*/
        </style>
        
    </head>
    <body>m
        <span>你好</span>
        <!--行内样式表,CSS是在“标签的style属性”中定义的-->
        <div style="color: rgba(248, 174, 174, 0.776);">Winter's a good time to stay in and cuddle.</div>
        <!--id具有唯一性,class对于不同的元素可以相同-->
        <div >冬天适合待在室内相互依偎。</div>
        <p id="ice">id选择器前面要加#</p>
        <p class="cream">class选择器前面加.</p>
        <div id="father">
            <p>父元素和后代元素必须要用空格隔开，从而表示选中某个元素内部的后代元素。</p>
            <div>Long time no see</div>
        </div>
        <div id="div1">Arial</div>
        <div id="div2">Times New Roman</div>
        <div id="div3">微软雅黑</div>
        <p id="p3">font-size采用px为单位</p>
        <p id="p1">字体粗细为:lighter</p>
        <p id="p2">字体粗细为:normal</p>
        <p id="p3">字体粗细为:bold</p>
        <p id="p4">字体粗细为:bolder </p>
        <p id="p1">字体样式为normal</p>
        <p id="p2">字体样式为italic </p>
        <p id="p3">字体样式为oblique</p>
        <p id="n"><strong>左对齐</strong>:好好学习，天天向上。</p>
        <p id="m"><strong>居中对齐</strong>:好好学习，天天向上。</p>
        <p id="q"><strong>右对齐</strong>:好好学习，天天向上。</p>
        <img src="素材\flower-1.jpg">
    </body>
</html>