css设置字体颜色、文本对齐方式、首行缩进、文本装饰、列表样式、鼠标样式、禁止文本域拖拽、轮廓线、块级元素对齐方式、文字溢出设置

color:设置字体颜色:

取值方式有:1.颜色值red,green等 、2.十六进制#FF0000,#FF2313等、3.RGB代码rgb(225,225,112)或rgb(100%,55%,0%),取值范围0-225,0%-100%,rgba是rgb的扩展,其中第四个参数设置的是透明度,取值范围为0-1,注意:IE低版本不支持此属性,低版本IE需要:filter:Alpha(opacity=50),opacity值为0 到 100,如下:

	p{color:rgba(112,33,65,0.7);/* 第四个参数设置的是透明度,0.7中的0可以省略直接写 .7 */}

text-align:设置文本的对齐方式:

强调的是容器中文字对齐,其值:left左对齐、right右对齐、center居中对齐, justify两边对齐(自动控制字距使文本紧靠两边显示)

	div{text-align:center;}

text-indent:设置段落文本首行缩进:

其单位使用em,em是根据字体大小变化的。

	p{text-indent:2em;}

text-decoration:文本装饰:

通常用于给链接装饰效果,当然其他元素依然适用,其值有:none标准的文本、underline下划线文本、overline上划线文本、line-through中划线文本、blink闪烁(兼容性极大,忽略此值)。

	a{text-decoration:none;}p{text-decoration:underline;}

list-style:设置列表样式:

list-style:none去掉列表前面的点。

	li {list-style: none;}

cursor:设置鼠标样式:

	li {cursor: pointer;}

其值有:
在这里插入图片描述
继:
在这里插入图片描述
outline轮廓线:

表单input和文本域textarea默认有轮廓线,想要去掉默认的轮廓线就要使用outline属性,其值none取消轮廓线(值0也是取消轮廓线),一般去掉默认的轮廓线后会添加上一个border边框。

	input {outline: none;border: 1px solid black;}

resize防止拖拽textarea文本域尺寸:

textarea文本域默认有一个拖拽变化尺寸的小脚,一般是通过resize: none来去掉的。

	textarea {resize: none;outline: none;border: 1px solid black;}

vertical-align:设置行内元素及行内块元素对齐方式:

baseline基线对齐,默认值、super垂直对齐文本上标、sub垂直对齐文本下标、top把元素的顶端和行中最高元素的顶端对齐、text-top把元素的顶端与父元素的文本顶端对齐、middle把此元素垂直居中在父元素中部、bottom把元素的顶端与行中最低元素的顶端对齐、text-bottom把元素的低端与父级元素字体的低端对齐、20px等具体的像素值、30%等百分比、inherit继承父级元素vertical-align值

	<style>div {height:500px;background-color:yellow;font-size:50px;}img,del {vertical-align:middle;}</style><div class="main"><sapn>中文English</span><del>测试Test</del><img src="middle.PNG" alt=""></div>

white-space:设置溢出文字是否换行:

在实际开发中,为了防止超出文字自动换行,使用white-space可以很好的解决这个问题,其值:normal默认的会换行、nowrap强制在同一行中显示所有文本,直到遇到br标签才换行。

text-overflow:文字溢出显示省略号:

其值clip文本超出不显示省略号,只是做简单的裁剪、ellipsis文本超出后会显示省略号。

	div {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者 删除。
笔者:苦海

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/575446.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数字图像的5种增强处理

数字图像的5种增强处理#include<iostream>#include<cmath>using namespace std;int main(){ int i,j,n,m,w,a[100][100],x[100][100],max[100][100][20],b[100][100],k,p,u; cout<<"输入矩阵行列数:"; cin>>n>>m; cout<<"输…

css中标签显示模式、块元素、行内元素、行内块元素、显示模式转换

标签显示模式display: HTML标签一般分为块标签&#xff08;块元素&#xff1a;block-level&#xff09;和行内标签&#xff08;行内元素&#xff1a;inline-level&#xff09;两种类型&#xff0c;但是还有第三种说法行内块元素&#xff1a;table-row-group&#xff1a;设置元…

mysql 介绍 怎么下载 驱动jar包 各种细节问题大详解

对碰到的问题做个记录总结。 1 MySQL 的官网下载地址&#xff1a;http://www.mysql.com/downloads/版本说明。 1. MySQL Community Server 社区版本&#xff0c;开源免费&#xff0c;但不提供官方技术支持。 2. MySQL Enterprise Edition 企业版本&#xff0c;需付费&#xff…

css书写规范、行高

css书写规范&#xff1a; 空格规范&#xff1a; 选择器与花括号{之间必须包含空格&#xff0c;属性冒号&#xff1a;后面和属性值必须包含空格 .text {font-size: 16px;}选择器规范&#xff1a; 当有多个选择器同时出现时&#xff0c;每个选择器必须独占一行 .box,.nav,.mai…

CSS中的层叠性、继承性、优先级、权重

css三大特性&#xff1a; 三大特性&#xff1a;层叠性、继承性、优先级 层叠性&#xff1a; 指多种css样式的叠加&#xff0c;是浏览器处理多种css样式冲突的能力&#xff0c;如果给一个元素通过不同或者相同的选择器设置相同的属性但属性值不同时&#xff0c;权重相同的情况…

Nifi 怀疑出个bug 流程中的实时数据结果痕迹没有不是实时的,是之前的。以及相应解决办法。

1 在 Nifi 中做数据处理&#xff0c;有一个半小时之前执行过的流程&#xff0c;因为没设置好执行的时间&#xff0c;结果把读的数据库的表持续读成数据流 流到文件里&#xff0c;结果生成大量文件&#xff0c;一个文件就存着一张表的结果。 2 然后过了三十分钟吧&#xff0c;…

There is insufficient memory for the Java Runtime Environment to continue. NIFI 启动时报 jvm内存溢出

Nifi 突然启动报错。之前正常&#xff0c;停了两天再起就jj了。。 Nifi 解压路径还有log文件夹&#xff0c; 里面有各种日志文件可看。他把错误集中另存为了一个文件&#xff1a; 打开里面一通查看&#xff0c;调整。描述是java的运行环境jvm内存超出了&#xff0c;帖子…

CSS中盒子模型、嵌套盒子中垂直外边距塌陷问题解决方案、标准盒模型、怪异盒模型

盒子模型&#xff08;Box Model&#xff09;&#xff1a; 指把HTML页面中的元素看作是一个矩形的盒子&#xff0c;也称容器&#xff0c;这个盒子从内到外由&#xff1a;元素的内容&#xff08;content&#xff09;、内边距&#xff08;padding&#xff09;、边框&#xff08;b…

servlet/filter/listener/interceptor区别与联系(转)

由于最近两个月工作比较清闲&#xff0c;个人也比较“上进”&#xff0c;利用工作空余时间&#xff0c;也继续学习了一下&#xff0c;某天突然想起struts2和struts1的区别的时候&#xff0c;发现为什么struts1要用servlet&#xff0c;而struts2要用filter呢&#xff1f;一时又发…

Eclipse和IDEA 简单对比说明

Eclipse和IDEA Eclipse 当下最流行的IDE&#xff08;集成开发环境&#xff09;当属eclipse和idea莫属&#xff0c;不少新手都在问这两个ide哪个更好&#xff0c;今天给大家说一下自己这些年来使用这两款开发环境的心得。 一般情况下&#xff0c;问这个问题大多是新手&#xff0…

CSS中文档流之普通流,浮动及定位、浮动特性及清除浮动的方式、定位模式,子绝父相搭配定位方式、z-index层级

文档流&#xff1a; 普通流&#xff08;normal flow&#xff09;&#xff1a; 字面意思是普通流或者标准流&#xff0c;也就是常说的文档流&#xff0c;指网页内标签正常是从上到下&#xff0c;从左到右排列的意思&#xff0c;css的定位机制有3种&#xff1a;普通流&#xff…

VScode中常用element语法

Element语法&#xff1a; 熟练掌握element语法可以大大提高开发效率&#xff0c;建议在平时练习时留意element语法&#xff0c;下面是常用VScode中element语法&#xff1a; 1、快速生成HTML骨架&#xff1a;!Enter或Tab键 2、快速生成带有id或者class名的标签&#xff1a;标签…

jQuery Tools:Web开发必备的 jQuery UI 库

基本介绍 jQuery Tools 是基于 jQuery 开发的网站界面库&#xff0c;包含网站最常用的Tabs&#xff08;选项卡&#xff09;、Tooltip&#xff08;信息提示&#xff09;、Overlay&#xff08;遮罩、弹窗&#xff09;、Scrollable&#xff08;滚动控制&#xff09;、Form Validat…

控制元素显示和隐藏的方式及区别、内容溢出处理(区域滚动)、透明性、字体图标、常见字体、自定义字体设计、网站图标、CSS代码分析

元素的显示与隐藏&#xff1a; 常见控制元素的显示和隐藏的属性有display、visibility、overflow&#xff0c;需要清楚的理解三者之间的区别。 display显示&#xff1a; 当值为none时为销毁对象&#xff0c;不保留原位置&#xff0c;当值为block时为生成对象。 visibility可…

html5中Canvas、绘制线条模糊、常见绘制工具、绘制基本图形、绘制图片、面向对象的方式绘制图形图片、绘制文本、帧动画绘制

Canvas容器: canvas标签用来定义图像的容器&#xff0c;必须配合脚本来绘制图像&#xff0c;canvas也运用于游戏开发。注意&#xff1a;canvas绘制图时会出现线条模糊情况&#xff0c;这是因为显示屏像素和canvas中定义的一个点不完全重合&#xff08;相差0.5&#xff09;导致…

MySQL INFORMATION_SCHEMA 使用

一、INFORMATION_SCHEMA介绍 第一个查询看看库里有多少个表&#xff0c;表名等select * from INFORMATION_SCHEMA.TABLES information_schema这张数据表保存了MySQL服务器所有数据库的信息。如数据库名&#xff0c;数据库的表&#xff0c;表栏的数据类型与访问权限等。再简单点…

mrql初级教程-使用(er)

最近使用mrql做xml文件解析&#xff0c;使用xpath来进行判断使用的方法如下&#xff0c;其中t.mrql文件如下&#xff1a;v args[1];store ty:source(xml,args[0],{"page"},xpath(.[idID6]/place));ty;执行下面的命令mrql -local t.mrql hdfs://183.175.12.220:9010/u…

web Worker简介、web Worker报错分析、作用

web Worker&#xff1a; web Worker是运行在后台的javascript&#xff0c;不会影响性能&#xff0c;常用于高耗费CPU的任务&#xff0c;必须部署到线上才可以正常使用&#xff0c;这里有三个方法比较重要&#xff0c;需要注意&#xff1a; postMessage(),发送消息&#xff0c…

SSE事件作用,错误分析

Server-Sent&#xff08;SSE&#xff09;&#xff1a; server sent用于自动接收服务器更新&#xff0c;当服务器发生数据更新时&#xff0c;此事件将自动执行来更新页面数据&#xff0c;常用于博文、股价等不断变化的项目中。下面将简单介绍SSE中三个常用事件&#xff1a; on…

css3盒模型、过渡、转换介绍

CSS3中盒模型&#xff1a; 前面CSS中学到的盒子模型给padding、border会撑开盒子的大小&#xff0c;实际大小要通过计算才能得到&#xff0c;为了解决这个问题&#xff0c;CSS3推出了box-sizing属性来解决此问题&#xff0c;当box-sizing的属性值为border-box时&#xff0c;无…