css常用属性使用教程_属性攻略教程

1、文本属性文本对齐text-align 属性规定元素中的文本的水平对齐方式。属性值:none | center | left | right | justify文本颜色color属性文本首行缩进text-indent 属性规定元素首行缩进的距离,单位建议使用em文本修饰text-decoration属性规定文本修饰的样式属性值:none(默认) | und

css常用属性使用教程

1、文本属性

文本对齐

text-align 属性规定元素中的文本的水平对齐方式。

css常用属性使用教程_属性攻略教程

属性值:none | center | left | right | justify

文本颜色

color属性

文本首行缩进

text-indent 属性规定元素首行缩进的距离,单位建议使用em

文本修饰

text-decoration属性规定文本修饰的样式

属性值:none(默认) | underline(下划线) | overline(定义文本上的一条线)  | line-through (定义穿过文本下的一条线) | inherit(继承父元素的text-decoration属性的值。)

行高

line-height就是行高的意思,指的就是一行的高度。

阴影

text-shadow:水平方向偏移量 垂直方向偏移量 模糊度 阴影颜色;

文字溢出

text-overflow:clip | ellipsis

案例:文字超出部分显示…

css部分
div{
   width: 200px;
   height: 200px;
   border: 1px solid red;

 }
div p{
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
} 
html部分
<div>
       <p>变有钱 我变有钱多少人没日没夜地浪费时间</p>
       <p>变有钱 我变有钱多少人没日没夜地浪费时间</p>
       <p>变有钱 我变有钱多少人没日没夜地浪费时间</p>
</div>

  

2、字体属性

字体大小

font-size表示设置字体大小,如果设置成inherit表示继承父元素的字体大小值。

字体粗细

font-weight表示设置字体的粗细

属性值:none(默认值,标准粗细) | bold(粗体) | border(更粗)| lighter(更细) | 100~900(设置具体粗细,400等同于normal,而700等同于bold)| inherit(继承父元素字体的粗细值)

字体系列

font-family

font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif

如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识别的第一个值。如果都不支持则显示宋体。

使用font-family注意几点:

1.网页中不是所有字体都能用哦,因为这个字体要看用户的电脑里面装没装,
比如你设置: font-family: “华文彩云”; 如果用户电脑里面没有这个字体,
那么就会变成宋体
页面中,中文我们只使用: 微软雅黑、宋体、黑体。 
如果页面中,需要其他的字体,那么需要切图。 英语:Arial 、 Times New Roman

2.为了防止用户电脑里面,没有微软雅黑这个字体。
就要用英语的逗号,隔开备选字体,就是说如果用户电脑里面,
没有安装微软雅黑字体,那么就是宋体:
font-family: “微软雅黑”,”宋体”; 备选字体可以有无数个,用逗号隔开。
3.我们要将英语字体,放在最前面,这样所有的中文,就不能匹配英语字体,
就自动的变为后面的中文字体: 
font-family: “Times New Roman”,”微软雅黑”,”宋体”;

4.所有的中文字体,都有英语别名,
我们也要知道: 微软雅黑的英语别名:
font-family: “Microsoft YaHei”;
宋体的英语别名: font-family: “SimSun”;
font属性能够将font-size、line-height、font-family合三为一: font:12px/30px “Times New Roman”,”Microsoft YaHei”,”SimSun”;

5.行高可以用百分比,表示字号的百分之多少。
一般来说,都是大于100%的,因为行高一定要大于字号。 
font:12px/200% “宋体” 等价于 font:12px/24px “宋体”; 
反过来,比如: font:16px/48px “宋体”;
等价于 font:16px/300% “宋体”

行高 line-height

针对单行文本垂直居中

公式:行高的高度等于盒子的高度,可以使当行文本垂直居中,注意只适用单行文本。

针对多行文本垂直居中

行高的高度不能小于字体的大小,不然上下字之间会紧挨一起。

第一步,一个宽度300*300的盒子,看盒子中一共显示了几行文字,假如是5行,再看一下行高,如果行高是line-height:30px; 那么就知道行高*5=150px

第二步,让(盒子的高度-150px)/2=75;那么设置盒子的padding-top:75px;同时保证盒子的高度为300px,那么高度改为225px;

vertical-align

定义:vertical-align 属性设置元素的垂直对齐方式。

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐

常用属性值:

  • baseline 默认值
  • top
  • bottom
  • middle

它的作用:

  • 内联元素之间的对齐
    • 文字与图片垂直方向的对齐
    • 图片与托片垂直方向的对齐
    • 行内块元素垂直方向的对齐
  • 单元格td的内容垂直方向的对齐

3、background

颜色表示法

一共有三种:单词、rgb表示法、十六进制表示法

rgb表示法

rgb:红色 绿色 蓝色 三原色
光学显示器,每个像素都是由三原色的发光原件组成的,靠明亮度不同调成不同的颜色的。
用逗号隔开,r、g、b的值,每个值的取值范围0~255,一共256个值。
如果此项的值,是255,那么就说明是纯色:
黑色:background-color: rgb(0,0,0);

光学显示器,每个元件都不发光,黑色的。

白色:background-color: rgb(255,255,255);

颜色可以叠加,比如黄色就是红色和绿色的叠加:

background-color: rgb(255,255,0);

再比如:background-color: rgb(111,222,123);

就是红、绿、蓝三种颜色的不同比例叠加。

十六进制表示法

所有用#开头的值,都是16进制的。
#ff0000:红色
16进制表示法,也是两位两位看,看r、g、b,但是没有逗号隔开。
ff就是10进制的255 ,00 就是10进制的0,00就是10进制的0。所以等价于rgb(255,0,0);

怎么换算的?我们介绍一下
我们现在看一下10进制中的基本数字(一共10个):
0、1、2、3、4、5、6、7、8、9

16进制中的基本数字(一共16个):
0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f

16进制对应表:
十进制数 十六进制数
0 0
1 1
2 2
3 3
……
10 a
11 b
12 c
13 d
14 e
15 f

16 10
17 11
18 12
19 13
……
43 2b
……
255 ff

十六进制中,13 这个数字表示什么?
表示1个16和3个1。 那就是19。 这就是位权的概念,开头这位表示多少个16,末尾这位表示多少个1。
小练习:
16进制中28等于10进制多少?
答:2*16+8 = 40。

16进制中的2b等于10进制多少?
答:2*16+11 = 43。

16进制中的af等于10进制多少?
答:10 * 16 + 15 = 175

16进制中的ff等于10进制多少?
答:15*16 + 15 = 255

所以,#ff0000就等于rgb(255,0,0)

要记住:
#000 黑
#fff 白
#f00 红
#333 灰
#222 深灰
#ccc 浅灰

background-color属性表示背景颜色

background-img:表示设置该元素的背景图片

默认的背景图片,水平方向和垂直方向都平铺

background-repeat:表示设置该元素平铺的方式

属性值:

描述
repeat默认。背景图像将在垂直方向和水平方向重复。
repeat-x背景图像将在水平方向重复。
repeat-y背景图像将在垂直方向重复。
no-repeat背景图像将仅显示一次。
inherit规定应该从父元素继承 background-repeat 属性的设置。

给元素设置padding之后,发现padding的区域也会平铺背景图片。

repeat应用案例

还是上面那个超链接导航栏的案例,我们给body设置平铺的图片,注意:一定找左右对称的平铺图片,才能实现我们要的效果

background-position: 属性设置背景图像的起始位置。这个属性设置背景原图像(由 background-image 定义)的位置

属性值:

描述
  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right

如果您仅规定了一个关键词,那么第二个值将是”center”。

默认值:0 0;

这两个值必须挨在一起。

雪碧图技术(精灵图技术)

CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分

CSS 雪碧图应用原理:
只有一张大的合并图, 每个小图标节点如何显示单独的小图标呢?

其实就是 截取 大图一部分显示,而这部分就是一个小图标。

使用雪碧图的好处:

1、利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因; 
2、CSS Sprites能减少图片的字节,曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。 
3、解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。 
4、更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便

不足:

1)CSS雪碧的最大问题是内存使用
2)拼图维护比较麻烦
3)使CSS的编写变得困难
4)CSS 雪碧调用的图片不能被打印

我们可以使用background综合属性制作通天banner,什么是通天banner呢,就是一般我们电脑的屏幕都是1439.但是设计师给我们的banner图都会比这个大,

那么我们可以此属性来制作通天banner。

background:  red  url(‘./images/banner.jpg‘)  no-repeat   center top;

background-attach

设置fixed之后,该属性固定背景图片不随浏览器的滚动而滚动

海计划公众号
(0)
上一篇 2020/03/30 07:14
下一篇 2020/03/30 07:14

您可能感兴趣的内容

  • timeline.js小白知识一款jQuery时间轴幻灯片插件

    timeline.js基础知识 官方网址:https://ilkeryilmaz.github.io/timelinejs/ GitHub:https://github.com/i…

    2020/03/06
  • 常用报表软件有哪些?入门知识_软件基础入门

    在企业管理过程中,报表往往都会通过一些简洁的图表方式,为大家呈现所有的数据。报表软件,可以在操作的过程中有效提升工作效率,所以有很多企业早就已经选择跟随信息技术的潮流,选择报表软件工具。很多人也一直都在关注免费报表软件有哪些,本文就为大家推荐几款比较常见的。1、润乾我们在查询免费报表软件有哪些时,那么不少人也会发现,传统报表软件中其实也有很多。比如说润乾,这

    2020/03/26
  • vuex的持久化小白基础_vuex基础入门

    vuex的持久化小白基础 vuex Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应 用的所有组件的状态,并以相应的规则保证…

    2020/03/19
  • XSS跨站脚本攻击类型、分类零基础入门_攻击使用攻略

    XSS 介绍XSS 是跨站脚本攻击(Cross Site Scripting)的简写,但是从首写字母命名的方式来看,应该取名 CSS,但这样就和层叠样式表(Cascading Style Sheets,CSS)重名了,所以取名为 XSS。XSS 攻击,一般是指攻击者通过在网页中注入恶意脚本,当用户浏览网页时,恶意脚本执行,控制用户浏览器行为的一种攻击方式。X

    2020/03/26
  • 积极使用解构赋值以及箭头函数提升 Javascript 表现力基础知识教程_技巧菜鸟指南

    本文列举了一些日常会使用到的 Javascript技巧,可以明显提升代码的表现力。解构赋值首先,我们来看一下下面这段代码:const animal = {type: {mammal: {bear: {age: 12},deer: {age: 4}}}
    }console.log(animal.type.mammal.bear) // 输出:{ age: 12

    2020/03/29
  • Athena攻略教程_前端自动化流程构建工具

    Athena攻略教程 官方网址:https://athena.aotu.io/ GitHub:https://github.com/o2team/athena 简介描述:前端自动化…

    2020/03/06
  • Grid菜鸟指南_网页网格栅格化工具

    Grid菜鸟指南 官方网址:http://grid.guide/ 简介描述:网页网格栅格化工具 超好用的网页栅格化工具。打网站后,用户可以自由设置最大宽度、列数以及留白边界即可生成…

    2020/03/10
  • ES6 模块化和 .vue组件的应用举例入门基础知识_模块化菜鸟指南

    关于ES6 Module 的语法,详情可以查看阮一峰老师的《ECMAScript 6 入门》里面关于Module的章节Module 的语法,本文主要讲下ES6 模块化与 .vue 组件的一个应用。ES6 模块与 CommonJS 模块的差异以下部分内容引用阮一峰老师的《ECMAScript 6 入门》这一章节ES6 模块与 CommonJS 模块的差异开始之

    2020/03/26
  • 使用vconsole进行移动端调试使用指南_调试基础指南

    可使用npm进行安装GitHub地址:https://github.com/Tencent/vC…npm install vconsole在项目的根html文件的标签中引入dist/vconsole.min.js
    // init vC

    2020/03/31
  • 电脑cmd命令大全:最全DOS的CMD命令,程序员必会小白常识_cmd入门攻略

    CMD命令:开始->运行->键入cmd或command(在命令行里可以看到系统版本、文件系统版本)1. appwiz.cpl:程序和功能 2. calc:启动计算器 3. certmgr.msc:证书管理实用程序 4. charmap:启动字符映射表 5. chkdsk.exe:Chkdsk磁盘检查(管理员身份运行命令提示符) 6. cleanmgr: 打开

    2020/03/29
  • 如何通过自定义域名方式访问本地WEB应用使用指南_域名入门基础教程

    自定义域名访问本地WEB应用。本地安装了WEB服务端,怎样通过自定义域名方式实现从公网访问本地WEB应用?本文将介绍具体的实现步骤。1. 准备工作1.1 安装并启动WEB服务端默认安装的WEB端口是80。1.2 申请域名并完成域名备案可以在万网、百度云、腾讯云、西部数码等等域名服务商注册并购买域名。在域名服务商注册并购买的域名必须要完成域名备案,否则无法使用

    2020/04/03
  • 开发一个高质量的前端组件,这些姿势一定要知道使用帮助_组件小白攻略

    从今天(2019 年)这个时间节点来看,NPM 无论从知名度、模块数量、社区的话题数量来看,都算得上是一骑绝尘,将其他语言的模块仓库远远甩在了后面。数据来源: moudlecountsNPM 的生态既已如此成熟,按说开发者对于 NPM 包的发布和维护应该非常熟悉才是,但事实真的是这样吗?环顾身边的 FE,没有发过任何 NPM 包的同学大有人在,已经发过包的同

    2020/03/23
  • webpack中loader加载器的使用及原理小白攻略_loader教程视频

    webpack的loaders是一块很重要的组成部分。我们都知道webpack是用于资源打包的,里面的所有资源都是“模块”,内部实现了对模块资源进行加载的机制。但是Webpack本身只能处理 js模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。 Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为参数,返回转换的

    2020/04/06
  • Ehow菜鸟指南_一个高质量生活技巧分享网站

    Ehow菜鸟指南 官方网址:https://www.ehow.com/ 简介描述:一个高质量生活技巧分享网站 Ehow 是一个高质量生活技巧分享网站;它免费提供很多生活技巧,你可以…

    2020/03/12
  • vue基础实用技巧入门攻略_技巧小白知识

    Vue以前听说过,有了解过一点。当时还在热衷于原生JavaScript去写一些方法的封装,不是为啥,就感觉这样很帅,后面多多少少接触了一些JQuery的用法,到现在为止,JavaScript原生封装的一些方法,该忘的都忘了。上一家公司需要用到Vue,所以就利用下班的时候学习Vue。有次公司部门的培训,一位大佬总结的实用技巧,感觉不错,在这里记录下来,方便以后

    2020/03/24
  • Vue代码优化之mixins 混合器的使用小白攻略_优化使用攻略

    使用场景主要抽离组件共用的代码,如各个页面中分页组件的data、methods,和ui原型中统一的confirm和alert弹窗以及加载的进度条等 混合器:// mixin.js
    export const page = {data() {return {pageSize:20,currentPage: 1pageLength: 10,}},methods

    2020/03/20