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

来源：互联网发布：respawn linux 编辑：程序博客网时间：2024/06/09 20:54

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

3 0