学习周记 CSS合集

最新推荐文章于 2023-01-03 20:23:42 发布

海绵宝宝的神奇海螺

最新推荐文章于 2023-01-03 20:23:42 发布

阅读量185

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/m0_47087071/article/details/117782266

版权

什么是CSS

CSS：Cascading Style Sheet 层叠样式表

是一组样式设置的规则，用于控制页面的外观样式

实现内容与样式的分离，便于团队开发

样式复用，便于网站的后期维护

页面的精确控制，让页面更精美

什么是CSS

CSS：Cascading Style Sheet 层叠样式表

是一组样式设置的规则，用于控制页面的外观样式

一， css样式

1-1
认识css样式

CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
如下列代码：

p{
   font-size:12px;
   color:red;
   font-weight:bold;
}

使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。

1-2
CSS代码语法

css 样式由选择符和声明组成，而声明又由属性和值组成
选择符{属性:值}
p{color:red;}
选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。
声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：
p{font-size:12px;color:red;}

1-3

从CSS 样式代码插入的形式来看基本可以分为以下3种：
内联式、嵌入式和外部式三种

1，内联式css样式

就是把css代码直接写在现有的HTML标签中，如下面代码：

<p style="color:red">这是红色的字</p>

css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码：

<p style="color:red;font-size:12px">这是红色的字</p>

2，嵌入式css样式

就是可以把css样式代码写在<style type="text/css"> </style>标签之间。如下面代码实现把三个<span>标签中的文字设置为红色：

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>		
		<style type="text/css">
		span{
		color:red;
		}
		</style>									
	</head>
	<body>

<span><h> 这是span标签中红色的字</h></span>

	</body>
</html>

嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。

3，外部式css样式

写在单独的一个文件中
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：

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

注意：
1、css样式文件名称以有意义的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内。

二，CSS选择器

每一条css样式定义由两部分组成，形式如下：

	选择器{
			属性名：属性值;
			属性名：属性值;
		}

在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素

2-1，标签选择器

标签选择器其实就是html代码中的标签。如<html>、<body>、<h1>、<p>、<img>。例如下面代码：

p{font-size:12px;line-height:1.6em;}

上面的css样式代码的作用：为p标签设置12px字号，行间距设置1.6em的样式。

2-2，类选择器

使用自定义的名称，以 . 号作为前缀，然后再通过HTML标签的class属性调用类选择器

以标签的class属性作为样式应用的依据

语法：
.类选器名称{css样式代码;}

注意：
1 调用时不能添加 . 号

2 同时调用多个类选择器时，以空格分隔

3 类选择器名称不能以数字开头

2-3， ID选择器

使用自定义名称，以 # 作为前缀，然后通过HTML标签的id属性进行名称匹配

以标签的id属性作为样式应用的依据，一对一的关系

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p{
			color:plum;
			font-size:20px;
		}
		h1{
			color:yellow;
		}
		.hello{
			background: #cccccc;
		}
		.world{
			font-weight:bold;
		}
		#cac{
			color:blue;
		}
	</style>
</head>
<body>
	<h1>句号</h1>
	<hr>
	<p class="hello">作词 : G.E.M.邓紫棋</p>
	<p class="hello">作曲 : G.E.M.邓紫棋</p>
	<p class="hello">编曲 : G.E.M.邓紫棋 / T-Ma 马敬恒</p>
	<p >可惜我们终于来到</p>
	<p>一个句号</p>
	<p>窗外不愿飞的蜂鸟</p>
	<p>也在哀悼</p>
	<p>城市再也不会听到</p>
	<p>我们争吵</p>
	<p id="cac">你会不会少了一点烦恼</p>
</body>
</html>

2-4，复合选择器

标签选择器和类选择器、标签选择器和ID选择器，一起使用必须同时满足两个条件才能应用样式。

2-5，组合选择器

也称为集体声明将多个具有相同样式的选择器放在一起声明，使用逗号隔开。

2-6，嵌套选择器

在某个选择器内部再设置选择器，通过空格隔开只有满足层次关系最里层的选择器所对应的标签才会应用样式。

注意：使用空格时不区分父子还是后代，使用CSS3中新增的 > 时必须是父子关系才行

2-7，选择器优先级

行内样式>ID选择器>类选择器>标签选择器

原因：首先加载标签选择器,再加载类选择器，然后加载ID选择器，最后加载行内样式后加载会覆盖先加载的同名样式。

2-8，内外部样式加载顺

就近原则

原因：按照书写顺序依次加载，在同优先级的前提下，后加载的会覆盖先加载的同名样式，所以离的越近越优先。

2-9 !important

可以使用!important使某个样式有最高的优先级。

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="style/world.css">

	<style>
		div{
			font-size:20px;
		}
		.hello{
			font-weight:bold;
			color:blue;
		}
		#world{
			text-decoration: underline;
			color:green;
		}
		p{
			color:plum;
		}
	</style>
</head>
<body>
	<div class="hello" id="world" style="color:#ff7300">学习周记 CSS</div>
<p>sjz</p>
</body>
</html>

海绵宝宝的神奇海螺

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习周记 CSS合集

一 css样式5-1认识css样式CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。如下列代码：p{font-size:12px;color:red;font-weight:bold;}使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。5-2CSS代码语法css 样式由选择符和声明组成，而声明又由属性和值...
复制链接

扫一扫