CSS3-第二部分-相关属性背景

人性背后-白云苍狗

已于 2022-03-18 16:50:42 修改

阅读量359

点赞数

文章标签： css3 css 前端

于 2022-03-18 11:18:39 首次发布

本文链接：https://blog.youkuaiyun.com/MUYUFANSHENXUE/article/details/123560434

版权

1，CSS如何写注释

/* CSS使用这种格式进行注释 */

2，关于字体的属性

  <style>
        /* font-size:字体大小
        font-family:字体
        font-style:风格
        font-weight:粗细
        font：字体属性（文字风格-粗细-大小-文字字体）
        */

        #spanId{
            /*
            定义由细到粗的字体
            400等同normal，700等同于bold
            normal：400普通
            bold：700加粗
            bolder：更粗
            lighter：更细
            */
            font-size: bolder;
        }

        p{
            /*
            font-size:字体大小
            单位：
            px（像素）
            em：相对父节点的大小
            rem：相对<body>的大小
            cm：厘米
            mm：毫米
            pt：1/72寸
            pc：1/6寸
            */
            font-family: Verdana, Geneva, "楷体";
        }

        body{
            /*
            字体，多个字体时候，就会优先取前面的
            前面取不到，就会依次取后面的，如果都取不到
            就会使用默认字体
            */
            font-family: "Cambria",  "Times New Roman","楷体" ;
        }

        h1{
            font-size: 100px;
        }

        h2{
            font-size: 1em;
        }

        #h21{
            /* 字体风格：普通 */
            font-style: normal;
        }

        #h22{
            /* 斜体 */
            font-style: italic;
        }

        #h23{
            /* 倾斜，更斜一点 */
            font-style: inherit;
        }

        p span{
            /* 文字风格 */
            font:oblique bold 12px "楷体";
        }
   
    </style>

以上是style，以下是body

<body>
    <h1>京东商城――全部商品分类</h1>
<h2 >图书、音像、电子书刊</h2>
<p>
    电子书刊 电子书 网络原创 数字杂志 多媒体图书目
    音像音乐 影视 教育音像
    经管励志 经济 金融与投资 管理 励志与成功
</p>


<h2>家用电器</h2>
<p>
    大家电 平板电视 空调 冰箱 DVD播放机
    生活电器 净化器 电风扇 饮水机 电话机
</p>

<h2>个护化妆</h2>
<p>
    面部护理 洁面乳 精华露 眼部护理 T区护理
    身体护理 洗发护发 沐浴 手工/香皂 手足护理
    香水SPA 女士香水 男士香水 组合套装 迷你香水
</p>

<h2>钟表</h2>
<p>
    瑞士品牌 江诗丹顿 卡地亚Cartier 帝舵TUDOR 真利时ZENITH 雷蒙威Raymond Well
    时尚品牌 巴宝莉BURBERRY 雅克利曼Jacques Lemans 苏菲玛索Sophie Marceau
    国产品牌 聚利时Julius 北京beijing 依宝诺EBONO 劳士顿
</p>

<h2>服饰鞋帽</h2>
<p>
    女装 T恤 衬衫 针织衫 卫衣 连衣裙 风衣 大衣 休闲裤
    男装 衬衫 POLO衫 针织衫 皮衣 外套 棉服 大衣
    运动 休闲鞋 跑步鞋 足球鞋 运动裤 运动包
</p>
</body>

效果图如下：

3关于文本的CSS

<style>
    p{
        /*
        文本的颜色（三种写法）
        第一种：英语单词
        第二种：用十六进制写法
               RGB也可以写EGBA
               #FFF也可以写#FFFFFF
               使用前者可以表现的颜色数量比后者少
               RGB
               第一个三个字母分别对应红绿蓝的百分比
               第二个就是使用2位数的十六进行表现红绿蓝的百分比
               RGBA
               多增加一位，勇于表现透明度，0或00作为透明，F或F为最不透明
        第三种：
               rgb（255.255.255）
               rgba（255.255.255.1）     
        */
        color：rgn（1，29，1）;
        color:green;
        color:#FF0000;
    }

    .p1{
        text-align: left;/* 靠左 */
    }

    .p2{
        text-align: right;/* 靠右 */
    }

    .p3{
        text-align: center;/* 居中 */
    }

    .p4{
        /*
    最后一个水平对齐属性是 justify，它会带来自己的一些问题。

    值 justify 可以使文本的两端都对齐。在两端对齐文本中，
    文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，
    使各行的长度恰好相等。您也许已经注意到了，两端对齐文本在打印领域很常见。
    不过在 CSS 中，还需要多做些考虑。

    要由用户代理（而不是 CSS）来确定两端对齐文本如何拉伸，
    以填满父元素左右边界之间的空间。例如，有些浏览器可能只在单词之间增加额外的空间，
    而另外一些浏览器可能会平均分布字母间的额外空间（不过 CSS 规范特别指出，
    如果 letter-spacing 属性指定为一个长度值，“用户代理不能进一步增加或减少字符间的空间”）。
    还有一些用户代理可能会减少某些行的空间，使文本挤得更紧密。所有这些做法都会影响元素的外观，
    甚至改变其高度，这取决于用户代理的对齐选择影响了多少文本行。

    CSS 也没有指定应当如何处理连字符（注1）。
    大多数两端对齐文本都使用连字符将长单词分开放在两行上，
    从而缩小单词之间的间隔，改善文本行的外观。
    不过，由于 CSS 没有定义连字符行为，用户代理不太可能自动加连字符。
    因此，在 CSS 中，两端对齐文本看上去没有打印出来好看，特别是元素可能太窄，
    以至于每行只能放下几个单词。当然，使用窄设计元素是可以的，不过要当心相应的缺点。
    */
    text-align: justify;
    }

/* text-decoration：文本修饰 */
    .de{
       text-decoration: underline;
        /*下划线*/
    }   
    
    .d1{
        text-decoration: overline;
        /*上划线*/
    }

    .d2{
        text-decoration: none;
        /*无*/
    }

    .d3{
        text-decoration: line-through;
       /*删除线*/
    }

    /* 垂直对齐方式 */
    img{
        vertical-align: middle;
    }

    .sd{
        /*文本阴影*/
        text-shadow: 1px 1px 1px red;
        /* 代表XYZ轴 */
    }
    </style>

以上是style，以下是body

<body>
    <h1 class="sd">阴影展示</h1>
    <p class="p1">
       <span class="de">电子书刊</span><span class="d1">电子书</span>  网络原创 数字杂志 多媒体图书目<br/>
       <span class="d2">影像音乐</span> 影视 教育音像<br/>
       <span class="d3">经管励志</span> 经济 金融与投资 管理 励志与成功
    </p>

    <p class="p2">
        大家电 平板电视 空调 冰箱 DVD播放机<br/>
        生活电器 净化器 电风扇 饮水机 电话机
    </p>

    <p class="p3">
        面部护理 洁面乳 精华露 眼部护理 T区护理<br/>
        身体护理 洗发护发 沐浴 手工/香皂 手足护理<br/>
        香水SPA 女士香水 男士香水 组合套装 迷你香水
    </p>

    <p class="p4">
        瑞士品牌 江诗丹顿 卡地亚Cartier 帝舵TUDOR 真利时ZENITH 雷蒙威Raymond Well<br/>
        时尚品牌 巴宝莉BURBERRY 雅克利曼Jacques Lemans 苏菲玛索Sophie Marceau<br/>
        国产品牌 聚利时Julius 北京beijing 依宝诺EBONO 劳士顿
    </p>
    <img src="图片\img4.png" />
</body>

以下是效果图：

关于文本与图片对齐，有一个baselin和middle的对齐，middle最常用，baseline是指文本的基线

上面的是与baselin基线对齐

上面的是与底部对齐，我们不难发现，基线对齐会比底部对齐要更上面一点，因为文本的基线，

上面的就是文本基线比较直观的看法，所以有时图片与文本对齐时会出现底部有一点空白空隙

just这样！

4，超链接伪类

<style>
/* 超链接，未被点击*/
a:link{
     color:red;
}

/* 超链接，已被点击过*/
a:visited{
color:black
font-size:30px;
text-decoration:overline;
}

/* 超链接，鼠标悬浮*/
a:hover{
color:blue;
font-size:30px;
text-decoration:overline;
}

/*超链接：鼠标点击*/
a:active{
color:yellow;
}

</style>

5,列表CSS

  <style>
        /*
            列表css
            list-style-type:序号类型
            list-style-image使用图片替换序号
            list-style-position对齐方式（默认outside）
            list-style-none:取消序号圆点
        */
         li{
             list-style-type
             list-style-image
             list-style-position
             list-style: none;
         }

    </style>

6，背景图片

<style>
h2{
   /*背景图片*/
    background-image:url("img/arrow.gif");
    /*背景图片复制*/
    background-repeat:no-repeat;
    /*背景图片定位（x，y）*/
    /*调整背景图定位时，推荐在浏览器中打开开发者工具，这样方便调试（开发者工具是所见即所得）*/
    background-position:257px 20px;
    /*背景图大小设置，可以写百分比，auto，cover，contain，根据实际情况调整，一般设计页面时，背景图都是等比的，如果发现不太对，联系相关人员。*/
    background-size:auto;
}
</style>

7,css线性渐变

<style>
div{
    width:300px;
    height:300px;
    /*
     想看到效果，div必须有大小，不然看不到
    linear-gradient(to left,#FF0000.#00FF00,#0000FF);
    不可以存在空格，否则无法识别，并且，颜色部分可以写多个。
    -ms-
    -webkit-
    -o-
    -moz-
    如果要使用，最好将所有内核描述都写上，如：
    background:linear-gradient(to left,#FF0000.#00FF00,#0000FF);
    -ms-linear-gradient(to left,#FF0000.#00FF00,#0000FF);
    -webikit-linear-gradient(to left,#FF0000.#00FF00,#0000FF);
    -o-linear-gradient(to left,#FF0000.#00FF00,#0000FF);
    -moz-linear-gradient(to left,#FF0000.#00FF00,#0000FF);
    */
    background:linear-gradient(to left,#FF0000.#00FF00,#0000FF);
}
</style>