CSS学习笔记1：初识CSS及其常见属性

编程大学姐远春儿

已于 2024-07-10 13:29:23 修改

阅读量845

点赞数 4

分类专栏：前端基础文章标签： css 前端 cascading

于 2017-01-11 20:44:02 首次发布

本文链接：https://blog.csdn.net/sinat_34647836/article/details/54347948

版权

前端基础专栏收录该内容

19 篇文章 4 订阅

订阅专栏

前面我们已经学习了HTML的相关知识，接下来，我们就开始学CSS的知识。一个完整的前端网页少不了HTML、CSS、JavaScript。其中HTML是超文本标记语言，它是从语义的角度描述网页的结构；CSS是层叠式样式表，它的功能是从审美的角度负责页面的样式，CSS即是英文“cascading style sheet”的缩写；而JavaScript的功能是从交互的角度描述网页的行为。从今天起呢，我就进入了走进花样CSS的大门，一步一步为我们的网页增添绚丽色彩。

一、CSS初体验

在此说明一下，我学习的是css2.1，css3后面再学。
CSS的基本语法

<head>
	<style type=“text/css”>
		选择器{
			k:v;
			k:v;
			k:v;
			k:v;
		}
	</style>
</head>

其中，type表示“类型” ， text和css都是“纯文本”。style标签写在head里面。K代表属性，V代表属性值。

这里写图片描述

二、CSS常见属性

字符颜色：

color:red;

color属性的值，可以是英语单词，比如red、blue、yellow等等；也可以是rgb、十六进制。

字号大小：

font-size:40px;

font就是“字体”，size就是“尺寸”。px是“像素”。
单位必须加，不加不行。

背景颜色：

background-color: blue;

background就是“背景”。

加粗：

font-weight: bold;

font是“字体” weight是“重量”的意思，bold粗。

不加粗：

font-weight: normal;

normal就是正常的意思。

斜体：

font-style: italic;

italic就是“斜体”。

不斜体：

font-style: normal;

下划线：

text-decoration: underline;

decoration就是“装饰”的意思。

没有下划线：

text-decoration:none;

在sublime中，快捷输入法是先输入尖括号<,然后输入能代表该属性的关键字母，然后根据自动提示选择。
比如：

text-decoration:none;可输入<tdn, font-style: normal;可输入<fsn.

下面是综合实战，演示一下今天所学的内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>笑话一则</title>
	<style type="text/css">
	h1{
		font-weight: bold;
		color: purple;
		font-size: 40px;
	}
	p{
		color: green;
		background-color: pink;
		font-style: italic;
		font-size: 20px;
		text-decoration: underline;
	}
	</style>	
</head>
	<body>
		<h1>年轻人要善于观察</h1>
		<p>某教授在田间授课：科学研究要不怕脏</p>
		<p>然后他蹲下来，用手指戳了一下地上的牛粪</p>
		<p>然后把手指放到嘴里舔净</p>
		<p>一同学忙说：我不怕脏</p>
		<p>然后也用手指戳了一下地上的牛粪放到嘴里舔净</p>
		<p>教授接着说：另外，还要善于观察，我刚才是用中指戳粪，但舔的是食指……</p>
	</body>
</html>

实际网页效果如下：

这里写图片描述