css样式、选择器

一、css语法

css概念：Cascading Style Sheet 级联样式表

表现HTML或XHTML文件样式的计算机语言

包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定

css的优势：

1、内容与表现分离

2、网页的表现统一，容易修改

3、丰富的样式，使得页面布局更加灵活

4、减少网页的代码量，增加网页的浏览速度，节省网络带宽

5、运用独立于页面的CSS，有利于网页被搜索引擎收录

一、css语法

语法：

选择器{声明1；声明2.....}
h1为选择器 color为属性 red为值 font-size为属性 14px为值 
h1{
    color:red;
    font-size:14px;
}

CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;” 都要写上

二、css样式

1、行内样式：

使用style属性引入css样式

语法：

<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在标签中设置的样式</p>

2、内部样式：

CSS代码写在<head>的<style>标签中

语法：

<style>
        h1{color: green; }
</style>

3、外部样式：

CSS代码保存在扩展名为.css的样式表中，HTML文件引用扩展名为.css的样式表，有两种方式：链接式和导入式

链接式语法：

<head>
  <link href="文件路径" rel="stylesheet" type="text/css" />
</head>

引入方式优先级

行内样式>内部样式/外部引入

就近原则：哪一种设置方式距离元素最近，谁的优先级更高；

三、css选择器基本选择器

1、标签选择器

标签选择器：HTML标签作为标签选择器的名称，按标签名称分类，为页面中某一类标签指定统一css样式

语法：

p为html标签 color为属性 red为值 font-size为属性 14px为值 
p{
    color:red;
    font-size:14px;
}

2、类选择器

类选择器：如果选择差异化不同的标签一个或几个，可以用类选择器

语法：

.choose为类名称 color为属性 red为值 font-size为属性 14px为值 
.choose{
    color:red;
    font-size:14px;
    .......
}
<p >
	<span class="choose">类选择器</span>
</p>

多类名使用方式

<div class="red font20">你好</div>

在标签class属性中可以写多个类名；多个类名之间必须用空格分开；这样标签就可以分别具有这些类名的样式；节省css代码，方便统一修改在布局比较复杂的情况下，使用的较多

注意：

1、类选择器使用 “.” （英文标点）后跟着类名（类名自定义）

2、长名或词组用横线（-）连接命名

3、不要用纯数字或中文命名；尽量用英文名声

4、命名要见名知意

3、id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式

HTML元素可以以id属性设则id选择器，css中id选择器以“#”来定义

语法：

#demo{
    color:red;
    font-size:14px;
    ......
}
<p >
	<span id="demo">类选择器</span>
</p>

注意：id属性只能在每个HTML中出现一次。

id选择器与类选择器的区别：

1、类选择器可以有多个名字，可以同时被多人使用

2、id选择器和身份证一样，是唯一的不能重复

3、类选择器在修改样式中使用较多，id选择器一般用于页面唯一性的元素上，长于JavaScript搭配使用

4、通配符选择器

在css中，通配符选择器使用“*”定义，他表示选取页面中所有的元素

语法：

*{
    属性1：属性值1;
    .....
}

通配符选择器不需要调用，自动给所有元素使用样式，特殊情况下使用

5、层次选择器

选择器	类型	功能描述
E F	后代选择器	选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F	子选择器	选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
E+F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E~F	通用兄弟选择器	选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

后代选择器：

语法：

ol li{
	color: red;
}
<ol>
	<li>123456</li>
	<li>123456</li>
	<li>123456</li>
	<li>123456</li>
	<li>123456</li>
</ol>

子选择器：

语法：

ol li{
	color: red;
}
<ol>
	<li>123</li>
	<span>456</span>
	<li>123456</li>
	<li>123456</li>
	<li>123456</li>
</ol>

相邻兄弟选择器：

语法：

li+span {
	color: red;
}
<ol>
	<li>123</li>
	<span>456</span>
	<span>456</span>
	<li>123456</li>
	<li>123456</li>
</ol>

通用兄弟选择器：

语法：

li~span {
	color: red;
}
<ol>
	<li>123</li>
	<span>456</span>
	<span>456</span>
	<li>123456</li>
	<li>123456</li>
</ol>

6、结构伪类选择器

选择器	功能描述
E:first-child	作为父元素的第一个子元素的元素E
E:last-child	作为父元素的最后一个子元素的元素E
E F:nth-child(n)	选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd
E:first-of-type	选择父元素内具有指定类型的第一个E元素
E:last-of-type	选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n)	选择父元素内具有指定类型的第n个F元素

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css练习</title>
		<link href="css-demo1.css" type="text/css" rel="stylesheet"/>
	</head>
	<body>
		<p class="red">12345</p>
		<p class="green">12345</p>
		<p class="blue">12345</p>
		<ol>
			<li class="blue">12345</li>
			<li>12345</li>
			<li class="red">12345</li>
			<li>12345</li>
			<li>12345</li>
		</ol>
		<ul>
			<li>12345</li>
			<li class="green">12345</li>
			<li>12345</li>
			<li class="blue">12345</li>
			<li>12345</li>
		</ul>
		
	</body>
</html>

css：

ul li:first-child{
	color: red;
}
ol li:last-child{
	color: red;
}
ol li:nth-child(3){
	color: red;
}
p:first-of-type{
	color: red;
}
p:last-of-type{
	color: red;
}
ul li:nth-of-type(3){
	color: red;
}

7、属性选择器

属性选择器	功能描述
E[attr]	选择匹配具有属性attr的E元素
E[attr=val]	选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）
E[attr^=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr*=val]	选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="css/demo02.css" rel="stylesheet" type="text/css"/>
	</head>
	<body>
		<ul>
			<li>第一组</li>
			<li class="blue">第二组</li>
			<li>第三组</li>
			<li id="red" class="blue">第四组</li>
			<li x="lx">第五组</li>
			<li>第六组</li>
			<li x="cdscz">第七组</li>
			<li>第八组</li>
			<li>第九组</li>
			<li x="l10x">第十组</li>
		</ul>
		<p x="azxcz">
			这是一个段落
		</p>
		<a x="adx" href="http://www.baidu.com">百度一下</a>
	</body>
</html>

#red{
	color: red;
	text-decoration: underline;
	font-size: 24px;
}

li{
	color: green;
}

.blue{
	color: blue;
}

[x*=d]{
	color: red;
}

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/97194.html

css样式、选择器

一、css语法

二、css样式

1、行内样式：

2、内部样式：

3、外部样式：

三、css选择器基本选择器

1、标签选择器

2、类选择器

3、id选择器

4、通配符选择器

5、层次选择器

6、结构伪类选择器

7、属性选择器

相关推荐