您的位置：首页 > Web前端 > CSS

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

2017-01-11 20:44 453 查看

前面我们已经学习了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>

实际网页效果如下：

在写css样式时，必须通过选择器把想要添加样式的部分给选择上，今天的案例是用的标签选择器，当然还有其他选择器，下篇博客我将分享一下CSS选择器的使用，请大家多多支持！(^o^)/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css 前端 cascading

相关文章推荐

新的分享

章节导航