CSS字体属性

u Font-size，设置字体尺寸；如：font-size:30px;

u Font-family，设置字体，如：font-family:”微软雅黑”;（注：多个字体用逗号隔开，如果字体有空格需要加引号）

u Font-weight，设置粗细；如：font-weight:bold;（常用bold -粗体，bolder-更粗，lighter-更细）

u Font-style，设置字体显示样式，如：font-style:italic; 设置为斜体

选择器{属性名:属性值

font : font-style || font-weight || font-size || font-family

扫描二维码关注公众号，回复： 984579 查看本文章

p {

color: red; 设置字体的颜色

font-size: 40px; 设置字体的尺寸

font-family:微软雅黑, 宋体, sans-serif;

设置字体的尺寸 font-family:arial,'微软雅黑', 'Microsoft Yahei', 'Hiragino Sans GB',

font-weight: lighter; 设置字体粗细，属性值： bold 粗体（常用的），bolder 更粗， lighter更细

font-style:italic; 设置字体样式*/

font: italic bold 30px "微软雅黑";

}

u Color，设置字体颜色；如：color:red;

2. 文本属性

u Text-align，文本居中，如：text-align:center;

u Text-indent, 文本首行缩进，如：text-indent: 30px;

3. 背景属性

u background，如：background: red url(./img/background.jpg) repeat-x ;

n 背景简写

n background: 颜色图片地址平铺方式定位

u Background-color，设置背景颜色，如：background-color: red;

u Background-image，设置背景图片，如：background-image:url(图片地址);

u Background-repeat，设置背景平铺方式，如：background-repeat:repeat-y;

n 默认： repeat

n Repeat-y 图片沿着Y轴平铺

n Repeat-x 图片沿着x轴平铺

n No-repeat 不平铺

u Background-position，设置图片中间点的距离（默认是左上角），如：background-position:0px 0px;（默认）

n background-position:0px 0px; 第一个0px指定是x轴坐标，0px指定是y轴的坐标

n 图片从中心点向上移动10px，写：-10px, 从中心点向左移动10px，写：-10px

n 简写

<title>无标题文档</title>
<style>
    div { 
        /*
            background-color: red;
            background-image:url(./img/background.jpg);
            background-repeat:repeat-y; 默认平铺repeat  不平不no-repeat , repeat-y  y轴平铺，  repeat-x x轴平铺 
            
            
            background: 颜色 图片地址 平铺方式 定位
            background: red  url(./img/background.jpg)  repeat-x ;
            
            background:url(./img/background.jpg) no-repeat;
        */
        width: 155px;
        height: 221px;
        /*background-color: red;    */    
        background-image:url(./img/pic.jpg);
        background-repeat:no-repeat;
        background-position: 33px 0px;
        
    }
</style>
</head>

<body>
    <div>background</div>

尺寸属性

u width，设置宽度;

u Height，设置高度；

CSS优点

1使网页代码更少，网页下载更快

2.实现了内容与表现的分离，使网站维护更快捷

3. 使网页与浏览器的兼容性更好

CSS的属性

CSS字体属性

2. 文本属性

3. 背景属性

尺寸属性

CSS优点

猜你喜欢