css笔记完整版（三）之常见属性（共四部，加起来就是css完整笔记）

最新推荐文章于 2025-02-27 23:24:12 发布
原创 最新推荐文章于 2025-02-27 23:24:12 发布 · 727 阅读 · 13 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

目录

零、码仙励志

一、颜色属性

二、字体属性

三、背景属性

四、文本属性

五、边框属性

六、列表属性

零、码仙励志

你经得起多少诋毁，就担得起多少赞美，活出自我，才值得拥有更好的邂逅

一、颜色属性

<head>
  <meta charset="utf-8">
  <style type="text/css">
    .a1{ color:red;}
    .a2{ color:#ff6600;}
    .a3{ color:#f60;}
    .a4{ color:rgb(95,197,175);}
    .a5{ color:rgba(0,0,0,0.51);}
  </style>
</head>

<body>
  <a class="a1">属性定义文本的颜色</a><br>
  <a class="a2">属性定义文本的颜色</a><br>
  <a class="a3">属性定义文本的颜色</a><br>
  <a class="a4">属性定义文本的颜色</a><br>
  <a class="a5">属性定义文本的颜色</a>
</body>

二、字体属性

<head>
  <meta charset="utf-8">
  <style type="text/css">
    .a1{ font-size:40px;}
    .a2{ font-family:宋体，微软雅黑；}
    .a3{ font-weight:bolder;}
    .a4{
        font-size:40px;
        font-family:微软雅黑;
        font-weight:bolder;
	}
  </style>
</head>

<body>
  <a class="a1">字体大小</a><br>
  <a class="a2">定义字体</a><br>
  <a class="a3">字体加粗</a><br>
  <a class="a4">一起使用</a>
</body>

三、背景属性

<head>
  <meta charset="utf-8">
  <style type="text/css">
    body{ background-color:red;}
  </style>
</head>

<head>
  <meta charset="utf-8">
  <style type="text/css">
    body{ background-image:url(2018-08-12_173557.jpg)；}
  </style>
</head>

默认会横向和纵向重复

<head>
  <meta charset="utf-8">
  <style type="text/css">
    body{ 
        background-image:url(2018-08-12_173557.jpg);
        background-repeat:no-repeat;
    }
  </style>
</head>

<head>
    <meta charset="utf-8">
    <style type="text/css">
    body{
        background-image:url(2018-08-12_173557.jpg);
        background-repeat:no-repeat;
        /*第一个代表横向，第二个代表纵向*/
        background-position:right center;
    }	
    </style>
</head>


<head>
    <meta charset="utf-8">
    <style type="text/css">
    body{
        background:#f60 url(2018-08-12_173558.jpg) no-repeat top center
    }	
    </style>
</head>

四、文本属性

<head>
    <meta charset="utf-8">
    <style type="text/css">
        body{ text-align:center;}
    </style>
</head>

<body>
    文本属性
</body>

<head>
    <meta charset="utf-8">
    <style type="text/css">
        body{ line-height:30px;}
    </style>
</head>

<body>
    文本属性<br>
    文本属性<br>
    文本属性<br>
</body>


<head>
    <meta charset="utf-8">
    <style type="text/css">
        body{ text-indent:50px;}
    </style>
</head>

<body>
    文本属性<br>
    文本属性<br>
    文本属性<br>
</body>

<head>
    <meta charset="utf-8">
    <style type="text/css">
        body{ letter-spacing:20px;}
    </style>
</head>

<body>
    文本属性<br>
    文本属性<br>
    文本属性<br>
</body>

五、边框属性

<head>
    <meta charset="utf-8">
    <style type="text/css">
        .d1{
            width:150px;
            height:150px;
            background-color:#F60;
            border-style:solid;
            border-width:10px;
            border-color:#C0C;
            }
    </style>
</head>

<body>
    <div class="d1"></div>
</body>

<head>
    <meta charset="utf-8">
    <style type="text/css">
        .d1{
            width:150px;
            height:150px;
            background-color:#F60;
            border:solid 10px #C0C;
            }
    </style>
</head>

<body>
    <div class="d1"></div>
</body>

六、列表属性

默认情况下：

<head>
    <meta charset="utf-8">
    <style type="text/css">

    </style>
</head>

<body>
    <ul>
        <li>无序列表</li>
        <li>无序列表</li>		
        <li>无序列表</li>	
    </ul>
    <ol>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>
</body>

<head>
    <meta charset="utf-8">
    <style type="text/css">
    ul{
        list-style-type:upper-alpha;
    }
    ol{
        list-style-type:disc;
    }
    </style>
</head>

<body>
    <ul>
        <li>无序列表</li>
        <li>无序列表</li>		
        <li>无序列表</li>	
    </ul>
    <ol>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>
</body>

<head>
    <meta charset="utf-8">
    <style type="text/css">
    .inside{
        list-style-position:inside;
    }
    .outside{
        list-style-position:outside;
    }
    </style>
</head>

<body>
    <ul class="inside">
        <li>无序列表</li>
        <li>无序列表</li>		
        <li>无序列表</li>	
    </ul>
    <ul class="outside">
        <li>无序列表</li>
        <li>无序列表</li>		
        <li>无序列表</li>	
    </ul>
</body>

<head>
    <meta charset="utf-8">
    <style type="text/css">
    .gif{
        list-style-image:url(arr.gif);
    }
    .png{
        list-style-image:url(arr.png);
    }
    </style>
</head>

<body>
    <ul class="gif">
        <li>无序列表</li>
        <li>
            <ul class="png">
                <li>无序列表</li>
                <li>无序列表</li>		
                <li>无序列表</li>	
            </ul>
        </li>		
        <li>无序列表</li>	
    </ul>
</body>

<head>
    <meta charset="utf-8">
    <style type="text/css">
    .gif{
        list-style:circle outside url(arr.png);
    }
    </style>
</head>

<body>
    <ul class="gif">
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>	
    </ul>
</body>

本篇博客来自于麦子学院视频教程的总结以及笔记的整理，仅供学习交流，切勿用于商业用途，如有侵权，请联系博主删除，博主QQ：194760901 

CSS - 常用属性和布局方式
CYK_byte的博客
10-24 1490
这里推荐一个 CSS 属性网站，里面的样式很全，忘记了也可以在这里查~
CSS属性大全
热门推荐
ss810540895的博客
07-21 2万+
css属性代码大全。
CSS常用属性总结
m0_61619549的博客
09-24 4323
布局，定位性，背景，边框，文本，列表，表格，动画(过渡，动画，变形)，.......总结了CSS大部分常用属性及使用方法。
CSS 中的常用属性(图文详解版)
m0_74365243的博客
05-15 5077
对CSS中常用属性的总结
CSS常用属性
weixin_52023368的博客
04-01 4511
包含css常用文本属性，css常用背景属性，和其他css常用属性
html+css+javascript笔记完整版
03-03
"html+css+javascript笔记完整版"是一份全面的前端学习资源，涵盖了从基础到进阶的HTML、CSS和JavaScript知识。通过深入学习，你可以掌握创建交互式、响应式网页所需的所有技能，并为进一步探索前端开发的广阔领域...
精选资源
CSS笔记（完整版）.md
08-17
css基础知识及网页布局
css学习笔记学习笔记
12-19
CSS学习笔记涵盖了多个CSS基础知识点，包括标签选择器、类选择器、id选择器、通配符选择器，以及如何使用CSS绘制基本的盒子模型。以下是对这些知识点的详细阐述。 标签选择器是最基础的CSS选择器，它的作用是为特定...
基于HTML、CSS、JavaScript的完整前端开发学习笔记汇总
02-20
它能够使网页内容动起来，增加用户交互体验。JavaScript文件通常用于添加事件处理、数据验证、动态内容更新以及用户界面的改进等功能。通过学习JavaScript文件，开发者可以深入了解如何编写脚本来控制网页的行为，...
韩顺平html+css+javascript笔记完整版
01-15
《韩顺平html+css+javascript笔记完整版》是一份极具价值的学习资料，它涵盖了前端开发的三大核心技术：HTML（超文本标记语言）、CSS（层叠样式表）和JavaScript。这份资料以韩顺平老师的专业讲解为基础，旨在帮助...
css常用属性大全
weixin_63477921的博客
02-16 1121
【代码】css常用属性大全。
CSS 日常开发常用属性总结
最新发布
m0_58680865的博客
02-27 1571
支持变量、嵌套、模块化等功能，提高代码可维护性。通过插件提供更多功能，如自动补充浏览器前缀。根据不同设备或屏幕尺寸应用不同的样式。设置元素的最大宽度和高度。示例：Sass 变量。
学习CSS常用声明（属性），为网页修饰搭建基础
2401_84309743的博客
10-12 1305
【bold：粗体（bolder表示粗体再加粗），normal：默认字体，lighter：比默认字体还细（100~900，数字越小越细）】【underline：下划线，overline：上划线，line-through：删除线，blink：闪烁】【normal：“正常”（默认值），italic：“斜体”，oblique：“倾斜体”】横向：left（左对齐）、center（水平居中）、right（右对齐）；【left：左对齐，right：右对齐 ，center：居中】（4）repeat-y：垂直方向平铺。
css所有属性介绍
优快云博客专家，系统架构师，有合作、疑惑请私信博主。
12-02 4508
css所有属性介绍，里面包含了所有的css属性，CSS3 动画属性（Animation）， CSS 背景属性（Background） ，CSS 边框属性（Border 和 Outline），Box 属性，Color 属性 ，Content for Paged Media 属性，CSS 尺寸属性（Dimension），可伸缩框属性（Flexible Box）， CSS 字体属性（Font），内容生成（Generated Content）， Grid 属性，Hyperlink 属性，CSS 列表属性
CSS样式表（三）
12-28 172
前端人员在学习开发过程中常用的CSS样式总结： 　　【margin】 　　margin 检索或设置对象四边的外延边距 　　margin-top 检索或设置对象顶边的外延边距 　　margin-right 检索或设置对象右边的外延边距 　　margin-bottom 检索或设置对象底边的外延边距 　　margin-left 检索或设置对象左边的外延边距 　　argin：检索或...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值