w3c标准 - Css - （1）基本介绍及选择器

最新推荐文章于 2024-05-19 01:30:07 发布

耳东蜗牛

最新推荐文章于 2024-05-19 01:30:07 发布

阅读量905

点赞数 1

本文链接：https://blog.csdn.net/It_rod/article/details/61209491

版权

w3c标准 - Css - （1）基本介绍及选择器

1. Css基本介绍：

（1）名称

层叠样式表：Cascading Style Sheets，定义如何显示HTML元素。

（2）优点

a. 使页面表现的非常统一，容易修改，更有利于精确的控制页面布局。

b. 解决内容与表现分离的问题。

c. 外部样式表极大地提高了工作效率。

（3）层叠次序

浏览器缺省设置（浏览器默认设置） < 外部样式表 < 内部样式表 < 内联样式

（4）基础语法

a. css的规则有两个主要的部分构成：选择器以及声明

selector {
	declaration1;
	declaration2;
}

h1 {
	color: red;
	font-size: 14px;
}

b. 当值为若干单词的时候，需要给值加上引号

p {
	font-weight: "sans serif"; 
}

c. 多重声明：如果定义不止一个声明，则需要用分号将每个声明分开

p {
	text-align: center;
	font-weight: "sans serif"; 
	color: black;
	font-family: arial;
}

d. 空格及大小写：是否包含空格不会影响css在浏览器的工作效果。css对大小不敏感。但是一般会在写值得时候加上空格。

（5）高级语法

a. 选择器的分组：被分组的选择器可以分享相同的声明，用逗号将需要分组的选择器分开。

h1,h2,h3,h4,h5,h6 {
	color: red;
}

（6）继承及其问题

根据css，子元素会从父元素继承属性，后面文章会有介绍。

（7）css创建

a. 外部样式表

	<head>
		<link rel="stylesheet" type="text/css" href="index.css"/>
	</head>

rel: 属性用于定义连接的文件和HTML文档之间的关系， rel是必须的。
type: 是说明外链文档的的类型
href: 导入css文件的路径

b. 内部样式表

c. 内联样式

（8）优先级

行间样式，1000
ID选择器的特殊性值，100
类选择器、属性选择器或伪类，10
元素和伪元素，1
通配选择器*对特殊性没有贡献，0
最后比较特殊的一个标志!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为10000

2. 选择器

（1）派生选择器

通过依据元素在位置上的上下文关系来定义样式，CSS1中，称为上下文选择器，CSS2中称为派生选择器。

a. 后代选择器：又称为包含选择器

h1 em {
	color: red;
}

在后代选择器中，选择器之间的空格是一种结合符，每个空格结合符可以解释为“”...在...找到“， “”...作为...的后代“”，但是要求必须是从右向左读选择器。

上面的选择器可以解读为““ 作为h1元素后代的任何em元素”

b. 子元素选择器：只能选择作为某子元素的元素

h1 > strong {
	color:red;
}

<div>
	<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
	<h1>This is <em>really <strong>very</strong></em> important.</h1>
</div>

大家可以看到只有h1元素的strong子元素才会有红色字体的属性，第二个就没有这个属性

c. 相邻兄弟选择器：选择紧接在另一个元素后的元素，且二者具有相同的父元素。

相邻兄弟选择器使用了加好（+），即相邻兄弟结合符

li + li {
	font-weight:bold;
}

<ul>
	<li>List item 1</li>
	<li>List item 2</li>
	<li>List item 3</li>
</ul>
<ol>
	<li>List item 1</li>
	<li>List item 2</li>
	<li>List item 3</li>
</ol>

下面看一下效果：li元素后面的第一个兄弟li元素。 用一个结合符只能选择两个相邻兄弟中的第二个元素。

下面的的第二个与第三个li元素的font-weight的属性都应用上了，因为对于第二个li元素，第三li元素也是li的紧接着的并且具有相同父元素的li元素。

（2）id选择器

id选择器可以为标有特定的id的html元素制定特定的样式， id选择器以“#”来定义。

html和xhtml的选择器是区分大小的。

#intro {
	font-weight:bold;
}

（3）类选择器

类选择允许以一种独立于文档元素的方式来指定样式，类选择需要修改html的结构，给元素加上class。

.important {
	color:red;
}

css多累选择器：把类选择器链接在一起，仅可以选择同事包含这些类名的元素。

.important.urgent {
	background:silver;
}

Note：类选择器和ID选择区的区别

a. id选择器只能在文档中使用一次，仅此一次

b. id选择器不能使用ID词列表

（4）通配符选择器

通配符选择器：给当前所有的标签设置属性，界面标签不要过多，性能会比较差。

* {
	color: yellow;
}

（5）属性选择器

Css 2引入了属性选择器：可以根据元素的属性以及属性值来选择元素。

a. 简单属性选择：如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。

/*属性选择器宇通配符选择器结合使用*/
*[title] {
	color: red;
}

a[title] {
	color: red;
}

a[title][href] {
	color: green;
}

b. 根据具体属性值选择

除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。

*[title="title1"] {
	color: red;
}

note: 上面的属相与属性值必须完全匹配才可以。

c. 根据部分选择值选择

根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）

p[class~="important"] {
	color: red;
}

上面的选择器选择的是“class属性值含有important的p标签”，但是这个important必须是一个完整匹配的全名称，而不是一个包含important的class属性值。

<!--第一个p标签会匹配-->
<p class="important warning">This paragraph is a very important warning.</p>
<!--第二个p标签会匹配-->
<p class="dfimportant warning">This paragraph is a very important warning.</p>

d. 子串匹配属性选择器

（6）伪类：用于向某些选择器添加特殊的效果

a. 语法

selector : pseudo-class {
	property: value;
}

css类也可以与伪类搭配使用

selector.class : pseudo-class {
	property: value;
}

b. 锚伪类

a:link {
	color: #FF0000; /* 未访问的链接 */
	}		
a:visited {
	color: #00FF00; /* 已访问的链接 */
	}	
a:hover {
	color: #FF00FF; /* 鼠标移动到链接上 */
	}	
a:active {
	color: #0000FF; /* 选定的链接 */ 
}

c. first-child伪类：选择元素的第一个子元素

p:first-child {
	font-weight: bold;
}

上面的规则为作为某一个子元素的所有p元素设置为粗体

div:first-child {
	font-weight: bold;
}

<div>
	<div>
		<p title="title1" class="a b c">abc</p>
	</div>
		<p title="title1" class="a b c">abc</p>
	</div>
<div>
	<p title="title1" class="a b c">abc</p>
</div>

从下面的结果可以看出第一个div，和第一个div内部的div的文字都是粗体，第二个div就不是粗体。最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素

注释：必须声明 <!DOCTYPE>，这样 :first-child 才能在 IE 中生效。