前端基础复习笔记05--CSS背景样式?CSS边框样式?CSS文字样式?CSS段落样式?CSS复合样式?

    技术2025-09-02  5

    1. CSS背景样式?

        background-color 背景色     background-image 背景图         url(背景地址)         默认:会水平垂直都铺满背景图     background-repeat 平铺方式         repeat-x   x轴平铺         repeat-y   y轴平铺         repeat ( x , y 都进行平铺,默认值 )         no-repeat  都不平铺     background-position : 背景位置         x y : number(px、%) | 单词             x : left、center、right             y : top、center、bottom     background-attachment : 背景图随滚动条移动的方式         scroll : 默认值  ( 背景位置是按照当前元素进行偏移的 )         fixed ( 背景位置是按照浏览器进行偏移的 )     ⭐️在浏览器中无效的问题:图片路径要写对

    2. CSS边框样式?     border-style : 边框样式         solid : 实线         dashed : 虚线         dotted : 点线     border-width : 边框大小         px ...     border-color : 边框颜色         red #f00 ...        

        边框也可以针对某一天边进行单独设置 : border-left-style : 中间是方向 left、right、top、bottom    

        颜色:透明颜色 transparent

    3. CSS文字样式?

        font-family : 字体类型         英文、中文  ⭐️用在英文上的样式在中文中无效 中文字体则是两者都可以识别 默认微软雅黑         衬线体:有棱角的、非衬线体 :平滑的 现在用非衬线体的多,因为适应扁平化的网站         注意点:             1.多个字体类型的设置目的:如果当前电脑中没有字体就设置成后一种,都没有就计算机默认的             2.引号的添加的目的     font-size : 字体大小         默认 : 16px         写法 : number(px) medium默认大小| 单词 ( small large ... 不推荐使用)         ⭐️字体大小一般为偶数,目的是方便字体对齐

        font-weight : 字体粗细         模式: 正常( normal )   加粗 ( bold )         写法:单词(normal、bold)   |  法二:number ( 100 200 .....  900 , 100到500都是正常的,600都900都是加粗的  其实就两种效果)  

        font-style : 字体样式         模式: 正常 ( normal )   斜体 ( italic )         写法:单词 (  normal 、 italic )         注:oblique也是表示斜体,用的比较少,一般了解即可。         区别:1.italic 带有倾斜属性的字体的才可以设置倾斜操作。               2.oblique 没有倾斜属性的字体也可以设置倾斜操作。

    4. CSS段落样式?     text-decoration:文本装饰         下划线 : underline         删除线 :line-through         上划线 : overline         不添加任何装饰 : none         ⭐️注:添加多个文本修饰:line-through underline overline          text-transform:文本大小写 ( 针对英文段落 )         小写:lowercase         大写:uppercase         只针对首字母大写:capitalize          text-indent : 文本缩进         首行缩进         em单位:相对单位,1em永远都是跟字体大小相同

        text-align : 文本对齐方式         对齐方式 : left 、right、center、justify(两端点对齐)

        line-height : 定义行高

            什么是行高,一行文字的高度,上边距和下边距的等价关系。         默认行高:不是固定值,而是变化的。根据当前字体的大小再不断的变化。

            取值:1. number( px )   |  scale ( 比例值 , 跟文字大小成比例的 )就写数字

        letter-spacing : 字之间的间距     word-spacing : 词之间的间距  ( 针对英文段落的 )

        英文和数字不自动折行的问题:         1. word-break : break-all; (非常强烈的折行)         2. word-wrap : break-word;(不是那么强烈的折行 ,会产生一些空白区域)  

    5. CSS复合样式:

        复合的写法,是通过空格的方式实现的。复合写法有的是不需要关心顺序,例如background、border;有的是需要关心顺序,例如font。     1. background : red url() repeat 0 0;     2. border : 1px red solid;     3. font :          注:⭐️最少要有两个值 size family 必须先文字大小再字体 color是不包括在里面的             weight style size family  √ 粗细 样式 大小 字体             style weight size family  √             weight style size/line-height family √     注:如果非要混合去写的话,那么要⭐️⭐️⭐️先写复合样式,再写单一样式,⭐️⭐️⭐️这样样式才不会被覆盖掉。

    Processed: 0.013, SQL: 9