03CSS样式（字体、文本、背景）

最新推荐文章于 2024-09-09 11:03:57 发布

鼠标a

最新推荐文章于 2024-09-09 11:03:57 发布

阅读量108

点赞数 1

分类专栏： css 文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_73340670/article/details/127525483

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

字体样式

font-size 字体大小

font-weight 字体粗细，bold加粗/lighter变细，还可以用纯数字100~900的整百数表示，400正常，700加粗

font-style 字体样式，normal(默认值) 正常，italic倾斜

font-family 字体，font-family: ‘楷体’， ‘黑体’；写多个字体时用逗号隔开

连写方式：font: style weight size family;//前面两个属性可以省略，就是默认值。后两个必须写

单独写和连写在一起使用时，单独写要么写在连写的下面，要么一起连写

样式层叠问题

同一个标签设置了相同的样式，写在最下面的会生效

文本样式

文本缩进 text-align

text-indent，数值+em,表示首行缩进的字数，也可以用px表示但不推荐

水平对齐方式 text-align

如果需要让文本水平居中，给文本所在的标签设置(文本父元素)

text-align可以让 a img input span 这些元素水平居中，给这些元素的父元素设置text-align属性

文本修饰 text-decoration

underline 下划线 (常用)
line-through 删除线(不常用)
overline 上划线 (几乎不用)
none 无装饰线 (最常用)

开发中使用text-decoration: none; 清除a标签默认的下划线

行高 line-height

取值: 数字+px 或者倍数
应用:
让单行文本垂直居中， line-height:文本父元素的高度

网页精准布局，设置line-height:1取消上下间距

背景样式

背景图片和img的区别

背景颜色墙纸

img 墙上挂的钟表

background-image: url(./img/logo.png); 背景图片

background-color 背景颜色

方法一：英文表示，red,green,blue…
方法二：十六进制表示， #111223 #00ff00 简写 #0f0，#f3f3f3，#ff33f3不能简写
方法三：rgb(200,212,0) 每一个的取值是0~255， rgba(200,234,0,0.5) a透明 0-1

background-repeat 背景平铺

repeat 水平和垂直方向都平铺（默认值）
repeat-x 水平方向都平铺
repeat-y 垂直方向都平铺
no-repeat 水平和垂直方向都不平铺

background-repeat 位置背景

方法一：方位名词：最多表示9个位置水平方向 left center right 垂直方向 top center bottom
方法二：数字+px ： 0 0 左上角 x y
注意：方位名词可以和坐标轴混用，第一个表示水平第二个表示垂直

background-position: 10px center;

复合写法

color image repeat position

 .main {
        width: 800px;
        height: 800px;

        /* 复合写法
        background：color image repeat position
         */

        /* background: red url(./img/logo.png) no-repeat left center; */

        background: yellow url(./img/logo.png) no-repeat;
        background-position: left center;
      }