首页 > 其他分享 >四月二十五日

四月二十五日

时间:2023-04-25 21:57:48浏览次数:40  
标签:文本 background text font 二十五日 设置 四月 属性

今天学习了一下css

CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。
CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。

css的背景

background 属性用于定义 HTML 元素的背景。
定义元素背景效果的 CSS 属性有五种:

background-color          背景颜色
background-image          背景图像
background-repeat         背景图像设置水平或垂直平铺或不平铺
background-position       背景图像设置定位
background-attachment     背景图像设置固定或滚动
​
背景属性简写:
body{
    background:green url('images/fix.gif') no-repeat fixed 12px 24px;
}
当使用简写属性时,属性值的顺序依次为:
background-color --> background-image --> background-repeat --> 
background-attachment --> background-position

css的外观属性

CSS文本格式主要分为:文本颜色(color)、文本对齐方式、文本修饰、文本阴影、文本缩进、文本间距、字间距、文本空白处理、文本转换。

文本对齐方式:text-align属性有四个值:left,center,right,justify(两端对齐);属性默认值为auto。
文本修饰:text-decoration 属性用来设置或删除文本的修饰。

主要是用来删除超链接的下划线,也可以使用其他值来设置文本的修饰;

text-decoration:overline,设置文本上划线。

text-decoration:line-through; 设置文本中间划线。

text-decoration:underline; 设置文本下划线。
文本阴影:text-shadow: x y shadow color;

其中 x 是水平阴影的偏移值,

y 是垂直阴影的偏移值,

shadow 用于指定阴影的模糊值,即模糊效果的作用距离,不允许负值。

color 指定阴影的颜色。该属性有两个作用,产生阴影和模糊主体。
文本缩进:用来指定文本的首行缩进,允许为负值,如果值是负数,第一行则向左缩进。

CSS表示为:text-indent:2em,em 是相对文字大小的单位,1em 就是1个文字大小,2em 就是两个文字大小。
文本间距:行高,也就是文本行的高度。例如:line-height:22px;
字间距:letter-spacing 和 word-spacing 这两个属性都可用来增加或减少文本间的空白,即字间距。

不同的是:
letter-spacing 属性设置字符间距,而 word-spacing 属性设置单词间距。
注意:word-spacing 属性对中文无效,因此在设置中文的字间距时请使用 letter-spacing 属性。
letter-spacing 和 text-align:justify 是两个冲突的属性,不能同时使用;

text-align:justify 是设置内容根据宽度自动调整字间距,使各行的长度恰好相等,实现文本两端对齐效果,

而 letter-spacing 是指定一个固定的字间距。
文本空白处理:white-space 属性指定元素内的空白如何处理,默认值为 normal 空白会被浏览器忽略。
该属性还有4个值:

nowrap 文本不会换行,禁止换行,文本会在同一行上继续,直到遇到 <br> 标签为止。
pre 空白会被浏览器保留,这种方式类似 HTML 中的 <pre> 标签,用于定义预格式文本。
pre-wrap 指定保留空白符序列,但是正常地进行换行。
pre-line 指定合并空白符序列,但是保留换行符,并允许自动换行。
文本转换:text-transform 属性控制文本中的字母。

是用来指定在一个文本中的大写和小写字母,可用于将所有字句变成大写或小写字母,或每个单词的首字母大写。
text-transform:capitalize, 定义文本中的每个单词以大写字母开头。
text-transform:uppercase,定义文本仅有大写字母。
text-transform:lowercase,定义文本仅有小写字母。

css的字体

font 属性可用于设置文本字体,定义样式,如加粗,大小等,属于复合属性,也叫做简写属性。

简写顺序:
font-style(字体样式) --> font-variant(字体变形) --> font-weight(字体加粗) --> font-size(字体大小)/line-height --> font-family(设置文本字体)
注意,font-size 和 font-family 的值是必需的,否则无效。

(1)是绝对或相对大小,可以使用px、em、%和em组合来设置。

  • 使用px设置:通过像素设置文本大小是设置的整个页面。
  • 使用em设置:1em等于当前的字体尺寸,比如设置的默认字体是12px,因此1em的默认大小就是12px。像素转换em:px/12 = em
  • 使用%和em组合设置:在所有浏览器的解决方案中,设置 <body> 元素的默认字体大小是 100%,可以显示相同的文本大小,并允许所有浏览器缩放文本的大小。
<head>
    <style>
        body{font-size:100%}
        p{font-size:2.5em; }   /* 2.5*16=40px */
    </style>
</head>
<body>
    <p>使用%和em组合设置</p>
</body>



(2)font-style 属性主要用于指定斜体文字。
属性有三个值:

    • normal正常显示文本
    • italic 定义斜体
    • oblique 定义倾斜的文字

标签:文本,background,text,font,二十五日,设置,四月,属性
From: https://www.cnblogs.com/mine-my/p/17354025.html

相关文章

  • 四月二十四日
    今天把团队项目的每个人写的东西和了一下,深刻的认识到团队合作的重要性,但同时如果写作不好的话,没有商量好会带来很大的困难。对我们这个团队项目来说,我们忘记了数据库建立的规范,导致我们每个人所建立的数据库有点不同,导致我们代码合在一起的时候麻烦了很多,需要修改自己的代码,然后......
  • 四月二十三日
    今日所完成代码<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"><html><head><%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%><metahttp......
  • 四月第二篇阅读笔记
    在这本《人月神话》中,其中提到了软件系统的复杂性远远超过了建筑行业和制造行业,软件的需求是在人的脑子中很快形成的一种想法,用我们的自然语言都很难完整、准确的表达给对方。一般情况下,人们只有在看到一个已运行的APP或者网站以后才会说:“哦,我要的其实不是这个功能,其实我想得是能......
  • 四月份读后感
    这段时间,用了很长时间来阅读了《梦断代码》,说实话,我是真的很喜欢作者的这本书,尤其是里面的一些真实的故事,他让我知道了关于我们以后可能的工作生活的真实的情况,这是我现在所不能接触到的,这对我的未来也是一个警醒。当我们在参与工作之后,我们应该怎样去将这些问题避免,怎样去将作者......
  • 四月二十日
    今天由于某种原因,学习了一下python,配置了arcpy包的环境。完成了栅格数据文件的筛选和计算平均值。#encoding:utf-8importglobimportos#os是用来切换路径和创建文件夹的。fromshutilimportcopy#shutil是用来复制黏贴文件的importarcpyfromarcp......
  • 四月十八日
    最近再弄如何使用javaweb将html页面转换为pdfhtml转为pdf有两种方法:xhtmlrendereritext1.使用xhtmlrenderer依赖<dependency><groupId>org.xhtmlrenderer</groupId><artifactId>flying-saucer-pdf</artifactId><version>9.1.18</versi......
  • 四月十九日
    2.使用itext依赖<dependency><groupId>com.itextpdf</groupId><artifactId>html2pdf</artifactId><version>3.0.3</version></dependency>java代码importcom.itextpdf.html2pdf.ConverterProperties;impo......
  • 四月十九日
    提示词自动补全#有些小伙伴喜欢在输入中文的时候,自动补全英文这个适合绘画的时候,你知道自己想要什么样的效果,也知道自己想要哪些提示词这就需要提示词自动补全插件解决,Boorutagautocompletion 这个插件就是用来实现提示词自动补全的功能插件地址:https://github.com/Domini......
  • 四月学习之LVS shell脚本配置DR模型
    1、DS脚本配置#!/usr/bin/bashVIP=172.16.1.100RS1=172.16.1.5RS2=172.16.1.6PORT=80SCHEDULER=rrDEV=eth1:1case$1instart)#配置虚拟IP地址VIP cat>/etc/sysconfig/network-scripts/ifcfg-${DEV}<<-EOF TYPE=Ethernet BOOTPROTO=none DEFROUTE=y......
  • 四月学习之LVS DR模型详解
    一、概述通过修改请求报文的目标MAC地址,然后根据算法挑选出合适的RS节点,进行转发。(请求进入DSServer时做MAC地址替换,后端返回数据报文时无需经过DSServer节点,直接返回给客户端即可)1、DR基础图解2、DR底层实现1、路由器如何找到VIP以及MAC地址呢路由器通过ARP广播获取VMAC,然后......