首页 > 其他分享 >CSS3案例--制作服装软文推广

CSS3案例--制作服装软文推广

时间:2024-07-19 14:43:36浏览次数:13  
标签:CSS3 软文 text -- shadow font 选择器 隔开 样式

效果图:
先使用通配符消除样式:


字体倾斜效果使用font-style:italic;

导入自定义字体样式:

其中font-family属性值为自定义名

src属性值存放字体样式所在位置

 

补充知识点:
1.后代选择器表示方法:父选择器与后代选择器用空格隔开,或者用>隔开

2.并集选择器表示方法:选择器之间用","隔开

3.交集选择器:两个选择器之间不能有任何字符隔开,包括空格

4.font-weight:bold;与<strong>标签两者的作用效果一样

5.font-style:italic;与<i>标签的效果一样

6.word-wrap属性用于实现长单词和URL地址的自动换行。属性值有:

(1)normal(只在允许的断字点换行(浏览器保持默认处理))  

(2)break-word(在长单词或 URL 地址内部进行换行)

7.letter-spacing用于字间距,word-spacing用于单词间距

8.text-transform

9.white-space:空白符处理

10.text-shadow:阴影效果处理

选择器{text-shadow:h-shadow v-shadow blur color;}

h-shadow:水平   v-shadow:垂直   blur:模糊半径

可以使用text-shadow属性给文字添加多个阴影,从而产生阴影叠加的效果,方法为设置多组阴影参数,中间用逗号隔开。

11.text-overflow: 标示对象内溢出文本

12.

13.优先级:

标签选择器权重:1    类选择器:10    id选择器:100

继承样式的权重为0。 行内样式优先。 权重相同时,CSS遵循就近原则。 CSS定义了一个!important命令,该命令被赋予最大的优先级。

标签:CSS3,软文,text,--,shadow,font,选择器,隔开,样式
From: https://www.cnblogs.com/yupotato/p/18311411

相关文章

  • CF1139D
    https://www.luogu.com.cn/problem/CF1139D(暂时没有解释,咕咕咕~~~)最重要的部分是对式子的化简,令\(X\)为步数:\[\begin{align}E[X]&=\sum_jjP(X=j)\\&=\sum_j\sum_i^j1P(X=j)\\&=\sum_i\sum_{j\geqi}P(X=j)\\&=\sum_iP(X\geqi)\\&=1+\sum......
  • Gale-Shapley 算法
    挺简单的一个算法,用于解决稳定婚姻问题。稳定婚姻问题:一些男人和一些女人,每个男人都有对女人的排名,每个女人亦有,求一组最优秀的匹配。考虑维护一个落单男人的队列,初始全部落单。每次取出队头并按该男人的眼光枚举每一个女人进行配对,如果这个女人落单,或者这个女人目前对象劣于当......
  • 0200-材质和散射
    环境Time2022-11-16WSL-Ubuntu22.04Rust1.65.0前言说明参考:https://raytracing.github.io/books/RayTracingInOneWeekend.html目标不同的材质有不同的散射光线和衰减,这一节将不同的材质进行抽象。向量的乘法implMulforVector3{typeOutput=Self;f......
  • .NET单元测试使用AutoFixture按需填充属性的几种方式,以及最佳实践
    AutoFixture是一个.NET库,旨在简化单元测试中的数据设置过程。通过自动生成测试数据,它帮助开发者减少测试代码的编写量,使得单元测试更加简洁、易读和易维护。AutoFixture可以用于任何.NET测试框架,如xUnit、NUnit或MSTest。默认情况下AutoFixture生成的字段值很多时候都满足不了测......
  • 0199-漫反射和伽马校正
    环境Time2022-11-16WSL-Ubuntu22.04Rust1.65.0前言说明参考:https://raytracing.github.io/books/RayTracingInOneWeekend.html目标对物体上的光线进行漫反射,然后增加伽马校正。颜色显示函数pubfnformat_str(&self,samples:f64)->String{letir=(256.......
  • 移动端步骤3 自动伸缩
    <template><divclass="pt80mt10f14cor3pr10pl10"v-if="stepList&&stepList.length"><divclass="step-item"v-for="(item,index)instepList":key="index">......
  • js 加密算法
    (1)md5摘要算法npminstallcrypto-jsconst CryptoJS = require('crypto-js');//原始数据const data = '123456';//生成MD5摘要const md5Digest = CryptoJS.MD5(data).toString();console.log(md5Digest);(2)AES加密constCryptoJS=require("crypto-j......
  • 自建elasticsearch迁移到阿里云
    迁移工具:elasticsearch-dump 前提:阿里云elasticsearch开启“自动创建索引” 一、安装elasticdump安装node.js。下载安装包。 wgethttps://nodejs.org/dist/v16.18.0/node-v16.18.0-linux-x64.tar.xz解压。 tar-xfnode-v16.18.0-linux-x64.tar......
  • D. Buying Jewels
    原题链接题解构造题,先想特殊情况再验证构造一个\(n-k+1,1\)不成立的条件是\(2*(n-k+1)\leqn\),相当于\(2k\geqn+2\),即k大于n的一半,能构造的第一多的k是n,第二多是\(n/2+1\),易得不成立code#include<bits/stdc++.h>#definelllonglongusingnamespacestd......
  • SMU Summer 2024 Contest Round 5
    ARobotTakahashi思路:将所有数排序,枚举孩子成人的分解点X,同时根据s的标识维护正真的孩子成人的个数voidsolve(){intn;cin>>n;strings;cin>>s;intsum=0;for(inti=0;i<s.size();++i){if(s[i]=='1')sum++;......