级联样式单+css选择器

级联样式单

1、链接外部样式文件:这种方式将样式文件彻底与 HTML 文档分离,样式文件需要额外 引入。在这种方式下, 一批样式可控制多份文档。
2、导入外部样式文件: 这种方式与上一种方式类似,只是使用@import 来引入外部样式 单。(可能浏览器不兼容)
3、使用内部样式定义: 这种方式是通过在 HTML 文档头定义样式单部分来实现的 。在这 种方式下,每批 CSS 样式只控制一份文档。
4、使用行内样式: 这种方式将样式行内定义到具体的 HTML 元素,通常用千精确控制一 个 HTML 元素的表现。在这种方式下,每份 CSS 样式只控制单个 HTML 元素。

使用方式:

1.链接外部样式:在<head></head>中间添加 <link type=“ text/css " rel="stylesheet" href="CSS 样式文件的 URL"/ >(type:文本类型 rel:引入样式单)需要改变href里面的值(绝对路径或相对路径)ps:建议相对路 径。
2.导入外部样式文件 :导入外部 样式单需要在<style />元素中使用@import 来执行导入。(浏览器不兼容)

代码格式:

<style type=“ text/css"> 
	@import "outer.css"; 
	@imporurl("mycss .css "); 
</style> 

3.使用内部样式定义:(如果想让某些 CSS 样式仅对某个页面有效,而不会影 响整个站点,则应该选择使用内部 CSS 样式定义)
通常不建议使用内部 CSS 样式,这种内部 CSS 样式主要有三大劣势
► 如果此 CSS 样式需要被其他 HTML 文档使用,那么这些 CSS 样式必须在其他 HTML 文档中重复定义。
► 大量 CSS 嵌套在 HTML 文档中,必将导致 HTML 文档过大,大量的重复下载,导致网络负载加重。
► 如果需要修改整站风格时,必须依次打开每个页面重复修改,不利于软件工程化管理。

代码格式:

<style type=“ text/css"> 
	//样式单文件定义 
</style>

4.使用行内样式:行内 CSS 样式只对单个标签有效。

代码格式:

Style= "propertyl:valuel;property2:value2... " //property(属性)

四个选择器优先级离对应标签越近越高。即:
行内样式>内部样式>导入外部样式 >链接外部样式

css选择器

Selector(选择器):选择器决定该样式定义对哪些元素。
property:value1;property:value2.。。(属性定义)

css选择器通用格式:(Selector规格越严格,优先级越高。)

Selector { 
	propertyl: valuel;
	property2 : value2;
	...
}

选择器类型

1、元素选择器
E{。。}/其中E代表HTML元素名/
*{。。。}通用选择器

div{ 
	background-color: red;
} 

2、属性选择器
E{。。}
E【attr】{。。}指定css只对attr起作用
E【attr=value】{。。}指定css对所有包含attr属性,且attr属性为value的E元素起作用。

/*对有 id 属性的 div 元素起作用的 CSS 样式*/
div[id] 
{
 background-color:#aaa; 
}
/*对有 id 属性值包含 xx 的 div 元素起作用的 CSS 样式*/ 
div[id*=xx] 
{
 background-color:#999 ; 
} 
/*对有 id 属性值以 xx 开头的 div 元素起作用的 CSS 样式*/ 
div [id^=xx]
{
	background-color:#555; 
	color:#fff;  
} 
/*对有 id 属性值等于 xx 的 div 元素起作用的 CSS 样式*/ 
div[id=xx] 
{
 background-color:#111 ; 
 color:#fff; 
}
<body> 
	<div>没有任何属性的 div 元素</div>
	<div id="a”>带 id 属性的 div 元素</div>
	<div id=" zzxx">id 属性值包含 xx 字符串的 div 元素</div>
	<div id="xxyy">id 属性值以 xx 开头的 div 元素</div> 
	<div id="xx">id 屈性值为 xx 的 div 元素</div> 
</body> 

3、ID选择器
id唯一,#(选择对应id的标签)
格式示例:

#xx { 
	background-color:red;
} 

4、class选择器
class可以重名,同上,.(对应class的标签)
格式示例:

/*对所有 class 为 myclass 的元素都起作用的 CSS 样式*/
 .myclass 
{
  width :240px; height:40px; background-color:#dddddd; 
} 
/* 对 class 为 myclass.ss 的 div 元素起作用的 CSS 样式*/
div.myclass 
{
 	border:2px dotted black;
 	background-color : #888888;
}

5、包含选择器
Selector1 Selector2{。。}
Selector1 下只要有Selector2,包含关系的。

代码示例:

div .a 
{
 width:200px; 
 height:35px;
 border:2px dotted black; 
 background-color: #888;
} 

6.子选择器
Selector1>Selector2{。。}
直接关系,Selector1是Selector2的直接父亲.
代码示例:

div>.a 
{
 width:200px; 
 height:35px;
 border:2px dotted black; 
 background-color: #888;
} 

扩展:

7.HTML5新增兄弟选择器
Selector1~Selector2{。。}
先找到Selector1,以他为中心往下起作用,兄弟为Selector2的.
8、组合选择器
Selector1,Selector2,Selector3{。。}
逗号隔开,全起作用

9.重点:(伪类选择器)

9.1伪元素选择器
css中伪元素共有:
:first-lettle 只作用于首字符
:first-line 只作用于第一行

例如:

div:first-lettle{..}<!--即在div标签首字符修改样式,只能改变块级元素-->

:before 与内容相关的属性结合使用,在指定对象前端插入内容
:after 与内容相关的属性结合使用,在指定对象尾端插入内容
内容相关的属性:配合before和after使用
内容相关属性:
content: 该属性的值可以是字符串、 url(url)、 attr(alt)、 counter(name)、 counter(name, list-style-type)、 open-quote、 close-quote 等格式。该属性用于向指定元素之前或之后插入指定内容。
► counter-increment: 该属性用千定义一个计数器。该属性的值就是所定义的计数器的名称。
► counter-reset: 该属性用千对指定的计数值复位。
包括:content{}
例如:

<style type=" text/css " >
 /* 指定向 div 元素内部的前端插入 content 屈性对应的内容*/
div>div :before
{
  content:'Crazylt:';//内容为Crazylt
  
  color:blue; 
  font- weight :bold; 
}
</style>

9.2css3新增的伪类选择器

9.2.1结构性伪类选择器
结构性伪类选择器指的是根据 HTML 元素之间的结构关键进行筛选的伪类选择器。结构 性伪类选择器有如下几个。
► Selector:first-child: 匹配符合 Selector 选择器,而且必须是其父元素的第一个子节点 的元素。
► Selector:last-child: 匹配符合 Selector 选择器,而且必须是其父元素的最后一个子节 点的元素。
► Selector: nth-child(n): 匹配符合 Selector 选择器,而且必须是其父元素的第 n 个子节 点的元素。
► Selector:nth-last-child(n):匹配符合 Selector 选择器,而且必须是其父元素的倒数第 n 个子节点的元素 。

► Selector:only-child: 匹配符合 Selector 选择器,而且必须是其父元素的唯一子节点的 元素。
► Selector:first-of-type: 匹配符合 Selector 选择器,而且是与它同类型、同级的兄弟元素中的第一个元素。
► Selector:last-of-type: 匹配符合 Selector 选择器,而且是与它同类型、同级的兄弟元 素中的最后一个元素 。

► Selector: nth-of-type(n): 匹配符合 Selector 选择器,而且是与它同类型、同级的兄弟 元素中的第 n 个元素。
► Selector:nth-last-of-type(n): 匹配符合 Selector 选择器,而且是与它同类型、同级的兄 弟元素中的倒数第 n 个元素。

► Selector:only-of-type: 匹配符合 Selector 选择器,而且是与它同类型、同级的兄弟元 素中的唯一一个元素。
► Selector:empty: 匹配符合 Selector 选择器,而且其内部没有任何子元素(包括文本节 点)的元素。
► Selector:lang(lang):匹配符合 Selector 选择器,而且内容是特定语言的元素。

代码实例:

/*定义对作为其父元素的第 2 个子节点的li元素起作用的 CSS 样式*/
 li:nth-child(2}
 {
  color: #888; 
 }   

它们还支持如下用法:
► Selector:nth-child(odd/event):匹配符合 Selector 选择器, 而且必须是其父元素的第奇数个/偶数个子节点的元素。
► Selector:nth-child(xn+y):匹配符合 Selector 选择器,而且必须是其父元素的第 xn+y 个子节点的元素。

9.2.2UI 元素状态伪类选择器

UI 元素状态伪类选择器主要用于根据 UI 元素的状态进行筛选。 U1 元素状态伪类选择器 有如下几个 。
► Selector:link: 匹配 Selector 选择器且未被访问前的元素(通常只能是超链接)。
► Selector:visited: 匹配 Selector 选择器且已被访问过的元素(通常只能是超链接)。
► Selector:active: 匹配 Selector 选择器且处于被用户激活(在鼠标点击与释放之间的事 件)状态的元素。
► Selector: hover: 匹配 Selector 选择器且处于鼠标悬停状态的元素。
► Selector:focus: 匹配 Selector 选择器且已得到焦点的元素。
► Selector:enabled : 匹配 Selector 选择器且当前处千可用状态的元素。
► Selector:disabled: 匹配 Selector 选择器且当前处于不可用状态的元素 。
► Selector:checked : 匹配 Selector 选择器且当前处千选中状态的元素 。
► Selector:default: 匹配 Selector 选择器且页面打开时处千选中状态(即使当前没有被选中亦可)的元素。
► Selector: i ndeterm in ate: 匹配 Selector 选择器且当前选中状态不明确的元素
► Selector:read-only: 匹配 Selector 选择器且处千只读状态的元素。
► Selector:read-write: 匹配 Selector 选择器且处于读写状态的元素。
► Selector:required : 匹配 Selector 选择器且具有必填要求的元素。
► Selector:optional: 匹配 Selector 选择器且无必填要求的元素。
► Selector:valid: 匹配 Selector 选择器且能通过输入校验的元素。
► Selector:invalid: 匹配 Selector 选择器且不能通过输入校验的元素。
► Selector: in-range: 匹配 Selector 选择器且当前处千指定范围内的元素。
► Selector:out-of-range: 匹配 Selector 选择器且当前超出指定范围的元素 。
► Selector: :selection: 匹配 Selector 选择器的元素中当前被选中的内容。
常用的有:active、 :hover、 :focus、 :enabled 、 :disabled、 :checked 和default 伪类选择器
例如:ul li:hover p{…} 控制它的li块,鼠标放上去p标签改变。

9.2.1:not伪类选择器
Selector1:not(Selector2)匹配符合1的选择器,不符合2的。
可以多次叠加使用
Selector1:not(Selector2) not(Selector3)
{
background-color=red;
}

脚本修改样式

如果需要在脚本中动态控制页面的显示效果,使用脚本动态设置 CSS 样式也非常简单, 按如下步骤就可动态修改目标元素的 CSS 样式。 获取到需要设置 CSS 样式的目标元素,例如可以使用 getElementByld()方法。 修改目标元素的 CSS 样式。 常用的方式有两种 。
► 修改行内 CSS 属性值: 使用如 “obj.style属性名=属性值”的 JavaScript 代码即可。
► 修改 HTML 元素的 class 属性值:使用如 “obj.className=class 选择器”的 JavaScript 脚本即可。
注意:css中所有样式:例background-color在js中要写成驼峰形式backgroundColor

	<script type="text/javascript"> 
	  function changeBg () 
		//将背景色的值定义成空字符串 
		var bgCol or=" "; 
		//循环 6 次, 生成一个随机的 6 位数 
		for (var i = 0 ; i < 6 ; i ++)
			bgColor += "" + Math.round(Math.random () * 9) ; 
		//将随机生成的背景颜色值赋给页面的背景色 
		document.body.style.backgroundColor=" # " + bgColor; 
		//为页面的单击事件绑定事件处理函数
 		document.onclick = changeBg; 
 	</script> 

alert()弹窗 .

发布了2 篇原创文章 · 获赞 0 · 访问量 29
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览