HTML 样式

tyle 属性用于改变 HTML 元素的样式。

<html>

<h1>Look! Styles and colors</h1>

This text is in Verdana and red</p>

This text is in Times and green</p>

<p style="font-size:30px">This text is 30 pixels high</p>

</body>

</html>

HTML 的 style 属性

style 属性的作用：

提供了一种改变所有 HTML 元素的样式的通用方法。

样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。

不赞成使用的标签和属性

在 HTML 4 中，有若干的标签和属性是被废弃的。被废弃（Deprecated）的意思是在未来版本的 HTML 和 XHTML 中将不支持这些标签和属性。

这里传达的信息很明确：请避免使用这些被废弃的标签和属性！

应该避免使用下面这些标签和属性：

HTML 样式实例 - 背景颜色

background-color 属性为元素定义了背景颜色：

<html>
<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>
</html>

HTML 样式实例 - 字体、颜色和尺寸

font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸：

<html>
<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>

HTML 样式实例 - 文本对齐

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

SS样式被称为“层叠样式表”，是一种网页制作不可或缺的技术，是用于修饰网页样式，达到设计效果的一种样式语言。

而由于样式效果非常多，在工作中并非所有的样式都会用到，因此经常可能遇到某些特定样式会突然想不起来的情况，更何况对于初学者来说遇到这种情况。

接下来就跟着小凡一起整理一下这些常用而易忘的css样式。

css样式的效果

01、文字超出部分显示省略号

单行文本的超出部分显示省略号。（一定要给元素本身设置宽度）

.title {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space:nowrap;
}

CSS样式效果图

多行文本的超出部分显示省略号

.title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}

CSS样式效果图

PS：建议加上word-break:break-all 否则遇到长单词会出现很神奇的布局情况。

图一

图二

图一未添加，图二添加后的不同效果

02、中英文(长单词)自动换行

word-break:break-all; 只对英文起作用，以字母作为换行依据

word-wrap:break-word; 只对英文起作用，以单词作为换行依据

white-space:pre-wrap; 只对中文起作用，强制换行

white-space:nowrap;都起作用，强制不换行

PS:网页中英文单词通过“_”(下划线)和 “-”（中划线）连接的英文单词在编译处理是方式是截然不同的。

下划线是程序命名方法下划线命名法的规范,其他命名规范还有驼峰式命名。属于程序专用的命名规范。可以连接想连的部分为一个变量名，不是单词。

下划线连接单词效果

中划线是英语复合词有连接2个单词的意思，但前后是2个独立单词。

中划线连接单词效果

03、设置表单输入框placeholder的样式

input::-webkit-input-placeholder {
  color:skyblue;
  text-align: center;
}
input::-ms-input-placeholder {
  color:skyblue;
  text-align: center;
}
input::-moz-placeholder {
  color:skyblue;
  text-align: center;
}

CSS样式效果图

04、不固定高度的元素文字垂直居中

兼容IE8：伪元素和inline-block/vertical-align

.box::before {
  content:"";
  display: inline-block;
  height: 100vh;
  vertical-align: middle;
  text-align: center;
}

CSS样式效果图

不兼容IE8以下: flex布局

.box {
  background: skyblue;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

CSS样式效果图

05、文字两端对齐

.wrap {
  margin: 0 auto;
  width: 800px;
  text-align: justify;
  text-justify: distribute-all-lines;
  /* 兼容IE6-8 */
  text-align-last: justify;
  -moz-text-align-last: justify;
}

CSS样式效果图

06、iOS页面中滑动卡顿

body,html {
  -webkit-overflow-scrolling:touch
}

07、设置滚动条样式

 .wrap {
  margin: 0 auto;
  width: 300px;
  height: 200px;
  overflow: auto;
}


.wrap::-webkit-scrollbar {
  /* 整体大小样式 */
  width: 10px;
  height: 10px;
  }


.wrap::-webkit-scrollbar-thumb {
  /* 滚动条里的滑块 */
  border-radius: 10px;
  background-color: skyblue;
  background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,0.2) 25%,
  transparent 25%,
  transparent 50%,
  rgba(255,255,255,0.2) 55%,
  rgba(255,255,255,0.2) 75%,
  transparent 75%,
  transparent);
}


.test::-webkit-scrollbar-track {
/* 滚动条的轨道 */
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: #ededed;
  border-radius: 10px;
}

CSS样式效果图

08、隐藏滚动条但又可以滚动

.wrap {
  margin: 0 auto;
  width: 300px;
  height: 200px;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}


.wrap::-webkit-scrollbar {
/* 整体大小样式 */
  display: none;
}

CSS样式效果图

09、css绘制三角

无边框三角

div {
  width:0;
  height:0;
  border-width: 0 40px 40px;
  border-style: solid;
  border-color: transparent transparent rgba(0,0,0,0.3);
}

CSS样式效果图

带边框三角

div {
  position: relative;
  width:0;
  height:0;
  border-width: 40px 0 40px  40px ;
  border-style: solid;
  border-color:  transparent  black ;
}


div::after {
  content: "";
  position: absolute;
  top:-36px;
  left:-38px;
  border-width: 36px 0 36px  36px ;
  border-style: solid;
  border-color:  transparent red ;
}

CSS样式效果图

10、文字间的间距

text-indent 文章段落首行缩进

letter-spacing 字与字之间的间距

.wrap {
  margin: 0 auto;
  width: 600px;
  text-indent: 2em;
  letter-spacing: 10px;
}

CSS样式效果图

11、禁止用户选中元素

有些时候不想让用户选中内容，复制网站上文字内容。

.wrap { 
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

12、元素占满整个屏幕

以往需要在做全屏遮罩功能的时候会设置height:100%。但是这种做法需要该遮罩层的所有父级元素都逐级设置高度才能使遮罩继承高度属性。所以可以使用100vh单位来实现。

.mask {
  width:100%;
  height: 100vh;
  background: rgba(0,0,0,0.6);
  position: fixed;
  top: 0;
}

CSS样式效果图

以上就是为学员们整理的针对工作中对商品/新闻等标题的样式处理，弹窗做法的一些经常遇到的css样式实现方法。

如果觉得有用可以收藏关注，同时还可以留言说出你想知道或者是遇到的不会的样式处理，我们还将继续推出后续内容，继续为大家解读别的常用css实用技巧以及其他的前端开发新技能，让我们期待下一期吧。

文末领资料

Web前端设计秘籍——30个工作中常用的CSS样式

友们，下午好！

都说一张美美的图能为文章增色三分！

那如果是一个交互的图片样式 + 几张美美图呢？这能为文章增色多少呢？

比如这种（样式ID：90298）

使用这种样式，即能有效的展示图片，还能缩小文章空间，而且还与读者存在互动交互，想不想知道这种样式怎么做出来呢？

上面两种样式都可以在样式中心输入ID搜索到。

但是，样式中心的原样式，都是四张图片滑动的，直接进行换图就可以使用了。

但如果要像三儿上面做的两个样式，一个是5张图，一个是9张图，就要进HTML进行修改了。

教程一（带图片说明的样式）

进入到“HTML”模式，找到<section .........> </section>这段代码，先选择Ctrl+C复制。

然后在此段代码结尾处敲回车键换行，再选择Ctrl+V粘贴。

粘贴几次，样式就会在原有四张的基础上多出几张，胖友们可以根据自己的需求进行多次粘贴。

教程二

进入到“HTML”模式，找到<img src=........./>这段代码，先选择Ctrl+C复制，然后在此段代码结尾处，再Ctrl+V粘贴。

同上个样式，粘贴几次，样式就会在原有四张的基础上多出几张，胖友们可以根据自己的需求进行多次粘贴。

为了样式的美感，还是有三点建议给大家。

1、图片请保持尺寸一致。否则会导致图片层次不齐。

2、尺寸请500x500以上。否则可能会使图片不清楚。

3、图片大小尽可能小点。否则浏览时加载会不流畅。

更多好玩样式，请进样式中心搜索“滚动”

好了，本次教程就到这里~bye

在线咨询

上一篇：「项目实战」从终端到浏览器：实现 ANSI 字体在前端页面的彩色展示
下一篇：我是如何初识HTML，入前端的

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML 样式

教程一（带图片说明的样式）

教程二

您的项目需求