CSS文本，字体设置与元素边框，阴影，显示模式
<h1>~<h5>, <p>, <div>, <ul>, <ol>, <li>
其中div是最典型的块元素。
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
<img/>、<input/>、<td>
display: block;
display: inline;
display: inline-block;
<style>
/* 行内转块级 */
span {
width: 200px;
height: 60px;
display: block;
background-color: antiquewhite;
} /* 块级转行内 */
div {
background-color: lightblue;
display: inline;
} /* 行内转行内块级元素 */
strong {
background-color: aquamarine;
display: inline-block;
width: 200px;
height: 60px;
} </style> <body> <span>我是行内内容1</span><span>我是行内内容2</span> <div>我是块级标签内容1</div>
<div>我是块级标签内容2</div> <strong>我是行内内容3</strong><strong>我是行内内容4</strong> </body>
/* 设置字体：字体系列，大小，粗细，文字样式（如斜体） */
h2 {
/* 字体带空格则使用引号包起来，字体可以设置多个，按照使用优先级从左到右排列，如果都匹配不到则使用浏览器默认字体。 */
font-family: 'Macrosoft YaHei', 'Times New Roman', Times, serif;
font-size: 20px;
/* 文字加粗：font-weight:normal 和 bold 分别对应 400和700 */
/* font-weight: normal; */
font-weight: 400;
/* font-style: italic 字体设置斜体的不多，更多的是把斜体设置成标准字体，如（em, i） */
font-style: normal;
/* font复合属性，简写节省代码，顺序不能随意改变，其中字号，字体必须同时出现 */
/* font: font-style font-weight font-size/line-height font-family; */
}
CSS文本属性
/* 文本设置可以定义文本的外观，如文本的颜色，对齐文本，装饰文本，文本缩进，行间距 */
.article {
/* 颜色设置有3种，red,green等名词。 十六进制#FF6600。 RGB代码rgb(155,2,2)/rgb(100%,1%,1%) */
color: red;
/* 文本的水平偏移，默认p标签占据一行，这里的偏移指的是内容的偏移 */
// text-align: left（左对齐）; justify（两端对齐）;
text-align: center;
/* 文字装饰器，在文字的上面，下面，中级划线, 无下划线(a标签)，对应overline, underline, line-through, none */
text-decoration: line-through;
/* 首行缩进， 通常使用2em 代替 20px, em表示一个文字大小的距离 */
text-indent: 20px;
/* 行间距由一行的上间距+文本高度+下间距组成 */
line-height: 26px;
}
<style>
a {
display: block;
width: 180px;
background-color: dimgray;
text-decoration: none;
color: #fff;
text-indent: 2em;
/* 行高 = 盒子高度 */
height: 50px;
line-height: 50px;
} a:hover {
background-color: brown;
}
</style>
文本超出2行，超出部分省略
.title {
font-size: 40rpx;
font-weight: 700;
// 文本超出2行，超出部分省略
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 这里是超出几行省略 */
overflow: hidden;
}
标签阴影
盒子阴影设置
/*
box-shadow: h-shadow v-shadow blur spread color inset;
X轴与Y轴设为正值（正值 X轴向右 Y轴向下） h-shadow：必需设置的值，定义水平阴影的位置。允许负值。
v-shadow：必需设置的值，定义垂直阴影的位置。允许负值。
blur：可选设置的值，定义模糊距离。
spread：可选设置的值，定义阴影的尺寸。
color ：可选设置的值，定义阴影的颜色。如果没有设置值，颜色值基于浏览器显示，建议设置。
inset：可选设置的值，
*/
// box-shadow: 4px 4px 5px 3px red;
文本阴影设置
/*
text-shadow: h-shadow v-shadow blur spread color X轴与Y轴设为正值（正值 X轴向右 Y轴向下） - 第一个属性值表示水平方向
- 第二个属性值表示垂直方向
- 第三个属性值表示模糊程度
- 第四个属性值表示颜色
*/
// text-shadow: 0 0 1px blue;
标签边框
标签边框设置
/*
border 属性是 border-width、border-style、border-color 三种属性的简写，
使用 border 属性可以同时定义上述三个属性 border-bottom：统一设置下边框的宽度、样式、颜色；
border: 四个边框都设置
*/
border-bottom: 2px solid red;
盒子模型样式
<template>
<view class="container">
<view class="box" v-for="(item,index) in 5" :key="index">
<image src="../../static/logo.png" mode="aspectFit"></image>
<view class="close">X</view>
</view>
<view class="box add">
+
</view>
</view>
</template> <style lang="scss" scoped>
.container {
display: flex;
// 超过一行换行显示
flex-wrap: wrap;
.box {
// [自己]样式设置
width: 190rpx;
height: 190rpx;
background-color: lightgray;
margin: 1rpx; // [自己]文档流方式（默认相对，绝对：会脱离文档流独立定位）
position: relative; // [孩子]布局方式设置
display: flex;
align-items: center;
justify-content: center;
.close {
// [自己]样式设置
width: 40rpx;
height: 40rpx;
background-color: lightblue; // [自己]文档流方式（默认相对，绝对：会脱离文档流独立定位）
position: absolute;
top: 0;
right: 0; // [孩子]布局方式设置
display: flex;
justify-content: center;
align-items: center;
} // 显示图片内容不能超过父容器边界
image {
max-width: 100%;
max-height: 100%;
} }
.add {
font-size: 50rpx;
color: white;
border-radius: 10rpx;
}
} </style>
对应图片内容不能超过父容器边界问题，可以通过设置image的max-width和max-height来解决
// 显示图片内容不能超过父容器边界
image {
max-width: 100%;
max-height: 100%;
}
CSS文本，字体设置与元素边框，阴影，显示模式的更多相关文章
- CSS 文本字体颜色设置方法(CSS color)
CSS 文本字体颜色设置方法(CSS color) 一.认识CSS 颜色(CSS color) 这里要介绍的是网页设置颜色包含有哪些:网页颜色规定规范. 1.常用颜色地方包含:字体颜色.超链接颜色.网 ...
- CSS文本简单设置
文本的设置直接影响到用户对界面的感受,好的文本设置能够让用户对界面有一种赏心悦目的感受,在这地方我们来简单的说说说对文本设置的时候,有哪些格式. 文本设置的时候我们应该注意什么: 平时我们文本设置的时 ...
- CSS中如何设置父元素透明度不影响子元素透明度
原因分析: 使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即便重定义也没有用,不过有个方法可以实现,大家可以看看. 可以使用一张透明的图片做背景可以达成效果 ...
- css 文本省略号设置
本文推荐2种方法. 1. css tip:只兼容chrome内核的浏览器.ff不支持. .box { overflow: hidden; /* 溢出时不显示溢出的内容 */ text-overflow ...
- css之字体设置
字体大小font-size 字体风格font-style 字体加粗font-weight 字体类型font-family 字体阴影text-shadow 字体行高line-height 字间距lett ...
- 04CSS文本字体及排版
CSS文本字体 字体——font-family font-family:字体1,字体2,字体3,……:应用font-family属性可以一次定义多个字体,而在浏览器读取字体时, 会按照定义的先后顺序来 ...
- IDEA 快捷键和字体设置
IDEA的使用 一.IDEA 目录 IDEA的使用 一.IDEA 设置字体 文本字体设置 窗口字体设置 二.IDEA建立项目 三.IDEA快捷键 设置字体 点击File->Settings 文本 ...
- CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
- css（字体，文本，边距，边框，阴影，背景，渐变，多重背景，列表）
font-family 设置字体名称 可以使用多个名称,用逗号分隔,浏览器则按照先后顺序依次使用可用字体 p { font-family:'宋体','黑体','Arial'; } font-size ...
- CSS之背景设置、字体设置、文本设置
<html> <head> <meta charset="utf-8"> <title>单行文本框与多行文本框</title& ...
随机推荐
- Woodpecker CI 设计分析｜一个 Go 编写的开源持续集成引擎
一.前言 大家好,这里是白泽.随着 Go 语言在云原生领域大放异彩,开发者逐渐将目光转移到了这门语言上,而容器则是云原生时代最核心的载体. <Woodpecker CI 设计分析>系列文章 ...
- 消息服务 + Serverless 函数计算如何助力企业降本提效？
作者 | 柳下 背景介绍 消息队列服务(下文均以 Message Service 命名)作为云计算 PaaS 领域的基础设施之一,其高并发.削峰填谷的特性愈发受到开发者关注.Message Servi ...
- Canvas实现画布的缩放
主要介绍三种方式: 首先创建一个index.html文件 <!DOCTYPE html> <html lang="en"> <head> < ...
- Redis 使用 hyperLogLog 实现请求ip去重的浏览量
本文为博主原创,转载请注明出处: 未完,待续....
- 一文搞清楚Java中的方法、常量、变量、参数
写在开头 在上一篇文章:一文搞清楚Java中的包.类.接口 中我们讲了Java中的包.类和接口,今天继续将剩下的方法.常量.变量以及参数梳理完. Java中的变量与常量 在JVM的运转中,承载的是数据 ...
- WPF|分享一个登录界面设计
分享一个登录界面,先看效果图: 准备 文中使用到了一些图标: 我们可以从 iconfont免费下载: 代码简单说明 请随手创建一个WPF项目(.NET Framework..NET 5\6\7皆可), ...
- 01-UPF介绍
Mainstream Low Power techniques clock gating - 低功耗的设计风格,4bit以上可以通过综合工具增加ICG APR的时候可以更换器件VT Advanced ...
- 2023 SHCTF-校外赛道 PWN WP
WEEK1 nc 连接靶机直接梭 hard nc 同样是nc直接连,但是出题人利用linux命令的特性,将部分flag放在了特殊文件中 利用ls -a查看所有文件,查看.gift,可以得到前半段 然后 ...
- Vue - 父子级的相互调用
父级调用子级 父级: <script> this.$refs.child.load(); 或 this.$refs.one.load(); </script> 子级: < ...
- electron打包，使用electron-packager
构建项目可以使用electron-forge构建,但是这个东西打包比较坑,mac运行报错,win下会有缓存机制,也就是热更新无效 所以选择使用electron-packager打包 sudo npm ...