css

Posted 2020-07-25 土生搞IT

1，css是层叠样式表(Cascading Style Sheets)的缩写，它用于定义html元素的显示形式
2，行内样式 <p style="color:red">hello word</p>
内部样式 写在head内
<style type="text/css">
p{
color:red;
}
</style>
外部样式（客户端下载的时候采用并行下载，故常用外部样式）
创建后缀名为.css的文件，文件内为
p{
color:red;
}
在html文件中引入css：<link rel="stylesheet" href="路径">
优先级：行内>内部>外部>浏览器默认样式
3，选择器
元素选择器--根据元素名称选择，当前文件内所有元素都会受影响
h1{}
id选择器--只选择当前id相匹配的元素
#id{}
类（class）选择器--class属性可以重复
p1{}
<p class="p1"></p>
<p class="p1"></p>
通配选择器 *{}
群组选择器 p,h1,h2{}
包含选择器 <div id="m">
<h1>hello</h1>
<div>
<h1>world</h1>
<div>
<div>
<h1>what</h1>
div h1{}只会选择div下的h1
#m>h1{}只会选择id为m的div下的直接子元素
#m+h1{}选择what
伪类及伪元素选择器
<a href="javascript:;">点我啊</a>--做实验时保证不会跳到其它页面
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
属性选择器
input[type=password]{}
4,选择器优先级：!important>id>class>element>伪类>*
!important提高优先级，加上则优先级最高，慎用！
5，css常用属性
单位属性 长度：cm,mm,px(像素),em(Ems)当前字体中m字母宽度
颜色属性 color
文本属性 text-align：center；居中显示
text-align：right；靠右显示
text-decoration：underline；下划线
text-decoration：none；去掉下划线
text-decoration：line-through；在字体中间划线
text-decoration：overline；上划线
text-transform：uppercase；字母转化为大写
text-transform：lowercase；字母转化为小写
text-transform：capitalize；首字母转化为大写
text-transform：inherit；默认从父元素继承相关属性的值

正则表达式是一个描述字符模式的对象又称正规表示法、常规表示法

正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。在很多文本编辑器里，正则表达式通常被用来检索、替换那些符合某个模式的文本。

正则表达式的特点是：
1. 灵活性、逻辑性和功能性非常的强；
2. 可以迅速地用极简单的方式达到字符串的复杂控制。
3. 对于刚接触的人来说，比较晦涩难懂。

定义正则表达式
1：普通方式
var reg=/表达式/附加参数 var reg=/hello/i
reg.test(v.value)

2：构造函数方式
var reg=new RegExp("表达式","附加参数）
var reg=new RegExp("china");

var reg=new RegExp("cat")==var reg=/cat/
修饰符
i 执行对大小写不敏感的匹配。

 

var reg=new RegExp("cat","i")==var reg=/"CAT"/i

表达式的模式
1：简单模式
var reg=/china/;
2：符合模式
var reg=/^\w+$/; var reg=/^\[email protected]\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/;

RegExp对象的方法
exec检索字符中是正则表达式的区配，返回找到的值，并确定其位置
返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
var str = "hello world hello 你好 hello 世界";
var patt = new RegExp("hello","g");
var result;
while ((result = patt.exec(str)) != null) {
document.write(result);
document.write("<br />");
document.write(patt.lastIndex);
document.write("<br />");
}

test检索字符串中指定的值，返回true或false

match方法：
如果未找到匹配，则返回值为 null；如果找到了匹配，则返回一个结果数组， //结果集
function fun(){
var sToMatch = "hello world,hello 你好";
var reAt = /hello/gi;
var arrMatches = sToMatch.match(reAt);
alert( arrMatches.length );
}

---------------------------------------------------

var name=document.getElementById("name").value;
var reg=/^\s$/
alert(reg.test(name))
----------------------------------------------------

/…/ 代表一个模式的开始和结束
^ 匹配字符串的开始
$ 匹配字符串的结束
\s 任何空白字符
\S 任何非空白字符
\d 匹配一个数字字符，等价于[0-9]
\D 除了数字之外的任何字符，等价于[^0-9]
\w 匹配一个数字、下划线或字母字符，等价于[A-Za-z0-9_]
\W 任何非单字字符，等价于[^a-zA-z0-9_]
. 除了换行符之外的任意字符

{n} 匹配前一项n次
{n,} 匹配前一项n次，或者多次
{n,m} 匹配前一项至少n次，但是不能超过m次
* 匹配前一项0次或多次，等价于{0,}
+ 匹配前一项1次或多次，等价于{1,}
？ 匹配前一项0次或1次，也就是说前一项是可选的，等价于{0,1}

x|y
匹配x或y。例如，“z|food”能匹配“z”或“food”。“(z|f)ood”则匹配“zood”或“food”。
[xyz]
字符集合。匹配所包含的任意一个字符。例如，“[abc]”可以匹配“plain”中的“a”。
[a-z]
字符范围。匹配指定范围内的任意字符。例如，“[a-z]”可以匹配“a”到“z”范围内的任意小写字母字符。
注意:只有连字符在字符组内部时,并且出现在两个字符之间时,才能表示字符的范围; 如果出字符组的开头,则只能表示连字符本身.
(pattern)
匹配pattern并获取这一匹配。所获取的匹配可以从产生的Matches集合得到，在VBScript中使用SubMatches集合，在JScript中则使用$0…$9属性。要匹配圆括号字符，请使用“\(”或“\)”。

案例1：邮政编码的正则表达式
--都是6位并且都是数字
手机号码都是11位，并且第1位都是1

对年龄进行验证，年龄必须在0－120之间
<10
10-99

100-119这个范围是三位数，百位是1，十位是0-1，个位是0-9，