常用属性 属性值

常用属性 属性值常用属性属性值 属性值

大家好,欢迎来到IT知识分享网。

文本属性(用来修饰文本)

1、font-size:数值+单位; 字体大小

           页面中默认字号大小为16px

2、font-family:字体名;

如果字体名为中文,引号可加可不加;如果字体名为一个英文单词,引号可不加;如果字体名为多个英文单词组成加引号,可设置多个字体,以便加载不出替换下一个,字体名与字体名间用逗号隔开。谷歌默认字体微软雅黑,IE低版本默认字体宋体。

3、color: ;

取值:

一个表示颜色的英文单词

#六位十六进制数值(1-9  a-f)

Rgb(red,green,blue)(0-255)

Rgba(red,green,blue,alpha透明度(0-1,0为完全透明,1为不透明))

4、font-weight: ; 字体加粗

取值:

      关键词取值:bold加粗;bolder更粗;normal默认正常显示(可以用来取消默认效果);lighter细体;

      数值(整百数值)取值:100-900;100为细体,400为正常,700-900为粗体;

5、font-style: ;字体倾斜

取值:

      Italic 字体倾斜(强调斜体字)

      oblique 字体倾斜(强调倾斜效果,具有强调性)

      normal 默认正常显示 可以用来取消默认效果

6、text-decoration: ;文本修饰线

取值:

         underline(添加下划线);none(取消下划线);line-through(添加中间线

          none(取消下划线):常用来取消超链接标签下面的下划线

7、首行缩进:text-indent:数值+单位;

8、text-align: ;文本水平对齐方式

      取值:left;center;right;justify(两端对齐,对单行文本不生效,对多行文本最后一行不生效)  

      9、line-height:数值+单位; 行高(行高=容器高可实现单行文本垂直居中;多行文本实现文本内容间距)    

10、字符间距:letter-spacing:数值+单位;

11、词间距:word-spacing:数值+单位;(应用于英文文本中)

12、更改字母大小写:text-transform:

        取值:

               uppercase——-大写

               lowercase——-小写

               capitalize—–单词首字母大写

列表属性:

list-style: ;

取值:none;去掉列表样式。

边框:元素的边缘

            属性:border:10px solid red;

            表示给元素添加宽度为10像素,实线红色的边框

      边框样式取值:

         solid实线;dashed虚线;dotted点状线;double双线;none没有边框;

        给元素某一个方向上添加边框

                border-方向词

                方向词:

                    top——上

                    right—–右

                    bottom—–下

                    left——-左

使用边框制作三角形

transparent代替颜色值为透明

常用属性 属性值       上下边框为透明,无右边框(容器宽高为0)

常用属性 属性值左右边框为透明,无下边框(容器宽高为0)

背景属性:

      background: ;

      background-color: ;

      background-images: url( );背景图引入;

background-repeat: ;

        repeat平铺;no-repeat不平铺;repeat-x横向平铺;repeat-y纵向平铺

  background-position: x  y ;(数值+单位)

    x为x轴上的位置

    y为y轴上的位置

  background-size:x  y;(数值+单位)

    x为背景图宽度

    y为背景图高度

关键词取值:

  cover;覆盖,保持图像的宽高比并将图像缩放成将完全覆盖背景定位区域。容器全部被覆盖,背景图多余地方被剪裁。(常用)

 contain;填充,保持图像的纵横比并将图像缩放成将背景定位区域某方向填满后不再缩放。容器会出现一侧留白。

background-attachment: ;

      取值:

       fixed;固定(相对于浏览器窗口固定)

       scroll; 滚动(默认,跟随当前容器内容滚动)

背景属性的简写方式background:red  url(img/img01.jpg)  no-repeat  left  bottom;

                                                    颜色       背景图             是否平铺      位置(x  y)

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://haidsoft.com/136263.html

(0)
上一篇 2025-06-28 18:45
下一篇 2025-06-28 19:00

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信