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& ...
随机推荐
- SpringBoot 项目实战 | 瑞吉外卖 Day02
该系列将记录一份完整的实战项目的完成过程,该篇属于第二天 案例来自B站黑马程序员Java项目实战<瑞吉外卖>,请结合课程资料阅读以下内容 该篇我们将完成以下内容: 完善登陆系统 新增员工 ...
- 【题解】Qin Shi Huang's National Road System HDU - 4081 ⭐⭐⭐⭐ 【次小生成树】
During the Warring States Period of ancient China(476 BC to 221 BC), there were seven kingdoms in Ch ...
- AtCoder Beginner Contest 198 个人题解（AB水题，C思维，D思维+全排列，E题DFS搜索，F懵逼）
补题链接:Here A - Div 题意:N 个不一样的糖,请问有多少种分法给 A,B两人 水题,写几组情况就能知道输出 \(N - 1\) 即可 B - Palindrome with leadin ...
- 【每日一题】3.数学考试 （前缀和，线性DP）
题目链接:Here 思路:区间求和问题可以想到一个常用算法.前缀和.区间 \([l,r]\) 的和可以用 \(sum_r - sum_l\) 方便求出 由于区间长度 \(k\) 已知,所以我们可以直接 ...
- python · pytorch | NN 训练常用代码存档
1 pandas 读 csv import torch from torch import nn import numpy as np import pandas as pd from copy im ...
- （已解决）C·lash 核心崩溃“failed to c·lash core, logs are not available”
问题情况: 解决方案:管理员打开 cmd,输入 netsh winsock reset,重启电脑就可以了! 原经验帖:https://www.oleou.com/soft/715.html 谢谢这位大 ...
- python pip手动安装二进制包
python中使用pip安装扩展包的时候,有时候会遇到如下类似报错: Running setup.py install for mysqlclient ... error ...(中间报错信息省略) ...
- 帮助编写异步代码的ESLint规则
调试 JavaScript 中的异步代码有时就像在雷区中穿梭.你不知道 console.log 会在何时何地打印出来,也不知道代码是如何执行的. 你很难正确构造异步代码,使其按照你的意图以正确的顺序执 ...
- [转帖]java乱码 java使用的编码是utf-8还是utf-16还是unicode
简单介绍编码 Unicode:是容纳世界所有文字符号的国标标准编码,使用四个字节为每个字符编码 UTF:是英文 Unicode Transformation Format 的缩写,意为把 Unicod ...
- Python学习之十六_virsh批量获取虚拟机IP地址的方法
Python学习之十六_virsh批量获取虚拟机IP地址的方法 Linux命令说明 for j in \ $(for i in `virsh list |grep -v Id |grep runnin ...