CSS初识1

最新推荐文章于 2024-09-11 20:05:52 发布

DK_bin

最新推荐文章于 2024-09-11 20:05:52 发布

阅读量190

点赞数

分类专栏： IT前端知识学习文章标签： CSS初步学习

本文链接：https://blog.csdn.net/qq_32124881/article/details/80280790

版权

IT前端知识学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS：cascading style sheet 层叠样式表

1.CSS的引入方式

（1）、行间样式

也叫内联样式。

除了在body外部出现的标记（例如，head和title），style属性可以与任何其他HTML标记关联。

	<!-- 行间样式引入方法，直接在HTML结构里面引入 -->
	<div style="
		width: 100px;
		height:100px;
		background-color: red;
	">
		<h5 style=" color: #f40">好好学习，天天向上</h5>
	</div>

（2）、页面级CSS

在head标签里面编写CSS 的代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CSS初步学习</title>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			background-color:red;
		}
	</style>
</head>
<body>
	<!-- 页面级CSS格式  在head里面整体写入CSS格式 -->
	<div></div>

</body>
</html>

（3）、外部CSS文件

补充：link必须放在head元素中;一个文档中可以关联多个样式表，浏览器加载这两个样式表，合并它们的规则，并应用于文档。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CSS初步学习</title>
	<link rel="stylesheet" type="text/css" href="CSS初步学习.css">
</head>
<body>
	<!-- 引入CSS文件  需要用到选择器 -->
	<div ></div>

</body>
</html>

（4）、规则结构

每个规则都有两个基本部分：选择器（selector）和声明块（declaration block）。声明块有一个或者多个声明组成，每个声明则是一个属性 - 值对（property-value）

h1 {color : red ; background:yellow;}

（5）、选择器

选择器种类：！improtant，id选择器，class选择器（属性选择器），行间样式选择器，标签选择器，通配符选择器，

选择器之间的权重比较：！improtant>行间样式>id选择器>class|属性选择器|伪类选择器 > 标签|伪元素 > 通配符

id选择器

一个HTML文件中有且只用一次id选择器。ID选择器不予许结合使用，不允许有以空格分隔的词列表。

HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CSS初步学习</title>
	<link rel="stylesheet" type="text/css" href="CSS初步的样式.css">
</head>
<body>
	<!-- 引入CSS文件  需要用到选择器 -->
	<div id="only"></div>

</body>
</html>

CSS样式：

#only{

	width: 100px;
	height: 100px;
	background-color:red;
}

class 选择器

html:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CSS初步学习</title>
	<link rel="stylesheet" type="text/css" href="CSS初步的样式.css">
</head>
<body>
	<!-- 引入CSS文件  需要用到选择器 -->
	<div class="yilei"></div>
	<div class="yilei"></div>
	<div class="yilei"></div>
	<div class="yilei"></div>
	
</body>
</html>

css

.yilei{
	width: 200px;
	height:300px;
	background-color: red;
}

标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CSS初步学习</title>
	<link rel="stylesheet" type="text/css" href="CSS初步的样式.css">
</head>
<body>
	<!-- 引入CSS文件  需要用到选择器 -->
	<div class="yilei"></div>
	<div class="yilei"></div>
	<div class="yilei"></div>
	<div class="yilei"></div>
</body>
</html>

CSS :

div{

	width: 200px;
	height:300px;
	background-color: #f40;
}

通配符选择器

*{
	margin: 0;
	padding: 0;
}

行间样式选择器

参见行间样式引入CSS

（5-1）属性选择器

根据元素的属性及属性值来选择元素。共有四种属性选择器P45

简单属性选择

/*所有h1选择class属性（不限值)的样式*/
h1 [class] {color: red;}

/*对所有带有alt 属性的图片应用到某种模式*/
img [alt] { border: 3px solid red ; }

还可以根据多个属性进行选择，只需要将属性选择器链接在一起就可以。例如：

a [href] [title]{ font-weight: bold; }/*将同时有href  title 属性的超链接的文本设置样式*/

根据具体属性值选择

h1 [class="1"] {color: red;}

这种格式要求必须与属性值完全匹配

	 <div class="health  help">
	 	<strong>早上好！</strong>
	 </div>
</body>

需要完全匹配，一个空格都不能少

div[class="health  help"]{
	width: 140px;
	background-color:red;
	height:150px;
}

根据部分属性值选择

/*想选择class属性中包含有help的元素，用一个波浪号~=来实现。*/
div[class~="help"]{
	width: 150px;
	background-color:red;
	height:150px;
}

更多内容P48

特定属性选择类型

/*其中每个图片的文件名都形如figure-1.gif 和 figure-3.jpg */
img[src|="figure"]{
	border: 1px solid gray;
}

（5-2）伪类选择器

伪类选择器
:link	指示作为超链接并指向一个为访问地址的所有锚。
:visited	作为已经访问地址超链接的所有锚。
:focus	当前拥有输入焦点的元素，也就是说，可以接受键盘输入，或者能以某种方式激活的元素。
:hover	鼠标指针停留在哪个元素上,例如,鼠标指针可能停留在一个超链接上, :hover 就会指示这个超链接
:active	被用户输入激活的元素。例如,鼠标指针停留在一个超链接上,如果用户点击鼠标,就会激活这个超链接：active 将指示这个超链接。

伪类的顺序很重要

	 <div class="health  help">
	 	<!-- 伪类选择器 -->
		<a href="http://www.baidu.com" target="_blank">百度</a>
	 </div>

a:focus{
	color: #03c;
}
a:hover{
	color: #000;
}
a:active {
	background-color: red;
}

（6）、选择器的权重

选择器权重值
选择器名称	权重值
!improtant	Infinity
行间样式选择器	1000
id选择器	100
class选择器 \|\| 属性选择器 \|\| 伪类选择器	10
标签选择器 \|\| 伪元素选择器	1
通配符选择器	0

权重之间的进制：255 进制

权重选择器的计算：把选择器标签权重相加。

相同权重，后来先到。

2.选择器权重的应用

（1）、父子选择器（包含选择器或上下文选择器）

从右向左用空格分隔的选择器，空格是一种结合符。

html:

	<div >
		<strong>
			<em>23456</em>
		</strong>
	</div>

css：

div strong em{
	background-color: red;
}

选择器权重值：1+1+1

（1-1）选择子元素

用大于号：> 选择一个元素的子元素。

	<!-- 只作用于  早上好  的样式 -->
	 <div class="health  help">
	 	<strong>早上好！</strong>
	 </div>
	 <div class="health  help">
	 	<em>
	 	<strong>你好！</strong>
	 	</em>
	 </div>

div>strong {
	color: red;
}

（2）、并列选择器

用多个限值条件，确定一个元素，且不用空格。注意：标签选择器放到前面，示例：

	<!-- 并列选择器 -->
	<div>1</div>
	<div class="demo">2</div>
	<p class="demo">3</p>

div.demo{
	width: 200px;
	height:300px;
	background-color: red;
}

（3）、分组选择器

标签用逗号分隔开，简化代码

<!-- 分组选择器 -->
	<div>1</div>
	<em>2</em>
	<p>3</p>

div,p,em{
	background-color: red;
}

（4）、多类选择器--类选择器的扩展

一个class值中有可能包括一个词列表，各个词之间用空格分隔。如果希望这样一个特定元素同时标记为紧急（urgent）和警告（warning）就可以写作：

<body>
	 <div class="health  help">
	 	<strong>早上好！</strong>
	 </div>

.help.health{
	width: 100px;
	background-color:red;
	height:150px;
}

两个词的顺序无关紧要，写成 warning urgent 也是可以。通过两个类选择器连接在一起，仅可以选择同时包括这些类名的元素（类名的顺序不限）。

（5）、! improtant

div{
	width: 100px !important;
	background-color:red !important;
	height:100px !important;
   }

3.CSS代码块

（1）.CSS格式

div{
/*属性名+冒号+属性值+分号分隔*/
	width: 200px;
	height:300px;
	background-color: #f40;
}

学会通过字典来查阅属性，并赋值练习。

（2）.颜色的格式

直接名称： red
颜色代码：#f40--

三原色：r g b 两位代码代表一个颜色，16进制，00-ff

每两位重复，可以写一位#f40 (#ff4400)

颜色函数：rgb(255,255,255)

（3）、标签属性

复合属性，单属性

这些内容都是需要再强化的。

备用知识：sublimetext3 的分屏 Alert+Shift +2

CSS 中的注释不能嵌套--外部注释会在内部注释结束处结束。/**/