Web前端学习之路（二）CSS选择器与样式

最新推荐文章于 2020-06-20 16:27:00 发布

LionMain

最新推荐文章于 2020-06-20 16:27:00 发布

阅读量334

点赞数

分类专栏： Web前端文章标签： CSS

本文链接：https://blog.csdn.net/LionMain/article/details/97806743

版权

Web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、定义

CSS，全称Cascading Style Sheets，翻译过来就是层叠样式列表。

二、引用

（一）内联样式表

举例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p style="color: yellow">这是测试文本</p>
</body>
</html>

（二）内部样式表

格式

样式的选择器{
	属性: 属性值;
}

举例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		p{
			color: red;
		}
	</style>
</head>
<body>
	<p>这是测试文本</p>
</body>
</html>

（三）外部样式表

实现：

新建文档，编写CSS样式
将<link rel="stylesheet" type="text/css" href="样式路径">插入到html代码中。

举例

/*样式表*/
p{
	color: blue;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
	<p>这是测试文本</p>
</body>
</html>

显示优先级：内联样式表 > 内部样式表 > 外部样式表，简单概括一下就是就近原则。

三、选择器

选择器就是用来选择（找到）需要添加样式的柆置。

（一）基本选择器

标签选择器

标签选择器指的就是html文本里的标签。

<p>p就是标签选择器。</p>

/*样式选择器，匹配到所有p标签*/
p{
    /*样式*/
}

类选择器

类选择器，指的就是标签内class属性的属性值。

选择器定义：.

<p class="title">title就是类选择器</p>

/*类选择器，匹配到所有class属性为title的标签*/
.title{
    /*样式*/
}

ID选择器

ID选择器，指的就是标签内id属性的属性值。

选择器定义：#

<p id="p1">p1就是ID选择器</p>

/*ID选择器，匹配到所有ID属性为p1的标签*/
#p1{
   /*样式*/ 
}

通用选择器

通用选择器主要应用于会影响到整个页面的样式效果。

选择器定义：*

* {
    /*样式*/
}

属性选择器

属性选择器针对标签里的属性名来进行选择。

选择器定义：[]

/*匹配到所有拥有class属性的标签*/
[class]{
	/*样式*/
}

（二）组合选择器

联合选择器

联合选择器主要用于当需要对两个及以上的选择器实现相同的样式。

选择器定义：,

<p class="title">title就是类选择器</p>
<p id="p1">p1就是ID选择器</p>

/*匹配到所有id属性为p1或class属性为title的标签*/
#p1, .title{
    /*样式*/
}

子选择器

定义：A > B

作用域：A标签的下一级的B标签

后代选择器

定义：A B

作用域：A标签下的所有B标签

紧邻兄弟选择器

定义：A + B

作用域：A标签同级靠后的第一个B标签

一般兄弟选择器

定义：A ~ B

作用域：A标签同级靠后的所有B标签

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		ul ~ ol{
			color: red;
		}
		ul + ol{
			color: blue;
		}
		p em{
			color: yellow;
		}
		p > em{
			color: green;
		}
	</style>
</head>
<body>
	<div>
		<!-- 黑色 -->
		<ul>
			<li>List item 1</li>
			<li>List item 2</li>
			<li>List item 3</li>
		</ul>
		<!-- 黑色 -->
		<ul>
			<li>List item 1</li>
			<li>List item 2</li>
			<li>List item 3</li>
		</ul>
		<!-- 黑色 -->
		<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>
		<!-- 红色 -->
		<ol>
			<li>List item 1</li>
			<li>List item 2</li>
			<li>List item 3</li>
		</ol>
		<!-- 红色 -->
		<ol>
			<li>List item 1</li>
			<li>List item 2</li>
			<li>List item 3</li>
		</ol>
		<p>
			<!-- 绿色 -->
			<em>1	
				<!-- 黄色 -->
				<em>1-1</em>
			</em>
		</p>
	</div>
</body>
</html>

运行结果

（三）伪类与伪元素

伪类：通常情况下我们指的是超级链接上设置的样式。

状态伪类

属性	作用
a:link	未访问的链接
a:visited	己访问的链接
a:hover	鼠标移动到链接上（浮动、悬停）
a:active	向被激活的元素添加样式
:focus	选择拥有键盘输入焦点的元素

结构性伪类

属性	作用
:first-child	选择元素的第一个子元素
:last-child	选择元素的最后一个子元素
:nth-child()	选择某个元素的一个或多个特定的子元素
:nth-last-child()	选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算。
:first-of-type	选择一个上级元素下的第一个同类子元素

伪元素选择器

属性	作用
::selection	选择指定元素中被用户选中的内容
::before	可以在内容之前插入新内容
::after	可以在内容之后插入新内容
::first-line	选择指定选择器的首行
::first-letter	选择文本的第一个字符

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		/*状态伪类*/
		a:link{
			color: blue;
		}
		a:visited{
			color: red;
		}
		a:hover{
			font-size: 20px;
		}
		a:active{
			color: green;
		}
		a:focus{
			background-color: yellow;
		}
		/*结构性伪类*/
		li:first-child{
			color: pink;
		}
		li:last-child{
			color: violet;
		}
		li:nth-child(2){
			color: orange;
		}
		li:nth-last-child(3){
			color: yellow;
		}
		p:first-of-type{
			color: green;
		}
		/*伪元素*/
		h1::before{
			content: "hello "
		}
		h1::after{
			content: "！！！"
		}
		h1::selection{
			color: red;
		}
		h1:first-line{
			color: blue;
		}
		h1:first-letter{
			background-color: yellow;
		}
	</style>
</head>
<body>
	状态伪类测试<br>
	<a href="https://www.baidu.com">百度</p></a>

	结构性伪类测试<br>
	<ul>
		<li>水果1</li>
		<li>水果2</li>
		<li>水果3</li>
		<li>水果4</li>
		<li>水果5</li>
	</ul>
	<p>动物1
		<p>动物2</p>
	</p>

	伪元素测试<br>
	<h1>WORLD</h1>
</body>
</html>

四、样式

（一）背景样式

属性	属性值	作用
background-color	颜色值	背景色
background-image	图片地址	背景图
background-repeat	repeat、repeat-x、repeat-y、no-repeat	背景图的重复方法
background-attachment	scoll、fixed	背景是否随滚动条滚动
backgound-position	见下图	背景图的起妈始位置
background	背景样式的值是复合属性值组合

（二）文本样式

属性	属性值	作用
color	颜色	文本颜色
direction	\|tr、rt\|	文本的方向/书写方向
letter-spacing	n px（n可为负数）	字符间距
line-height	n px	行高
text-align	left、right、center、justify	文本对齐方式
text-decoration	none、underline、overline、line-through	文本的修饰
text-shadow	h-shadow v-shadow blur color	文本阴影
text-transform	none、capitalize、uppercase、lowercase	改变字母大小写
text-indent	n px、n em	首行缩进

（三）字体样式

属性	属性值	作用
font-family	字体	字体
font-style	normal、italic、oblique	斜体
font-weight	normal、bold、100-900	字体粗细
font-size	n px	字体大小

（四）列表样式

属性	属性值	作用
list-style-type	none、disc、circle、square、decimal	列表项目的外观
list-style-position	inside、outside	列表符号的位置
list-style-image	url、none	列表项目设为图象
list-style	同以上	简写属性

LionMain

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端学习之路（二）CSS选择器与样式

一、定义CSS，全称Cascading Style Sheets，翻译过来就是层叠样式列表。二、引用（一）内联样式表举例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head&...
复制链接

扫一扫