下载文档原格式
CSS控制文本框的只读属性的方法●解决方案一：有时候，我们希望表单中的文本框是只读的，让用户不能修改其中的信息，如使<input type="text" name="input1" value="中国">的内容，"中国"两个字不可以修改。
实现的方式归纳一下，有如下几种：方法1：onfocus=this.blur() //当鼠标放不上就离开焦点<input type="text" name="input1" value="中国" onfocus=this.blur()>方法2：readonly<input type="text" name="input1" value="中国" readonly><input type="text" name="input1" value="中国" readonly="true">方法3：disabled<input type="text" name="input1" value="中国" disabled="true">完整的例子：<input name="ly_qq" type="text" tabindex="2" onMouseOver="this.className='input_1'" onMouseOut="this.className='input_2'" value="123456" disabled="true"readOnly="true" /> disabled="true" //此果文字会变成灰色，不可编辑readOnly="true" //文字不会变色，也是不可编辑的css屏蔽输入：<input style="ime-mode: disabled">有两种方法第一：disabled="disabled"这样定义之后被禁用的input 元素既不可用，也不可点击。
jquery对标签添加只读（readonly）或者禁⽤（disabled）属性⽬录⼀、jQuery⼆、关于readonly属性三、jquery 设置disabled属性四、jquery动态添加⽂本框的readonly只读属性⼀、jQueryjQuery是⼀个JavaScript库。
jQuery 极⼤地简化了 JavaScript 编程。
jQuery 很容易学习。
实例：$(document).ready(function(){$("p").click(function(){$(this).hide();});});源码：<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="https:///jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){$("p").click(function(){$(this).hide();});});</script></head><body><p>如果你点我，我就会消失。
</p><p>继续点我!</p><p>接着点我!</p></body></html>运⾏结果：上图运⾏结果只要点击⽂字就会消失，感兴趣的⼩伙伴可以下去试⼀下⼆、关于readonly属性例1、jquery 设置readonly属性$('input').attr("readonly","readonly") //将input元素设置为readonly$('input').removeAttr("readonly"); //去除input元素的readonly属性if($('input').attr("readonly") == true)//判断input元素是否已经设置了readonly属性例2、对于为元素设置readonly属性和取消readonly属性的⽅法$('input').attr("readonly",true)//将input元素设置为readonly$('input').attr("readonly",false)//去除input元素的readonly属性$('input').attr("readonly","readonly")//将input元素设置为readonly$('input').attr("readonly","")//去除input元素的readonly属性三、jquery 设置disabled属性例1、jquery 设置disabled属性$('input').attr("disabled","disabled")//将input元素设置为disabled$('input').removeAttr("disabled");//去除input元素的disabled属性if($('input').attr("disabled")==true)//判断input元素是否已经设置了disabled属性例2、对于为元素设置disabled属性和取消disabled属性的⽅法$('input').attr("disabled",true)//将input元素设置为disabled$('input').attr("disabled",false)//去除input元素的disabled属性$('input').attr("disabled","disabled")//将input元素设置为disabled$('input').attr("disabled","")//去除input元素的disabled属性四、jquery动态添加⽂本框的readonly只读属性<input id="test" type="text" />$("#test").attr({"readonly":"readonly"}); //添加readonly属性// 或者$("#ID").attr({ readonly: 'true' });$("#test").removeAttr("readonly"); //去除readonly属性到此这篇关于jquery对标签添加只读（readonly）或者禁⽤（disabled）属性的⽂章就介绍到这了,更多相关jquery对标签添加只读或禁⽤属性内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！。
CSS文本样式的技巧知识点CSS文本样式是网页设计中必不可少的一部分，通过合适的文本样式可以提升网页的可读性和美观度。
本文将介绍一些常用的CSS文本样式的技巧知识点，帮助您更好地运用CSS来设计网页的文本。
一、字体样式字体样式是CSS文本样式中最基本的部分。
通过设置字体的相关属性，可以改变字体的外观。
以下是一些常用的字体样式技巧：1. 字体族：通过设置字体族属性，可以指定网页中所使用的字体。
例如，可以通过设置font-family属性为"Arial, sans-serif"来指定网页中的字体为Arial，如果用户的电脑上没有安装Arial字体，则会使用sans-serif作为替代字体。
2. 字体大小：通过设置font-size属性，可以改变字体的大小。
常用的单位有像素（px）、百分比（%）和EM。
例如，可以设置font-size: 16px来指定字体大小为16像素。
3. 字体样式：通过设置font-style属性，可以改变字体的样式，常用的值包括normal（默认样式）、italic（斜体）和oblique（倾斜）。
例如，可以设置font-style: italic来让字体呈现斜体效果。
二、文本修饰文本修饰可以让字体在视觉上更加突出或者强调。
以下是一些常用的文本修饰技巧：1. 文本颜色：通过设置color属性，可以改变文本的颜色。
可以使用具体的颜色值（如#FF0000表示红色）或者预定义的颜色名称（如red表示红色）。
2. 文本加粗：通过设置font-weight属性，可以让文本加粗。
常用的值有normal（默认样式）和bold（加粗样式）。
例如，可以设置font-weight: bold来让文本加粗。
3. 文本下划线：通过设置text-decoration属性，可以在文本下面加上下划线。
常用的值有none（无下划线）、underline（下划线）和overline（上划线）。
CSS-字体和⽂本属性设置随学笔记CSS-美化⽹页元素-字体和⽂本属性使⽤CSS样式美化⽹页⽂本具有如下意义。
1. 有效的传递页⾯信息2. 使⽤CSS美化过的页⾯⽂本，使页⾯漂亮、美观，吸引⽤户3. 可以很好的突出页⾯的主题内容，使⽤户第⼀眼可以看到页⾯主要内容4. 具有良好的⽤户体验⼀、字体属性1. 字体设置CSS使⽤font-family属性定义⽂本的字体系列，字体可以使⽤英⽂字体,也可以使⽤多个字体，各种字体之间必须使⽤英⽂状态下的逗号隔开；注意事项：⼀般情况下，如果有空格隔开的多个单词组成的字体，加引号；尽量使⽤系统默认⾃带的字体，保证在任何⽤户的浏览器中都能正确显⽰；最常见的⼏个字体：body{font-family： 'MicrosoftYaHei',tahoma,arial,'Hiragino Sans GB';}使⽤多个字体的好处是：系统按顺序检测浏览器是否有这个字体，如果不存在，就会转向下⼀个字体，如果存在，就优先使⽤；实际开发中，字体设置常⽤于<body>标签，按照团队约定来设置字体。
<style>h2 {font-family: '微软雅⿊';}.songti {font-family: '宋体';}#kaiti {font-family: '楷体'}* {font-family: '⿊体';}</style></head><body><!-- CSS使⽤font-family属性定义⽂本的字体系列 --><h2>泰⼽尔经典语录</h2><p class="songti">世界上最遥远的距离，不是⽣与死，⽽是我就站在你⾯前，你却不知道我爱你。
——泰⼽尔《鱼和飞鸟的故事》</p><p id="kaiti">纵然伤⼼，也不要愁眉不展，因为你不知是谁会爱上你的笑容。
CSS3属性line-clamp控制⽂本⾏数的使⽤说明：限制在⼀个块元素显⽰的⽂本的⾏数。
-webkit-line-clamp 是⼀个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
为了实现该效果，它需要组合其他外来的WebKit属性。
常见结合属性：display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒⼦模型显⽰。
-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的⼦元素的排列⽅式。
text-overflow，可以⽤来多⾏⽂本的情况下，⽤省略号“...”隐藏超出范围的⽂本。
今天接到优化需求，帖⼦列表⾥的内容要求缩略⾄3⾏，并带‘…’省略号<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>cline-clamp</title><style>.box{width: 200px;height: 300px;border:1px solid black;}p{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4; /*设置p元素最⼤4⾏，⽗元素需填写宽度才明显*/text-overflow: ellipsis;overflow: hidden;/* autoprefixer: off */-webkit-box-orient: vertical;/* autoprefixer: on *//*因为代码环境的关系-webkit-box-orient被过滤掉了 autoprefixer 这个关键字可以免除被过滤的动作*/ word-wrap:break-word; word-break:break-all;} </style></head><body><div class="box"><p> static：对象遵循常规流。
1.button控件默认的触发的事件是( A )。
A. ClickB. EnterC. PaintD. DoubleClick2．大部分Windows控件都位于哪个命名空间中（D）；A. SystemB. System..WebC. Microsoft.Win32D. System.Windows.Forms 3．SqlCommand组件用于执行CommandText属性所规定的操作，并创建DataReader 对象的方法是（ B ）。
A．ExecuteNonQuery() B．ExecuteReader()C．ExecuteScalar() D．Read（）4．Connection、Command、（B ）和DataAdapter 对象是.NET Framework 数据提供程序模型的核心要素。
A. DataSource B . DataSet C. DataTable D. Transaction(位于画图)5. 在面向对象编程时，类的对象的定义方式（ A ）。
A. 类名对象名=new 类名（）；B. 对象名类名=new 对象名（）；C. 类名对象名=new 对象名（）；D. 对象名类名=对象名（）；6. 改变窗体的背景色，需修改的窗体属性是( A )。
A. BackColorB. NameC.Title（标题）D. Index7. 在面向对象编程中定义一个接口的关键字（C）A. classB. RefC. interfaceD. override8. 如何改变Form窗体的标题栏上图标的图片（B）。
A. ImageB. IconC. TagD. Title9.在MainMenu控件中添加一条分隔符，需要输入的字符串是（D）；A. .”.”B. ”/”C. ”_”D. ” -”10. 如何在Form窗体中弹出信息提示对话框（C）。
A. This.show()B. this.Close()C. MessageBox.Show()D. 以上答案均不正确11.WinForm中，在界面上绘制矩形、弧、椭圆等图像对象并直接填充颜色，可以使用System．Drawing 命名空间的（A）类来实现。
CSS 背景属性（Background）属性描述 CSSbackground 在一个声明中设置所有的背景属性。
1background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
1 background-color 设置元素的背景颜色。
1background-image 设置元素的背景图像。
1background-position 设置背景图像的开始位置。
1background-repeat 设置是否及如何重复背景图像。
1CSS 边框属性（Border 和 Outline）属性描述 CSSborder 在一个声明中设置所有的边框属性。
1border-bottom 在一个声明中设置所有的下边框属性。
1border-bottom-color 设置下边框的颜色。
2border-bottom-style 设置下边框的样式。
2border-bottom-width 设置下边框的宽度。
1border-color 设置四条边框的颜色。
1border-left 在一个声明中设置所有的左边框属性。
1border-left-color 设置左边框的颜色。
2border-left-style 设置左边框的样式。
2border-left-width 设置左边框的宽度。
1border-right 在一个声明中设置所有的右边框属性。
1border-right-color 设置右边框的颜色。
2border-right-style 设置右边框的样式。
2border-right-width 设置右边框的宽度。
1border-style 设置四条边框的样式。
1border-top 在一个声明中设置所有的上边框属性。
1border-top-color 设置上边框的颜色。
2border-top-style 设置上边框的样式。
2border-top-width 设置上边框的宽度。
html 文本框(text)不可用只读多种实现方法有时候，我们希望表单中的文本框是只读的，让用户不能修改其中的信息，本文整理了多种实现方法，感兴趣的朋友可以参考下方法一：<input id= “File1” type= “text” disabled/ 不可用 方法二：<input id= “File1” type= “text” readonly/ 只读 方法三：<input id= “File1”type= “text”style=“display:none”/ 隐藏（但占位置） 方法四：<input id= “File1”type= “text”style=“visibility:hidden”/ 隐藏（不占位置） 有时候，我们希望表单中的文本框是只读的，让用户不能修改其中的信息，如使<input type=“text” name=“input1”value=“中国”的内容，”中国”两个字不可以修改。
实现的方式归纳一下，有如下几种。
方法1: onfocus=this.blur() 代码如下:<input type=“text”name=“input1”value=“中国”onfocus=this.blur() 方法2:readonly 20161 / 2代码如下:<input type=“text”name=“input1”value=“中国”readonly <input type=“text”name=“input1”value=“中国”readonly=“true” 方法3: disabled 代码如下:<input type=“text”name=“input1”value=“中国”disabled 20162 / 2。
jquery对某个标签添加只读（readonly）或者禁⽤（disabled）属性⼀、关于readonly属性例1、jquery 设置readonly属性$('input').attr("readonly","readonly") //将input元素设置为readonly$('input').removeAttr("readonly"); //去除input元素的readonly属性if($('input').attr("readonly") == true)//判断input元素是否已经设置了readonly属性例2、对于为元素设置readonly属性和取消readonly属性的⽅法$('input').attr("readonly",true)//将input元素设置为readonly$('input').attr("readonly",false)//去除input元素的readonly属性$('input').attr("readonly","readonly")//将input元素设置为readonly$('input').attr("readonly","")//去除input元素的readonly属性⼆、jquery 设置disabled属性例1、jquery 设置disabled属性$('input').attr("disabled","disabled")//将input元素设置为disabled$('input').removeAttr("disabled");//去除input元素的disabled属性if($('input').attr("disabled")==true)//判断input元素是否已经设置了disabled属性例2、对于为元素设置disabled属性和取消disabled属性的⽅法$('input').attr("disabled",true)//将input元素设置为disabled$('input').attr("disabled",false)//去除input元素的disabled属性$('input').attr("disabled","disabled")//将input元素设置为disabled$('input').attr("disabled","")//去除input元素的disabled属性三、jquery动态添加⽂本框的readonly只读属性<input id="test" type="text" />$("#test").attr({"readonly":"readonly"}); //添加readonly属性// 或者$("#ID").attr({ readonly: 'true' });$("#test").removeAttr("readonly"); //去除readonly属性。
CSS-04（⽂本属性,表格属性,定位（堆叠）,显⽰⽅式,）2 ⽂本属性①颜⾊: color②⽔平对齐⽅式: text-align:left/center/right/justify与margin:0 auto 让块级元素本⾝居中不同,text-align是让元素内部的⾏内,⾏内块,⽂本居中(如p,div⽆法居中,p标签在div中居中是p标签继承了div的text-align:center)③垂直对齐⽅式: line-height:px/⽆单位数字表⽰字号的倍数如果字号⼤⼩⼩于⾏⾼,⽂本会在⾏⾼范围内的垂直中⼼显⽰.多⾏⽂本不⽤line-height进⾏居中,⽽可以⽤div将⼀个⽂本包裹起来,再把这个div居中即可.④⽂本的线条修饰: text-decoration:none(默认),underline(下划线),overline(上划线),line-through(删除线)⑤⾸⾏缩进: text-indent:以px为单位的数字⑥⽂本阴影: text-shadow:⽔平偏移垂直偏移模糊距离颜⾊;(⽐box-shadow少⼀个⼤⼩ )九表格1 表格的常⽤属性尺⼨,边框,背景,字体,⽂本,内外边距都⽣效.边框只设置table外围边框2 td/th的属性尺⼨,边框,北京,字体,⽂本,内边距都⽣效.外边距⽆效td中⽂本处置对齐：vertical-align：top/middle/bottom(这⾥是middle)3 表格特殊显⽰i⽅式表格是⼀种特殊的显⽰⽅式，实际的尺⼨是根据内容多少决定的，内容少，以设定的尺⼨为准，内容多以内容为准同⼀⾏最⼤⾼度取决于最⾼的那个td；同⼀列最⼤宽度，取决于最宽的那个td，这就导致了表格不能按照普通的渲染⽅式画在页⾯上，需要先把表格所有数据读取到内存中，再⼀次性渲染（效率低）。
4 设置表格的显⽰规则⾃动布局（默认）：table-layout:auto---表格复杂时，加载速度慢，但是表格布局⽐较灵活,适⽤于不确定每列⼤⼩的，且不太复杂的表格。
CSS控制文本框的只读属性的方法
●解决方案一：
有时候，我们希望表单中的文本框是只读的，让用户不能修改其中的信息，如使
<input type="text" name="input1" value="中国">
的内容，"中国"两个字不可以修改。
实现的方式归纳一下，有如下几种：
方法1：
onfocus=this.blur() //当鼠标放不上就离开焦点
<input type="text" name="input1" value="中国" onfocus=this.blur()>
方法2：readonly
<input type="text" name="input1" value="中国" readonly>
<input type="text" name="input1" value="中国" readonly="true">
方法3：disabled
<input type="text" name="input1" value="中国" disabled="true">
完整的例子：
<input name="ly_qq" type="text" tabindex="2" onMouseOver="this.className='input_1'" onMouseOut="this.className='input_2'" value="123456" disabled="true"readOnly="true" /> disabled="true" //此果文字会变成灰色，不可编辑
readOnly="true" //文字不会变色，也是不可编辑的
css屏蔽输入：<input style="ime-mode: disabled">
有两种方法第一：disabled="disabled"这样定义之后被禁用的input 元素既不可用，也不可点击。
第二：readonly="readonly" 只读字段是不能修改的。
不过，用户仍然可以使用tab 键切换到该字段，还可以选中或拷贝其文本。
●解决方案二：
CSS封装整个只读文本框的属性：
.TextBoxReadOnly
{
border:1px solid #C0C0C0;
text-align:left;
background-color:#D3D3D3;
width:100px;
readonly:expression(this.readOnly=true);
}
它工作得很好，经过测试，发现了一个问题：用JS代码txt.readOnly=false，不能使文本框回到
可读写状态，用以下也不行!
txt.className="OtherStyle";
txt.readOnly=false;
总之，一旦使用css修饰了该控件使它只读，就不能再使它恢复到可读写的状态了，即使换成其它的css样式，有知道的朋友，请告知下哦。
.
于是乎，又写了一个样式：
.TextBoxReadWrite
{
border:1px solid #C0C0C0;
text-align:left;
background-color:#FFFFFF;
width:100px;
readonly:expression(this.readOnly=false);
}
这样再用JS切换样式，就可以在只读与可读写之间来回切换了，把这个过程封装到一个函数中，在程序中就可以自由调用了，虽然有点绕，不过是目前我找到的最好的办法。
切换的JS：function f1(ctr,isReadOnly)
{
varoctr=document.getElementById(ctr);
if(octr!=null)
{
if(isReadOnly)
octr.className="TextBoxReadOnly";
else
octr.className="TextBoxReadWrite";
}
}
调用:
function f3()
{
f1("<%=txt1.ClientID %>",true);
}
HTML页面控制方式：
<input name="" type="text" readonly="readonly" />。
