javascript 进阶篇2 CSS XML学习

CSS全称是cascading style sheets,中文名字叫级联样式单,也叫层叠样式表。它的好处就是能让代码整齐,并且可以批量处理一些样式。
基本语法:
注释符:/* */
选择符:selector {attribute:value} 同一个属性的值用空格符号隔开,不同属性用分号隔开。 区分大小写。
比如要给页面中的table定制样式,则写table {.....;.....;}
选择符的使用方法有很多种,于是我又一次懒得打,从网上抄来的:
选择符模式   说明  
*   匹配任意元素。(通用选择器)  
E   匹配任意元素 E (例如一个类型为 E 的元素)。(类型选择器)  
E F   匹配元素 E 的任意后代元素 F 。(后代选择器)  
E > F   匹配元素 E 的任意子元素 F 。(子选择器)   
E:first-child   当元素 E 是它的父元素中的第一个子元素时,匹配元素 E 。(:first-child 伪类)  
E:link E:visited   如果 E 是一个目标还没有访问过(:link)或者已经访问过(:visited)的超链接的源锚点时匹配元素 E 。(link 伪类)  
E:active E:hover E:focus   在确定的用户动作中匹配 E 。(动态伪类)  
E:lang(c)   如果类型为 E 的元素使用了(人类)语言 c (文档语言确定语言是如何被确定的),则匹配该元素。(:lang() 伪类)  
E + F   如果一个元素 E 直接在元素 F 之前,则匹配元素 F 。(临近选择器)  
E[attr]    匹配具有”attr”属性集(不考虑它的值)的任意元素 E 。(属性选择器)  
E[attr="warning"]    匹配其“attr”属性值严格等于“warning”的任意元素 E 。(属性选择器)  
E[attr~="warning"]   匹配其“attr”属性值为空格分隔的值列表,并且其中一个严格等于“warning”的任意元素 E 。(属性选择器)  
E[lang|="en"]   匹配其“lang”属性具有以“en”开头(从左边)的值的列表的任意元素 E 。(属性选择器)  
DIV.warning   仅 HTML。用法同 DIV[class~="warning"]。(类选择器)  
E#myid   匹配 ID 等于“myid”的任意元素 E 。(ID 选择器)  
用到的时候再详细解释吧。
CSS优先级:同一个页面或者css文件里,有时候会对同一个元素有多个定义,这就需要根据优先级来渲染了。优先级分为 外部定义样式的优先级与其他样式的优先级。
外部定义样式的优先级:具体怎么算法就不说了,这里单纯说结果:id选择符>类选择符>属性选择符>伪类选择符>元素选择符>伪元素选择符>全局选择符>其他
其他样式定义的优先级:文内样式,也就是在元素里面的style=...,这个是最最高级的,优先于所有的外部定义样式。"!important" 这个在不同版本用法有偏差,也就不具体说了,需要的时候查吧。通过继承得到的样式:这个是优先级最低的样式。
CSS属性:请参考https://www.jb51.net/w3school/css/css_reference.htm (喂这也太不负责了吧!摔)
CSS单位: https://www.jb51.net/w3school/css/css_units.htm (博主你简直就是个废柴啊!摔!)
(假装没听见)
下面来进入应用环节 ( ̄︶ ̄)
1.当前页面嵌入css样式:

复制代码 代码如下:


<html>
<head>
<title>css test</title>
<style>
.tableStyle{
background:yellow;
font-size:14px;
font-weight:bold;
}
</style>
</head>
<body>
<table>
<tr>
<td>title:</td>
<td><input type="text" size="50"></td>
</tr>
<tr>
<td>content:</td>
<td><textarea cols="45" rows="10"></textarea></td>
</tr>
</table>
<body>


2.嵌入css样式文件:
我们在工程下新建一个css文件夹,然后新建一个css文件,取名为style.css。这样做是为了代码能整齐,当然因为这里只是个例子于是里面的内容我只写了刚才例子里的东西。

javascript 进阶篇2 CSS XML学习


复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdjggd.html