级联样式单和css选择器

最新推荐文章于 2021-09-11 10:10:25 发布

先给自己打个气

最新推荐文章于 2021-09-11 10:10:25 发布

阅读量225

点赞数

分类专栏： JavaScript 文章标签： html5 css3

本文链接：https://blog.csdn.net/qq_40641206/article/details/103981274

版权

JavaScript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

级联样式单

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"; 
	@impor七 url("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（）弹窗 .

先给自己打个气

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
级联样式单和css选择器

级联样式单1、链接外部样式文件：这种方式将样式文件彻底与 HTML 文档分离，样式文件需要额外引入。在这种方式下，一批样式可控制多份文档。2、导入外部样式文件：这种方式与上一种方式类似，只是使用＠import 来引入外部样式单。（可能浏览器不兼容）3、使用内部样式定义：这种方式是通过在 HTML 文档头定义样式单部分来实现的。在这种方式下，每批 CSS 样式只控制一份文档。4...
复制链接

扫一扫