【海码学院公开课】web前端基础入门CSS之初探CSS课堂学习笔记

励志的程序员

于 2019-06-27 10:23:57 发布

阅读量224

点赞数

分类专栏： HTML CSS 文章标签： HTML CSS

本文链接：https://blog.csdn.net/weixin_45282338/article/details/93771455

版权

HTML 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

CSS

12 篇文章 0 订阅

订阅专栏

一、CSS介绍

1、什么是css样式？

CSS定义：全称为Cascading Style Sheets，中文翻译为“层叠样式表”，是前端三剑客中的网页样式。

作用：CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

特点：丰富的样式定义、易于使用和修改、多页面应用、层叠、页面压缩。

2、css网页应用

网页HTML中大量使用DIV、SPAN、TABLE表格等标签布局，要实现漂亮的布局（CSS宽度、CSS高度、CSS背景、CSS字体大小等样式）我们就需要CSS样式实现。

同样的一组DIV标签，对应CSS样式代码不同，所得到效果也不同。

在前端开发时，html、css、js是相辅相成的。

二、CSS写法和引入方式

1、CSS写法

选择器
    属性名:属性值;
    属性名:属性值;
    属性名:属性值;
}

选择器：用于选择需要添加样式的标签

属性：给这个标签添加什么样式

本节课要用到的一些常用字体属性：

color：字体颜色

font-size：字体大小

font-weight：bold；字体加粗

font-style: italic；斜体

text-decoration: underline；下划线

text-decoration：line-through；删除线

注意：

①.属性名和属性值之间需要用冒号（:）建立连接关系；

②.每个属性之间需要用分号（；）隔开；

③.所有的标点符号都要用英文符号；

2、引入方式

(1)、内部样式表

写法结构：

<style>
    选择器{
	    属性名:属性值;
	    属性名:属性值;
	    属性名:属性值;
    }
</style>

注意：一般是放在head标签里。

(2)、外部样式表

写法结构：

外部建立一个.css文件
文件里写：
	选择器{
		属性名:属性值;
		属性名:属性值;
		属性名:属性值;
	}

通过link标签引入：
<link type="text/css" rel="styleSheet"  href="CSS文件路径" />

注意：一般是放在head标签里。

(3)、行内样式表

写法结构：

<标签 style=“属性名:属性值;属性名:属性值;”>内容</标签>

(4)、三种引入方式的优先级比较：

就近原则！（行内>内部>外部）

3、HTML、CSS、JS要结构、样式、行为分离

HTML只写html内容

CSS文件外部引入

JS文件也要外部引入

三、常用选择器

1、标签选择器

写法：

标签名{
	属性名：属性值；
	属性名：属性值；
}

注意：同样的标签都会有这个样式！

实例：

<style>
	div{
		color: red;
	}
</style>

<body>
	<div>div标签-1</div>
	<div>div标签-2</div>
</body>

2、通配符选择器

写法：

*{
	属性名：属性值；
	属性名：属性值；
}

注意：整个页面中的标签都会有他给的样式。

实例：

<style>
	*{
		font-size: 20px;
	}
</style>

<body>
	<div>div标签</div>
	<p>p标签</p>
</body>

3、class选择器

写法：

.class值{
	属性名：属性值；
	属性名：属性值
}

注意：整个页面中的相同class值都会有他给的样式

实例：

<style>
	.cl-all{
		font-weight: bold;
	}
</style>

<body>
	<div class="cl-all">div标签</div>
	<p class="cl-all">p标签</p>
</body>

4.id选择器

语法：

#id值{
	属性名：属性值；
	属性名：属性值；
}

注意：id具有唯一性，css样式里写相同id虽然会有效果，但是我们要手动去设置这个唯一性，不取相同的id值。

实例：

<style>
	#id-div{
		font-style: italic;
	}
	#id-p{
		text-decoration: line-through;
	}
</style>

<body>
	<div id="id-div">div标签</div>
	<p id="id-p">p标签</p>
</body>

5、后代选择器

写法：

父选择器	子选择器 {
		属性名：属性值；
		属性名：属性值；
}

实例：

<style>
	#id-div p{
		text-decoration: underline;
	}		
</style>

<body>
	<div id="id-div">
		<p>p标签</p>
		<div>内嵌的div标签</div>
	</div>
</body>

6、子代选择器

写法：

父选择器>子选择器 {
		属性名：属性值；
		属性名：属性值；
}

实例：

<style>
	#id-div > div{
		color: blue;
		font-size: 30px;
	}		
</style>

<body>
	<div id="id-div">
		<p>p标签</p>
		<div>内嵌的div标签</div>
	</div>
</body>

7、群组选择器

写法：

选择器，选择器 {
		属性名：属性值；
		属性名：属性值；
}

实例：

<style>
	p , div{
		text-decoration: line-through;
		font-size: 20px;
		color: orange;
	}		
</style>

<body>
	<p>p标签</p>
	<div>div标签</div>
</body>

四、CSS基础小练习

<style>
	#div-1 {
		font-size: 40px;
		font-weight: bold;
	}
		
	.div-2 {
		font-size: 30px;
		font-weight: bold;
	}
		
	.span-1 {
		text-decoration: underline;
	}
		
	.span-2 {
		font-weight: bold;
	}
</style>


<body>
	<div id="div-1">清平调</div>
	<div class="div-2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;李白</div>
	<hr />
	<br />
	<p>
		<span class="span-1">云想衣裳花想容，</span>
		<span style="font-style: italic;">春风拂槛露华浓。</span>
	</p>
	<p>
		<span style="text-decoration: line-through;">若非</span><span>群玉山头见，</span>
	<span class="span-2">会向瑶台月下逢。</span>
	</p>
</body>