css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色

简介: css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色

CSS样式学习宝典,关注点赞加收藏,防止迷路哦

1.css字体属性


字体属性

font-size 字体大小

font-family 字体种类

font-weight 字体粗细

font-style 字体正斜

font 字体属性的缩写[包括上面接]

color 字体颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css的相关属性: 字体属性 </title>
    <style>
        /*@符制定规则,来设置引入的自定义字体 */
        @font-face
        {
            font-family:"王文";
            src:url("font/方正舒体.TTF");
        }

        /* 设置字体属性 */
        .c1
        {
            font-style:italic; /*字体斜体*/
            font-weight:bold;  /*字体粗细*/
            font-size:32px;    /*字体大小*/
            font-family:"宋体";/*字体种类*/
        }

    /* 简写字体1 */
    .c2
    {font:italic bold 32px "宋体"; }


简写顺序

        /* 简写字体2 */
        .c3
        {
            border:solid 1px red;
            font:64px/2 "宋体";   /*  字体大小/行高比例 字体种类  */
            background-color: yellow;
        }

        /* 自定义字体 */
        .c4
        {font:64px/2 "王文";}

        ul
        {
            /* 去掉前面的点. */
            list-style:none;
            /* 改变鼠标的形态 */
            cursor:wait;
        }

    </style>
</head>
<body>
    <ul>
        <li class="c1">设置字体相关的属性1</li>
        <li class="c2">设置字体相关的属性2</li>
        <li class="c3">设置字体相关的属性3</li>
        <li class="c4">设置字体相关的属性4</li>
    </ul>
    
</body>
</html>


可以使用自定义字体,自己电脑里要有这个字体才能显示

使用@font-face 来设置自定义字体

src:url(字体路径)


去掉ul前面的点

改变鼠标的形态的各种样式

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cursor属性</title>
    <style>
        .cursor-item{
            width:240px;
            height:40px;
            padding:20px;
            font-size:30px;
            font-family: "Microsoft YaHei";
            background-color:#eee;
            margin-top:10px;
            border:1px solid #ccc;
            text-align:center;
            line-height:40px;
            font-weight: bolder;
            float:left;
            margin-right:10px;
            box-shadow:2px 2px 5px #ddd;
            color:#777;
        }
    </style>
</head>
<body>
        <div class="cursor-item" style="cursor:auto"> auto</div>
        <div class="cursor-item" style="cursor:default">default </div>  
        <div class="cursor-item" style="cursor:none "> none</div>
        <div class="cursor-item" style="cursor:context-menu">context-menu </div> 
        <div class="cursor-item" style="cursor:help "> help</div>
        <div class="cursor-item" style="cursor:pointer">pointer</div> 
        <div class="cursor-item" style="cursor:progress "> progress</div>
        <div class="cursor-item" style="cursor:wait "> wait</div>
        <div class="cursor-item" style="cursor:cell "> cell</div>
        <div class="cursor-item" style="cursor:crosshair">crosshair </div> 
        <div class="cursor-item" style="cursor:text "> text</div>
        <div class="cursor-item" style="cursor:vertical-text">vertical-text </div> 
        <div class="cursor-item" style="cursor:alias ">alias </div>
        <div class="cursor-item" style="cursor:copy "> copy</div>
        <div class="cursor-item" style="cursor:move ">move </div> 
        <div class="cursor-item" style="cursor:no-drop ">no-drop </div>
        <div class="cursor-item" style="cursor:not-allowed">not-allowed </div> 
        <div class="cursor-item" style="cursor:e-resize ">e-resize </div>
        <div class="cursor-item" style="cursor:n-resize ">n-resize  </div>
        <div class="cursor-item" style="cursor:ne-resize ">ne-resize </div>
        <div class="cursor-item" style="cursor:nw-resize ">nw-resize </div>
        <div class="cursor-item" style="cursor:s-resize "> s-resize</div>
        <div class="cursor-item" style="cursor:se-resize ">se-resize </div>
        <div class="cursor-item" style="cursor:sw-resize ">sw-resize </div>
        <div class="cursor-item" style="cursor:w-resize ">w-resize </div>
        <div class="cursor-item" style="cursor:ew-resize ">ew-resize </div>
        <div class="cursor-item" style="cursor:ns-resize "> ns-resize</div>
        <div class="cursor-item" style="cursor:nesw-resize "> nesw-resize</div>
        <div class="cursor-item" style="cursor:nwse-resize ">nwse-resize</div>
        <div class="cursor-item" style="cursor:col-resize "> col-resize </div>
        <div class="cursor-item" style="cursor:row-resize ">row-resize </div>
        <div class="cursor-item" style="cursor:all-scroll">all-scroll </div>
</body>
</html>

2.文本属性

文本属性

text-align 文本水平对齐方式

text-indent 文本的首行缩进

letter-spacing 字符间距

vertical-align 文本垂直对齐方式[一般都是在图片排版的时候使用]

line-height 文本行高

text-decoration 文本的装饰线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css的相关属性: 文本属性 </title>
    <style>
        .p0
        {
            font-size:16px;
            width:200px;height:200px;background-color: red;
            /* 字符间距 */
            letter-spacing:5px; 
            /* 文本的首行缩进 */
            /* text-indent:32px; */ /* px代表像素*/
            text-indent:2em;        /* 1em = 1个元素的大小 按照字体比例缩进 */
        }

        .p1  
        /* 强制换行 纯英文不会默认换行*/
        {word-wrap: break-word;}  

没有空格的纯英文默认不会换行

设置自动换行

.p2
/* 强制不换行 中文默认换行   */
{white-space:nowrap;}

.p3
/* 设置height与line-height数值相同,可以让文字在垂直方向上居中 */
{font-size:16px;width: 200px;height:50px; line-height: 50px;   background-color:goldenrod;}

.p4
/* text-align:left/center/right       文本水平对齐方式 ,默认向左对齐*/
{font-size:16px;width: 200px;height:50px; line-height: 50px;   background-color:goldenrod;text-align:center;}


.p5  去掉链接的装饰线
/* text-decoration:overline/line-through/underline/none; */
{text-decoration:none;}


默认a链接下面会有个装饰线,underline是默认的形式 下划线

使用text-decoration:none;可以去掉装饰线

line-through 中间划线 上划线:overline

html的del标签也是 中划线

        .p6 img
        /* vertical-align:top/middle/bottom   文本垂直对齐方式[一般都是在图片排版的时候使用] */
        {vertical-align:-600%;}

可以通过百分比微调

/* 
text-shadow相关设置
none: 无阴影 
<length>①: 第1个长度值用来设置对象的阴影水平偏移值。可以为负值 
<length>②: 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 
<length>③: 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 
<color>: 设置对象的阴影的颜色。  */
.p7        
{text-shadow:7px 4px 10px gray;}

  </style>

</head>
<body>
    <p class="p0 p1">setwordxiangguanpropertyhahahah </p>
    <p class="p0 p2">设置文本属性111222233asd设置文本属性设置文本属性</p>
    <p class="p3">本属性</p>
    <p class="p4">本属性</p>
    <a href="" class="p5">本属性</a>
    <del>特价取消</del>
    <p class="p6">   <img src="tupian1.png" />   <a href>点我跳转</a>   </p>
    <p class="p7"> 我是炫酷的阴影效果</p>
</body>
</html>

3.盒子模型

是块状元素就存在边距,padding 是内容和border之间的间距

调整div和div 盒子和盒子之间的间距用margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 盒子模型 </title>
    <style>
        #d1
        {
            width: 200px;
            height:200px;
            /* 上 右 下 左  top right bottom left*/
            border:solid 10px green;
            单独设某个边
            border-top:dotted 3px red;
            border-right:dashed 5px blue;
            
        }

常见的边框格式

#d2
{
    width: 200px;
    height:200px;
    border:solid 5px red;
    /* border-radius: 100px; */
    设置边角曲率
    border-top-left-radius: 100px;
    border-bottom-right-radius: 100px;
}

   #d3
    {
        width: 200px;
        height:200px;
        border:solid 5px red;
        /*上 右 下 左 padding会增大盒子的面积 内填充*/
        /* padding:50px; */            
        /* 上下 左右*/
        /* padding:10px 20px; */
        /* 上 左右 下 */
        padding:10px 20px 30px;
        /* 上 右 下 左 */
        /* padding:10px 20px 30px 10px;  */
        /* padding-left:30px; */
    }   

padding会增大盒子的面积,哪个方向设置padding,增大哪个方向

写三个,中间那个表示左右都设,上左右下

#d4
{
    width: 200px;
    height:200px;
    border:solid 5px red;
    /*上 右 下 左 盒子与盒子之间的间距 外边距*/
    /* margin:60px; */
    /* 上下 左右 */
    margin:10px 20px;
    /* 上 左右 下 */
    margin:10px 20px 30px;
    /* 上 右 下 左 */
    /* margin:10px 20px 30px 10px;  */
    /* margin-left:30px; */
}  

#d5
{
    width: 200px;
    height:200px;
    border:solid 5px red;
    /*  上下0px 左右自动居中*/
    margin:0px auto;
    
}

margin:auto 水平居中,要想实现垂直居中需要借助position

/* 
box-shadow:
<length>①: 第1个长度值用来设置对象的阴影水平偏移值。可以为负值 
<length>②: 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 
<length>③: 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 
<length>④: 如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值 
<color>: 设置对象的阴影的颜色。  */

#d6
{width:100px;height:100px;border:solid 5px red;box-shadow:6px 3px 16px 6px black;}

设置盒子阴影

    </style>
</head>
<body>

    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3">我是d3</div>
    <div id="d4">我是d4</div>
    <div id="d5">我是d5</div>
    <div id="d6"></div>


</body>
</html>

动态调整样式

浏览器检查,选中索要编辑的图形,在样式窗口可以用上下键微调,在浏览器上看变化

4.背景属性

背景属性

border-radius 元素的圆角

background-color 背景颜色

background-image 背景图片

background-repeat 背景平铺方式

background-position 背景定位位置

background-size 背景尺寸大小

background 上面几个背景属性的缩写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css 背景属性</title>
    <style>
        .c1
        {
            /* 具体写法 */
            width:600px;
            height:600px;
            border:solid 1px red;
            background-color: yellow;
            /* 控制背景图 */
            background-image:url("./images/xiao.jpg");
            /* 控制是否平铺,是否重复 repeat-x  repeat-y  no-repeat  repeat(默认)*/
            background-repeat:no-repeat;
            /* 控制背景图像的位置 ; 参数1 控制左右 参数2 控制上下,可正可负 */
            /* background-position:  50%  50%; */
            /* 固定背景图使用 fixed 了解 */
            background-attachment: fixed;
        }


attachement,默认是scroll

默认是repeat,图像重复直至填充整个盒子,可以设置x水平方向,y垂直方向,或者不重复

.c2
{
    /* 简写 */
    width:600px;
    height:600px;
    margin:10px 20px;
    border:solid 1px red;        
    /* 图片 是否平铺 [图片位置] */
    background: url("./images/xiao.jpg") no-repeat 50% 50%;
}


position

    </style>
</head>
<body>
    <div class="c1"></div>
    <div class="c2"></div>
</body>
</html>


5.背景图的引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图片的引入</title>
    <style>
        /* 鼠标滑过,点亮图片 */
        div.c1
        {width:60px;height:60px;border:solid 1px gray;background: url("./images/tag.jpg") no-repeat;}

        div.c1:hover
        {
            background: url("./images/tag.jpg") no-repeat;
            background-position: -312px -3.5px;
        }


灰色点亮原理:当鼠标滑过时,将对应的彩色图片位置移到灰色图片位置



先在原位置调整坐标,在浏览器调整直到彩色图片移到灰色图片位置,取坐标放到.c1:hover{}里面



多个盒子如果有相同配置,可以通过类选择器来做统一配置,不用每个都配置

但不能用id选择器,因为id选择器只能特指一个


 .gg
        {
            width:400px;
            height:400px;
            border:solid 1px red;
        }

        /* 一张图片的导入 */
        div.c2
        {
            background: url("./images/xiao.jpg") no-repeat;
            /* 参数1:宽 参数2:高  50px 50px / 100% 100% */
            /* 控制背景图像的尺寸大小 background-size: 100% 100% ; */
            background-size: 100% auto;
        }

背景图片铺满盒子,参数跟像素和百分比都可以。默认是auto,原始图片大小

        /* 在一个div里面引入多张图片导入,多个图片之间用逗号隔开 */
背景图放最后,其他物件放在背景图上面
如果坐标相同,上面的会覆盖下面的
然后通过position调整位置

        div.c3
        {
            background: 
                url("./images/game/map_19.gif") no-repeat 30px 80px,
                url("./images/game/map_20.gif") no-repeat 50px 50px,
                url("./images/game/map_18.gif") no-repeat 100px 50px,
                url("./images/game/map_14.gif") no-repeat 180px 100px,
                url("./images/game/map_03.gif");
        }

    </style>
</head>
<body>
    
    <div class="c1"></div>
    <div class="c2 gg"></div>
    <div class="c3 gg"></div>

</body>
</html>
相关文章
|
15天前
|
前端开发 UED 容器
CSS基础-背景属性:颜色、图片、重复
【6月更文挑战第9天】本文介绍了CSS背景属性,包括背景颜色、图片、重复的使用和常见问题。通过实例展示了如何设置背景颜色(如使用rgba()注意透明度影响)、背景图片(使用background-size控制缩放)、背景重复(避免默认平铺导致混乱)以及综合使用背景属性创建复杂效果。理解并熟练运用这些属性能提升网页设计的视觉层次和用户体验。建议通过实践不断探索和提升CSS技能。
|
3天前
|
前端开发 容器
CSS3 新增背景属性 + 新增边框属性(如果想知道CSS3新增背景属性和新增边框属性的知识点,那么只看这一篇就够了!)
CSS3 新增背景属性 + 新增边框属性(如果想知道CSS3新增背景属性和新增边框属性的知识点,那么只看这一篇就够了!)
|
3天前
|
前端开发 开发者
CSS盒子模型(如果想知道CSS有关盒子模型的知识点,那么只看这一篇就足够了!)
CSS盒子模型(如果想知道CSS有关盒子模型的知识点,那么只看这一篇就足够了!)
|
3天前
|
Web App开发 前端开发 Windows
CSS基础常用属性之字体属性(如果想知道CSS的字体属性知识点,那么只看这一篇就足够了!)
CSS基础常用属性之字体属性(如果想知道CSS的字体属性知识点,那么只看这一篇就足够了!)
|
3天前
|
移动开发 前端开发 HTML5
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
|
3天前
|
前端开发 容器
CSS3新增文本属性(如果想知道CSS3新增文本属性的知识点,那么只看这一篇就够了!)
CSS3新增文本属性(如果想知道CSS3新增文本属性的知识点,那么只看这一篇就够了!)
|
10天前
|
前端开发 编解码 移动开发
【魅力网页的背后】:CSS基础魔法,从零打造视觉盛宴
【魅力网页的背后】:CSS基础魔法,从零打造视觉盛宴
|
10天前
|
缓存 前端开发 JavaScript
从HTML、CSS以及其他方面介绍一些移动端网页性能优化的策略
【6月更文挑战第14天】本文探讨了移动端网页性能优化的重要性,并提出了HTML、CSS及其他方面的优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件。CSS优化包括简化样式、利用CSS3动画、媒体查询及压缩文件。其他策略涉及图片和字体优化、缓存利用、压缩传输数据、减少HTTP请求及监听网络状态。通过这些方法,可提升网页性能,改善用户体验。
15 1
|
16天前
|
前端开发 UED 容器
CSS基础-文本样式:颜色、字体、大小、对齐
【6月更文挑战第8天】本文介绍了CSS中设置文本颜色、字体、大小和对齐的基础知识。通过color属性改变文本颜色,使用font-family设置字体,用font-size调整大小,text-align控制对齐方式。注意浏览器兼容性、文本溢出和响应式设计的问题。提供的代码示例展示了这些属性的用法,帮助创建更具吸引力的网页。
|
18天前
|
前端开发
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
19 0